@design.estate/dees-wcctools 3.6.1 → 3.7.0

package/dist_bundle/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 4px 12px -2px rgba(0, 0, 0, 0.4);
+          border-bottom-color: var(--border);
         }
 
         .menu {
@@ -42433,7 +42449,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 +42466,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
@@ -42730,6 +42746,10 @@ 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());
@@ -42819,6 +42839,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 +42851,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 +45566,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 +45614,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;
   }