@triptease/tt-navbar 0.0.44 → 0.0.46

package/dist/web/styles.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.44
+* @triptease/tt-navbar v0.0.46
 */
 
 // ../../node_modules/@lit/reactive-element/css-tag.js

package/dist/web/triptease-logo.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.44
+* @triptease/tt-navbar v0.0.46
 */
 
 // src/triptease-logo.ts

package/dist/web/tt-navbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.44
+* @triptease/tt-navbar v0.0.46
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1209,7 +1209,12 @@ var TtCombobox = class extends i4 {
     this._selectAll = (event) => {
       event.preventDefault();
       event.stopPropagation();
-      if (this.value.length === this._selectableOptions.length) {
+      if (this._filter !== "" && this._isAllSelected) {
+        const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map((option) => option.dataset.value);
+        this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));
+      } else if (this._filter !== "") {
+        this.value = Array.from(/* @__PURE__ */ new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.dataset.value)]));
+      } else if (this.value.length === this._selectableOptions.length) {
         this.value = [];
       } else {
         this.value = Array.from(this._selectableOptions).map((option) => option.dataset.value);
@@ -1463,9 +1468,7 @@ var TtCombobox = class extends i4 {
       />`;
   }
   _renderOption(option) {
-    if (this._filter !== "" && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {
-      return E;
-    }
+    const hidden = Boolean(this._filter !== "" && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter) || option.hidden);
     const id = `${this.id}-option-${option.value}`;
     const active = this._getActiveOptionId() === id;
     const selected = Boolean(this.multiselect && option.selected);
@@ -1479,7 +1482,7 @@ var TtCombobox = class extends i4 {
         @mousedown="${(event) => event.preventDefault()}"
         data-value="${option.value}"
         aria-disabled=${option.disabled}
-        aria-hidden=${option.hidden || E}
+        aria-hidden=${hidden || E}
         data-deselectable=${!option.selected}
         part="option"
       >
@@ -2024,56 +2027,6 @@ var Routes = {
   CampaignManager: "CampaignManager"
 };
 
-// src/NavbarController.ts
-var NavbarController = class {
-  constructor(host) {
-    this._isOpen = true;
-    this._hasInitialized = false;
-    (this.host = host).addController(this);
-  }
-  get isOpen() {
-    return this._isOpen;
-  }
-  hostUpdate() {
-    if (!this._hasInitialized && window.Clerk) {
-      this._removeClerkListener = window.Clerk.addListener((resources) => {
-        const { user: user2 } = resources;
-        if (user2 && !this._hasInitialized) {
-          const navigationOpen = user2.unsafeMetadata?.preferences?.ui?.navigationOpen;
-          if (navigationOpen !== void 0) {
-            this._isOpen = navigationOpen;
-            this.host.requestUpdate();
-          }
-          this._hasInitialized = true;
-        }
-      });
-    }
-  }
-  hostDisconnected() {
-    if (this._removeClerkListener) {
-      this._removeClerkListener();
-    }
-  }
-  async toggle() {
-    this._isOpen = !this._isOpen;
-    if (window.Clerk) {
-      await window.Clerk.user?.update({
-        unsafeMetadata: {
-          ...window.Clerk.user?.unsafeMetadata,
-          preferences: {
-            ...window.Clerk.user?.unsafeMetadata?.preferences,
-            ui: {
-              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: this.isOpen
-            }
-          }
-        }
-      });
-    }
-    this.host.requestUpdate();
-  }
-};
-
 // src/TtNavbar.ts
 var jsonArrayConverter = (value) => {
   if (!value) return [];
@@ -2088,8 +2041,8 @@ var TtNavbar = class extends i4 {
     super(...arguments);
     this.campaignManagerUrl = "https://app.campaign-manager.triptease.io";
     this.clients = [];
-    this.sidebarOpen = true;
-    this.navbarController = new NavbarController(this);
+    this.initialState = void 0;
+    this.isOpen = true;
     /*
      * Set the active state for the current page.
      *
@@ -2164,14 +2117,14 @@ var TtNavbar = class extends i4 {
     };
     this.toggleSidebar = () => {
       this.closeAllDetails();
-      this.navbarController.toggle();
+      this.isOpen = !this.isOpen;
     };
-    this.handleToggle = (e10) => {
+    this.handleDetailsToggle = (e10) => {
       const { newState } = e10;
       const target = e10.currentTarget;
       if (newState === "open") {
-        if (!this.navbarController.isOpen) {
-          this.navbarController.toggle();
+        if (!this.isOpen) {
+          this.toggleSidebar();
         }
         this.closeAllDetails(target);
       }
@@ -2203,6 +2156,9 @@ var TtNavbar = class extends i4 {
     window.addEventListener("popstate", this.setActiveState);
     window.addEventListener("tetris:navigate", this.setActiveState);
     super.connectedCallback();
+    if (this.initialState) {
+      this.isOpen = this.initialState === "open";
+    }
   }
   disconnectedCallback() {
     window.removeEventListener("popstate", this.setActiveState);
@@ -2211,8 +2167,8 @@ var TtNavbar = class extends i4 {
   }
   render() {
     return x`
-      <nav id=${this.id} class="${this.navbarController.isOpen ? "" : "sidebar-closed"}">
-        <div class="sidebar-header ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+      <nav id=${this.id} class="${this.isOpen ? "" : "sidebar-closed"}">
+        <div class="sidebar-header ${this.isOpen ? "" : "sidebar-closed"}">
           <div class="logo">
             ${o8(tripteaseLogo)}
           </div>
@@ -2225,7 +2181,7 @@ var TtNavbar = class extends i4 {
           </button>
         </div>
 
-        <div class="nav-items ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="nav-items ${this.isOpen ? "" : "sidebar-closed"}">
           <a
             class="nav-item"
             href=${this.buildUrl("/")}
@@ -2244,7 +2200,7 @@ var TtNavbar = class extends i4 {
             data-intercom-target="channels"
           >${o8(channels)}<span>Channels</span></a
           >
-          <details id="market-insights" @toggle=${this.handleToggle} data-intercom-target="market-insights">
+          <details id="market-insights" @toggle=${this.handleDetailsToggle} data-intercom-target="market-insights">
             <summary>
               ${o8(graph)}
               <span>Market Insights</span>
@@ -2267,7 +2223,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details id="settings" @toggle=${this.handleToggle} data-intercom-target="settings">
+          <details id="settings" @toggle=${this.handleDetailsToggle} data-intercom-target="settings">
             <summary>
               ${o8(gear)}
               <span>Settings</span>
@@ -2305,7 +2261,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
           <hr />
-          <details id="account" @toggle=${this.handleToggle} data-intercom-target="account">
+          <details id="account" @toggle=${this.handleDetailsToggle} data-intercom-target="account">
             <summary>
               ${o8(user)}
               <span>Account</span>
@@ -2328,7 +2284,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details id="billing-routes" @toggle=${this.handleToggle} data-intercom-target="billing">
+          <details id="billing-routes" @toggle=${this.handleDetailsToggle} data-intercom-target="billing">
             <summary>
               ${o8(wallet)}
               <span>Billing</span>
@@ -2352,7 +2308,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="tertiary-nav ${this.isOpen ? "" : "sidebar-closed"}">
           <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
@@ -2436,6 +2392,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: Array, converter: jsonArrayConverter })
 ], TtNavbar.prototype, "clients", 2);
+__decorateClass([
+  n4({ type: String, attribute: "initial-state" })
+], TtNavbar.prototype, "initialState", 2);
+__decorateClass([
+  r5()
+], TtNavbar.prototype, "isOpen", 2);
 __decorateClass([
   n4({ type: Object })
 ], TtNavbar.prototype, "onClientChange", 2);
@@ -2445,9 +2407,6 @@ __decorateClass([
 __decorateClass([
   r6("a")
 ], TtNavbar.prototype, "allNavLinks", 2);
-__decorateClass([
-  r5()
-], TtNavbar.prototype, "sidebarOpen", 2);
 
 // src/tt-navbar.ts
 if (typeof window !== "undefined") {