@design.estate/dees-wcctools 3.3.0 → 3.4.0

package/dist_bundle/bundle.js

@@ -41663,9 +41663,9 @@ __publicField(WccFrame, "styles", [
 __runInitializers(_init, 1, WccFrame);
 
 // ts_web/elements/wcc-sidebar.ts
-var _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections;
+var _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a2, _WccSidebar_decorators, _init2, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _a2) {
+var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ attribute: false })], _selectedType_dec = [n5({ attribute: false })], _dashboardRef_dec = [n5()], _isNative_dec2 = [n5()], _expandedElements_dec = [r5()], _collapsedSections_dec = [r5()], _searchQuery_dec = [n5()], _a2) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
@@ -41674,6 +41674,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     __privateAdd(this, _isNative2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
     __privateAdd(this, _expandedElements, __runInitializers(_init2, 24, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 27, this);
     __privateAdd(this, _collapsedSections, __runInitializers(_init2, 28, this, /* @__PURE__ */ new Set())), __runInitializers(_init2, 31, this);
+    __privateAdd(this, _searchQuery, __runInitializers(_init2, 32, this, "")), __runInitializers(_init2, 35, this);
     __publicField(this, "sectionsInitialized", false);
   }
   render() {
@@ -41899,7 +41900,48 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         ::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.2);
         }
+
+        .search-container {
+          padding: 0.5rem;
+          border-bottom: 1px solid var(--border);
+        }
+
+        .search-input {
+          width: 100%;
+          box-sizing: border-box;
+          background: var(--input);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          padding: 0.5rem 0.75rem;
+          color: var(--foreground);
+          font-size: 0.75rem;
+          font-family: inherit;
+          outline: none;
+          transition: border-color 0.15s ease;
+        }
+
+        .search-input:focus {
+          border-color: var(--primary);
+        }
+
+        .search-input::placeholder {
+          color: var(--muted-foreground);
+        }
+
+        .highlight {
+          background: rgba(59, 130, 246, 0.3);
+          border-radius: 2px;
+        }
       </style>
+      <div class="search-container">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search..."
+          .value=${this.searchQuery}
+          @input=${this.handleSearchInput}
+        />
+      </div>
       <div class="menu">
         ${this.renderSections()}
       </div>
@@ -41925,6 +41967,11 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
   renderSections() {
     this.initCollapsedSections();
     return this.dashboardRef.sections.map((section, index2) => {
+      const entries = getSectionItems(section);
+      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+      if (filteredEntries.length === 0 && this.searchQuery) {
+        return null;
+      }
       const isCollapsed = this.collapsedSections.has(section.name);
       const sectionIcon = section.icon || (section.type === "pages" ? "insert_drive_file" : "widgets");
       return x`
@@ -41947,8 +41994,9 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
    */
   renderSectionItems(section) {
     const entries = getSectionItems(section);
+    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
     if (section.type === "pages") {
-      return entries.map(([pageName, item]) => {
+      return filteredEntries.map(([pageName, item]) => {
         return x`
           <div
             class="selectOption ${this.selectedItem === item ? "selected" : ""}"
@@ -41958,12 +42006,12 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
         }}
           >
             <i class="material-symbols-outlined">insert_drive_file</i>
-            <div class="text">${pageName}</div>
+            <div class="text">${this.highlightMatch(pageName)}</div>
           </div>
         `;
       });
     } else {
-      return entries.map(([elementName, item]) => {
+      return filteredEntries.map(([elementName, item]) => {
         const anonItem = item;
         const demoCount = anonItem.demo ? getDemoCount(anonItem.demo) : 0;
         const isMultiDemo = anonItem.demo && hasMultipleDemos(anonItem.demo);
@@ -41977,7 +42025,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
             >
               <i class="material-symbols-outlined expand-icon">chevron_right</i>
               <i class="material-symbols-outlined">folder</i>
-              <div class="text">${elementName}</div>
+              <div class="text">${this.highlightMatch(elementName)}</div>
             </div>
             ${isExpanded ? x`
               <div class="demo-children">
@@ -42010,7 +42058,7 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
           }}
             >
               <i class="material-symbols-outlined">featured_video</i>
-              <div class="text">${elementName}</div>
+              <div class="text">${this.highlightMatch(elementName)}</div>
             </div>
           `;
         }
@@ -42035,6 +42083,26 @@ var WccSidebar = class extends (_a2 = DeesElement, _selectedItem_dec = [n5({ att
     }
     this.expandedElements = newSet;
   }
+  handleSearchInput(e10) {
+    const input = e10.target;
+    this.searchQuery = input.value;
+    this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
+  }
+  matchesSearch(name) {
+    if (!this.searchQuery) return true;
+    return name.toLowerCase().includes(this.searchQuery.toLowerCase());
+  }
+  highlightMatch(text8) {
+    if (!this.searchQuery) return x`${text8}`;
+    const lowerText = text8.toLowerCase();
+    const lowerQuery = this.searchQuery.toLowerCase();
+    const index2 = lowerText.indexOf(lowerQuery);
+    if (index2 === -1) return x`${text8}`;
+    const before = text8.slice(0, index2);
+    const match2 = text8.slice(index2, index2 + this.searchQuery.length);
+    const after = text8.slice(index2 + this.searchQuery.length);
+    return x`${before}<span class="highlight">${match2}</span>${after}`;
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("selectedItem") && this.selectedItem) {
@@ -42095,12 +42163,14 @@ _dashboardRef = new WeakMap();
 _isNative2 = new WeakMap();
 _expandedElements = new WeakMap();
 _collapsedSections = new WeakMap();
+_searchQuery = new WeakMap();
 __decorateElement(_init2, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init2, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init2, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
 __decorateElement(_init2, 4, "isNative", _isNative_dec2, WccSidebar, _isNative2);
 __decorateElement(_init2, 4, "expandedElements", _expandedElements_dec, WccSidebar, _expandedElements);
 __decorateElement(_init2, 4, "collapsedSections", _collapsedSections_dec, WccSidebar, _collapsedSections);
+__decorateElement(_init2, 4, "searchQuery", _searchQuery_dec, WccSidebar, _searchQuery);
 WccSidebar = __decorateElement(_init2, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init2, 1, WccSidebar);
 
@@ -44412,7 +44482,7 @@ WccProperties = __decorateElement(_init5, 0, "WccProperties", _WccProperties_dec
 __runInitializers(_init5, 1, WccProperties);
 
 // ts_web/elements/wcc-dashboard.ts
-var _wccFrame_dec, _warning_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a6, _WccDashboard_decorators, _init6, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _warning2, _wccFrame;
+var _wccFrame_dec, _warning_dec2, _searchQuery_dec2, _selectedTheme_dec2, _selectedViewport_dec2, _selectedDemoIndex_dec, _selectedItem_dec3, _selectedItemName_dec, _selectedType_dec2, _selectedSection_dec, _sections_dec, _a6, _WccDashboard_decorators, _init6, _sections, _selectedSection, _selectedType2, _selectedItemName, _selectedItem3, _selectedDemoIndex, _selectedViewport2, _selectedTheme2, _searchQuery2, _warning2, _wccFrame;
 var getSectionItems = (section) => {
   let entries = Object.entries(section.items);
   if (section.filter) {
@@ -44424,7 +44494,7 @@ var getSectionItems = (section) => {
   return entries;
 };
 _WccDashboard_decorators = [t4("wcc-dashboard")];
-var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
+var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _selectedSection_dec = [n5()], _selectedType_dec2 = [n5()], _selectedItemName_dec = [n5()], _selectedItem_dec3 = [n5()], _selectedDemoIndex_dec = [n5({ type: Number })], _selectedViewport_dec2 = [n5()], _selectedTheme_dec2 = [n5()], _searchQuery_dec2 = [n5()], _warning_dec2 = [n5()], _wccFrame_dec = [r7("wcc-frame")], _a6) {
   constructor(config2) {
     super();
     __privateAdd(this, _sections, __runInitializers(_init6, 8, this, [])), __runInitializers(_init6, 11, this);
@@ -44435,11 +44505,12 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     __privateAdd(this, _selectedDemoIndex, __runInitializers(_init6, 28, this, 0)), __runInitializers(_init6, 31, this);
     __privateAdd(this, _selectedViewport2, __runInitializers(_init6, 32, this, "desktop")), __runInitializers(_init6, 35, this);
     __privateAdd(this, _selectedTheme2, __runInitializers(_init6, 36, this, "dark")), __runInitializers(_init6, 39, this);
-    __privateAdd(this, _warning2, __runInitializers(_init6, 40, this, null)), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init6, 40, this, "")), __runInitializers(_init6, 43, this);
+    __privateAdd(this, _warning2, __runInitializers(_init6, 44, this, null)), __runInitializers(_init6, 47, this);
     __publicField(this, "frameScrollY", 0);
     __publicField(this, "sidebarScrollY", 0);
     __publicField(this, "scrollPositionsApplied", false);
-    __privateAdd(this, _wccFrame, __runInitializers(_init6, 44, this)), __runInitializers(_init6, 47, this);
+    __privateAdd(this, _wccFrame, __runInitializers(_init6, 48, this)), __runInitializers(_init6, 51, this);
     __publicField(this, "scrollUpdateTimeout");
     __publicField(this, "scrollListenersAttached", false);
     if (config2 && config2.sections) {
@@ -44485,6 +44556,7 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
+        .searchQuery=${this.searchQuery}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
       this.selectedType = eventArg.detail;
@@ -44494,6 +44566,10 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     }}
         @selectedItem=${(eventArg) => {
       this.selectedItem = eventArg.detail;
+    }}
+        @searchChanged=${(eventArg) => {
+      this.searchQuery = eventArg.detail;
+      this.updateUrlWithScrollState();
     }}
       ></wcc-sidebar>
       <wcc-properties
@@ -44577,8 +44653,14 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           }
         }
         if (routeInfo.queryParams) {
+          const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
@@ -44588,6 +44670,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44621,8 +44705,14 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           }
         }
         if (routeInfo.queryParams) {
+          const search2 = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          if (search2) {
+            this.searchQuery = search2;
+          } else {
+            this.searchQuery = "";
+          }
           if (frameScrollY) {
             this.frameScrollY = parseInt(frameScrollY);
           }
@@ -44632,6 +44722,8 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
           setTimeout(() => {
             this.applyScrollPositions();
           }, 100);
+        } else {
+          this.searchQuery = "";
         }
         const domtoolsInstance = await dist_ts_exports25.elementBasic.setup();
         this.selectedTheme === "bright" ? domtoolsInstance.themeManager.goBright() : domtoolsInstance.themeManager.goDark();
@@ -44690,6 +44782,9 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
     const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
+    if (this.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
@@ -44730,6 +44825,9 @@ var WccDashboard2 = class extends (_a6 = DeesElement, _sections_dec = [n5()], _s
     const sectionName = this.selectedSection ? encodeURIComponent(this.selectedSection.name) : this.selectedType;
     const baseUrl = `/wcctools-route/${sectionName}/${this.selectedItemName}/${this.selectedDemoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
     const queryParams = new URLSearchParams();
+    if (this.searchQuery) {
+      queryParams.set("search", this.searchQuery);
+    }
     if (this.frameScrollY > 0) {
       queryParams.set("frameScrollY", this.frameScrollY.toString());
     }
@@ -44764,6 +44862,7 @@ _selectedItem3 = new WeakMap();
 _selectedDemoIndex = new WeakMap();
 _selectedViewport2 = new WeakMap();
 _selectedTheme2 = new WeakMap();
+_searchQuery2 = new WeakMap();
 _warning2 = new WeakMap();
 _wccFrame = new WeakMap();
 __decorateElement(_init6, 4, "sections", _sections_dec, WccDashboard2, _sections);
@@ -44774,6 +44873,7 @@ __decorateElement(_init6, 4, "selectedItem", _selectedItem_dec3, WccDashboard2,
 __decorateElement(_init6, 4, "selectedDemoIndex", _selectedDemoIndex_dec, WccDashboard2, _selectedDemoIndex);
 __decorateElement(_init6, 4, "selectedViewport", _selectedViewport_dec2, WccDashboard2, _selectedViewport2);
 __decorateElement(_init6, 4, "selectedTheme", _selectedTheme_dec2, WccDashboard2, _selectedTheme2);
+__decorateElement(_init6, 4, "searchQuery", _searchQuery_dec2, WccDashboard2, _searchQuery2);
 __decorateElement(_init6, 4, "warning", _warning_dec2, WccDashboard2, _warning2);
 __decorateElement(_init6, 4, "wccFrame", _wccFrame_dec, WccDashboard2, _wccFrame);
 WccDashboard2 = __decorateElement(_init6, 0, "WccDashboard", _WccDashboard_decorators, WccDashboard2);