@triptease/tt-navbar 0.0.21 → 0.0.22

package/README.md

@@ -15,7 +15,56 @@ npm i tt-navbar
   import 'tt-navbar/tt-navbar.js';
 </script>
 
-<tt-navbar></tt-navbar>
+<tt-navbar
+  client-key="your-client-key"
+  platform-url="https://localhost.triptease.io:3500"
+></tt-navbar>
+```
+
+### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `client-key` | `string` | The client key identifier |
+| `platform-url` | `string` | Base URL for the platform |
+| `campaign-manager-url` | `string` | Campaign manager URL |
+| `active-route` | `string` | The currently active route |
+| `clients` | `Array<{clientKey: string, displayName: string}>` | Array of client objects for multi-client selector |
+| `navigate` | `Function` | Custom navigation handler function |
+| `onClientChange` | `Function` | Callback function that receives the selected client key as a string when the client selection changes |
+
+### Multi-Client Selector
+
+When multiple clients are provided, the navbar will display a combobox selector:
+
+```javascript
+const navbar = document.querySelector('tt-navbar');
+
+// Pass clients as a property
+navbar.clients = [
+  { clientKey: 'client1', displayName: 'Client One' },
+  { clientKey: 'client2', displayName: 'Client Two' }
+];
+
+// Handle client change - typically you would redirect the user to the new client
+navbar.onClientChange = (selectedClientKey) => {
+  // Update the URL to reflect the new client
+  window.location.href = `/home/${selectedClientKey}`;
+
+  // Or use your router's navigation method
+  // router.navigate(`/home/${selectedClientKey}`);
+};
+```
+
+**Note:** When a user changes the selected client, you typically want to redirect them to the same page/route but for the new client context.
+
+Alternatively, you can pass clients as a JSON string attribute:
+
+```html
+<tt-navbar
+  client-key="client1"
+  clients='[{"clientKey":"client1","displayName":"Client One"},{"clientKey":"client2","displayName":"Client Two"}]'
+></tt-navbar>
 ```
 
 ## Linting and formatting

package/dist/src/TtNavbar.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '@triptease/tt-combobox';
 import { Routes } from './Routes.js';
 export declare class TtNavbar extends LitElement {
     static styles: import("lit").CSSResult;
@@ -7,6 +8,11 @@ export declare class TtNavbar extends LitElement {
     platformUrl?: string;
     clientKey?: string;
     activeRoute?: keyof typeof Routes;
+    clients: {
+        clientKey: string;
+        displayName: string;
+    }[];
+    onClientChange: ((clientKeySelected: string) => void) | undefined;
     protected allDetailsElements: Array<HTMLDetailsElement>;
     protected allNavLinks: Array<HTMLAnchorElement>;
     private sidebarOpen;

package/dist/src/TtNavbar.js

@@ -2,15 +2,27 @@ import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { property, queryAll, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { campaigns, channels, chevronDown, gear, graph, home, logout, user, wallet, external, sidebarCollapsed, } from '@triptease/icons';
+import { campaigns, channels, chevronDown, external, gear, graph, home, logout, sidebarCollapsed, user, wallet } from '@triptease/icons';
+import '@triptease/tt-combobox';
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
 import { Routes } from './Routes.js';
+const jsonArrayConverter = (value) => {
+    if (!value)
+        return [];
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return [];
+    }
+};
 export class TtNavbar extends LitElement {
     constructor() {
         super(...arguments);
         this.campaignManagerUrl = 'https://app.campaign-manager.triptease.io';
+        this.clients = [];
         this.sidebarOpen = true;
         /*
          * Set the active state for the current page.
@@ -276,7 +288,25 @@ export class TtNavbar extends LitElement {
             <hr />
           </div>
           <div class='nav-items'>
-            <slot id="client-selector" name="clientSelector"></slot>
+            <div id="client-selector">
+              ${this.clients.length > 1 ? html `
+                <tt-combobox
+                  .openUpward=${true}
+                  .value=${this.clientKey}
+                  .onChange=${this.onClientChange}
+                >
+                  ${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>
             <a
               id="logout-link"
               class="nav-item"
@@ -284,7 +314,6 @@ export class TtNavbar extends LitElement {
               @click=${this.onAnchorClick}
             >${unsafeSVG(logout)}<span>Logout</span></a>
           </div>
-          <div>
       </nav>
     `;
     }
@@ -305,6 +334,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'active-route' })
 ], TtNavbar.prototype, "activeRoute", void 0);
+__decorate([
+    property({ type: Array, converter: jsonArrayConverter })
+], TtNavbar.prototype, "clients", void 0);
+__decorate([
+    property({ type: Object })
+], TtNavbar.prototype, "onClientChange", void 0);
 __decorate([
     queryAll('details')
 ], TtNavbar.prototype, "allDetailsElements", void 0);

package/dist/src/TtNavbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport {\n  campaigns,\n  channels,\n  chevronDown,\n  gear,\n  graph,\n  home,\n  logout,\n  user,\n  wallet,\n  external,\n  sidebarCollapsed,\n} from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { tripteaseLogo } from './triptease-logo.js';\nimport { urlMappings } from './urlMappings.js';\nimport { Routes } from './Routes.js';\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'campaign-manager-url' })\n  campaignManagerUrl: string = 'https://app.campaign-manager.triptease.io';\n\n  @property({ type: String, attribute: 'platform-url' })\n  platformUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  @property({ type: String, attribute: 'active-route' })\n  activeRoute?: keyof typeof Routes;\n\n  @queryAll('details')\n  protected allDetailsElements!: Array<HTMLDetailsElement>;\n\n  @queryAll('a')\n  protected allNavLinks!: Array<HTMLAnchorElement>;\n\n  @state()\n  private sidebarOpen = true;\n\n  protected firstUpdated() {\n    this.setActiveState();\n  }\n\n  /*\n   * Set the active state for the current page.\n   *\n   * This function iterates over all nav links and compares the current URL path with the href of each link.\n   * If the current URL path starts with the href of a link, the link is marked as active. If multiple links\n   * share the same prefix, the longest prefix is used as it is more specific.\n   *\n   * Example:\n   * - Current URL: /channels/123\n   * - Nav links:\n   *   - /channels\n   *   - /channels/123\n   *   - /channels/456\n   *\n   * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels\n   * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123\n   * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123\n   * Result: /channels/123 is marked as active\n   *\n   */\n  private setActiveState = () => {\n    const currentPath = window.location.pathname;\n\n    let bestMatch: HTMLAnchorElement | undefined;\n    let bestMatchLength = 0;\n\n    // Check special cases first, as everything will always match on / and return Dashboard\n    if (this.activeRoute === Routes.CampaignManager) {\n      const links = Object.values(this.allNavLinks);\n      bestMatch = links.find(link => link.id === Routes.CampaignManager);\n    }\n\n    if (!bestMatch && this.clientKey) {\n      const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');\n      const mappedUrl = urlMappings[parsedPath];\n\n      if (mappedUrl) {\n        const links = Object.values(this.allNavLinks);\n        bestMatch = links.find(link => link.href.includes(mappedUrl));\n      }\n    }\n\n    if (!bestMatch) {\n      for (const link of this.allNavLinks) {\n        link.classList.remove('current-page');\n        if (link.hasAttribute('aria-current')) {\n          link.attributes.removeNamedItem('aria-current');\n        }\n\n        const linkPath = new URL(link.href).pathname;\n\n        if (currentPath.startsWith(linkPath)) {\n          if (linkPath.length > bestMatchLength) {\n            bestMatch = link;\n            bestMatchLength = linkPath.length;\n          }\n        }\n      }\n    }\n\n    if (bestMatch) {\n      bestMatch.classList.add('current-page');\n      bestMatch.setAttribute('aria-current', 'page');\n    } else {\n      console.error(`No matching nav link found for path: ${currentPath}`);\n    }\n  };\n\n  private closeAllDetails = (element?: HTMLDetailsElement) => {\n    this.allDetailsElements.forEach(detail => {\n      if (element && !detail.contains(element)) {\n        detail.removeAttribute('open');\n      } else if (!element) {\n        detail.removeAttribute('open');\n      }\n    });\n  };\n\n  private toggleSidebar = () => {\n    this.closeAllDetails();\n    this.sidebarOpen = !this.sidebarOpen;\n  };\n\n  private handleToggle = (e: ToggleEvent) => {\n    const { newState } = e;\n    const target = e.currentTarget as HTMLDetailsElement;\n\n    if (newState === 'open') {\n      if (!this.sidebarOpen) {\n        this.sidebarOpen = true;\n      }\n\n      this.closeAllDetails(target);\n    }\n  };\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.platformUrl) return formattedPath;\n\n    return new URL(formattedPath, this.platformUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n      this.setActiveState();\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id} class=\"${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n        <div class=\"sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div class=\"logo\">\n            ${unsafeSVG(tripteaseLogo)}\n          </div>\n          <button id=\"navbar-toggle-btn\" class=\"nav-item nav-toggle-button\" @click=${this.toggleSidebar}>\n            ${unsafeSVG(sidebarCollapsed)}\n            <span class=\"tooltip nav-toggle-tooltip\">\n              ${unsafeSVG(sidebarCollapsed)}\n              <span>Collapse sidebar</span>\n            </span>\n          </button>\n        </div>\n\n        <div class=\"nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(home)}<span>Dashboard</span></a\n          >\n          <a id=\"${Routes.CampaignManager}\" class=\"nav-item\" href=${this.campaignManagerUrl}\n          >${unsafeSVG(campaigns)}<span>Campaigns</span></a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/channels')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(channels)}<span>Channels</span></a\n          >\n          <details id=\"market-insights\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(graph)}\n              <span>Market Insights</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/parity/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Parity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details id=\"settings\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(gear)}\n              <span>Settings</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n                @click=${this.onAnchorClick}\n              >Email setup</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n                @click=${this.onAnchorClick}\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}\n                @click=${this.onAnchorClick}\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}\n                @click=${this.onAnchorClick}\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details id=\"account\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(user)}\n              <span>Account</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account')}\n                @click=${this.onAnchorClick}\n              >User settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details id=\"billing-routes\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <div class=\"tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div id=\"external-links\" class=\"nav-items\">\n            <a\n              class=\"nav-item external-link\"\n              href='https://triptease.canny.io/feature-requests'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Feature requests\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://triptease.canny.io/changelog'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Product updates\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://help.triptease.com/'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Help center\n              ${unsafeSVG(external)}\n            </a>\n            <hr />\n          </div>\n          <div class='nav-items'>\n            <slot id=\"client-selector\" name=\"clientSelector\"></slot>\n            <a\n              id=\"logout-link\"\n              class=\"nav-item\"\n              href=${this.buildUrl('/logout')}\n              @click=${this.onAnchorClick}\n            >${unsafeSVG(logout)}<span>Logout</span></a>\n          </div>\n          <div>\n      </nav>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport {\n  campaigns,\n  channels,\n  chevronDown,\n  external,\n  gear,\n  graph,\n  home,\n  logout,\n  sidebarCollapsed,\n  user,\n  wallet\n} from '@triptease/icons';\nimport '@triptease/tt-combobox';\nimport { styles } from './styles.js';\nimport { tripteaseLogo } from './triptease-logo.js';\nimport { urlMappings } from './urlMappings.js';\nimport { Routes } from './Routes.js';\n\nconst jsonArrayConverter = (value: string | null) => {\n  if (!value) return [];\n  try {\n    return JSON.parse(value);\n  } catch {\n    return [];\n  }\n};\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'campaign-manager-url' })\n  campaignManagerUrl: string = 'https://app.campaign-manager.triptease.io';\n\n  @property({ type: String, attribute: 'platform-url' })\n  platformUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  @property({ type: String, attribute: 'active-route' })\n  activeRoute?: keyof typeof Routes;\n\n  @property({ type: Array, converter: jsonArrayConverter })\n  clients: { clientKey: string; displayName: string }[] = [];\n\n  @property({ type: Object })\n  onClientChange: ((clientKeySelected: string) => void ) | undefined;\n\n  @queryAll('details')\n  protected allDetailsElements!: Array<HTMLDetailsElement>;\n\n  @queryAll('a')\n  protected allNavLinks!: Array<HTMLAnchorElement>;\n\n  @state()\n  private sidebarOpen = true;\n\n  protected firstUpdated() {\n    this.setActiveState();\n  }\n\n  /*\n   * Set the active state for the current page.\n   *\n   * This function iterates over all nav links and compares the current URL path with the href of each link.\n   * If the current URL path starts with the href of a link, the link is marked as active. If multiple links\n   * share the same prefix, the longest prefix is used as it is more specific.\n   *\n   * Example:\n   * - Current URL: /channels/123\n   * - Nav links:\n   *   - /channels\n   *   - /channels/123\n   *   - /channels/456\n   *\n   * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels\n   * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123\n   * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123\n   * Result: /channels/123 is marked as active\n   *\n   */\n  private setActiveState = () => {\n    const currentPath = window.location.pathname;\n\n    let bestMatch: HTMLAnchorElement | undefined;\n    let bestMatchLength = 0;\n\n    // Check special cases first, as everything will always match on / and return Dashboard\n    if (this.activeRoute === Routes.CampaignManager) {\n      const links = Object.values(this.allNavLinks);\n      bestMatch = links.find(link => link.id === Routes.CampaignManager);\n    }\n\n    if (!bestMatch && this.clientKey) {\n      const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');\n      const mappedUrl = urlMappings[parsedPath];\n\n      if (mappedUrl) {\n        const links = Object.values(this.allNavLinks);\n        bestMatch = links.find(link => link.href.includes(mappedUrl));\n      }\n    }\n\n    if (!bestMatch) {\n      for (const link of this.allNavLinks) {\n        link.classList.remove('current-page');\n        if (link.hasAttribute('aria-current')) {\n          link.attributes.removeNamedItem('aria-current');\n        }\n\n        const linkPath = new URL(link.href).pathname;\n\n        if (currentPath.startsWith(linkPath)) {\n          if (linkPath.length > bestMatchLength) {\n            bestMatch = link;\n            bestMatchLength = linkPath.length;\n          }\n        }\n      }\n    }\n\n    if (bestMatch) {\n      bestMatch.classList.add('current-page');\n      bestMatch.setAttribute('aria-current', 'page');\n    } else {\n      console.error(`No matching nav link found for path: ${currentPath}`);\n    }\n  };\n\n  private closeAllDetails = (element?: HTMLDetailsElement) => {\n    this.allDetailsElements.forEach(detail => {\n      if (element && !detail.contains(element)) {\n        detail.removeAttribute('open');\n      } else if (!element) {\n        detail.removeAttribute('open');\n      }\n    });\n  };\n\n  private toggleSidebar = () => {\n    this.closeAllDetails();\n    this.sidebarOpen = !this.sidebarOpen;\n  };\n\n  private handleToggle = (e: ToggleEvent) => {\n    const { newState } = e;\n    const target = e.currentTarget as HTMLDetailsElement;\n\n    if (newState === 'open') {\n      if (!this.sidebarOpen) {\n        this.sidebarOpen = true;\n      }\n\n      this.closeAllDetails(target);\n    }\n  };\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.platformUrl) return formattedPath;\n\n    return new URL(formattedPath, this.platformUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n      this.setActiveState();\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id} class=\"${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n        <div class=\"sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div class=\"logo\">\n            ${unsafeSVG(tripteaseLogo)}\n          </div>\n          <button id=\"navbar-toggle-btn\" class=\"nav-item nav-toggle-button\" @click=${this.toggleSidebar}>\n            ${unsafeSVG(sidebarCollapsed)}\n            <span class=\"tooltip nav-toggle-tooltip\">\n              ${unsafeSVG(sidebarCollapsed)}\n              <span>Collapse sidebar</span>\n            </span>\n          </button>\n        </div>\n\n        <div class=\"nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(home)}<span>Dashboard</span></a\n          >\n          <a id=\"${Routes.CampaignManager}\" class=\"nav-item\" href=${this.campaignManagerUrl}\n          >${unsafeSVG(campaigns)}<span>Campaigns</span></a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/channels')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(channels)}<span>Channels</span></a\n          >\n          <details id=\"market-insights\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(graph)}\n              <span>Market Insights</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/parity/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Parity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details id=\"settings\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(gear)}\n              <span>Settings</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n                @click=${this.onAnchorClick}\n              >Email setup</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n                @click=${this.onAnchorClick}\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}\n                @click=${this.onAnchorClick}\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}\n                @click=${this.onAnchorClick}\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details id=\"account\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(user)}\n              <span>Account</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account')}\n                @click=${this.onAnchorClick}\n              >User settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details id=\"billing-routes\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <div class=\"tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div id=\"external-links\" class=\"nav-items\">\n            <a\n              class=\"nav-item external-link\"\n              href='https://triptease.canny.io/feature-requests'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Feature requests\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://triptease.canny.io/changelog'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Product updates\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://help.triptease.com/'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Help center\n              ${unsafeSVG(external)}\n            </a>\n            <hr />\n          </div>\n          <div class='nav-items'>\n            <div id=\"client-selector\">\n              ${this.clients.length > 1 ? html`\n                <tt-combobox\n                  .openUpward=${true}\n                  .value=${this.clientKey}\n                  .onChange=${this.onClientChange}\n                >\n                  ${this.clients.map((client) => html`\n                    <option slot=\"option\" value=${client.clientKey}>\n                      ${client.displayName}\n                    </option>\n                  `)}\n                </tt-combobox>\n              ` : html`\n                <div class=\"single-client-name\">\n                  ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}\n                </div>\n              `}\n            </div>\n            <a\n              id=\"logout-link\"\n              class=\"nav-item\"\n              href=${this.buildUrl('/logout')}\n              @click=${this.onAnchorClick}\n            >${unsafeSVG(logout)}<span>Logout</span></a>\n          </div>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/src/styles.js

@@ -105,8 +105,8 @@ export const styles = css `
 
     .tertiary-nav.sidebar-closed {
       .external-link,
-      slot,
-      hr {
+      hr,
+      #client-selector {
         display: none;
         visibility: hidden;
       }
@@ -334,5 +334,30 @@ export const styles = css `
     visibility: visible;
     opacity: 1;
   }
+
+  #client-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  #client-selector tt-combobox {
+    --tt-combobox-color: var(--color-text-inverted-400);
+    --tt-combobox-dropdown-color: var(--color-text-inverted-400);
+    --tt-combobox-list-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);
+    --tt-combobox-placeholder-color: var(--color-text-inverted-300);
+    --tt-combobox-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);
+    --tt-combobox-list-max-width: 80ch;
+    --tt-combobox-min-width: 244px;
+    --tt-combobox-max-width: 244px;
+  }
+
+  .single-client-name {
+    height: 39px;
+    padding: var(--space-scale-1); /* match tt-combobox height */
+    font-size: var(--font-size-100);
+    color: var(--color-text-inverted-400);
+  }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAoCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8N1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n`;\n\nexport const styles = css`\n  :host {\n    --nav-bar-width: 260px;\n\n    display: block;\n    height: 100vh;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  nav {\n    max-width: var(--nav-bar-width);\n    width: var(--nav-bar-width);\n    min-height: 100vh;\n    height: max-content;\n    display: flex;\n    align-items: start;\n    gap: var(--space-scale-3-5);\n    flex-direction: column;\n    background-color: var(--color-surface-inverted-100);\n    color: var(--color-text-inverted-400);\n    padding-top: var(--space-scale-2);\n    padding-bottom: var(--space-scale-2);\n    z-index: 1;\n\n    .nav-items {\n      display: flex;\n      flex-direction: column;\n      padding: 0 var(--space-scale-1);\n      width: 100%;\n    }\n\n    .nav-items.sidebar-closed {\n      a span {\n        ${visuallyHiddenCss}\n      }\n\n      details summary span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .sidebar-header {\n      width: 100%;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      justify-content: center;\n      padding: 0 var(--space-scale-2);\n\n      button {\n        background-color: transparent;\n        color: var(--color-text-inverted-400);\n        border: none;\n      }\n    }\n\n    .sidebar-header.sidebar-closed {\n      padding: 0 var(--space-scale-1);\n      .logo {\n        display: none;\n        visibility: hidden;\n      }\n    }\n\n    hr {\n      width: 100%;\n      height: 1px;\n      background-color: var(--color-surface-inverted-200);\n      border: none;\n    }\n\n    .tertiary-nav {\n      display: flex;\n      flex-direction: column;\n      margin-top: auto;\n      gap: var(--space-scale-2);\n      width: 100%;\n\n      .external-link {\n        font-size: var(--font-size-100);\n        line-height: var(--font-line-height-100);\n\n        .icon {\n          width: var(--space-scale-2);\n          height: var(--space-scale-2);\n        }\n      }\n    }\n\n    .tertiary-nav.sidebar-closed {\n      .external-link,\n      slot,\n      hr {\n        display: none;\n        visibility: hidden;\n      }\n\n      a span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      width: var(--space-scale-3);\n      height: var(--space-scale-3);\n      color: var(--nav-item-color);\n    }\n\n    .nav-item {\n      display: flex;\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      gap: var(--space-scale-1-5);\n      border-radius: var(--border-radius-100);\n      color: var(--nav-item-color);\n      align-items: center;\n      padding: var(--space-scale-1);\n      width: 100%;\n      text-decoration: none;\n    }\n  }\n\n  nav.sidebar-closed {\n    width: fit-content;\n  }\n\n  details {\n    border-radius: var(--border-radius-100);\n\n    summary {\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      position: relative;\n      display: flex;\n      align-items: baseline;\n\n      &::marker {\n        content: '';\n      }\n    }\n\n    .chevron {\n      margin-left: auto;\n      margin-right: var(--space-scale-1);\n      width: var(--space-scale-2);\n    }\n\n    &[open] .chevron {\n      transform: rotate(180deg);\n    }\n\n    .dropdown-items {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  details > summary {\n    display: flex;\n    gap: var(--space-scale-1-5);\n    padding: var(--space-scale-1);\n    border-radius: var(--border-radius-100);\n    color: var(--nav-item-color);\n    align-items: center;\n\n    a {\n      color: var(--nav-item-color);\n    }\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--color-surface-inverted-200);\n      border-radius: var(--border-radius-100);\n      text-decoration: none;\n    }\n  }\n\n  .sub-nav-item {\n    width: 100%;\n    display: flex;\n    padding-left: 44px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n    color: var(--color-text-inverted-400);\n    font-size: var(--font-size-100);\n    line-height: var(--font-line-height-100);\n    text-decoration: none;\n\n    button {\n      color: var(--color-text-inverted-400);\n      padding: 0;\n    }\n  }\n\n  .sub-nav-item:hover,\n  .sub-nav-item:focus-visible,\n  .nav-item:hover,\n  .nav-item:focus-visible {\n    background-color: var(--color-surface-inverted-200);\n    border-radius: var(--border-radius-100);\n    text-decoration: none;\n    color: var(--color-text-inverted-400);\n\n    .icon {\n      color: var(--color-text-inverted-400);\n    }\n  }\n\n  .current-page {\n    --nav-item-color: var(--color-primary-400);\n    border-radius: var(--border-radius-100);\n    background-color: var(--color-primary-100);\n    color: var(--nav-item-color);\n  }\n\n  .link-page {\n    display: flex;\n    position: absolute;\n    overflow: auto;\n    flex-direction: column;\n    gap: var(--space-scale-4);\n    padding: var(--space-scale-5);\n    left: var(--nav-bar-width);\n    background-color: var(--color-surface-200);\n    width: calc(100% - var(--nav-bar-width));\n    height: 100%;\n    transition-property: left, visibility;\n    transition-duration: 700ms, 400ms;\n    transition-timing-function: ease-out, ease-in;\n\n    &.hidden {\n      left: -100%;\n      visibility: hidden;\n    }\n  }\n\n  .link-page > .section {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-scale-2);\n  }\n\n  .section > .links-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--space-scale-3);\n    overflow-y: auto;\n    height: 100%;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .tooltip {\n    position: absolute;\n    display: flex;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--space-scale-1);\n    color: black;\n    background-color: var(--color-surface-600);\n    padding: var(--space-scale-1);\n    z-index: 1000;\n    border-radius: var(--border-radius-50);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .auth-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100vh;\n  }\n\n  .error-container {\n    padding: 4rem 1rem 1rem;\n    max-width: 1280px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .error-stack {\n    width: 100%;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  .fullscreen-iframe {\n    width: 100%;\n    height: 100vh;\n    border: 0;\n  }\n\n  .nav-toggle-button {\n    position: relative;\n  }\n\n  .nav-toggle-tooltip {\n    left: 100%;\n    top: 100%;\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  .nav-toggle-button:hover .nav-toggle-tooltip {\n    visibility: visible;\n    opacity: 1;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAoCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuP1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n`;\n\nexport const styles = css`\n  :host {\n    --nav-bar-width: 260px;\n\n    display: block;\n    height: 100vh;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  nav {\n    max-width: var(--nav-bar-width);\n    width: var(--nav-bar-width);\n    min-height: 100vh;\n    height: max-content;\n    display: flex;\n    align-items: start;\n    gap: var(--space-scale-3-5);\n    flex-direction: column;\n    background-color: var(--color-surface-inverted-100);\n    color: var(--color-text-inverted-400);\n    padding-top: var(--space-scale-2);\n    padding-bottom: var(--space-scale-2);\n    z-index: 1;\n\n    .nav-items {\n      display: flex;\n      flex-direction: column;\n      padding: 0 var(--space-scale-1);\n      width: 100%;\n    }\n\n    .nav-items.sidebar-closed {\n      a span {\n        ${visuallyHiddenCss}\n      }\n\n      details summary span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .sidebar-header {\n      width: 100%;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      justify-content: center;\n      padding: 0 var(--space-scale-2);\n\n      button {\n        background-color: transparent;\n        color: var(--color-text-inverted-400);\n        border: none;\n      }\n    }\n\n    .sidebar-header.sidebar-closed {\n      padding: 0 var(--space-scale-1);\n      .logo {\n        display: none;\n        visibility: hidden;\n      }\n    }\n\n    hr {\n      width: 100%;\n      height: 1px;\n      background-color: var(--color-surface-inverted-200);\n      border: none;\n    }\n\n    .tertiary-nav {\n      display: flex;\n      flex-direction: column;\n      margin-top: auto;\n      gap: var(--space-scale-2);\n      width: 100%;\n\n      .external-link {\n        font-size: var(--font-size-100);\n        line-height: var(--font-line-height-100);\n\n        .icon {\n          width: var(--space-scale-2);\n          height: var(--space-scale-2);\n        }\n      }\n    }\n\n    .tertiary-nav.sidebar-closed {\n      .external-link,\n      hr,\n      #client-selector {\n        display: none;\n        visibility: hidden;\n      }\n\n      a span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      width: var(--space-scale-3);\n      height: var(--space-scale-3);\n      color: var(--nav-item-color);\n    }\n\n    .nav-item {\n      display: flex;\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      gap: var(--space-scale-1-5);\n      border-radius: var(--border-radius-100);\n      color: var(--nav-item-color);\n      align-items: center;\n      padding: var(--space-scale-1);\n      width: 100%;\n      text-decoration: none;\n    }\n  }\n\n  nav.sidebar-closed {\n    width: fit-content;\n  }\n\n  details {\n    border-radius: var(--border-radius-100);\n\n    summary {\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      position: relative;\n      display: flex;\n      align-items: baseline;\n\n      &::marker {\n        content: '';\n      }\n    }\n\n    .chevron {\n      margin-left: auto;\n      margin-right: var(--space-scale-1);\n      width: var(--space-scale-2);\n    }\n\n    &[open] .chevron {\n      transform: rotate(180deg);\n    }\n\n    .dropdown-items {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  details > summary {\n    display: flex;\n    gap: var(--space-scale-1-5);\n    padding: var(--space-scale-1);\n    border-radius: var(--border-radius-100);\n    color: var(--nav-item-color);\n    align-items: center;\n\n    a {\n      color: var(--nav-item-color);\n    }\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--color-surface-inverted-200);\n      border-radius: var(--border-radius-100);\n      text-decoration: none;\n    }\n  }\n\n  .sub-nav-item {\n    width: 100%;\n    display: flex;\n    padding-left: 44px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n    color: var(--color-text-inverted-400);\n    font-size: var(--font-size-100);\n    line-height: var(--font-line-height-100);\n    text-decoration: none;\n\n    button {\n      color: var(--color-text-inverted-400);\n      padding: 0;\n    }\n  }\n\n  .sub-nav-item:hover,\n  .sub-nav-item:focus-visible,\n  .nav-item:hover,\n  .nav-item:focus-visible {\n    background-color: var(--color-surface-inverted-200);\n    border-radius: var(--border-radius-100);\n    text-decoration: none;\n    color: var(--color-text-inverted-400);\n\n    .icon {\n      color: var(--color-text-inverted-400);\n    }\n  }\n\n  .current-page {\n    --nav-item-color: var(--color-primary-400);\n    border-radius: var(--border-radius-100);\n    background-color: var(--color-primary-100);\n    color: var(--nav-item-color);\n  }\n\n  .link-page {\n    display: flex;\n    position: absolute;\n    overflow: auto;\n    flex-direction: column;\n    gap: var(--space-scale-4);\n    padding: var(--space-scale-5);\n    left: var(--nav-bar-width);\n    background-color: var(--color-surface-200);\n    width: calc(100% - var(--nav-bar-width));\n    height: 100%;\n    transition-property: left, visibility;\n    transition-duration: 700ms, 400ms;\n    transition-timing-function: ease-out, ease-in;\n\n    &.hidden {\n      left: -100%;\n      visibility: hidden;\n    }\n  }\n\n  .link-page > .section {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-scale-2);\n  }\n\n  .section > .links-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--space-scale-3);\n    overflow-y: auto;\n    height: 100%;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .tooltip {\n    position: absolute;\n    display: flex;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--space-scale-1);\n    color: black;\n    background-color: var(--color-surface-600);\n    padding: var(--space-scale-1);\n    z-index: 1000;\n    border-radius: var(--border-radius-50);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .auth-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100vh;\n  }\n\n  .error-container {\n    padding: 4rem 1rem 1rem;\n    max-width: 1280px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .error-stack {\n    width: 100%;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  .fullscreen-iframe {\n    width: 100%;\n    height: 100vh;\n    border: 0;\n  }\n\n  .nav-toggle-button {\n    position: relative;\n  }\n\n  .nav-toggle-tooltip {\n    left: 100%;\n    top: 100%;\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  .nav-toggle-button:hover .nav-toggle-tooltip {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  #client-selector {\n    display: flex;\n    align-items: center;\n  }\n\n  #client-selector tt-combobox {\n    --tt-combobox-color: var(--color-text-inverted-400);\n    --tt-combobox-dropdown-color: var(--color-text-inverted-400);\n    --tt-combobox-list-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);\n    --tt-combobox-placeholder-color: var(--color-text-inverted-300);\n    --tt-combobox-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);\n    --tt-combobox-list-max-width: 80ch;\n    --tt-combobox-min-width: 244px;\n    --tt-combobox-max-width: 244px;\n  }\n\n  .single-client-name {\n    height: 39px;\n    padding: var(--space-scale-1); /* match tt-combobox height */\n    font-size: var(--font-size-100);\n    color: var(--color-text-inverted-400);\n  }\n`;\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,7 +1,34 @@
+import { TemplateResult } from 'lit';
 import '../src/tt-navbar.js';
-declare const _default: {
+declare const meta: {
     title: string;
     component: string;
+    argTypes: {
+        clientKey: {
+            control: string;
+        };
+        clients: {
+            control: string;
+        };
+        campaignManagerUrl: {
+            control: string;
+        };
+    };
 };
-export default _default;
-export declare const Regular: () => import("lit-html").TemplateResult<1>;
+export default meta;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface Client {
+    clientKey: string;
+    displayName: string;
+}
+interface ArgTypes {
+    clientKey?: string;
+    clients?: Client[];
+    campaignManagerUrl?: string;
+}
+export declare const MultipleClients: Story<ArgTypes>;
+export declare const SingleClient: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -1,20 +1,38 @@
 import { html } from 'lit';
 import '../src/tt-navbar.js';
-export default {
+const meta = {
     title: 'TtNavbar',
     component: 'tt-navbar',
+    argTypes: {
+        clientKey: { control: 'text' },
+        clients: { control: 'object' },
+        campaignManagerUrl: { control: 'text' }
+    }
 };
-const Template = () => html `
+export default meta;
+const Template = ({ clientKey = 'zxd47KQGAP', clients = [], campaignManagerUrl = 'https://app.campaign-manager.triptease.io' }) => html `
   <div>
     <tt-navbar
-      client-key="zxd47KQGAP"
-      campaign-manager-url="https://app.campaign-manager.triptease.io"
+      client-key=${clientKey}
+      campaign-manager-url=${campaignManagerUrl}
+      .clients=${clients}
     >
-      <div slot="clientSelector">
-        <p>My Cool Client Selector</p>
-      </div>
     </tt-navbar>
   </div>
 `;
-export const Regular = Template.bind({});
+export const MultipleClients = Template.bind({});
+MultipleClients.args = {
+    clientKey: 'zxd47KQGAP',
+    clients: [
+        { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
+        { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
+    ]
+};
+export const SingleClient = Template.bind({});
+SingleClient.args = {
+    clientKey: 'zxd47KQGAP',
+    clients: [
+        { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }
+    ]
+};
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;CACvB,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;CAW1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport '../src/tt-navbar.js';\n\nexport default {\n  title: 'TtNavbar',\n  component: 'tt-navbar',\n};\n\nconst Template = () => html`\n  <div>\n    <tt-navbar\n      client-key=\"zxd47KQGAP\"\n      campaign-manager-url=\"https://app.campaign-manager.triptease.io\"\n    >\n      <div slot=\"clientSelector\">\n        <p>My Cool Client Selector</p>\n      </div>\n    </tt-navbar>\n  </div>\n`;\n\nexport const Regular = Template.bind({});\n"]}
+{"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"]}

package/dist/test/tt-navbar.test.js

@@ -80,10 +80,29 @@ describe('TtNavbar', () => {
         links?.forEach(l => l.click());
         await waitUntil(() => expect(navigateEventCount).to.equal(13), 'navigate event did not fire');
     });
-    it('should render the given client selector', async () => {
-        const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`);
-        const clientSelector = navbar.querySelector('#myCoolClientSelector');
-        expect(clientSelector).to.exist;
+    it('should render a combobox when multiple clients are provided', async () => {
+        const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
+        navbar.clients = [
+            { clientKey: CLIENT_KEY, displayName: 'Client One' },
+            { clientKey: 'abc123', displayName: 'Client Two' },
+        ];
+        await navbar.updateComplete;
+        const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
+        const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+        expect(combobox).to.exist;
+        expect(singleClientName).to.not.exist;
+    });
+    it('should render the client name when only one client is provided', async () => {
+        const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
+        navbar.clients = [
+            { clientKey: CLIENT_KEY, displayName: 'Single Client' },
+        ];
+        await navbar.updateComplete;
+        const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+        const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
+        expect(singleClientName).to.exist;
+        expect(singleClientName?.textContent?.trim()).to.equal('Single Client');
+        expect(combobox).to.not.exist;
     });
     it('should render the logout link', async () => {
         const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);

package/dist/test/tt-navbar.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/tt-navbar.js';\nimport {\n  elementUpdated,\n  expect,\n  fixture,\n  nextFrame,\n  waitUntil,\n} from '@open-wc/testing';\nimport { TtNavbar } from '../src/index.js';\nimport { Routes } from '../src/Routes.js';\n\n// eslint-disable-next-line no-undef\nconst getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {\n  for (const link of links) {\n    if (link.getAttribute('href') === href) {\n      return link;\n    }\n  }\n\n  return undefined;\n};\n\nconst isVisuallyHidden = (element: Element) => {\n  const style = getComputedStyle(element);\n\n  const result =\n    style.position === 'absolute' &&\n    style.width === '1px' &&\n    style.height === '1px' &&\n    style.margin === '-1px' &&\n    style.padding === '0px' &&\n    style.borderWidth === '0px' &&\n    style.overflow === 'hidden' &&\n    style.clip === 'rect(0px, 0px, 0px, 0px)' &&\n    style.clipPath === 'inset(50%)' &&\n    style.whiteSpace === 'nowrap';\n\n  return result;\n};\n\nconst CLIENT_KEY = 'zxd47KQGAP';\n\ndescribe('TtNavbar', () => {\n  it('should throw an error if the clientKey is not provided', async () => {\n    try {\n      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);\n    } catch (e) {\n      expect(e).to.match(/clientKey is required/);\n    }\n  });\n  it('should render with the default links', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, '/')).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist;\n      expect(getLinkByHref(links, '/channels')).to.exist;\n      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to\n        .exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/guides`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels`)).to.exist;\n      expect(getLinkByHref(links, `/account`)).to.exist;\n      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))\n        .to.exist;\n      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;\n    }\n  });\n\n  it('should render platform URLs against the base URL when it is defined', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=\"${platformUrl}\"></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist; // This shouldn't change\n      expect(getLinkByHref(links, `${platformUrl}/channels`)).to.exist;\n    }\n  });\n\n  it.skip('should allow navigation events to be handled externally', async () => {\n    let navigateEventCount = 0;\n\n    const onNavigate = (e: MouseEvent) => {\n      e.preventDefault();\n      navigateEventCount += 1;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.navigate = onNavigate;\n    await navbar.updateComplete;\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    links?.forEach(l => l.click());\n\n    await waitUntil(\n      () => expect(navigateEventCount).to.equal(13),\n      'navigate event did not fire',\n    );\n  });\n\n  it('should render the given client selector', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}><div slot=\"clientSelector\"><div id=\"myCoolClientSelector\"></div></div></tt-navbar>`,\n    );\n\n    const clientSelector = navbar.querySelector('#myCoolClientSelector');\n\n    expect(clientSelector).to.exist;\n  });\n\n  it('should render the logout link', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    const logoutLink = getLinkByHref(links!, '/logout');\n\n    expect(logoutLink).to.exist;\n  });\n\n  it('should close other details when one is being opened', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const allDetails = navbar.shadowRoot!.querySelectorAll('summary');\n    const [marketInsights, settings] = allDetails;\n\n    marketInsights.click();\n    /*\n     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for\n     * the browser to fire the $toggle handler as well as adding the open attribute.\n     */\n    await nextFrame();\n    await nextFrame();\n\n    expect(marketInsights.closest('details')?.open).to.be.true;\n\n    settings.click();\n    await nextFrame();\n    await nextFrame();\n\n    expect(settings.closest('details')?.open).to.be.true;\n    expect(marketInsights.closest('details')?.open).to.be.false;\n  });\n\n  it('should collapse the navbar when toggle clicked', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n    const rootLinksHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav a span');\n    const summaryHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav summary span');\n    const externalLinks =\n      navbar.shadowRoot!.querySelectorAll('#external-links a');\n    const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');\n    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');\n\n    // Visually and accessibly hidden\n    expect(logo?.checkVisibility()).to.be.false;\n    expect(clientSelector?.checkVisibility()).to.be.false;\n    for (const link of externalLinks) {\n      expect(link.checkVisibility()).to.be.false;\n    }\n\n    // Visually hidden only\n    expect(logoutLink).to.exist;\n    expect(rootLinksHiddenElements.length).to.be.greaterThan(1);\n    expect(summaryHiddenElements.length).to.be.greaterThan(1);\n    for (const element of [\n      ...rootLinksHiddenElements,\n      ...summaryHiddenElements,\n      logoutLink!,\n    ]) {\n      expect(isVisuallyHidden(element)).to.be.true;\n    }\n  });\n\n  const collapsibleIds: string[] = [\n    'market-insights',\n    'settings',\n    'account',\n    'billing-routes',\n  ];\n  collapsibleIds.forEach(id => {\n    it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n        '#navbar-toggle-btn',\n      ) as HTMLButtonElement;\n\n      navbarToggleBtn.click();\n      await elementUpdated(navbar);\n\n      const logo = navbar.shadowRoot!.querySelector('.logo');\n      expect(logo?.checkVisibility()).to.be.false;\n\n      const element: HTMLDetailsElement | null =\n        navbar.shadowRoot!.querySelector(`#${id} summary`);\n\n      expect(element).to.exist;\n\n      element!.click();\n\n      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {\n        timeout: 500,\n      });\n    });\n  });\n\n  const URLs = [\n    ['/', 'Dashboard'],\n    ['/channels', 'Channels'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],\n    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],\n    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],\n    [`/${CLIENT_KEY}/email`, 'Channels'],\n  ];\n\n  URLs.forEach(([route, text]) => {\n    it(`should show the current page as active when link is ${route}`, async () => {\n      // eslint-disable-next-line no-restricted-globals\n      history.pushState({}, '', route); // 👈 mock URL\n\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n      expect(anchor).to.exist;\n      expect(anchor!.textContent).to.include(text);\n    });\n  });\n\n  it('should show the current page as campaign manager when on the given campaign manager url', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const campaignManagerUrl = 'http://localhost:8000';\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route=\"${Routes.CampaignManager}\"></tt-navbar>`,\n    );\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Campaigns');\n  });\n});\n"]}
+{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/tt-navbar.js';\nimport {\n  elementUpdated,\n  expect,\n  fixture,\n  nextFrame,\n  waitUntil,\n} from '@open-wc/testing';\nimport { TtNavbar } from '../src/index.js';\nimport { Routes } from '../src/Routes.js';\n\n// eslint-disable-next-line no-undef\nconst getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {\n  for (const link of links) {\n    if (link.getAttribute('href') === href) {\n      return link;\n    }\n  }\n\n  return undefined;\n};\n\nconst isVisuallyHidden = (element: Element) => {\n  const style = getComputedStyle(element);\n\n  const result =\n    style.position === 'absolute' &&\n    style.width === '1px' &&\n    style.height === '1px' &&\n    style.margin === '-1px' &&\n    style.padding === '0px' &&\n    style.borderWidth === '0px' &&\n    style.overflow === 'hidden' &&\n    style.clip === 'rect(0px, 0px, 0px, 0px)' &&\n    style.clipPath === 'inset(50%)' &&\n    style.whiteSpace === 'nowrap';\n\n  return result;\n};\n\nconst CLIENT_KEY = 'zxd47KQGAP';\n\ndescribe('TtNavbar', () => {\n  it('should throw an error if the clientKey is not provided', async () => {\n    try {\n      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);\n    } catch (e) {\n      expect(e).to.match(/clientKey is required/);\n    }\n  });\n  it('should render with the default links', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, '/')).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist;\n      expect(getLinkByHref(links, '/channels')).to.exist;\n      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to\n        .exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/guides`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels`)).to.exist;\n      expect(getLinkByHref(links, `/account`)).to.exist;\n      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))\n        .to.exist;\n      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;\n    }\n  });\n\n  it('should render platform URLs against the base URL when it is defined', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=\"${platformUrl}\"></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist; // This shouldn't change\n      expect(getLinkByHref(links, `${platformUrl}/channels`)).to.exist;\n    }\n  });\n\n  it.skip('should allow navigation events to be handled externally', async () => {\n    let navigateEventCount = 0;\n\n    const onNavigate = (e: MouseEvent) => {\n      e.preventDefault();\n      navigateEventCount += 1;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.navigate = onNavigate;\n    await navbar.updateComplete;\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    links?.forEach(l => l.click());\n\n    await waitUntil(\n      () => expect(navigateEventCount).to.equal(13),\n      'navigate event did not fire',\n    );\n  });\n\n  it('should render a combobox when multiple clients are provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Client One' },\n      { clientKey: 'abc123', displayName: 'Client Two' },\n    ];\n    await navbar.updateComplete;\n\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');\n\n    expect(combobox).to.exist;\n    expect(singleClientName).to.not.exist;\n  });\n\n  it('should render the client name when only one client is provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Single Client' },\n    ];\n    await navbar.updateComplete;\n\n    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n\n    expect(singleClientName).to.exist;\n    expect(singleClientName?.textContent?.trim()).to.equal('Single Client');\n    expect(combobox).to.not.exist;\n  });\n\n  it('should render the logout link', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    const logoutLink = getLinkByHref(links!, '/logout');\n\n    expect(logoutLink).to.exist;\n  });\n\n  it('should close other details when one is being opened', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const allDetails = navbar.shadowRoot!.querySelectorAll('summary');\n    const [marketInsights, settings] = allDetails;\n\n    marketInsights.click();\n    /*\n     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for\n     * the browser to fire the $toggle handler as well as adding the open attribute.\n     */\n    await nextFrame();\n    await nextFrame();\n\n    expect(marketInsights.closest('details')?.open).to.be.true;\n\n    settings.click();\n    await nextFrame();\n    await nextFrame();\n\n    expect(settings.closest('details')?.open).to.be.true;\n    expect(marketInsights.closest('details')?.open).to.be.false;\n  });\n\n  it('should collapse the navbar when toggle clicked', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n    const rootLinksHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav a span');\n    const summaryHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav summary span');\n    const externalLinks =\n      navbar.shadowRoot!.querySelectorAll('#external-links a');\n    const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');\n    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');\n\n    // Visually and accessibly hidden\n    expect(logo?.checkVisibility()).to.be.false;\n    expect(clientSelector?.checkVisibility()).to.be.false;\n    for (const link of externalLinks) {\n      expect(link.checkVisibility()).to.be.false;\n    }\n\n    // Visually hidden only\n    expect(logoutLink).to.exist;\n    expect(rootLinksHiddenElements.length).to.be.greaterThan(1);\n    expect(summaryHiddenElements.length).to.be.greaterThan(1);\n    for (const element of [\n      ...rootLinksHiddenElements,\n      ...summaryHiddenElements,\n      logoutLink!,\n    ]) {\n      expect(isVisuallyHidden(element)).to.be.true;\n    }\n  });\n\n  const collapsibleIds: string[] = [\n    'market-insights',\n    'settings',\n    'account',\n    'billing-routes',\n  ];\n  collapsibleIds.forEach(id => {\n    it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n        '#navbar-toggle-btn',\n      ) as HTMLButtonElement;\n\n      navbarToggleBtn.click();\n      await elementUpdated(navbar);\n\n      const logo = navbar.shadowRoot!.querySelector('.logo');\n      expect(logo?.checkVisibility()).to.be.false;\n\n      const element: HTMLDetailsElement | null =\n        navbar.shadowRoot!.querySelector(`#${id} summary`);\n\n      expect(element).to.exist;\n\n      element!.click();\n\n      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {\n        timeout: 500,\n      });\n    });\n  });\n\n  const URLs = [\n    ['/', 'Dashboard'],\n    ['/channels', 'Channels'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],\n    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],\n    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],\n    [`/${CLIENT_KEY}/email`, 'Channels'],\n  ];\n\n  URLs.forEach(([route, text]) => {\n    it(`should show the current page as active when link is ${route}`, async () => {\n      // eslint-disable-next-line no-restricted-globals\n      history.pushState({}, '', route); // 👈 mock URL\n\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n      expect(anchor).to.exist;\n      expect(anchor!.textContent).to.include(text);\n    });\n  });\n\n  it('should show the current page as campaign manager when on the given campaign manager url', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const campaignManagerUrl = 'http://localhost:8000';\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route=\"${Routes.CampaignManager}\"></tt-navbar>`,\n    );\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Campaigns');\n  });\n});\n"]}

package/dist/web/Routes.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.21
+* @triptease/tt-navbar v0.0.22
 */
 
 // src/Routes.ts