@design.estate/dees-catalog 3.52.4 → 3.53.0

package/dist_bundle/bundle.js

@@ -185402,25 +185402,47 @@ var viewerStyles = [
       contain: layout style;
     }
 
-    .pdf-viewer {
-      width: 100%;
+    dees-tile {
       height: 100%;
-      display: flex;
-      flex-direction: column;
-      background: ${cssManager.bdTheme("hsl(0 0% 97%)", "hsl(215 20% 10%)")};
-      position: relative;
-      overflow: hidden;
+    }
+
+    .viewer-container::before,
+    .viewer-container::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 8px;
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    .viewer-container::before {
+      top: 0;
+      background: linear-gradient(
+        to bottom,
+        ${cssManager.bdTheme("hsl(0 0% 0% / 0.08)", "hsl(0 0% 0% / 0.4)")},
+        ${cssManager.bdTheme("hsl(0 0% 0% / 0.03)", "hsl(0 0% 0% / 0.12)")},
+        transparent
+      );
+    }
+
+    .viewer-container::after {
+      bottom: 0;
+      background: linear-gradient(
+        to top,
+        ${cssManager.bdTheme("hsl(0 0% 0% / 0.08)", "hsl(0 0% 0% / 0.4)")},
+        ${cssManager.bdTheme("hsl(0 0% 0% / 0.03)", "hsl(0 0% 0% / 0.12)")},
+        transparent
+      );
     }
 
     .toolbar {
-      height: 48px;
-      background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(215 20% 15%)")};
-      border-bottom: 1px solid ${cssManager.bdTheme("hsl(214 31% 91%)", "hsl(217 25% 22%)")};
+      height: 40px;
       display: flex;
       align-items: center;
-      padding: 0 16px;
-      gap: 16px;
-      flex-shrink: 0;
+      padding: 0 12px;
+      gap: 12px;
     }
 
     .toolbar-group {
@@ -185498,21 +185520,27 @@ var viewerStyles = [
     }
 
     .viewer-container {
-      flex: 1;
+      position: absolute;
+      inset: 0;
       display: flex;
       overflow: hidden;
-      position: relative;
-      min-height: 0;
     }
 
     .sidebar {
       width: 200px;
-      background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(215 20% 15%)")};
+      background: transparent;
       border-right: 1px solid ${cssManager.bdTheme("hsl(214 31% 91%)", "hsl(217 25% 22%)")};
       display: flex;
       flex-direction: column;
       height: 100%;
       overflow: hidden;
+      order: 0;
+    }
+
+    .sidebar-right .sidebar {
+      border-right: none;
+      border-left: 1px solid ${cssManager.bdTheme("hsl(214 31% 91%)", "hsl(217 25% 22%)")};
+      order: 1;
     }
 
     .sidebar-header {
@@ -185724,6 +185752,53 @@ var viewerStyles = [
     .pdf-viewer.with-sidebar .viewer-main {
       margin-left: 0;
     }
+
+    .pdf-footer {
+      height: 28px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      font-size: 11px;
+      color: ${cssManager.bdTheme("hsl(0 0% 45%)", "hsl(0 0% 55%)")};
+      width: 100%;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    .pdf-footer-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pdf-footer-left .pdf-footer-item + .pdf-footer-item {
+      padding-left: 12px;
+      border-left: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+    }
+
+    .pdf-footer-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-weight: 500;
+      transition: margin-left 0.15s ease;
+    }
+
+    .pdf-footer-right {
+      margin-left: auto;
+    }
+
+    .pdf-footer-item {
+      white-space: nowrap;
+    }
+
+    .pdf-footer-filename {
+      font-family: 'Intel One Mono', 'Geist Mono', monospace;
+      opacity: 0.7;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   `
 ];
 
@@ -185732,8 +185807,8 @@ init_dist_ts30();
 var demo4 = /* @__PURE__ */ __name(() => b2`
   <style>
     .demo-container {
-      padding: 40px;
-      background: #f5f5f5;
+      padding: 20px;
+      background: #000000;
     }
 
     .demo-section {
@@ -185744,6 +185819,7 @@ var demo4 = /* @__PURE__ */ __name(() => b2`
       margin-bottom: 20px;
       font-size: 18px;
       font-weight: 600;
+      color: #fafafa;
     }
 
     dees-pdf-viewer {
@@ -185800,9 +185876,9 @@ var demo4 = /* @__PURE__ */ __name(() => b2`
 // ts_web/elements/00group-media/dees-pdf-viewer/component.ts
 init_dist_ts30();
 init_dees_icon();
-var _pageData_dec, _thumbnailData_dec, _documentId_dec, _loading_dec7, _currentZoom_dec, _totalPages_dec, _currentPage_dec, _showSidebar_dec, _showToolbar_dec2, _initialZoom_dec, _initialPage_dec, _pdfUrl_dec, _a78, _DeesPdfViewer_decorators, _init79, _pdfUrl, _initialPage, _initialZoom, _showToolbar2, _showSidebar, _currentPage, _totalPages, _currentZoom, _loading7, _documentId, _thumbnailData, _pageData;
+var _pdfFileSize_dec, _pageData_dec, _thumbnailData_dec, _documentId_dec, _loading_dec7, _currentZoom_dec, _totalPages_dec, _currentPage_dec, _sidebarPosition_dec, _showSidebar_dec, _showToolbar_dec2, _initialZoom_dec, _initialPage_dec, _pdfUrl_dec, _a78, _DeesPdfViewer_decorators, _init79, _pdfUrl, _initialPage, _initialZoom, _showToolbar2, _showSidebar, _sidebarPosition, _currentPage, _totalPages, _currentZoom, _loading7, _documentId, _thumbnailData, _pageData, _pdfFileSize;
 _DeesPdfViewer_decorators = [customElement("dees-pdf-viewer")];
-var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_dec = [n5({ type: String })], _initialPage_dec = [n5({ type: Number })], _initialZoom_dec = [n5({ type: String })], _showToolbar_dec2 = [n5({ type: Boolean })], _showSidebar_dec = [n5({ type: Boolean })], _currentPage_dec = [n5({ type: Number })], _totalPages_dec = [n5({ type: Number })], _currentZoom_dec = [n5({ type: Number })], _loading_dec7 = [n5({ type: Boolean })], _documentId_dec = [n5({ type: String })], _thumbnailData_dec = [n5({ type: Array })], _pageData_dec = [n5({ type: Array })], _a78) {
+var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_dec = [n5({ type: String })], _initialPage_dec = [n5({ type: Number })], _initialZoom_dec = [n5({ type: String })], _showToolbar_dec2 = [n5({ type: Boolean })], _showSidebar_dec = [n5({ type: Boolean })], _sidebarPosition_dec = [n5({ type: String })], _currentPage_dec = [n5({ type: Number })], _totalPages_dec = [n5({ type: Number })], _currentZoom_dec = [n5({ type: Number })], _loading_dec7 = [n5({ type: Boolean })], _documentId_dec = [n5({ type: String })], _thumbnailData_dec = [n5({ type: Array })], _pageData_dec = [n5({ type: Array })], _pdfFileSize_dec = [n5({ type: Number })], _a78) {
   constructor() {
     super();
     __privateAdd(this, _pdfUrl, __runInitializers(_init79, 8, this, "")), __runInitializers(_init79, 11, this);
@@ -185810,13 +185886,15 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
     __privateAdd(this, _initialZoom, __runInitializers(_init79, 16, this, "auto")), __runInitializers(_init79, 19, this);
     __privateAdd(this, _showToolbar2, __runInitializers(_init79, 20, this, true)), __runInitializers(_init79, 23, this);
     __privateAdd(this, _showSidebar, __runInitializers(_init79, 24, this, false)), __runInitializers(_init79, 27, this);
-    __privateAdd(this, _currentPage, __runInitializers(_init79, 28, this, 1)), __runInitializers(_init79, 31, this);
-    __privateAdd(this, _totalPages, __runInitializers(_init79, 32, this, 1)), __runInitializers(_init79, 35, this);
-    __privateAdd(this, _currentZoom, __runInitializers(_init79, 36, this, 1)), __runInitializers(_init79, 39, this);
-    __privateAdd(this, _loading7, __runInitializers(_init79, 40, this, false)), __runInitializers(_init79, 43, this);
-    __privateAdd(this, _documentId, __runInitializers(_init79, 44, this, "")), __runInitializers(_init79, 47, this);
-    __privateAdd(this, _thumbnailData, __runInitializers(_init79, 48, this, [])), __runInitializers(_init79, 51, this);
-    __privateAdd(this, _pageData, __runInitializers(_init79, 52, this, [])), __runInitializers(_init79, 55, this);
+    __privateAdd(this, _sidebarPosition, __runInitializers(_init79, 28, this, "left")), __runInitializers(_init79, 31, this);
+    __privateAdd(this, _currentPage, __runInitializers(_init79, 32, this, 1)), __runInitializers(_init79, 35, this);
+    __privateAdd(this, _totalPages, __runInitializers(_init79, 36, this, 1)), __runInitializers(_init79, 39, this);
+    __privateAdd(this, _currentZoom, __runInitializers(_init79, 40, this, 1)), __runInitializers(_init79, 43, this);
+    __privateAdd(this, _loading7, __runInitializers(_init79, 44, this, false)), __runInitializers(_init79, 47, this);
+    __privateAdd(this, _documentId, __runInitializers(_init79, 48, this, "")), __runInitializers(_init79, 51, this);
+    __privateAdd(this, _thumbnailData, __runInitializers(_init79, 52, this, [])), __runInitializers(_init79, 55, this);
+    __privateAdd(this, _pageData, __runInitializers(_init79, 56, this, [])), __runInitializers(_init79, 59, this);
+    __privateAdd(this, _pdfFileSize, __runInitializers(_init79, 60, this, 0)), __runInitializers(_init79, 63, this);
     __publicField(this, "pdfDocument");
     __publicField(this, "renderState", "idle");
     __publicField(this, "renderAbortController", null);
@@ -185853,9 +185931,9 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
   }
   render() {
     return b2`
-      <div class="pdf-viewer ${this.showSidebar ? "with-sidebar" : ""}">
+      <dees-tile class="${this.showSidebar ? "with-sidebar" : ""} sidebar-${this.sidebarPosition}">
         ${this.showToolbar ? b2`
-          <div class="toolbar">
+          <div slot="header" class="toolbar">
             <div class="toolbar-group">
               <button
                 class="toolbar-button"
@@ -186008,7 +186086,23 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
             `}
           </div>
         </div>
-      </div>
+        <div slot="footer" class="pdf-footer">
+          <div class="pdf-footer-left">
+            <span class="pdf-footer-item">Zoom ${Math.round(this.currentZoom * 100)}%</span>
+            ${this.pdfFileSize > 0 ? b2`
+              <span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
+            ` : ""}
+          </div>
+          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === "left" ? "100px" : this.showSidebar && this.sidebarPosition === "right" ? "-100px" : "0"}">
+            <span>Page ${this.currentPage} of ${this.totalPages}</span>
+          </div>
+          <div class="pdf-footer-right">
+            ${this.pdfUrl ? b2`
+              <span class="pdf-footer-filename">${this.pdfUrl.split("/").pop()}</span>
+            ` : ""}
+          </div>
+        </div>
+      </dees-tile>
     `;
   }
   async connectedCallback() {
@@ -186053,6 +186147,11 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
       this.scrollThumbnailIntoView(this.currentPage);
     }
   }
+  formatFileSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
   async loadPdf() {
     this.loading = true;
     this.renderState = "loading";
@@ -186065,6 +186164,12 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
       this.totalPages = this.pdfDocument.numPages;
       this.currentPage = this.initialPage;
       this.resolveInitialViewportMode();
+      try {
+        const data = await this.pdfDocument.getData();
+        this.pdfFileSize = data.length;
+      } catch (e11) {
+        this.pdfFileSize = 0;
+      }
       this.thumbnailData = Array.from({ length: this.totalPages }, (_4, i11) => ({
         page: i11 + 1,
         rendered: false
@@ -186333,7 +186438,7 @@ var _DeesPdfViewer = class _DeesPdfViewer extends (_a78 = DeesElement, _pdfUrl_d
       const pageRect = pageWrapper.getBoundingClientRect();
       const viewerRect = this.viewerMain.getBoundingClientRect();
       const currentScrollTop = this.viewerMain.scrollTop;
-      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop;
+      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop - 16;
       if (smooth) {
         this.viewerMain.scrollTo({
           top: targetScrollTop,
@@ -186775,6 +186880,7 @@ _initialPage = new WeakMap();
 _initialZoom = new WeakMap();
 _showToolbar2 = new WeakMap();
 _showSidebar = new WeakMap();
+_sidebarPosition = new WeakMap();
 _currentPage = new WeakMap();
 _totalPages = new WeakMap();
 _currentZoom = new WeakMap();
@@ -186782,11 +186888,13 @@ _loading7 = new WeakMap();
 _documentId = new WeakMap();
 _thumbnailData = new WeakMap();
 _pageData = new WeakMap();
+_pdfFileSize = new WeakMap();
 __decorateElement(_init79, 4, "pdfUrl", _pdfUrl_dec, _DeesPdfViewer, _pdfUrl);
 __decorateElement(_init79, 4, "initialPage", _initialPage_dec, _DeesPdfViewer, _initialPage);
 __decorateElement(_init79, 4, "initialZoom", _initialZoom_dec, _DeesPdfViewer, _initialZoom);
 __decorateElement(_init79, 4, "showToolbar", _showToolbar_dec2, _DeesPdfViewer, _showToolbar2);
 __decorateElement(_init79, 4, "showSidebar", _showSidebar_dec, _DeesPdfViewer, _showSidebar);
+__decorateElement(_init79, 4, "sidebarPosition", _sidebarPosition_dec, _DeesPdfViewer, _sidebarPosition);
 __decorateElement(_init79, 4, "currentPage", _currentPage_dec, _DeesPdfViewer, _currentPage);
 __decorateElement(_init79, 4, "totalPages", _totalPages_dec, _DeesPdfViewer, _totalPages);
 __decorateElement(_init79, 4, "currentZoom", _currentZoom_dec, _DeesPdfViewer, _currentZoom);
@@ -186794,6 +186902,7 @@ __decorateElement(_init79, 4, "loading", _loading_dec7, _DeesPdfViewer, _loading
 __decorateElement(_init79, 4, "documentId", _documentId_dec, _DeesPdfViewer, _documentId);
 __decorateElement(_init79, 4, "thumbnailData", _thumbnailData_dec, _DeesPdfViewer, _thumbnailData);
 __decorateElement(_init79, 4, "pageData", _pageData_dec, _DeesPdfViewer, _pageData);
+__decorateElement(_init79, 4, "pdfFileSize", _pdfFileSize_dec, _DeesPdfViewer, _pdfFileSize);
 _DeesPdfViewer = __decorateElement(_init79, 0, "DeesPdfViewer", _DeesPdfViewer_decorators, _DeesPdfViewer);
 __name(_DeesPdfViewer, "DeesPdfViewer");
 __publicField(_DeesPdfViewer, "demo", demo4);
@@ -196945,7 +197054,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.52.4",
+  version: "3.53.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -198912,4 +199021,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775244332575.js.map
+//# sourceMappingURL=bundle-1775248084852.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.52.4',
+    version: '3.53.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-media/dees-pdf-viewer/component.d.ts

@@ -1,5 +1,6 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 declare global {
     interface HTMLElementTagNameMap {
         'dees-pdf-viewer': DeesPdfViewer;
@@ -14,6 +15,7 @@ export declare class DeesPdfViewer extends DeesElement {
     accessor initialZoom: 'auto' | 'page-fit' | 'page-width' | number;
     accessor showToolbar: boolean;
     accessor showSidebar: boolean;
+    accessor sidebarPosition: 'left' | 'right';
     accessor currentPage: number;
     accessor totalPages: number;
     accessor currentZoom: number;
@@ -29,6 +31,7 @@ export declare class DeesPdfViewer extends DeesElement {
         rendering: boolean;
         textLayerRendered: boolean;
     }>;
+    accessor pdfFileSize: number;
     private pdfDocument;
     private renderState;
     private renderAbortController;
@@ -58,6 +61,7 @@ export declare class DeesPdfViewer extends DeesElement {
     connectedCallback(): Promise<void>;
     disconnectedCallback(): Promise<void>;
     updated(changedProperties: Map<PropertyKey, unknown>): Promise<void>;
+    private formatFileSize;
     private loadPdf;
     private setupIntersectionObserver;
     private renderVisiblePages;