feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

2026-01-27 10:57:42 +00:00
parent 8158b791c7
commit 162688cdb5
218 changed files with 5223 additions and 458 deletions
--- a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
+++ b/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
@@ -0,0 +1,128 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => {
+  const samplePdfs = [
+    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
+    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+  ];
+
+  const generateGridItems = (count: number) => {
+    const items = [];
+    for (let i = 0; i < count; i++) {
+      const pdfUrl = samplePdfs[i % samplePdfs.length];
+      items.push(html`
+        <dees-tile-pdf
+          pdfUrl="${pdfUrl}"
+          clickable="true"
+          grid-mode
+          @tile-click=${(e: CustomEvent) => {
+            console.log('PDF Tile clicked:', e.detail);
+            alert(`PDF clicked: ${e.detail.pageCount} pages`);
+          }}
+        ></dees-tile-pdf>
+      `);
+    }
+    return items;
+  };
+
+  return html`
+    <style>
+      .demo-container {
+        padding: 40px;
+        background: #f5f5f5;
+      }
+
+      .demo-section {
+        margin-bottom: 60px;
+      }
+
+      h3 {
+        margin-bottom: 20px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      .preview-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 24px;
+      }
+
+      .preview-row {
+        display: flex;
+        gap: 24px;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      .preview-label {
+        font-size: 14px;
+        font-weight: 500;
+        min-width: 100px;
+      }
+    </style>
+
+    <div class="demo-container">
+      <div class="demo-section">
+        <h3>Single PDF Tile</h3>
+        <dees-tile-pdf
+          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+          clickable="true"
+        ></dees-tile-pdf>
+      </div>
+
+      <div class="demo-section">
+        <h3>Different Sizes</h3>
+        <div class="preview-row">
+          <div class="preview-label">Small:</div>
+          <dees-tile-pdf
+            size="small"
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            clickable="true"
+          ></dees-tile-pdf>
+        </div>
+
+        <div class="preview-row">
+          <div class="preview-label">Default:</div>
+          <dees-tile-pdf
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            clickable="true"
+          ></dees-tile-pdf>
+        </div>
+
+        <div class="preview-row">
+          <div class="preview-label">Large:</div>
+          <dees-tile-pdf
+            size="large"
+            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+            clickable="true"
+          ></dees-tile-pdf>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>With Label</h3>
+        <dees-tile-pdf
+          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+          clickable="true"
+          label="Research Paper.pdf"
+        ></dees-tile-pdf>
+      </div>
+
+      <div class="demo-section">
+        <h3>Non-Clickable</h3>
+        <dees-tile-pdf
+          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
+          clickable="false"
+        ></dees-tile-pdf>
+      </div>
+
+      <div class="demo-section">
+        <h3>Grid - 20 PDFs with Lazy Loading</h3>
+        <div class="preview-grid">
+          ${generateGridItems(20)}
+        </div>
+      </div>
+    </div>
+  `;
+};