update

ts_web/elements/sio-image-lightbox.ts

@@ -15,12 +15,16 @@ import { colors, bdTheme } from './00colors.js';
 import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies } from './00fonts.js';
 
-export interface ILightboxImage {
+export interface ILightboxFile {
   url: string;
   name: string;
   size?: number;
+  type?: string;
 }
 
+// For backwards compatibility
+export type ILightboxImage = ILightboxFile;
+
 declare global {
   interface HTMLElementTagNameMap {
     'sio-image-lightbox': SioImageLightbox;
@@ -30,9 +34,10 @@ declare global {
 @customElement('sio-image-lightbox')
 export class SioImageLightbox extends DeesElement {
   public static demo = () => html`
-    <sio-image-lightbox .isOpen=${true} .image=${{
+    <sio-image-lightbox .isOpen=${true} .file=${{
       url: 'https://picsum.photos/800/600',
-      name: 'Demo Image'
+      name: 'Demo Image',
+      type: 'image/jpeg'
     }}></sio-image-lightbox>
   `;
 
@@ -40,10 +45,18 @@ export class SioImageLightbox extends DeesElement {
   public isOpen: boolean = false;
 
   @property({ type: Object })
-  public image: ILightboxImage | null = null;
+  public file: ILightboxFile | null = null;
+  
+  // For backwards compatibility
+  public get image(): ILightboxFile | null {
+    return this.file;
+  }
+  public set image(value: ILightboxFile | null) {
+    this.file = value;
+  }
 
   @state()
-  private imageLoaded: boolean = false;
+  private fileLoaded: boolean = false;
 
   @state()
   private scale: number = 1;
@@ -108,7 +121,7 @@ export class SioImageLightbox extends DeesElement {
         pointer-events: all;
       }
 
-      .image-wrapper {
+      .content-wrapper {
         position: relative;
         max-width: 90vw;
         max-height: 90vh;
@@ -118,10 +131,14 @@ export class SioImageLightbox extends DeesElement {
         z-index: 1;
       }
 
-      .image-wrapper.dragging {
+      .content-wrapper.dragging {
         cursor: grabbing;
         transition: none;
       }
+      
+      .content-wrapper.pdf {
+        cursor: default;
+      }
 
       .image {
         display: block;
@@ -136,6 +153,21 @@ export class SioImageLightbox extends DeesElement {
       .image.loaded {
         opacity: 1;
       }
+      
+      .pdf-viewer {
+        width: 90vw;
+        height: 90vh;
+        border-radius: ${unsafeCSS(radius.lg)};
+        box-shadow: ${unsafeCSS(shadows["2xl"])};
+        background: white;
+        opacity: 0;
+        transition: opacity 300ms ease;
+        border: none;
+      }
+      
+      .pdf-viewer.loaded {
+        opacity: 1;
+      }
 
       .loading {
         position: absolute;
@@ -277,59 +309,79 @@ export class SioImageLightbox extends DeesElement {
     `,
   ];
 
+  private isPDF(): boolean {
+    return this.file?.type?.includes('pdf') || 
+           this.file?.name?.toLowerCase().endsWith('.pdf') || false;
+  }
+
   public render(): TemplateResult {
-    const imageStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0
+    const contentStyle = this.scale !== 1 || this.translateX !== 0 || this.translateY !== 0
       ? `transform: scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`
       : '';
 
+    const isPDF = this.isPDF();
+
     return html`
       <div class="overlay ${this.isOpen ? 'open' : ''}" @click=${(e: Event) => {
         if (e.target === e.currentTarget) this.close(e);
       }}></div>
       <div class="container ${this.isOpen ? 'open' : ''}">
-        ${this.image ? html`
+        ${this.file ? html`
           <div class="controls">
-            <div class="control-button" @click=${this.zoomIn}>
-              <sio-icon icon="zoom-in" size="18"></sio-icon>
-            </div>
-            <div class="control-button" @click=${this.zoomOut}>
-              <sio-icon icon="zoom-out" size="18"></sio-icon>
-            </div>
-            <div class="control-button" @click=${this.resetZoom}>
-              <sio-icon icon="maximize-2" size="18"></sio-icon>
-            </div>
+            ${!isPDF ? html`
+              <div class="control-button" @click=${this.zoomIn}>
+                <sio-icon icon="zoom-in" size="18"></sio-icon>
+              </div>
+              <div class="control-button" @click=${this.zoomOut}>
+                <sio-icon icon="zoom-out" size="18"></sio-icon>
+              </div>
+              <div class="control-button" @click=${this.resetZoom}>
+                <sio-icon icon="maximize-2" size="18"></sio-icon>
+              </div>
+            ` : ''}
             <div class="control-button" @click=${(e: Event) => this.close(e)}>
               <sio-icon icon="x" size="18"></sio-icon>
             </div>
           </div>
 
           <div 
-            class="image-wrapper ${this.isDragging ? 'dragging' : ''}"
-            style="${imageStyle}"
-            @mousedown=${this.startDrag}
-            @mousemove=${this.drag}
-            @mouseup=${this.endDrag}
-            @mouseleave=${this.endDrag}
+            class="content-wrapper ${this.isDragging ? 'dragging' : ''} ${isPDF ? 'pdf' : ''}"
+            style="${contentStyle}"
+            @mousedown=${!isPDF ? this.startDrag : undefined}
+            @mousemove=${!isPDF ? this.drag : undefined}
+            @mouseup=${!isPDF ? this.endDrag : undefined}
+            @mouseleave=${!isPDF ? this.endDrag : undefined}
             @wheel=${this.handleWheel}
           >
-            ${!this.imageLoaded ? html`
+            ${!this.fileLoaded ? html`
               <div class="loading">
                 <sio-icon class="spinner" icon="loader" size="24"></sio-icon>
                 <span>Loading...</span>
               </div>
             ` : ''}
-            <img 
-              class="image ${this.imageLoaded ? 'loaded' : ''}"
-              src="${this.image.url}" 
-              alt="${this.image.name}"
-              @load=${() => this.imageLoaded = true}
-              @error=${() => this.imageLoaded = false}
-              @click=${(e: Event) => e.stopPropagation()}
-            />
+            ${isPDF ? html`
+              <iframe 
+                class="pdf-viewer ${this.fileLoaded ? 'loaded' : ''}"
+                src="${this.file.url}" 
+                title="${this.file.name}"
+                @load=${() => this.fileLoaded = true}
+                @error=${() => this.fileLoaded = false}
+                @click=${(e: Event) => e.stopPropagation()}
+              ></iframe>
+            ` : html`
+              <img 
+                class="image ${this.fileLoaded ? 'loaded' : ''}"
+                src="${this.file.url}" 
+                alt="${this.file.name}"
+                @load=${() => this.fileLoaded = true}
+                @error=${() => this.fileLoaded = false}
+                @click=${(e: Event) => e.stopPropagation()}
+              />
+            `}
           </div>
 
           <div class="info">
-            <div class="info-name">${this.image.name}</div>
+            <div class="info-name">${this.file.name}</div>
             <div class="info-actions">
               <button class="info-button" @click=${this.download}>
                 <sio-icon icon="download" size="16"></sio-icon>
@@ -346,9 +398,9 @@ export class SioImageLightbox extends DeesElement {
     `;
   }
 
-  public async open(image: ILightboxImage) {
-    this.image = image;
-    this.imageLoaded = false;
+  public async open(file: ILightboxFile | ILightboxImage) {
+    this.file = file;
+    this.fileLoaded = false;
     this.resetZoom();
     this.isOpen = true;
 
@@ -373,8 +425,8 @@ export class SioImageLightbox extends DeesElement {
 
     // Clean up after animation
     setTimeout(() => {
-      this.image = null;
-      this.imageLoaded = false;
+      this.file = null;
+      this.fileLoaded = false;
       this.resetZoom();
     }, 300);
   }
@@ -438,19 +490,19 @@ export class SioImageLightbox extends DeesElement {
   }
 
   private download() {
-    if (!this.image) return;
+    if (!this.file) return;
     
     const a = document.createElement('a');
-    a.href = this.image.url;
-    a.download = this.image.name;
+    a.href = this.file.url;
+    a.download = this.file.name;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
   }
 
   private openInNewTab() {
-    if (!this.image) return;
-    window.open(this.image.url, '_blank');
+    if (!this.file) return;
+    window.open(this.file.url, '_blank');
   }
 
   public async disconnectedCallback() {