@triptease/tt-navbar 0.0.40 → 0.0.41

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.40
+* @triptease/tt-navbar v0.0.41
 */
 
 // 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.40",
+  "version": "0.0.41",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/NavbarController.ts

@@ -5,6 +5,8 @@ export class NavbarController implements ReactiveController {
 
   private _isOpen = true;
 
+  private _hasInitialized = false;
+
   constructor(host: ReactiveControllerHost) {
     (this.host = host).addController(this);
   }
@@ -13,21 +15,21 @@ export class NavbarController implements ReactiveController {
     return this._isOpen;
   }
 
-  hostConnected() {
-    if (window.Clerk) {
+  hostUpdate() {
+    if (!this._hasInitialized && window.Clerk) {
       const userSetting =
         window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
 
       if (userSetting !== undefined) {
         this._isOpen = userSetting;
+        this._hasInitialized = true;
         this.host.requestUpdate();
       }
     }
   }
 
   async toggle() {
-    const newState = !this._isOpen;
-    this._isOpen = newState;
+    this._isOpen = !this._isOpen;
 
     if (window.Clerk) {
       await window.Clerk.user?.update({
@@ -37,7 +39,7 @@ export class NavbarController implements ReactiveController {
             ...window.Clerk.user?.unsafeMetadata?.preferences,
             ui: {
               ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: newState,
+              navigationOpen: this.isOpen,
             },
           },
         },

package/src/TtNavbar.ts

@@ -12,7 +12,7 @@ import {
   logout,
   sidebarCollapsed,
   user,
-  wallet
+  wallet,
 } from '@triptease/icons';
 import '@triptease/tt-combobox';
 import { styles } from './styles.js';
@@ -121,10 +121,11 @@ export class TtNavbar extends LitElement {
       const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');
       const mappedUrl = urlMappings[parsedPath];
       if (mappedUrl) {
-        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY') ? mappedUrl.replace('$CLIENT_KEY', this.clientKey) : mappedUrl;
+        const clientSpecificUrl = mappedUrl.includes('$CLIENT_KEY')
+          ? mappedUrl.replace('$CLIENT_KEY', this.clientKey)
+          : mappedUrl;
         const links = Object.values(this.allNavLinks);
         bestMatch = links.find(link => link.href.includes(clientSpecificUrl));
-        console.log({ mappedUrl, clientSpecificUrl, bestMatch });
       }
     }
 
@@ -392,26 +393,26 @@ export class TtNavbar extends LitElement {
               ${
                 this.clients.length > 1
                   ? html`
-                    <tt-combobox
-                      .openUpward=${true}
-                      .value=${this.clientKey ? [this.clientKey] : []}
-                      @change=${this.handleClientChange}
-                    >
-                      ${this.clients.map(
-                        client => html`
-                          <option slot="option" value=${client.clientKey}>
-                            ${client.displayName}
-                          </option>
-                        `
-                      )}
-                    </tt-combobox>
-                  `
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map(
+                          client => html`
+                            <option slot="option" value=${client.clientKey}>
+                              ${client.displayName}
+                            </option>
+                          `,
+                        )}
+                      </tt-combobox>
+                    `
                   : html`
-                    <div class="single-client-name">
-                      ${this.clients.find(m => m.clientKey === this.clientKey)
-                        ?.displayName}
-                    </div>
-                  `
+                      <div class="single-client-name">
+                        ${this.clients.find(m => m.clientKey === this.clientKey)
+                          ?.displayName}
+                      </div>
+                    `
               }
             </div>
             <a

package/test/tt-navbar.test.ts

@@ -461,6 +461,7 @@ describe('TtNavbar', () => {
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
+    await elementUpdated(navbar);
 
     await expect(timesCalled).to.equal(1);
     expect(calledWith).to.deep.equal({