@triptease/tt-navbar 0.0.35 → 0.0.37

package/dist/web/global.d.js

@@ -0,0 +1,4 @@
+/**
+* @triptease/tt-navbar v0.0.37
+*/
+//# sourceMappingURL=global.d.js.map

package/dist/web/global.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/web/index.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.35
+* @triptease/tt-navbar v0.0.37
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -865,7 +865,7 @@ var i6 = e7(class extends i5 {
   }
 });
 
-// node_modules/@triptease/tt-combobox/node_modules/@triptease/icons/dist/src/icons/chevron-down.js
+// ../../node_modules/@triptease/icons/dist/src/icons/chevron-down.js
 var chevronDown2 = `
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down chevron-down"
        viewBox="0 0 16 16" role="presentation">
@@ -874,12 +874,12 @@ var chevronDown2 = `
           stroke="currentColor"/>
   </svg>`;
 
-// node_modules/@triptease/tt-combobox/node_modules/@triptease/icons/dist/src/icons/alert.js
+// ../../node_modules/@triptease/icons/dist/src/icons/alert.js
 var alert2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="#3B353B"/>
 </svg>`;
 
-// node_modules/@triptease/tt-combobox/dist/src/styles.js
+// ../../node_modules/@triptease/tt-combobox/dist/src/styles.js
 var styles = i`
   :host {
     display: flex;
@@ -1161,7 +1161,7 @@ var styles = i`
   }
 `;
 
-// node_modules/@triptease/tt-combobox/dist/src/TtCombobox.js
+// ../../node_modules/@triptease/tt-combobox/dist/src/TtCombobox.js
 var TtCombobox = class extends i4 {
   get form() {
     return this.internals.form;
@@ -1604,7 +1604,7 @@ __decorate([
   n4({ type: Array, attribute: "value" })
 ], TtCombobox.prototype, "value", void 0);
 
-// node_modules/@triptease/tt-combobox/dist/src/tt-combobox.js
+// ../../node_modules/@triptease/tt-combobox/dist/src/tt-combobox.js
 if (typeof window !== "undefined") {
   if (!window.customElements.get("tt-combobox")) {
     window.customElements.define("tt-combobox", TtCombobox);
@@ -2018,6 +2018,45 @@ var Routes = {
   CampaignManager: "CampaignManager"
 };
 
+// src/NavbarController.ts
+var NavbarController = class {
+  constructor(host) {
+    this._isOpen = true;
+    (this.host = host).addController(this);
+  }
+  get isOpen() {
+    return this._isOpen;
+  }
+  hostConnected() {
+    if (window.Clerk) {
+      const userSetting = window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
+      if (userSetting !== void 0) {
+        this._isOpen = userSetting;
+        this.host.requestUpdate();
+      }
+    }
+  }
+  async toggle() {
+    const newState = !this._isOpen;
+    this._isOpen = newState;
+    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: newState
+            }
+          }
+        }
+      });
+    }
+    this.host.requestUpdate();
+  }
+};
+
 // src/TtNavbar.ts
 var jsonArrayConverter = (value) => {
   if (!value) return [];
@@ -2033,6 +2072,7 @@ var TtNavbar = class extends i4 {
     this.campaignManagerUrl = "https://app.campaign-manager.triptease.io";
     this.clients = [];
     this.sidebarOpen = true;
+    this.navbarController = new NavbarController(this);
     /*
      * Set the active state for the current page.
      *
@@ -2106,14 +2146,14 @@ var TtNavbar = class extends i4 {
     };
     this.toggleSidebar = () => {
       this.closeAllDetails();
-      this.sidebarOpen = !this.sidebarOpen;
+      this.navbarController.toggle();
     };
     this.handleToggle = (e10) => {
       const { newState } = e10;
       const target = e10.currentTarget;
       if (newState === "open") {
-        if (!this.sidebarOpen) {
-          this.sidebarOpen = true;
+        if (!this.navbarController.isOpen) {
+          this.navbarController.toggle();
         }
         this.closeAllDetails(target);
       }
@@ -2153,8 +2193,8 @@ var TtNavbar = class extends i4 {
   }
   render() {
     return x`
-      <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">
-        <div class="sidebar-header ${this.sidebarOpen ? "" : "sidebar-closed"}">
+      <nav id=${this.id} class="${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="sidebar-header ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <div class="logo">
             ${o8(tripteaseLogo)}
           </div>
@@ -2167,7 +2207,7 @@ var TtNavbar = class extends i4 {
           </button>
         </div>
 
-        <div class="nav-items ${this.sidebarOpen ? "" : "sidebar-closed"}">
+        <div class="nav-items ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <a
             class="nav-item"
             href=${this.buildUrl("/")}
@@ -2281,7 +2321,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav ${this.sidebarOpen ? "" : "sidebar-closed"}">
+        <div class="tertiary-nav ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
@@ -2315,22 +2355,24 @@ var TtNavbar = class extends i4 {
           <div class='nav-items'>
             <div id="client-selector">
               ${this.clients.length > 1 ? x`
-                <tt-combobox
-                  .openUpward=${true}
-                  .value=${this.clientKey ? [this.clientKey] : []}
-                  @change=${this.handleClientChange}
-                >
-                  ${this.clients.map((client) => x`
-                    <option slot="option" value=${client.clientKey}>
-                      ${client.displayName}
-                    </option>
-                  `)}
-                </tt-combobox>
-              ` : x`
-                <div class="single-client-name">
-                  ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
-                </div>
-              `}
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map(
+      (client) => x`
+                            <option slot="option" value=${client.clientKey}>
+                              ${client.displayName}
+                            </option>
+                          `
+    )}
+                      </tt-combobox>
+                    ` : x`
+                      <div class="single-client-name">
+                        ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
+                      </div>
+                    `}
             </div>
             <a
               id="logout-link"