@triptease/tt-navbar 0.0.96 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @triptease/tt-navbar
 
+## 0.1.1
+
+### Patch Changes
+
+- Updating the prepublish command to use yarn build:node instead of tsc so that it compiles the imports down to use required for common js
+- Updated dependencies
+  - @triptease/tt-combobox@5.7.1
+
+## 0.1.0
+
+### Minor Changes
+
+- Add dual ESM/CJS output
+
+### Patch Changes
+
+- Updated dependencies
+  - @triptease/tt-combobox@5.7.0
+  - @triptease/icons@1.4.0
+
 ## 0.0.96
 
 ### Patch Changes

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/Config.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Config = void 0;
+const Config = {
+    NavbarStateCookieName: 'tt-navbar-state',
+    NavbarStateCookieOpenValue: 'open',
+    NavbarStateCookieClosedValue: 'closed',
+};
+exports.Config = Config;
+//# sourceMappingURL=Config.js.map

package/dist/cjs/src/Config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Config.js","sourceRoot":"","sources":["../../../src/Config.ts"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG;IACb,qBAAqB,EAAE,iBAAiB;IACxC,0BAA0B,EAAE,MAAe;IAC3C,4BAA4B,EAAE,QAAiB;CAChD,CAAC;AAEO,wBAAM","sourcesContent":["const Config = {\n  NavbarStateCookieName: 'tt-navbar-state',\n  NavbarStateCookieOpenValue: 'open' as const,\n  NavbarStateCookieClosedValue: 'closed' as const,\n};\n\nexport { Config };\n"]}

package/dist/cjs/src/Routes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Routes = void 0;
+const Routes = {
+    CampaignManager: 'CampaignManager',
+};
+exports.Routes = Routes;
+//# sourceMappingURL=Routes.js.map

package/dist/cjs/src/Routes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Routes.js","sourceRoot":"","sources":["../../../src/Routes.ts"],"names":[],"mappings":";;;AAAA,MAAM,MAAM,GAAG;IACb,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEO,wBAAM","sourcesContent":["const Routes = {\n  CampaignManager: 'CampaignManager',\n};\n\nexport { Routes };\n"]}

package/dist/cjs/src/TtNavbar.js

@@ -0,0 +1,426 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtNavbar = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const icons_1 = require("@triptease/icons");
+require("@triptease/tt-combobox");
+const styles_js_1 = require("./styles.js");
+const triptease_logo_js_1 = require("./triptease-logo.js");
+const urlMappings_js_1 = require("./urlMappings.js");
+const Routes_js_1 = require("./Routes.js");
+const Config_js_1 = require("./Config.js");
+const jsonArrayConverter = (value) => {
+    if (!value)
+        return [];
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return [];
+    }
+};
+class TtNavbar extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.campaignManagerUrl = 'https://app.campaign-manager.triptease.io';
+        this.clients = [];
+        this.initialState = undefined;
+        this.isOpen = true;
+        /*
+         * Set the active state for the current page.
+         *
+         * This function iterates over all nav links and compares the current URL path with the href of each link.
+         * If the current URL path starts with the href of a link, the link is marked as active. If multiple links
+         * share the same prefix, the longest prefix is used as it is more specific.
+         *
+         * Example:
+         * - Current URL: /channels/123
+         * - Nav links:
+         *   - /channels
+         *   - /channels/123
+         *   - /channels/456
+         *
+         * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels
+         * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123
+         * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123
+         * Result: /channels/123 is marked as active
+         *
+         */
+        this.setActiveState = () => {
+            const currentPath = window.location.pathname;
+            let bestMatch;
+            let bestMatchLength = 0;
+            // Check special cases first, as everything will always match on / and return Dashboard
+            if (this.activeRoute === Routes_js_1.Routes.CampaignManager) {
+                bestMatch = this.campaignManagerLink;
+            }
+            if (!bestMatch && this.clientKey) {
+                const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');
+                let mappedUrl = urlMappings_js_1.urlMappings[parsedPath];
+                const matchedPattern = this.mappedUrlPatterns.find((pattern) => pattern.test(currentPath, window.location.origin))?.pathname;
+                if (matchedPattern) {
+                    mappedUrl = urlMappings_js_1.urlMappings[matchedPattern];
+                }
+                if (mappedUrl) {
+                    const clientSpecificUrl = mappedUrl.replace('$CLIENT_KEY', this.clientKey);
+                    const links = Object.values(this.allNavLinks);
+                    bestMatch = links.find((link) => link.href.includes(clientSpecificUrl));
+                }
+            }
+            if (!bestMatch) {
+                for (const link of this.allNavLinks) {
+                    const linkPath = new URL(link.href).pathname;
+                    if (currentPath.startsWith(linkPath)) {
+                        if (linkPath.length > bestMatchLength) {
+                            bestMatch = link;
+                            bestMatchLength = linkPath.length;
+                        }
+                    }
+                }
+            }
+            for (const link of this.allNavLinks) {
+                link.classList.remove('current-page');
+                if (link.hasAttribute('aria-current')) {
+                    link.attributes.removeNamedItem('aria-current');
+                }
+            }
+            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}`);
+            }
+        };
+        this.closeAllDetails = (element) => {
+            this.allDetailsElements.forEach((detail) => {
+                if (element && !detail.contains(element)) {
+                    detail.removeAttribute('open');
+                }
+                else if (!element) {
+                    detail.removeAttribute('open');
+                }
+            });
+        };
+        this.toggleSidebar = () => {
+            this.closeAllDetails();
+            this.isOpen = !this.isOpen;
+            const { NavbarStateCookieName, NavbarStateCookieOpenValue, NavbarStateCookieClosedValue } = Config_js_1.Config;
+            const domain = window.location.hostname.endsWith('.triptease.io') ? 'domain=.triptease.io' : '';
+            document.cookie = `${NavbarStateCookieName}=${this.isOpen ? NavbarStateCookieOpenValue : NavbarStateCookieClosedValue}; path=/; max-age=31536000; ${domain}`;
+        };
+        this.handleDetailsToggle = (e) => {
+            const { newState } = e;
+            const target = e.currentTarget;
+            if (newState === 'open') {
+                if (!this.isOpen) {
+                    this.toggleSidebar();
+                }
+                this.closeAllDetails(target);
+            }
+        };
+        this.buildUrl = (path) => {
+            if (!this.clientKey)
+                throw new Error('clientKey is required');
+            const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);
+            if (!this.platformUrl)
+                return formattedPath;
+            return new URL(formattedPath, this.platformUrl).toString();
+        };
+        this.onAnchorClick = (e) => {
+            if (this.navigate) {
+                this.navigate(e);
+                this.setActiveState();
+            }
+        };
+        this.handleClientChange = (e) => {
+            const combobox = e.target;
+            const selectedClientKey = combobox.value?.[0];
+            if (selectedClientKey && this.onClientChange) {
+                this.onClientChange(selectedClientKey);
+            }
+        };
+    }
+    firstUpdated() {
+        this.setActiveState();
+    }
+    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();
+        if (this.initialState) {
+            this.isOpen = this.initialState === 'open';
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.setActiveState);
+        window.removeEventListener('tetris:navigate', this.setActiveState);
+        super.disconnectedCallback();
+    }
+    get mappedUrlPatterns() {
+        return Object.keys(urlMappings_js_1.urlMappings).map((pattern) => new URLPattern({ pathname: pattern, baseURL: window.location.origin }));
+    }
+    render() {
+        return (0, lit_1.html) `
+      <nav id=${this.id} class="${this.isOpen ? '' : 'sidebar-closed'}">
+        <div class="sidebar-header ${this.isOpen ? '' : 'sidebar-closed'}">
+          <div class="logo">
+            ${(0, unsafe_svg_js_1.unsafeSVG)(triptease_logo_js_1.tripteaseLogo)}
+          </div>
+          <button id="navbar-toggle-btn" class="nav-item nav-toggle-button" @click=${this.toggleSidebar}>
+            ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.sidebarCollapsed)}
+            <span class="tooltip nav-toggle-tooltip">
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.sidebarCollapsed)}
+              <span>${this.isOpen ? (0, lit_1.html) `Collapse sidebar` : (0, lit_1.html) `Expand sidebar`}</span>
+            </span>
+          </button>
+        </div>
+
+        <div class="nav-items ${this.isOpen ? '' : 'sidebar-closed'}">
+          <a
+            class="nav-item"
+            href=${this.buildUrl('/')}
+            @click=${this.onAnchorClick}
+            data-intercom-target="dashboard"
+          >${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.home)}<span>Dashboard</span></a
+          >
+          <a id="${Routes_js_1.Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
+             @click=${this.onAnchorClick}
+             data-intercom-target="campaigns"
+          >${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.campaigns)}<span>Campaigns</span></a
+          >
+          <a
+            class="nav-item"
+            href=${this.buildUrl('/$CLIENT_KEY/channels')}
+            @click=${this.onAnchorClick}
+            data-intercom-target="channels"
+          >${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.channels)}<span>Channels</span></a
+          >
+          <details id="market-insights" @toggle=${this.handleDetailsToggle} data-intercom-target="market-insights">
+            <summary>
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.graph)}
+              <span>Market Insights</span>
+              <span class="icon chevron"> ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/parity/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="parity-monitoring"
+              >Parity monitoring</a
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/guest-insights')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="guest-insights"
+              >Guest insights</a
+              >
+            </div>
+          </details>
+          <details id="settings" @toggle=${this.handleDetailsToggle} data-intercom-target="settings">
+            <summary>
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.gear)}
+              <span>Settings</span>
+              <span class="icon chevron"> ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="email-setup"
+              >Email setup</a
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="crm-connectivity"
+              >CRM connectivity</a
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/settings/guides')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="group-settings"
+              >Group settings</a
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/settings/hotels')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="property-settings"
+              >Property settings</a
+              >
+            </div>
+          </details>
+          <hr />
+          <details id="account" @toggle=${this.handleDetailsToggle} data-intercom-target="account">
+            <summary>
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.user)}
+              <span>Account</span>
+              <span class="icon chevron"> ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="user-settings"
+              >User settings</a
+              >
+              <!-- TODO: Change to /$CLIENT_KEY/account/team when the change in Tetris is ready -->
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account/team/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="team-permissions"
+              >Team and permissions</a
+              >
+            </div>
+          </details>
+          <details id="billing-routes" @toggle=${this.handleDetailsToggle} data-intercom-target="billing">
+            <summary>
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.wallet)}
+              <span>Billing</span>
+              <span class="icon chevron"> ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}</span>
+            </summary>
+            <div>
+              <!-- TODO: Change to /$CLIENT_KEY/account/billing-management when the change in Tetris is ready -->
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="booking-reconciliation"
+              >Booking reconciliation</a
+              >
+              <!-- TODO: Change to /$CLIENT_KEY/subscriptions when the change in Tetris is ready -->
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
+                data-intercom-target="subscriptions"
+              >Subscriptions</a
+              >
+            </div>
+          </details>
+        </div>
+        <div class="tertiary-nav ${this.isOpen ? '' : 'sidebar-closed'}">
+          <div id="external-links" class="nav-items">
+            <a
+              class="nav-item external-link"
+              href='https://triptease.canny.io/feature-requests'
+              target="_blank"
+              rel="noreferrer"
+            >
+              Feature requests
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.external)}
+            </a>
+            <a
+              class='nav-item external-link'
+              href='https://triptease.canny.io/changelog'
+              target="_blank"
+              rel="noreferrer"
+            >
+              Product updates
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.external)}
+            </a>
+            <a
+              class='nav-item external-link'
+              href='https://help.triptease.com/'
+              target="_blank"
+              rel="noreferrer"
+            >
+              Help center
+              ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.external)}
+            </a>
+            <hr />
+          </div>
+          <div class='nav-items'>
+            <div id="client-selector">
+              ${this.clients.length > 1
+            ? (0, lit_1.html) `
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map((client) => (0, lit_1.html) `
+                            <option slot="option" value=${client.clientKey}>${client.displayName}</option>
+                          `)}
+                      </tt-combobox>
+                    `
+            : (0, lit_1.html) `
+                      <div class="single-client-name">
+                        ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}
+                      </div>
+                    `}
+            </div>
+            <a
+              id="logout-link"
+              class="nav-item"
+              href=${this.buildUrl('/logout')}
+              @click=${this.onAnchorClick}
+              data-intercom-target="logout"
+            >${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.logout)}<span>Logout</span></a>
+          </div>
+      </nav>
+    `;
+    }
+}
+exports.TtNavbar = TtNavbar;
+TtNavbar.styles = styles_js_1.styles;
+__decorate([
+    (0, decorators_js_1.property)({ type: Function })
+], TtNavbar.prototype, "navigate", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'campaign-manager-url' })
+], TtNavbar.prototype, "campaignManagerUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'platform-url' })
+], TtNavbar.prototype, "platformUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'client-key' })
+], TtNavbar.prototype, "clientKey", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'active-route' })
+], TtNavbar.prototype, "activeRoute", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Array, converter: jsonArrayConverter })
+], TtNavbar.prototype, "clients", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'initial-state' })
+], TtNavbar.prototype, "initialState", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtNavbar.prototype, "isOpen", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], TtNavbar.prototype, "onClientChange", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('details')
+], TtNavbar.prototype, "allDetailsElements", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('a')
+], TtNavbar.prototype, "allNavLinks", void 0);
+__decorate([
+    (0, decorators_js_1.query)(`a#${Routes_js_1.Routes.CampaignManager}`)
+], TtNavbar.prototype, "campaignManagerLink", void 0);
+//# sourceMappingURL=TtNavbar.js.map

package/dist/cjs/src/TtNavbar.js.map

@@ -0,0 +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, query, 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';\nimport { Config } from './Config.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: String, attribute: 'initial-state' })\n  initialState: 'open' | 'closed' | undefined = undefined;\n\n  @state()\n  isOpen: boolean = true;\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  @query(`a#${Routes.CampaignManager}`)\n  private campaignManagerLink!: HTMLAnchorElement;\n\n  protected firstUpdated() {\n    this.setActiveState();\n  }\n\n  public connectedCallback() {\n    // Listen for browser back/forward navigation\n    window.addEventListener('popstate', this.setActiveState);\n\n    // Listen for Tetris programmatic navigation\n    window.addEventListener('tetris:navigate', this.setActiveState);\n\n    super.connectedCallback();\n\n    if (this.initialState) {\n      this.isOpen = this.initialState === 'open';\n    }\n  }\n\n  public disconnectedCallback() {\n    window.removeEventListener('popstate', this.setActiveState);\n    window.removeEventListener('tetris:navigate', this.setActiveState);\n\n    super.disconnectedCallback();\n  }\n\n  private get mappedUrlPatterns(): URLPattern[] {\n    return Object.keys(urlMappings).map(\n      (pattern) => new URLPattern({ pathname: pattern, baseURL: window.location.origin })\n    );\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      bestMatch = this.campaignManagerLink;\n    }\n    if (!bestMatch && this.clientKey) {\n      const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');\n      let mappedUrl: string | undefined = urlMappings[parsedPath];\n\n      const matchedPattern = this.mappedUrlPatterns.find((pattern) =>\n        pattern.test(currentPath, window.location.origin)\n      )?.pathname;\n\n      if (matchedPattern) {\n        mappedUrl = urlMappings[matchedPattern];\n      }\n\n      if (mappedUrl) {\n        const clientSpecificUrl = mappedUrl.replace('$CLIENT_KEY', this.clientKey);\n        const links = Object.values(this.allNavLinks);\n        bestMatch = links.find((link) => link.href.includes(clientSpecificUrl));\n      }\n    }\n\n    if (!bestMatch) {\n      for (const link of this.allNavLinks) {\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    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\n    if (bestMatch) {\n      bestMatch.classList.add('current-page');\n      bestMatch.setAttribute('aria-current', 'page');\n\n      // Auto-expand parent details if the active link is within a collapsible section\n      const parentDetails = bestMatch.closest('details');\n      if (parentDetails) {\n        parentDetails.setAttribute('open', '');\n      }\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.isOpen = !this.isOpen;\n\n    const { NavbarStateCookieName, NavbarStateCookieOpenValue, NavbarStateCookieClosedValue } = Config;\n\n    const domain = window.location.hostname.endsWith('.triptease.io') ? 'domain=.triptease.io' : '';\n\n    document.cookie = `${NavbarStateCookieName}=${this.isOpen ? NavbarStateCookieOpenValue : NavbarStateCookieClosedValue}; path=/; max-age=31536000; ${domain}`;\n  };\n\n  private handleDetailsToggle = (e: ToggleEvent) => {\n    const { newState } = e;\n    const target = e.currentTarget as HTMLDetailsElement;\n\n    if (newState === 'open') {\n      if (!this.isOpen) {\n        this.toggleSidebar();\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  private handleClientChange = (e: Event) => {\n    const combobox = e.target as EventTarget & { value?: string[] };\n    const selectedClientKey = combobox.value?.[0];\n\n    if (selectedClientKey && this.onClientChange) {\n      this.onClientChange(selectedClientKey);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id} class=\"${this.isOpen ? '' : 'sidebar-closed'}\">\n        <div class=\"sidebar-header ${this.isOpen ? '' : '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>${this.isOpen ? html`Collapse sidebar` : html`Expand sidebar`}</span>\n            </span>\n          </button>\n        </div>\n\n        <div class=\"nav-items ${this.isOpen ? '' : 'sidebar-closed'}\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n            data-intercom-target=\"dashboard\"\n          >${unsafeSVG(home)}<span>Dashboard</span></a\n          >\n          <a id=\"${Routes.CampaignManager}\" class=\"nav-item\" href=${this.campaignManagerUrl}\n             @click=${this.onAnchorClick}\n             data-intercom-target=\"campaigns\"\n          >${unsafeSVG(campaigns)}<span>Campaigns</span></a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/$CLIENT_KEY/channels')}\n            @click=${this.onAnchorClick}\n            data-intercom-target=\"channels\"\n          >${unsafeSVG(channels)}<span>Channels</span></a\n          >\n          <details id=\"market-insights\" @toggle=${this.handleDetailsToggle} data-intercom-target=\"market-insights\">\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                data-intercom-target=\"parity-monitoring\"\n              >Parity monitoring</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-insights')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"guest-insights\"\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details id=\"settings\" @toggle=${this.handleDetailsToggle} data-intercom-target=\"settings\">\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                data-intercom-target=\"email-setup\"\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                data-intercom-target=\"crm-connectivity\"\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/settings/guides')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"group-settings\"\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/settings/hotels')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"property-settings\"\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details id=\"account\" @toggle=${this.handleDetailsToggle} data-intercom-target=\"account\">\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                data-intercom-target=\"user-settings\"\n              >User settings</a\n              >\n              <!-- TODO: Change to /$CLIENT_KEY/account/team when the change in Tetris is ready -->\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"team-permissions\"\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details id=\"billing-routes\" @toggle=${this.handleDetailsToggle} data-intercom-target=\"billing\">\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <!-- TODO: Change to /$CLIENT_KEY/account/billing-management when the change in Tetris is ready -->\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"booking-reconciliation\"\n              >Booking reconciliation</a\n              >\n              <!-- TODO: Change to /$CLIENT_KEY/subscriptions when the change in Tetris is ready -->\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n                data-intercom-target=\"subscriptions\"\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <div class=\"tertiary-nav ${this.isOpen ? '' : '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              ${\n                this.clients.length > 1\n                  ? html`\n                      <tt-combobox\n                        .openUpward=${true}\n                        .value=${this.clientKey ? [this.clientKey] : []}\n                        @change=${this.handleClientChange}\n                      >\n                        ${this.clients.map(\n                          (client) => html`\n                            <option slot=\"option\" value=${client.clientKey}>${client.displayName}</option>\n                          `\n                        )}\n                      </tt-combobox>\n                    `\n                  : html`\n                      <div class=\"single-client-name\">\n                        ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}\n                      </div>\n                    `\n              }\n            </div>\n            <a\n              id=\"logout-link\"\n              class=\"nav-item\"\n              href=${this.buildUrl('/logout')}\n              @click=${this.onAnchorClick}\n              data-intercom-target=\"logout\"\n            >${unsafeSVG(logout)}<span>Logout</span></a>\n          </div>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/cjs/src/getInitialNavbarState.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialNavbarState = void 0;
+const Config_js_1 = require("./Config.js");
+const getInitialNavbarState = (cookieString) => {
+    const cookies = cookieString || document.cookie;
+    if (!cookies) {
+        return undefined;
+    }
+    const stateCookie = cookies.split(';').find((c) => c.trim().startsWith(`${Config_js_1.Config.NavbarStateCookieName}`));
+    if (!stateCookie) {
+        return undefined;
+    }
+    const value = stateCookie.split('=')[1];
+    if (value !== Config_js_1.Config.NavbarStateCookieOpenValue && value !== Config_js_1.Config.NavbarStateCookieClosedValue) {
+        return undefined;
+    }
+    return value;
+};
+exports.getInitialNavbarState = getInitialNavbarState;
+//# sourceMappingURL=getInitialNavbarState.js.map

package/dist/cjs/src/getInitialNavbarState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitialNavbarState.js","sourceRoot":"","sources":["../../../src/getInitialNavbarState.ts"],"names":[],"mappings":";;;AAAA,2CAAqC;AAErC,MAAM,qBAAqB,GAAG,CAAC,YAAqB,EAAE,EAAE;IACtD,MAAM,OAAO,GAAG,YAAY,IAAI,QAAQ,CAAC,MAAM,CAAC;IAEhD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,GAAG,kBAAM,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;IAE3G,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAExC,IAAI,KAAK,KAAK,kBAAM,CAAC,0BAA0B,IAAI,KAAK,KAAK,kBAAM,CAAC,4BAA4B,EAAE,CAAC;QACjG,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEO,sDAAqB","sourcesContent":["import { Config } from './Config.js';\n\nconst getInitialNavbarState = (cookieString?: string) => {\n  const cookies = cookieString || document.cookie;\n\n  if (!cookies) {\n    return undefined;\n  }\n\n  const stateCookie = cookies.split(';').find((c) => c.trim().startsWith(`${Config.NavbarStateCookieName}`));\n\n  if (!stateCookie) {\n    return undefined;\n  }\n\n  const value = stateCookie.split('=')[1];\n\n  if (value !== Config.NavbarStateCookieOpenValue && value !== Config.NavbarStateCookieClosedValue) {\n    return undefined;\n  }\n\n  return value;\n};\n\nexport { getInitialNavbarState };\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitialNavbarState = exports.Config = exports.Routes = exports.TtNavbar = void 0;
+var TtNavbar_js_1 = require("./TtNavbar.js");
+Object.defineProperty(exports, "TtNavbar", { enumerable: true, get: function () { return TtNavbar_js_1.TtNavbar; } });
+var Routes_js_1 = require("./Routes.js");
+Object.defineProperty(exports, "Routes", { enumerable: true, get: function () { return Routes_js_1.Routes; } });
+var Config_js_1 = require("./Config.js");
+Object.defineProperty(exports, "Config", { enumerable: true, get: function () { return Config_js_1.Config; } });
+var getInitialNavbarState_js_1 = require("./getInitialNavbarState.js");
+Object.defineProperty(exports, "getInitialNavbarState", { enumerable: true, get: function () { return getInitialNavbarState_js_1.getInitialNavbarState; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;AAAA,6CAAyC;AAAhC,uGAAA,QAAQ,OAAA;AACjB,yCAAqC;AAA5B,mGAAA,MAAM,OAAA;AACf,yCAAqC;AAA5B,mGAAA,MAAM,OAAA;AACf,uEAAmE;AAA1D,iIAAA,qBAAqB,OAAA","sourcesContent":["export { TtNavbar } from './TtNavbar.js';\nexport { Routes } from './Routes.js';\nexport { Config } from './Config.js';\nexport { getInitialNavbarState } from './getInitialNavbarState.js';\n"]}