@triptease/tt-navbar 0.0.45 → 0.0.46

package/dist/web/urlMappings.js

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -19,7 +19,6 @@ import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
 import { Routes } from './Routes.js';
-import { NavbarController } from './NavbarController.js';
 
 const jsonArrayConverter = (value: string | null) => {
   if (!value) return [];
@@ -51,6 +50,12 @@ export class TtNavbar extends LitElement {
   @property({ type: Array, converter: jsonArrayConverter })
   clients: { clientKey: string; displayName: string }[] = [];
 
+  @property({ type: String, attribute: 'initial-state' })
+  initialState: 'open' | 'closed' | undefined = undefined;
+
+  @state()
+  isOpen: boolean = true;
+
   @property({ type: Object })
   onClientChange: ((clientKeySelected: string) => void) | undefined;
 
@@ -60,11 +65,6 @@ export class TtNavbar extends LitElement {
   @queryAll('a')
   protected allNavLinks!: Array<HTMLAnchorElement>;
 
-  @state()
-  private sidebarOpen = true;
-
-  private navbarController = new NavbarController(this);
-
   protected firstUpdated() {
     this.setActiveState();
   }
@@ -77,6 +77,10 @@ export class TtNavbar extends LitElement {
     window.addEventListener('tetris:navigate', this.setActiveState);
 
     super.connectedCallback();
+
+    if (this.initialState) {
+      this.isOpen = this.initialState === 'open';
+    }
   }
 
   public disconnectedCallback() {
@@ -173,16 +177,18 @@ export class TtNavbar extends LitElement {
 
   private toggleSidebar = () => {
     this.closeAllDetails();
-    this.navbarController.toggle();
+    this.isOpen = !this.isOpen;
+
+    // TODO - Set cookie
   };
 
-  private handleToggle = (e: ToggleEvent) => {
+  private handleDetailsToggle = (e: ToggleEvent) => {
     const { newState } = e;
     const target = e.currentTarget as HTMLDetailsElement;
 
     if (newState === 'open') {
-      if (!this.navbarController.isOpen) {
-        this.navbarController.toggle();
+      if (!this.isOpen) {
+        this.toggleSidebar();
       }
 
       this.closeAllDetails(target);
@@ -216,8 +222,8 @@ export class TtNavbar extends LitElement {
 
   render() {
     return html`
-      <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">
             ${unsafeSVG(tripteaseLogo)}
           </div>
@@ -230,7 +236,7 @@ export class TtNavbar extends LitElement {
           </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('/')}
@@ -249,7 +255,7 @@ export class TtNavbar extends LitElement {
             data-intercom-target="channels"
           >${unsafeSVG(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>
               ${unsafeSVG(graph)}
               <span>Market Insights</span>
@@ -272,7 +278,7 @@ export class TtNavbar extends LitElement {
               >
             </div>
           </details>
-          <details id="settings" @toggle=${this.handleToggle} data-intercom-target="settings">
+          <details id="settings" @toggle=${this.handleDetailsToggle} data-intercom-target="settings">
             <summary>
               ${unsafeSVG(gear)}
               <span>Settings</span>
@@ -310,7 +316,7 @@ export class TtNavbar extends LitElement {
             </div>
           </details>
           <hr />
-          <details id="account" @toggle=${this.handleToggle} data-intercom-target="account">
+          <details id="account" @toggle=${this.handleDetailsToggle} data-intercom-target="account">
             <summary>
               ${unsafeSVG(user)}
               <span>Account</span>
@@ -333,7 +339,7 @@ export class TtNavbar extends LitElement {
               >
             </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>
               ${unsafeSVG(wallet)}
               <span>Billing</span>
@@ -357,7 +363,7 @@ export class TtNavbar extends LitElement {
             </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"

package/test/tt-navbar.test.ts

@@ -1,4 +1,3 @@
-import { Clerk } from '@clerk/clerk-js';
 import '../src/tt-navbar.js';
 import {
   elementUpdated,
@@ -7,7 +6,6 @@ import {
   nextFrame,
   waitUntil,
 } from '@open-wc/testing';
-import { Resources } from '@clerk/types';
 import { TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
@@ -400,98 +398,36 @@ describe('TtNavbar', () => {
     expect(anchor!.textContent).to.include('Booking reconciliation');
   });
 
-  it('should default to open when Clerk is not available', async () => {
+  it("should default to 'open' when the 'initial-state' attribute is not provided", async () => {
     const navbar = await fixture<TtNavbar>(
       `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
 
-    expect(window.Clerk).to.be.undefined;
     expect(logo).to.exist;
     expect(logo!.checkVisibility()).to.be.true;
   });
 
-  it('should default to state stored in Clerk when set', async () => {
-    const mockUser = {
-      unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
-    };
-
-    const mockAddListener = (func: (resources: Resources) => void) => {
-      func({ user: mockUser } as unknown as Resources);
-    };
-
-    window.Clerk = {
-      addListener: mockAddListener,
-      user: mockUser,
-    } as Clerk;
-
+  it("should default to 'open' when the 'initial-state' attribute is 'open", async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state="open"></tt-navbar>`,
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
 
     expect(logo).to.exist;
-    expect(logo!.checkVisibility()).to.be.false;
-
-    window.Clerk = undefined; // Cleanup
+    expect(logo!.checkVisibility()).to.be.true;
   });
 
-  it('should update Clerk state when toggling if Clerk is available', async () => {
-    let timesCalled = 0;
-    let calledWith: unknown;
-
-    const mockUpdate = (args: unknown) => {
-      timesCalled += 1;
-      calledWith = args;
-    };
-
-    const mockUser = {
-      update: mockUpdate,
-      unsafeMetadata: {
-        foo: 'foo',
-        preferences: {
-          bar: 'bar',
-          ui: { duck: 'duck', navigationOpen: false },
-        },
-      },
-    };
-
-    const mockAddListener = (func: (resources: Resources) => void) => {
-      func({ user: mockUser } as unknown as Resources);
-    };
-
-    window.Clerk = {
-      addListener: mockAddListener,
-      user: mockUser,
-    } as unknown as Clerk;
-
+  it("should default to 'closed' when the 'initial-state' attribute is 'closed", async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state="closed"></tt-navbar>`,
     );
 
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
-
-    navbarToggleBtn.click();
-    await elementUpdated(navbar);
-
-    await expect(timesCalled).to.equal(1);
-    expect(calledWith).to.deep.equal({
-      unsafeMetadata: {
-        foo: 'foo',
-        preferences: {
-          bar: 'bar',
-          ui: {
-            duck: 'duck',
-            navigationOpen: true,
-          },
-        },
-      },
-    });
+    const logo = navbar.shadowRoot!.querySelector('.logo');
 
-    window.Clerk = undefined; // Cleanup
+    expect(logo).to.exist;
+    expect(logo!.checkVisibility()).to.be.false;
   });
 });

package/dist/src/NavbarController.d.ts

@@ -1,12 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-export declare class NavbarController implements ReactiveController {
-    host: ReactiveControllerHost;
-    private _isOpen;
-    private _hasInitialized;
-    private _removeClerkListener?;
-    constructor(host: ReactiveControllerHost);
-    get isOpen(): boolean;
-    hostUpdate(): void;
-    hostDisconnected(): void;
-    toggle(): Promise<void>;
-}

package/dist/src/NavbarController.js

@@ -1,49 +0,0 @@
-export class NavbarController {
-    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 } = resources;
-                if (user && !this._hasInitialized) {
-                    const navigationOpen = user.unsafeMetadata?.preferences?.ui?.navigationOpen;
-                    if (navigationOpen !== undefined) {
-                        this._isOpen = navigationOpen;
-                        this.host.requestUpdate();
-                    }
-                    this._hasInitialized = true;
-                }
-            });
-        }
-    }
-    hostDisconnected() {
-        if (this._removeClerkListener) {
-            this._removeClerkListener();
-        }
-    }
-    async toggle() {
-        this._isOpen = !this._isOpen;
-        if (window.Clerk) {
-            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();
-    }
-}
-//# sourceMappingURL=NavbarController.js.map

package/dist/src/NavbarController.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavbarController.js","sourceRoot":"","sources":["../../src/NavbarController.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,gBAAgB;IAS3B,YAAY,IAA4B;QANhC,YAAO,GAAG,IAAI,CAAC;QAEf,oBAAe,GAAG,KAAK,CAAC;QAK9B,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;gBAC/D,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;gBAC3B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;oBAClC,MAAM,cAAc,GAClB,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE,cAAc,CAAC;oBAEvD,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;wBACjC,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;wBAC9B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;oBAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC9B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YACjB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;gBACxB,cAAc,EAAE;oBACd,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc;oBACpC,WAAW,EAAE;wBACX,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW;wBACjD,EAAE,EAAE;4BACF,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE;4BACrD,cAAc,EAAE,IAAI,CAAC,MAAM;yBAC5B;qBACF;iBACF;aACF,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { UnsubscribeCallback } from '@clerk/types';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  private _removeClerkListener?: UnsubscribeCallback;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      this._removeClerkListener = window.Clerk.addListener(resources => {\n        const { user } = resources;\n        if (user && !this._hasInitialized) {\n          const navigationOpen =\n            user.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n          if (navigationOpen !== undefined) {\n            this._isOpen = navigationOpen;\n            this.host.requestUpdate();\n          }\n\n          this._hasInitialized = true;\n        }\n      });\n    }\n  }\n\n  hostDisconnected() {\n    if (this._removeClerkListener) {\n      this._removeClerkListener();\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"]}

package/dist/web/NavbarController.js

@@ -1,57 +0,0 @@
-/**
-* @triptease/tt-navbar v0.0.45
-*/
-
-// 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 } = resources;
-        if (user && !this._hasInitialized) {
-          const navigationOpen = user.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) {
-      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();
-  }
-};
-export {
-  NavbarController
-};
-//# sourceMappingURL=NavbarController.js.map

package/dist/web/NavbarController.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/NavbarController.ts"],
-  "sourcesContent": ["import { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { UnsubscribeCallback } from '@clerk/types';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  private _removeClerkListener?: UnsubscribeCallback;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      this._removeClerkListener = window.Clerk.addListener(resources => {\n        const { user } = resources;\n        if (user && !this._hasInitialized) {\n          const navigationOpen =\n            user.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n          if (navigationOpen !== undefined) {\n            this._isOpen = navigationOpen;\n            this.host.requestUpdate();\n          }\n\n          this._hasInitialized = true;\n        }\n      });\n    }\n  }\n\n  hostDisconnected() {\n    if (this._removeClerkListener) {\n      this._removeClerkListener();\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"],
-  "mappings": ";;;;;AAGO,IAAM,mBAAN,MAAqD;AAAA,EAS1D,YAAY,MAA8B;AAN1C,SAAQ,UAAU;AAElB,SAAQ,kBAAkB;AAKxB,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAAA,EACvC;AAAA,EAEA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,aAAa;AACX,QAAI,CAAC,KAAK,mBAAmB,OAAO,OAAO;AACzC,WAAK,uBAAuB,OAAO,MAAM,YAAY,eAAa;AAChE,cAAM,EAAE,KAAK,IAAI;AACjB,YAAI,QAAQ,CAAC,KAAK,iBAAiB;AACjC,gBAAM,iBACJ,KAAK,gBAAgB,aAAa,IAAI;AAExC,cAAI,mBAAmB,QAAW;AAChC,iBAAK,UAAU;AACf,iBAAK,KAAK,cAAc;AAAA,UAC1B;AAEA,eAAK,kBAAkB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,sBAAsB;AAC7B,WAAK,qBAAqB;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,MAAM,SAAS;AACb,SAAK,UAAU,CAAC,KAAK;AAErB,QAAI,OAAO,OAAO;AAChB,aAAO,MAAM,MAAM,OAAO;AAAA,QACxB,gBAAgB;AAAA,UACd,GAAG,OAAO,MAAM,MAAM;AAAA,UACtB,aAAa;AAAA,YACX,GAAG,OAAO,MAAM,MAAM,gBAAgB;AAAA,YACtC,IAAI;AAAA,cACF,GAAG,OAAO,MAAM,MAAM,gBAAgB,aAAa;AAAA,cACnD,gBAAgB,KAAK;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,KAAK,cAAc;AAAA,EAC1B;AACF;",
-  "names": []
-}

package/src/NavbarController.ts

@@ -1,66 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { UnsubscribeCallback } from '@clerk/types';
-
-export class NavbarController implements ReactiveController {
-  host: ReactiveControllerHost;
-
-  private _isOpen = true;
-
-  private _hasInitialized = false;
-
-  private _removeClerkListener?: UnsubscribeCallback;
-
-  constructor(host: ReactiveControllerHost) {
-    (this.host = host).addController(this);
-  }
-
-  get isOpen() {
-    return this._isOpen;
-  }
-
-  hostUpdate() {
-    if (!this._hasInitialized && window.Clerk) {
-      this._removeClerkListener = window.Clerk.addListener(resources => {
-        const { user } = resources;
-        if (user && !this._hasInitialized) {
-          const navigationOpen =
-            user.unsafeMetadata?.preferences?.ui?.navigationOpen;
-
-          if (navigationOpen !== undefined) {
-            this._isOpen = navigationOpen;
-            this.host.requestUpdate();
-          }
-
-          this._hasInitialized = true;
-        }
-      });
-    }
-  }
-
-  hostDisconnected() {
-    if (this._removeClerkListener) {
-      this._removeClerkListener();
-    }
-  }
-
-  async toggle() {
-    this._isOpen = !this._isOpen;
-
-    if (window.Clerk) {
-      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();
-  }
-}