@triptease/tt-navbar 0.0.33 → 0.0.35

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.33
+* @triptease/tt-navbar v0.0.35
 */
 
 // 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.33",
+  "version": "0.0.35",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -67,14 +67,19 @@ export class TtNavbar extends LitElement {
   }
 
   public connectedCallback() {
-
+    // Listen for browser back/forward navigation
     window.addEventListener('popstate', this.setActiveState);
+
+    // Listen for Tetris programmatic navigation
+    window.addEventListener('tetris:navigate', this.setActiveState);
+
     super.connectedCallback();
   }
 
   public disconnectedCallback() {
-
     window.removeEventListener('popstate', this.setActiveState);
+    window.removeEventListener('tetris:navigate', this.setActiveState);
+
     super.disconnectedCallback();
   }
 
@@ -141,6 +146,12 @@ export class TtNavbar extends LitElement {
     if (bestMatch) {
       bestMatch.classList.add('current-page');
       bestMatch.setAttribute('aria-current', 'page');
+
+      // Auto-expand parent details if the active link is within a collapsible section
+      const parentDetails = bestMatch.closest('details');
+      if (parentDetails) {
+        parentDetails.setAttribute('open', '');
+      }
     } else {
       console.error(`No matching nav link found for path: ${currentPath}`);
     }

package/test/tt-navbar.test.ts

@@ -345,4 +345,39 @@ describe('TtNavbar', () => {
     await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('fit-content');
 
   });
+
+  it('should expand the details when the current page is within that section', async () => {
+    // eslint-disable-next-line no-restricted-globals
+    history.pushState({}, '', `/parity/${CLIENT_KEY}`);
+
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+    );
+
+    const marketInsightsDetails = navbar.shadowRoot!.querySelector('#market-insights') as HTMLDetailsElement;
+
+    expect(marketInsightsDetails).to.exist;
+    expect(marketInsightsDetails.open).to.be.true;
+  })
+
+  it('should set the active route when receives `tetris:navigate` event', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+    );
+    // eslint-disable-next-line no-restricted-globals
+    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`)
+
+
+    // Dispatch the event to change to Channels route
+    const navigateEvent = new CustomEvent('tetris:navigate', {
+    });
+    window.dispatchEvent(navigateEvent);
+
+    await elementUpdated(navbar);
+    const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
+
+    expect(anchor).to.exist;
+    expect(anchor!.textContent).to.include('Booking reconciliation');
+
+  })
 });