@design.estate/dees-catalog 3.45.0 → 3.46.0

package/dist_bundle/bundle.js

@@ -144300,7 +144300,12 @@ var DeesAppui = class extends (_a49 = DeesElement, _appbarMenuItems_dec = [n5({
     this.viewLifecycle$.next({ type: "loading", viewId });
     try {
       await this.loadView(view, params2);
-      const route = view.route || viewId;
+      let route = view.route || viewId;
+      if (params2) {
+        for (const [key2, val] of Object.entries(params2)) {
+          route = route.replace(`:${key2}`, val);
+        }
+      }
       const newHash = `#${route}`;
       if (window.location.hash !== newHash) {
         window.history.pushState({ viewId }, "", newHash);
@@ -156785,8 +156790,9 @@ var tileBaseStyles = [
       background: ${cssManager.bdTheme("hsl(0 0% 98%)", "hsl(215 20% 14%)")};
       border-radius: 4px;
       overflow: hidden;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      transition: box-shadow 0.2s ease;
       box-shadow: 0 1px 3px ${cssManager.bdTheme("rgba(0, 0, 0, 0.12)", "rgba(0, 0, 0, 0.24)")};
+
     }
 
     .tile-container.clickable {
@@ -156794,7 +156800,6 @@ var tileBaseStyles = [
     }
 
     .tile-container.clickable:hover {
-      transform: translateY(-2px);
       box-shadow: 0 8px 24px ${cssManager.bdTheme("rgba(0, 0, 0, 0.12)", "rgba(0, 0, 0, 0.3)")};
     }
 
@@ -156841,90 +156846,39 @@ var tileBaseStyles = [
       color: white;
     }
 
-    .tile-info {
+    .tile-info-bar {
       position: absolute;
-      bottom: 8px;
-      left: 8px;
-      right: 8px;
-      padding: 6px 10px;
-      background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.92)", "hsl(215 20% 12% / 0.92)")};
-      border-radius: 6px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px;
+      background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.95)", "hsl(215 20% 12% / 0.95)")};
       display: flex;
       align-items: center;
       gap: 6px;
-      font-size: 12px;
-      color: ${cssManager.bdTheme("hsl(215 16% 45%)", "hsl(215 16% 75%)")};
-      backdrop-filter: blur(12px);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      z-index: 10;
-    }
-
-    .tile-info dees-icon {
-      font-size: 13px;
-      color: ${cssManager.bdTheme("hsl(217 91% 60%)", "hsl(213 93% 68%)")};
-    }
-
-    .tile-info-text {
+      font-size: 10px;
       font-weight: 500;
-      font-size: 11px;
-    }
-
-    .tile-badge {
-      position: absolute;
-      top: 8px;
-      left: 8px;
-      right: 8px;
-      padding: 5px 8px;
-      background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.7)", "hsl(0 0% 100% / 0.9)")};
-      color: ${cssManager.bdTheme("white", "hsl(215 20% 12%)")};
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 600;
-      text-align: center;
+      color: ${cssManager.bdTheme("hsl(215 16% 45%)", "hsl(215 16% 75%)")};
       backdrop-filter: blur(12px);
-      z-index: 15;
-      pointer-events: none;
-      animation: fadeIn 0.2s ease;
-    }
-
-    .tile-badge-corner {
-      position: absolute;
-      bottom: 8px;
-      right: 8px;
-      padding: 3px 8px;
-      background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.6)", "hsl(0 0% 100% / 0.85)")};
-      color: ${cssManager.bdTheme("white", "hsl(215 20% 12%)")};
-      border-radius: 4px;
-      font-size: 10px;
-      font-weight: 600;
+      z-index: 25;
       font-variant-numeric: tabular-nums;
-      backdrop-filter: blur(8px);
-      z-index: 10;
-      pointer-events: none;
     }
 
-    .tile-badge-topright {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      padding: 3px 8px;
-      background: ${cssManager.bdTheme("hsl(0 0% 0% / 0.6)", "hsl(0 0% 100% / 0.85)")};
-      color: ${cssManager.bdTheme("white", "hsl(215 20% 12%)")};
-      border-radius: 4px;
-      font-size: 10px;
-      font-weight: 600;
-      backdrop-filter: blur(8px);
-      z-index: 15;
-      pointer-events: none;
+    .info-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
     }
 
-    /* Shift bottom badges up when label is present */
-    .tile-container:has(.tile-label) .tile-badge-corner {
-      bottom: 33px;
+    .info-spacer {
+      flex: 1;
     }
 
-    .tile-container:has(.tile-label) .tile-info {
-      bottom: 33px;
+    .info-detail {
+      white-space: nowrap;
+      opacity: 0.7;
+      flex-shrink: 0;
     }
 
     .tile-loading,
@@ -156970,40 +156924,12 @@ var tileBaseStyles = [
       font-weight: 500;
     }
 
-    .tile-label {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 6px 10px;
-      background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.95)", "hsl(215 20% 12% / 0.95)")};
-      font-size: 11px;
-      font-weight: 500;
-      color: ${cssManager.bdTheme("hsl(215 16% 35%)", "hsl(215 16% 75%)")};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      z-index: 10;
-      backdrop-filter: blur(12px);
-    }
-
     @keyframes spin {
       to {
         transform: rotate(360deg);
       }
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
     /* Size variants */
     :host([size="small"]) .tile-container {
       width: 150px;
@@ -157066,12 +156992,14 @@ var DeesTileBase = class extends (_a75 = DeesElement, _clickable_dec = [n5({ typ
 
         ${!this.loading && !this.error ? this.renderTileContent() : ""}
 
-        ${this.label ? b2`
-          <div class="tile-label">${this.label}</div>
-        ` : ""}
+        ${this.renderBottomBar()}
       </div>
     `;
   }
+  /** Subclasses override this to render a bottom info bar with metadata */
+  renderBottomBar() {
+    return "";
+  }
   async connectedCallback() {
     await super.connectedCallback();
     this.setupIntersectionObserver();
@@ -157151,10 +157079,11 @@ var tilePdfStyles = i`
     justify-content: center;
     box-sizing: border-box;
     overflow: hidden;
+    padding: 8px 8px 28px 8px;
   }
 
   .preview-stack.non-a4 {
-    padding: 12px;
+    padding: 12px 12px 28px 12px;
   }
 
   .preview-canvas {
@@ -157212,7 +157141,7 @@ var demo5 = () => {
     <style>
       .demo-container {
         padding: 40px;
-        background: #f5f5f5;
+        background: ${cssManager.bdTheme("#f5f5f5", "#0a0a0a")};
       }
 
       .demo-section {
@@ -157223,6 +157152,7 @@ var demo5 = () => {
         margin-bottom: 20px;
         font-size: 18px;
         font-weight: 600;
+        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
       }
 
       .preview-grid {
@@ -157242,6 +157172,7 @@ var demo5 = () => {
         font-size: 14px;
         font-weight: 500;
         min-width: 100px;
+        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
       }
     </style>
 
@@ -157312,9 +157243,9 @@ var demo5 = () => {
 
 // ts_web/elements/00group-media/dees-tile-pdf/component.ts
 init_dist_ts28();
-var _isA4Format_dec, _isHovering_dec, _rendered_dec, _pageCount_dec, _currentPreviewPage_dec, _pdfUrl_dec2, _a76, _DeesTilePdf_decorators, _init77, _pdfUrl2, _currentPreviewPage, _pageCount, _rendered, _isHovering, _isA4Format;
+var _fileSize_dec, _isA4Format_dec, _isHovering_dec, _rendered_dec, _pageCount_dec, _currentPreviewPage_dec, _pdfUrl_dec2, _a76, _DeesTilePdf_decorators, _init77, _pdfUrl2, _currentPreviewPage, _pageCount, _rendered, _isHovering, _isA4Format, _fileSize;
 _DeesTilePdf_decorators = [t4("dees-tile-pdf")];
-var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type: String })], _currentPreviewPage_dec = [n5({ type: Number })], _pageCount_dec = [n5({ type: Number })], _rendered_dec = [n5({ type: Boolean })], _isHovering_dec = [n5({ type: Boolean })], _isA4Format_dec = [n5({ type: Boolean })], _a76) {
+var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type: String })], _currentPreviewPage_dec = [n5({ type: Number })], _pageCount_dec = [n5({ type: Number })], _rendered_dec = [n5({ type: Boolean })], _isHovering_dec = [n5({ type: Boolean })], _isA4Format_dec = [n5({ type: Boolean })], _fileSize_dec = [r5()], _a76) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _pdfUrl2, __runInitializers(_init77, 8, this, "")), __runInitializers(_init77, 11, this);
@@ -157323,6 +157254,7 @@ var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type:
     __privateAdd(this, _rendered, __runInitializers(_init77, 20, this, false)), __runInitializers(_init77, 23, this);
     __privateAdd(this, _isHovering, __runInitializers(_init77, 24, this, false)), __runInitializers(_init77, 27, this);
     __privateAdd(this, _isA4Format, __runInitializers(_init77, 28, this, true)), __runInitializers(_init77, 31, this);
+    __privateAdd(this, _fileSize, __runInitializers(_init77, 32, this, 0)), __runInitializers(_init77, 35, this);
     __publicField(this, "renderPagesTask", null);
     __publicField(this, "renderPagesQueued", false);
     __publicField(this, "pdfDocument");
@@ -157340,18 +157272,6 @@ var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type:
         ></canvas>
       </div>
 
-      ${this.pageCount > 1 && this.isHovering ? b2`
-        <div class="tile-badge">
-          Page ${this.currentPreviewPage} of ${this.pageCount}
-        </div>
-      ` : ""}
-
-      ${this.pageCount > 0 && !this.isHovering ? b2`
-        <div class="tile-badge-corner">
-          ${this.pageCount} page${this.pageCount > 1 ? "s" : ""}
-        </div>
-      ` : ""}
-
       ${this.clickable ? b2`
         <div class="tile-overlay">
           <dees-icon icon="lucide:Eye"></dees-icon>
@@ -157360,6 +157280,17 @@ var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    if (!this.pageCount && !this.label) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        ${this.pageCount > 1 && this.isHovering ? b2`<span class="info-detail">${this.currentPreviewPage}/${this.pageCount}</span>` : this.pageCount > 0 ? b2`<span class="info-detail">${this.pageCount} pg</span>` : ""}
+        ${this.fileSize > 0 ? b2`<span class="info-detail">${formatFileSize(this.fileSize)}</span>` : ""}
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       pdfUrl: this.pdfUrl,
@@ -157414,6 +157345,11 @@ var DeesTilePdf = class extends (_a76 = DeesTileBase, _pdfUrl_dec2 = [n5({ type:
       this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
       this.pageCount = this.pdfDocument.numPages;
       this.currentPreviewPage = 1;
+      try {
+        const downloadInfo = await this.pdfDocument.getDownloadInfo();
+        this.fileSize = downloadInfo.length;
+      } catch {
+      }
       this.loadedPdfUrl = this.pdfUrl;
       this.loading = false;
       await this.updateComplete;
@@ -157649,12 +157585,14 @@ _pageCount = new WeakMap();
 _rendered = new WeakMap();
 _isHovering = new WeakMap();
 _isA4Format = new WeakMap();
+_fileSize = new WeakMap();
 __decorateElement(_init77, 4, "pdfUrl", _pdfUrl_dec2, DeesTilePdf, _pdfUrl2);
 __decorateElement(_init77, 4, "currentPreviewPage", _currentPreviewPage_dec, DeesTilePdf, _currentPreviewPage);
 __decorateElement(_init77, 4, "pageCount", _pageCount_dec, DeesTilePdf, _pageCount);
 __decorateElement(_init77, 4, "rendered", _rendered_dec, DeesTilePdf, _rendered);
 __decorateElement(_init77, 4, "isHovering", _isHovering_dec, DeesTilePdf, _isHovering);
 __decorateElement(_init77, 4, "isA4Format", _isA4Format_dec, DeesTilePdf, _isA4Format);
+__decorateElement(_init77, 4, "fileSize", _fileSize_dec, DeesTilePdf, _fileSize);
 DeesTilePdf = __decorateElement(_init77, 0, "DeesTilePdf", _DeesTilePdf_decorators, DeesTilePdf);
 __publicField(DeesTilePdf, "demo", demo5);
 __publicField(DeesTilePdf, "demoGroups", ["Media", "PDF"]);
@@ -157774,19 +157712,6 @@ var DeesTileImage = class extends (_a77 = DeesTileBase, _src_dec4 = [n5({ type:
         ` : ""}
       </div>
 
-      ${this.imageWidth > 0 && this.imageHeight > 0 ? b2`
-        <div class="tile-badge-topright dimension-badge">
-          ${this.imageWidth} × ${this.imageHeight}
-        </div>
-      ` : ""}
-
-      ${this.imageLoaded ? b2`
-        <div class="tile-info">
-          <dees-icon icon="lucide:Image"></dees-icon>
-          <span class="tile-info-text">${this.imageWidth} × ${this.imageHeight}</span>
-        </div>
-      ` : ""}
-
       ${this.clickable ? b2`
         <div class="tile-overlay">
           <dees-icon icon="lucide:Eye"></dees-icon>
@@ -157795,6 +157720,16 @@ var DeesTileImage = class extends (_a77 = DeesTileBase, _src_dec4 = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    if (!this.label && !(this.imageWidth > 0)) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        ${this.imageWidth > 0 && this.imageHeight > 0 ? b2`<span class="info-detail">${this.imageWidth} × ${this.imageHeight}</span>` : ""}
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       src: this.src,
@@ -157877,14 +157812,6 @@ __publicField(DeesTileImage, "styles", [
         opacity: 0;
       }
 
-      .tile-badge-topright.dimension-badge {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-
-      .tile-container.clickable:hover .tile-badge-topright.dimension-badge {
-        opacity: 1;
-      }
     `
 ]);
 __runInitializers(_init78, 1, DeesTileImage);
@@ -158000,10 +157927,6 @@ var DeesTileAudio = class extends (_a78 = DeesTileBase, _src_dec5 = [n5({ type:
         ` : ""}
       </div>
 
-      ${this.duration > 0 ? b2`
-        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
-      ` : ""}
-
       <div class="play-overlay">
         <div class="play-circle">
           <dees-icon icon="lucide:Play"></dees-icon>
@@ -158018,6 +157941,16 @@ var DeesTileAudio = class extends (_a78 = DeesTileBase, _src_dec5 = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    if (!this.label && !this.duration) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        ${this.duration > 0 ? b2`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ""}
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       src: this.src,
@@ -158375,10 +158308,6 @@ var DeesTileVideo = class extends (_a79 = DeesTileBase, _src_dec6 = [n5({ type:
         ` : ""}
       </div>
 
-      ${this.duration > 0 ? b2`
-        <div class="tile-badge-corner">${this.formatTime(this.duration)}</div>
-      ` : ""}
-
       ${!this.isHovering ? b2`
         <div class="play-overlay">
           <dees-icon icon="lucide:Play"></dees-icon>
@@ -158393,6 +158322,16 @@ var DeesTileVideo = class extends (_a79 = DeesTileBase, _src_dec6 = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    if (!this.label && !this.duration) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        ${this.duration > 0 ? b2`<span class="info-detail">${this.formatTime(this.duration)}</span>` : ""}
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       src: this.src,
@@ -158751,10 +158690,6 @@ var DeesTileNote = class extends (_a80 = DeesTileBase, _title_dec4 = [n5({ type:
     const lines = this.content.split("\n");
     return b2`
       <div class="note-content">
-        ${this.language ? b2`
-          <div class="tile-badge-topright note-language">${this.language}</div>
-        ` : ""}
-
         ${this.title ? b2`
           <div class="note-header">
             <div class="note-title">${this.title}</div>
@@ -158766,11 +158701,6 @@ var DeesTileNote = class extends (_a80 = DeesTileBase, _title_dec4 = [n5({ type:
           ${!this.isHovering ? b2`<div class="note-fade"></div>` : ""}
         </div>
 
-        ${this.isHovering && lines.length > 12 ? b2`
-          <div class="tile-badge-corner">
-            Line ${this.getVisibleLineRange(lines.length)}
-          </div>
-        ` : ""}
       </div>
 
       ${this.clickable ? b2`
@@ -158781,6 +158711,18 @@ var DeesTileNote = class extends (_a80 = DeesTileBase, _title_dec4 = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    const lines = this.content.split("\n");
+    if (!this.label && !this.language && !lines.length) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        ${this.language ? b2`<span class="info-detail">${this.language.toUpperCase()}</span>` : ""}
+        ${this.isHovering && lines.length > 12 ? b2`<span class="info-detail">Line ${this.getVisibleLineRange(lines.length)}</span>` : b2`<span class="info-detail">${lines.length} lines</span>`}
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       title: this.title,
@@ -158890,14 +158832,6 @@ __publicField(DeesTileNote, "styles", [
         pointer-events: none;
       }
 
-      .tile-badge-topright.note-language {
-        background: ${cssManager.bdTheme("hsl(215 20% 92%)", "hsl(215 20% 88%)")};
-        color: ${cssManager.bdTheme("hsl(215 16% 50%)", "hsl(215 16% 40%)")};
-        font-size: 9px;
-        text-transform: uppercase;
-        z-index: 5;
-      }
-
       .note-lines {
         position: absolute;
         top: 0;
@@ -159085,10 +159019,6 @@ var DeesTileFolder = class extends (_a81 = DeesTileBase, _name_dec = [n5({ type:
         </div>
       </div>
 
-      <div class="tile-badge-corner">
-        ${this.items.length} item${this.items.length !== 1 ? "s" : ""}
-      </div>
-
       ${this.clickable ? b2`
         <div class="tile-overlay">
           <dees-icon icon="lucide:FolderOpen"></dees-icon>
@@ -159097,6 +159027,16 @@ var DeesTileFolder = class extends (_a81 = DeesTileBase, _name_dec = [n5({ type:
       ` : ""}
     `;
   }
+  renderBottomBar() {
+    if (!this.label && !this.items.length) return "";
+    return b2`
+      <div class="tile-info-bar">
+        ${this.label ? b2`<span class="info-label" title="${this.label}">${this.label}</span>` : ""}
+        <span class="info-spacer"></span>
+        <span class="info-detail">${this.items.length} item${this.items.length !== 1 ? "s" : ""}</span>
+      </div>
+    `;
+  }
   getTileClickDetail() {
     return {
       name: this.name,
@@ -165734,7 +165674,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.45.0",
+  version: "3.46.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -167688,4 +167628,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1773150993641.js.map
+//# sourceMappingURL=bundle-1773158680364.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.45.0',
+    version: '3.46.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