@triptease/tt-navbar 0.0.22 → 0.0.24

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.22
+* @triptease/tt-navbar v0.0.24
 */
 
 // 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.22",
+  "version": "0.0.24",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -178,6 +178,15 @@ export class TtNavbar extends LitElement {
     }
   };
 
+  private handleClientChange = (e: Event) => {
+    const combobox = e.target as any;
+    const selectedClientKey = combobox.value?.[0];
+
+    if (selectedClientKey && this.onClientChange) {
+      this.onClientChange(selectedClientKey);
+    }
+  };
+
   render() {
     return html`
       <nav id=${this.id} class="${this.sidebarOpen ? '' : 'sidebar-closed'}">
@@ -344,8 +353,8 @@ export class TtNavbar extends LitElement {
               ${this.clients.length > 1 ? html`
                 <tt-combobox
                   .openUpward=${true}
-                  .value=${this.clientKey}
-                  .onChange=${this.onClientChange}
+                  .value=${this.clientKey ? [this.clientKey] : []}
+                  @change=${this.handleClientChange}
                 >
                   ${this.clients.map((client) => html`
                     <option slot="option" value=${client.clientKey}>

package/stories/{index.stories.ts → tt-navbar.stories.ts}

@@ -7,7 +7,8 @@ const meta = {
   argTypes: {
     clientKey: { control: 'text' },
     clients: { control: 'object' },
-    campaignManagerUrl: { control: 'text' }
+    campaignManagerUrl: { control: 'text' },
+    onClientChange: { action: 'clientChanged' }
   }
 };
 
@@ -29,30 +30,38 @@ interface ArgTypes {
   clientKey?: string;
   clients?: Client[];
   campaignManagerUrl?: string;
+  onClientChange: (clientKey: string) => void;
 }
 
 const Template: Story<ArgTypes> = ({
                                      clientKey = 'zxd47KQGAP',
                                      clients = [],
-                                     campaignManagerUrl = 'https://app.campaign-manager.triptease.io'
+                                     campaignManagerUrl = 'https://app.campaign-manager.triptease.io',
+                                     onClientChange
                                    }: ArgTypes) => html`
   <div>
     <tt-navbar
       client-key=${clientKey}
       campaign-manager-url=${campaignManagerUrl}
-      .clients=${clients}
+      clients=${JSON.stringify(clients)}
+      .onClientChange=${onClientChange}
     >
     </tt-navbar>
   </div>
 `;
 
+const clientChangeHandler = (clientKey: string) => {
+  console.log('Client changed to:', clientKey);
+}
+
 export const MultipleClients = Template.bind({});
 MultipleClients.args = {
   clientKey: 'zxd47KQGAP',
   clients: [
     { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
     { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
-  ]
+  ],
+  onClientChange: clientChangeHandler
 };
 
 export const SingleClient = Template.bind({});

package/test/tt-navbar.test.ts

@@ -1,11 +1,5 @@
 import '../src/tt-navbar.js';
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  nextFrame,
-  waitUntil,
-} from '@open-wc/testing';
+import { elementUpdated, expect, fixture, nextFrame, waitUntil } from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
@@ -20,10 +14,20 @@ const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
   return undefined;
 };
 
+const selectComboboxOption = async (combobox: Element, value: string) => {
+  const input = combobox.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
+  input.click();
+
+  await elementUpdated(combobox);
+
+  const option = combobox.shadowRoot!.querySelector(`[role="option"][data-value="${value}"]`) as HTMLLIElement;
+  option.click();
+};
+
 const isVisuallyHidden = (element: Element) => {
   const style = getComputedStyle(element);
 
-  const result =
+  return Boolean(
     style.position === 'absolute' &&
     style.width === '1px' &&
     style.height === '1px' &&
@@ -33,9 +37,8 @@ const isVisuallyHidden = (element: Element) => {
     style.overflow === 'hidden' &&
     style.clip === 'rect(0px, 0px, 0px, 0px)' &&
     style.clipPath === 'inset(50%)' &&
-    style.whiteSpace === 'nowrap';
-
-  return result;
+    style.whiteSpace === 'nowrap'
+  );
 };
 
 const CLIENT_KEY = 'zxd47KQGAP';
@@ -50,7 +53,7 @@ describe('TtNavbar', () => {
   });
   it('should render with the default links', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -77,7 +80,7 @@ describe('TtNavbar', () => {
   it('should render platform URLs against the base URL when it is defined', async () => {
     const platformUrl = 'https://app.triptease.io';
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -98,7 +101,7 @@ describe('TtNavbar', () => {
     };
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
     navbar.navigate = onNavigate;
     await navbar.updateComplete;
@@ -108,17 +111,17 @@ describe('TtNavbar', () => {
 
     await waitUntil(
       () => expect(navigateEventCount).to.equal(13),
-      'navigate event did not fire',
+      'navigate event did not fire'
     );
   });
 
   it('should render a combobox when multiple clients are provided', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
     navbar.clients = [
       { clientKey: CLIENT_KEY, displayName: 'Client One' },
-      { clientKey: 'abc123', displayName: 'Client Two' },
+      { clientKey: 'abc123', displayName: 'Client Two' }
     ];
     await navbar.updateComplete;
 
@@ -127,14 +130,15 @@ describe('TtNavbar', () => {
 
     expect(combobox).to.exist;
     expect(singleClientName).to.not.exist;
+    expect(combobox?.value).to.deep.equal([CLIENT_KEY]);
   });
 
   it('should render the client name when only one client is provided', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
     navbar.clients = [
-      { clientKey: CLIENT_KEY, displayName: 'Single Client' },
+      { clientKey: CLIENT_KEY, displayName: 'Single Client' }
     ];
     await navbar.updateComplete;
 
@@ -148,7 +152,7 @@ describe('TtNavbar', () => {
 
   it('should render the logout link', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
 
     const links = navbar.shadowRoot?.querySelectorAll('a');
@@ -159,7 +163,7 @@ describe('TtNavbar', () => {
 
   it('should close other details when one is being opened', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
 
     const allDetails = navbar.shadowRoot!.querySelectorAll('summary');
@@ -185,11 +189,11 @@ describe('TtNavbar', () => {
 
   it('should collapse the navbar when toggle clicked', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
     );
 
     const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
+      '#navbar-toggle-btn'
     ) as HTMLButtonElement;
 
     navbarToggleBtn.click();
@@ -219,7 +223,7 @@ describe('TtNavbar', () => {
     for (const element of [
       ...rootLinksHiddenElements,
       ...summaryHiddenElements,
-      logoutLink!,
+      logoutLink!
     ]) {
       expect(isVisuallyHidden(element)).to.be.true;
     }
@@ -229,16 +233,16 @@ describe('TtNavbar', () => {
     'market-insights',
     'settings',
     'account',
-    'billing-routes',
+    'billing-routes'
   ];
   collapsibleIds.forEach(id => {
     it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {
       const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
       );
 
       const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-        '#navbar-toggle-btn',
+        '#navbar-toggle-btn'
       ) as HTMLButtonElement;
 
       navbarToggleBtn.click();
@@ -255,7 +259,7 @@ describe('TtNavbar', () => {
       element!.click();
 
       await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {
-        timeout: 500,
+        timeout: 500
       });
     });
   });
@@ -268,7 +272,7 @@ describe('TtNavbar', () => {
     [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
     [`/meta/${CLIENT_KEY}/performance`, 'Channels'],
     [`/chat/insights/${CLIENT_KEY}`, 'Channels'],
-    [`/${CLIENT_KEY}/email`, 'Channels'],
+    [`/${CLIENT_KEY}/email`, 'Channels']
   ];
 
   URLs.forEach(([route, text]) => {
@@ -277,7 +281,7 @@ describe('TtNavbar', () => {
       history.pushState({}, '', route); // 👈 mock URL
 
       const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
       );
 
       const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
@@ -292,10 +296,34 @@ describe('TtNavbar', () => {
     const campaignManagerUrl = 'http://localhost:8000';
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`
     );
     const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
     expect(anchor).to.exist;
     expect(anchor!.textContent).to.include('Campaigns');
   });
+
+  it('should fire an event when the client is changed', async () => {
+    let selectedClientKey: string | undefined;
+    const onClientChange = (clientKey: string) => {
+      selectedClientKey = clientKey;
+    };
+
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+    );
+    navbar.clients = [
+      { clientKey: CLIENT_KEY, displayName: 'Client One' },
+      { clientKey: 'abc123', displayName: 'Client Two' }
+    ];
+    navbar.onClientChange = onClientChange;
+    await navbar.updateComplete;
+
+    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
+    expect(combobox).to.exist;
+
+    await selectComboboxOption(combobox!, 'abc123');
+
+    expect(selectedClientKey).to.equal('abc123');
+  });
 });

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACxC;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAoBpB,MAAM,QAAQ,GAAoB,CAAC,EACE,SAAS,GAAG,YAAY,EACxB,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,2CAA2C,EACvD,EAAE,EAAE,CAAC,IAAI,CAAA;;;mBAGpC,SAAS;6BACC,kBAAkB;iBAC9B,OAAO;;;;CAIvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE;QACP,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE;QACvD,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE;KAC3D;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE;QACP,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE;KACxD;CACF,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/tt-navbar.js';\n\nconst meta = {\n  title: 'TtNavbar',\n  component: 'tt-navbar',\n  argTypes: {\n    clientKey: { control: 'text' },\n    clients: { control: 'object' },\n    campaignManagerUrl: { control: 'text' }\n  }\n};\n\nexport default meta;\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface Client {\n  clientKey: string;\n  displayName: string;\n}\n\ninterface ArgTypes {\n  clientKey?: string;\n  clients?: Client[];\n  campaignManagerUrl?: string;\n}\n\nconst Template: Story<ArgTypes> = ({\n                                     clientKey = 'zxd47KQGAP',\n                                     clients = [],\n                                     campaignManagerUrl = 'https://app.campaign-manager.triptease.io'\n                                   }: ArgTypes) => html`\n  <div>\n    <tt-navbar\n      client-key=${clientKey}\n      campaign-manager-url=${campaignManagerUrl}\n      .clients=${clients}\n    >\n    </tt-navbar>\n  </div>\n`;\n\nexport const MultipleClients = Template.bind({});\nMultipleClients.args = {\n  clientKey: 'zxd47KQGAP',\n  clients: [\n    { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },\n    { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }\n  ]\n};\n\nexport const SingleClient = Template.bind({});\nSingleClient.args = {\n  clientKey: 'zxd47KQGAP',\n  clients: [\n    { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }\n  ]\n};\n"]}