@design.estate/dees-catalog 3.52.4 → 3.53.0

package/dist_watch/bundle.js

@@ -190742,25 +190742,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 {
@@ -190838,21 +190860,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 {
@@ -191064,6 +191092,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;
+    }
   `
 ];
 
@@ -191072,8 +191147,8 @@ init_dist_ts30();
 var demo4 = /* @__PURE__ */ __name(() => b2`
   <style>
     .demo-container {
-      padding: 40px;
-      background: #f5f5f5;
+      padding: 20px;
+      background: #000000;
     }
 
     .demo-section {
@@ -191084,6 +191159,7 @@ var demo4 = /* @__PURE__ */ __name(() => b2`
       margin-bottom: 20px;
       font-size: 18px;
       font-weight: 600;
+      color: #fafafa;
     }
 
     dees-pdf-viewer {
@@ -191140,9 +191216,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);
@@ -191150,13 +191226,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);
@@ -191193,9 +191271,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"
@@ -191348,7 +191426,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() {
@@ -191393,6 +191487,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";
@@ -191405,6 +191504,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
@@ -191673,7 +191778,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,
@@ -192115,6 +192220,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();
@@ -192122,11 +192228,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);
@@ -192134,6 +192242,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);