@design.estate/dees-wcctools 3.7.1 → 3.8.0

package/dist_watch/bundle.js

@@ -42002,9 +42002,9 @@ __runInitializers(_init2, 1, _WccContextmenu);
 var WccContextmenu = _WccContextmenu;
 
 // ts_web/elements/wcc-sidebar.ts
-var _isHidden_dec, _isResizing_dec2, _sidebarWidth_dec2, _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems, _sidebarWidth2, _isResizing2, _isHidden;
+var _isMenuScrolled_dec, _isHidden_dec, _isResizing_dec2, _sidebarWidth_dec2, _pinnedItems_dec, _searchQuery_dec, _collapsedSections_dec, _expandedElements_dec, _isNative_dec2, _dashboardRef_dec, _selectedType_dec, _selectedItem_dec, _a3, _WccSidebar_decorators, _init3, _selectedItem, _selectedType, _dashboardRef, _isNative2, _expandedElements, _collapsedSections, _searchQuery, _pinnedItems, _sidebarWidth2, _isResizing2, _isHidden, _isMenuScrolled;
 _WccSidebar_decorators = [t4("wcc-sidebar")];
-var WccSidebar = class extends (_a3 = 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()], _pinnedItems_dec = [n5({ attribute: false })], _sidebarWidth_dec2 = [n5({ type: Number })], _isResizing_dec2 = [r5()], _isHidden_dec = [r5()], _a3) {
+var WccSidebar = class extends (_a3 = 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()], _pinnedItems_dec = [n5({ attribute: false })], _sidebarWidth_dec2 = [n5({ type: Number })], _isResizing_dec2 = [r5()], _isHidden_dec = [r5()], _isMenuScrolled_dec = [r5()], _a3) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _selectedItem, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
@@ -42018,6 +42018,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     __privateAdd(this, _sidebarWidth2, __runInitializers(_init3, 40, this, 200)), __runInitializers(_init3, 43, this);
     __privateAdd(this, _isResizing2, __runInitializers(_init3, 44, this, false)), __runInitializers(_init3, 47, this);
     __privateAdd(this, _isHidden, __runInitializers(_init3, 48, this, false)), __runInitializers(_init3, 51, this);
+    __privateAdd(this, _isMenuScrolled, __runInitializers(_init3, 52, this, false)), __runInitializers(_init3, 55, this);
     __publicField(this, "sectionsInitialized", false);
     // ============ Resize functionality ============
     __publicField(this, "startResize", (e10) => {
@@ -42053,6 +42054,12 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       document.addEventListener("mouseup", onMouseUp);
     });
   }
+  /**
+   * Returns the scrollable container element (.menu) for external scroll management
+   */
+  get scrollableContainer() {
+    return this.shadowRoot?.querySelector(".menu");
+  }
   render() {
     return b2`
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
@@ -42092,6 +42099,15 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
 
         .sidebar-header {
           flex-shrink: 0;
+          transition: box-shadow 0.2s ease, border-color 0.2s ease;
+          border-bottom: 1px solid transparent;
+          position: relative;
+          z-index: 1;
+        }
+
+        .sidebar-header.scrolled {
+          box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 1);
+          border-bottom-color: var(--border);
         }
 
         .menu {
@@ -42405,6 +42421,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           color: #555;
           padding: 0.125rem 0.625rem 0.25rem;
           display: block;
+          cursor: context-menu;
         }
 
         .item-group .selectOption {
@@ -42412,6 +42429,15 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           margin-right: 0.25rem;
         }
 
+        .item-group.group-highlight {
+          background: rgba(59, 130, 246, 0.15);
+          transition: background 0.3s ease;
+        }
+
+        .item-group.group-filter-match {
+          border-color: rgba(245, 158, 11, 0.5);
+        }
+
         /* Resize handle */
         .resize-handle {
           position: absolute;
@@ -42433,7 +42459,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           background: var(--primary);
         }
       </style>
-      <div class="sidebar-header">
+      <div class="sidebar-header ${this.isMenuScrolled ? "scrolled" : ""}">
         <div class="search-container">
           <input
             type="text"
@@ -42450,7 +42476,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         </div>
         ${this.renderPinnedSection()}
       </div>
-      <div class="menu">
+      <div class="menu" @scroll=${this.handleMenuScroll}>
         ${this.renderSections()}
       </div>
       <div
@@ -42493,12 +42519,46 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
   }
   showContextMenu(e10, sectionName, itemName) {
     const isPinned = this.isPinned(sectionName, itemName);
-    WccContextmenu.show(e10, [
+    const section = this.dashboardRef?.sections?.find((s8) => s8.name === sectionName);
+    const sectionEntries = section ? getSectionItems(section) : [];
+    const foundEntry = sectionEntries.find(([name]) => name === itemName);
+    const item = foundEntry?.[1];
+    const groups = item ? this.getElementGroups(item) : [];
+    const menuItems = [
       {
         name: isPinned ? "Unpin" : "Pin",
         iconName: isPinned ? "push_pin" : "push_pin",
         action: () => this.togglePin(sectionName, itemName)
       }
+    ];
+    if (groups.length > 0) {
+      menuItems.push({
+        name: "Show in Group:",
+        iconName: "folder",
+        action: () => {
+        },
+        disabled: true
+      });
+      for (const groupName of groups) {
+        menuItems.push({
+          name: groupName,
+          iconName: "label",
+          action: () => this.scrollToGroup(sectionName, groupName)
+        });
+      }
+    }
+    WccContextmenu.show(e10, menuItems);
+  }
+  showGroupContextMenu(e10, groupName) {
+    WccContextmenu.show(e10, [
+      {
+        name: `Show "${groupName}"`,
+        iconName: "filter_alt",
+        action: () => {
+          this.searchQuery = groupName;
+          this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
+        }
+      }
     ]);
   }
   /**
@@ -42537,7 +42597,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         ${pinnedEntries.map(({ sectionName, itemName, item, section }) => {
       const isSelected = this.selectedItem === item;
       const type5 = section.type === "elements" ? "element" : "page";
-      const icon = section.type === "elements" ? "featured_video" : "insert_drive_file";
+      const icon = section.type === "elements" ? this.getElementGroups(item).length > 1 ? "library_books" : "featured_video" : "insert_drive_file";
       return b2`
             <div
               class="selectOption ${isSelected ? "selected" : ""}"
@@ -42566,7 +42626,13 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     this.initCollapsedSections();
     return this.dashboardRef.sections.map((section) => {
       const entries = getSectionItems(section);
-      const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+      const filteredEntries = entries.filter(([name, item]) => {
+        if (this.matchesSearch(name)) return true;
+        const rawGroups = item.demoGroups;
+        if (!rawGroups) return false;
+        const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
+        return groups.some((g3) => this.matchesSearch(g3));
+      });
       if (filteredEntries.length === 0 && this.searchQuery) {
         return null;
       }
@@ -42592,7 +42658,13 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
    */
   renderSectionItems(section) {
     const entries = getSectionItems(section);
-    const filteredEntries = entries.filter(([name]) => this.matchesSearch(name));
+    const filteredEntries = entries.filter(([name, item]) => {
+      if (this.matchesSearch(name)) return true;
+      const rawGroups = item.demoGroups;
+      if (!rawGroups) return false;
+      const groups = Array.isArray(rawGroups) ? rawGroups : [rawGroups];
+      return groups.some((g3) => this.matchesSearch(g3));
+    });
     if (section.type === "pages") {
       return filteredEntries.map(([pageName, item]) => {
         const isPinned = this.isPinned(section.name, pageName);
@@ -42614,11 +42686,14 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       const groupedItems = /* @__PURE__ */ new Map();
       for (const entry of filteredEntries) {
         const [, item] = entry;
-        const group = item.demoGroup || null;
-        if (!groupedItems.has(group)) {
-          groupedItems.set(group, []);
+        const rawGroups = item.demoGroups;
+        const groups = rawGroups ? Array.isArray(rawGroups) ? rawGroups : [rawGroups] : [null];
+        for (const group of groups) {
+          if (!groupedItems.has(group)) {
+            groupedItems.set(group, []);
+          }
+          groupedItems.get(group).push(entry);
         }
-        groupedItems.get(group).push(entry);
       }
       const renderItems = [];
       const ungrouped = groupedItems.get(null) || [];
@@ -42627,8 +42702,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       }
       for (const [groupName, items] of groupedItems) {
         if (groupName === null) continue;
-        const firstElementName = items[0]?.[0] || "";
-        renderItems.push({ type: "group", groupName, items, sortKey: firstElementName.toLowerCase() });
+        renderItems.push({ type: "group", groupName, items, sortKey: groupName.toLowerCase() });
       }
       renderItems.sort((a4, b4) => a4.sortKey.localeCompare(b4.sortKey));
       return renderItems.map((item) => {
@@ -42636,8 +42710,11 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
           return this.renderElementItem(item.entry, section);
         } else {
           return b2`
-            <div class="item-group">
-              <span class="item-group-legend">${item.groupName}</span>
+            <div class="item-group ${this.isGroupFilterMatch(item.groupName) ? "group-filter-match" : ""}" data-group="${item.groupName}">
+              <span
+                class="item-group-legend"
+                @contextmenu=${(e10) => this.showGroupContextMenu(e10, item.groupName)}
+              >${item.groupName}</span>
               ${item.items.map((entry) => this.renderElementItem(entry, section))}
             </div>
           `;
@@ -42688,6 +42765,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
         ` : null}
       `;
     } else {
+      const icon = this.getElementGroups(item).length > 1 ? "library_books" : "featured_video";
       return b2`
         <div
           class="selectOption ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}"
@@ -42697,7 +42775,7 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
       }}
           @contextmenu=${(e10) => this.showContextMenu(e10, section.name, elementName)}
         >
-          <i class="material-symbols-outlined">featured_video</i>
+          <i class="material-symbols-outlined">${icon}</i>
           <div class="text">${this.highlightMatch(elementName)}</div>
         </div>
       `;
@@ -42730,10 +42808,37 @@ var WccSidebar = class extends (_a3 = DeesElement, _selectedItem_dec = [n5({ att
     this.searchQuery = "";
     this.dispatchEvent(new CustomEvent("searchChanged", { detail: this.searchQuery }));
   }
+  handleMenuScroll(e10) {
+    const target = e10.target;
+    this.isMenuScrolled = target.scrollTop > 0;
+  }
   matchesSearch(name) {
     if (!this.searchQuery) return true;
     return name.toLowerCase().includes(this.searchQuery.toLowerCase());
   }
+  isGroupFilterMatch(groupName) {
+    return !!this.searchQuery && groupName.toLowerCase() === this.searchQuery.toLowerCase();
+  }
+  getElementGroups(item) {
+    const raw2 = item?.demoGroups;
+    if (!raw2) return [];
+    return Array.isArray(raw2) ? raw2 : [raw2];
+  }
+  scrollToGroup(sectionName, groupName) {
+    this.collapsedSections.delete(sectionName);
+    this.searchQuery = "";
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const groupEl = this.shadowRoot?.querySelector(
+        `.item-group[data-group="${groupName}"]`
+      );
+      if (groupEl) {
+        groupEl.scrollIntoView({ behavior: "smooth", block: "center" });
+        groupEl.classList.add("group-highlight");
+        setTimeout(() => groupEl.classList.remove("group-highlight"), 1500);
+      }
+    });
+  }
   highlightMatch(text8) {
     if (!this.searchQuery) return b2`${text8}`;
     const lowerText = text8.toLowerCase();
@@ -42819,6 +42924,7 @@ _pinnedItems = new WeakMap();
 _sidebarWidth2 = new WeakMap();
 _isResizing2 = new WeakMap();
 _isHidden = new WeakMap();
+_isMenuScrolled = new WeakMap();
 __decorateElement(_init3, 4, "selectedItem", _selectedItem_dec, WccSidebar, _selectedItem);
 __decorateElement(_init3, 4, "selectedType", _selectedType_dec, WccSidebar, _selectedType);
 __decorateElement(_init3, 4, "dashboardRef", _dashboardRef_dec, WccSidebar, _dashboardRef);
@@ -42830,6 +42936,7 @@ __decorateElement(_init3, 4, "pinnedItems", _pinnedItems_dec, WccSidebar, _pinne
 __decorateElement(_init3, 4, "sidebarWidth", _sidebarWidth_dec2, WccSidebar, _sidebarWidth2);
 __decorateElement(_init3, 4, "isResizing", _isResizing_dec2, WccSidebar, _isResizing2);
 __decorateElement(_init3, 4, "isHidden", _isHidden_dec, WccSidebar, _isHidden);
+__decorateElement(_init3, 4, "isMenuScrolled", _isMenuScrolled_dec, WccSidebar, _isMenuScrolled);
 WccSidebar = __decorateElement(_init3, 0, "WccSidebar", _WccSidebar_decorators, WccSidebar);
 __runInitializers(_init3, 1, WccSidebar);
 
@@ -45544,10 +45651,13 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
       this.scrollListenersAttached = true;
     }
     if (wccSidebar) {
-      wccSidebar.addEventListener("scroll", () => {
-        this.sidebarScrollY = wccSidebar.scrollTop;
-        this.debouncedScrollUpdate();
-      });
+      const scrollContainer = wccSidebar.scrollableContainer;
+      if (scrollContainer) {
+        scrollContainer.addEventListener("scroll", () => {
+          this.sidebarScrollY = scrollContainer.scrollTop;
+          this.debouncedScrollUpdate();
+        });
+      }
     }
   }
   debouncedScrollUpdate() {
@@ -45589,7 +45699,10 @@ var WccDashboard2 = class extends (_a7 = DeesElement, _sections_dec = [n5()], _s
       wccFrame.scrollTop = this.frameScrollY;
     }
     if (wccSidebar && this.sidebarScrollY > 0) {
-      wccSidebar.scrollTop = this.sidebarScrollY;
+      const scrollContainer = wccSidebar.scrollableContainer;
+      if (scrollContainer) {
+        scrollContainer.scrollTop = this.sidebarScrollY;
+      }
     }
     this.scrollPositionsApplied = true;
   }
@@ -46413,7 +46526,7 @@ _label = new WeakMap();
 __decorateElement(_init17, 4, "label", _label_dec, TestButtonPrimary, _label);
 TestButtonPrimary = __decorateElement(_init17, 0, "TestButtonPrimary", _TestButtonPrimary_decorators, TestButtonPrimary);
 // This groups the element with other "Buttons" in the sidebar
-__publicField(TestButtonPrimary, "demoGroup", "Buttons");
+__publicField(TestButtonPrimary, "demoGroups", "Buttons");
 __publicField(TestButtonPrimary, "demo", () => b2`
     <test-button-primary>Click Me</test-button-primary>
   `);
@@ -46456,7 +46569,7 @@ _label2 = new WeakMap();
 __decorateElement(_init18, 4, "label", _label_dec2, TestButtonSecondary, _label2);
 TestButtonSecondary = __decorateElement(_init18, 0, "TestButtonSecondary", _TestButtonSecondary_decorators, TestButtonSecondary);
 // Same group as test-button-primary - they'll appear together
-__publicField(TestButtonSecondary, "demoGroup", "Buttons");
+__publicField(TestButtonSecondary, "demoGroups", "Buttons");
 __publicField(TestButtonSecondary, "demo", () => b2`
     <test-button-secondary>Secondary Action</test-button-secondary>
   `);
@@ -46499,7 +46612,7 @@ _label3 = new WeakMap();
 __decorateElement(_init19, 4, "label", _label_dec3, TestButtonDanger, _label3);
 TestButtonDanger = __decorateElement(_init19, 0, "TestButtonDanger", _TestButtonDanger_decorators, TestButtonDanger);
 // Same group as other buttons
-__publicField(TestButtonDanger, "demoGroup", "Buttons");
+__publicField(TestButtonDanger, "demoGroups", "Buttons");
 __publicField(TestButtonDanger, "demo", () => b2`
     <test-button-danger>Delete</test-button-danger>
   `);
@@ -46552,7 +46665,7 @@ __decorateElement(_init20, 4, "placeholder", _placeholder_dec, TestInputText, _p
 __decorateElement(_init20, 4, "value", _value_dec, TestInputText, _value);
 TestInputText = __decorateElement(_init20, 0, "TestInputText", _TestInputText_decorators, TestInputText);
 // Different group - "Inputs"
-__publicField(TestInputText, "demoGroup", "Inputs");
+__publicField(TestInputText, "demoGroups", "Inputs");
 __publicField(TestInputText, "demo", () => b2`
     <test-input-text placeholder="Enter text..."></test-input-text>
   `);
@@ -46608,7 +46721,7 @@ __decorateElement(_init21, 4, "label", _label_dec4, TestInputCheckbox, _label4);
 __decorateElement(_init21, 4, "checked", _checked_dec, TestInputCheckbox, _checked);
 TestInputCheckbox = __decorateElement(_init21, 0, "TestInputCheckbox", _TestInputCheckbox_decorators, TestInputCheckbox);
 // Same group as test-input-text
-__publicField(TestInputCheckbox, "demoGroup", "Inputs");
+__publicField(TestInputCheckbox, "demoGroups", ["Inputs", "A Second Group"]);
 __publicField(TestInputCheckbox, "demo", () => b2`
     <test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>
   `);