@triptease/tt-navbar 0.0.20 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -1
- package/dist/src/Routes.d.ts +4 -0
- package/dist/src/Routes.js +5 -0
- package/dist/src/Routes.js.map +1 -0
- package/dist/src/TtNavbar.d.ts +8 -0
- package/dist/src/TtNavbar.js +45 -6
- package/dist/src/TtNavbar.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/styles.js +27 -2
- package/dist/src/styles.js.map +1 -1
- package/dist/stories/index.stories.d.ts +30 -3
- package/dist/stories/index.stories.js +26 -8
- package/dist/stories/index.stories.js.map +1 -1
- package/dist/test/tt-navbar.test.js +25 -5
- package/dist/test/tt-navbar.test.js.map +1 -1
- package/dist/web/Routes.js +12 -0
- package/dist/web/Routes.js.map +7 -0
- package/dist/web/TtNavbar.js +1348 -356
- package/dist/web/TtNavbar.js.map +4 -4
- package/dist/web/index.js +1349 -356
- package/dist/web/index.js.map +4 -4
- package/dist/web/styles.js +28 -3
- package/dist/web/styles.js.map +2 -2
- package/dist/web/triptease-logo.js +1 -1
- package/dist/web/tt-navbar.js +1348 -356
- package/dist/web/tt-navbar.js.map +4 -4
- package/dist/web/urlMappings.js +1 -1
- package/package.json +2 -1
- package/src/Routes.ts +5 -0
- package/src/TtNavbar.ts +45 -11
- package/src/index.ts +1 -0
- package/src/styles.ts +27 -2
- package/stories/index.stories.ts +51 -9
- package/test/tt-navbar.test.ts +30 -5
package/README.md
CHANGED
|
@@ -15,7 +15,56 @@ npm i tt-navbar
|
|
|
15
15
|
import 'tt-navbar/tt-navbar.js';
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
|
-
<tt-navbar
|
|
18
|
+
<tt-navbar
|
|
19
|
+
client-key="your-client-key"
|
|
20
|
+
platform-url="https://localhost.triptease.io:3500"
|
|
21
|
+
></tt-navbar>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Properties
|
|
25
|
+
|
|
26
|
+
| Property | Type | Description |
|
|
27
|
+
|----------|------|-------------|
|
|
28
|
+
| `client-key` | `string` | The client key identifier |
|
|
29
|
+
| `platform-url` | `string` | Base URL for the platform |
|
|
30
|
+
| `campaign-manager-url` | `string` | Campaign manager URL |
|
|
31
|
+
| `active-route` | `string` | The currently active route |
|
|
32
|
+
| `clients` | `Array<{clientKey: string, displayName: string}>` | Array of client objects for multi-client selector |
|
|
33
|
+
| `navigate` | `Function` | Custom navigation handler function |
|
|
34
|
+
| `onClientChange` | `Function` | Callback function that receives the selected client key as a string when the client selection changes |
|
|
35
|
+
|
|
36
|
+
### Multi-Client Selector
|
|
37
|
+
|
|
38
|
+
When multiple clients are provided, the navbar will display a combobox selector:
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
const navbar = document.querySelector('tt-navbar');
|
|
42
|
+
|
|
43
|
+
// Pass clients as a property
|
|
44
|
+
navbar.clients = [
|
|
45
|
+
{ clientKey: 'client1', displayName: 'Client One' },
|
|
46
|
+
{ clientKey: 'client2', displayName: 'Client Two' }
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
// Handle client change - typically you would redirect the user to the new client
|
|
50
|
+
navbar.onClientChange = (selectedClientKey) => {
|
|
51
|
+
// Update the URL to reflect the new client
|
|
52
|
+
window.location.href = `/home/${selectedClientKey}`;
|
|
53
|
+
|
|
54
|
+
// Or use your router's navigation method
|
|
55
|
+
// router.navigate(`/home/${selectedClientKey}`);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**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.
|
|
60
|
+
|
|
61
|
+
Alternatively, you can pass clients as a JSON string attribute:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<tt-navbar
|
|
65
|
+
client-key="client1"
|
|
66
|
+
clients='[{"clientKey":"client1","displayName":"Client One"},{"clientKey":"client2","displayName":"Client Two"}]'
|
|
67
|
+
></tt-navbar>
|
|
19
68
|
```
|
|
20
69
|
|
|
21
70
|
## Linting and formatting
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Routes.js","sourceRoot":"","sources":["../../src/Routes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["const Routes = {\n CampaignManager: 'CampaignManager',\n};\n\nexport { Routes };\n"]}
|
package/dist/src/TtNavbar.d.ts
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import '@triptease/tt-combobox';
|
|
3
|
+
import { Routes } from './Routes.js';
|
|
2
4
|
export declare class TtNavbar extends LitElement {
|
|
3
5
|
static styles: import("lit").CSSResult;
|
|
4
6
|
navigate: ((e: MouseEvent) => void) | undefined;
|
|
5
7
|
campaignManagerUrl: string;
|
|
6
8
|
platformUrl?: string;
|
|
7
9
|
clientKey?: string;
|
|
10
|
+
activeRoute?: keyof typeof Routes;
|
|
11
|
+
clients: {
|
|
12
|
+
clientKey: string;
|
|
13
|
+
displayName: string;
|
|
14
|
+
}[];
|
|
15
|
+
onClientChange: ((clientKeySelected: string) => void) | undefined;
|
|
8
16
|
protected allDetailsElements: Array<HTMLDetailsElement>;
|
|
9
17
|
protected allNavLinks: Array<HTMLAnchorElement>;
|
|
10
18
|
private sidebarOpen;
|
package/dist/src/TtNavbar.js
CHANGED
|
@@ -2,14 +2,27 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html, LitElement } from 'lit';
|
|
3
3
|
import { property, queryAll, state } from 'lit/decorators.js';
|
|
4
4
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
5
|
-
import { campaigns, channels, chevronDown, gear, graph, home, logout, user, wallet
|
|
5
|
+
import { campaigns, channels, chevronDown, external, gear, graph, home, logout, sidebarCollapsed, user, wallet } from '@triptease/icons';
|
|
6
|
+
import '@triptease/tt-combobox';
|
|
6
7
|
import { styles } from './styles.js';
|
|
7
8
|
import { tripteaseLogo } from './triptease-logo.js';
|
|
8
9
|
import { urlMappings } from './urlMappings.js';
|
|
10
|
+
import { Routes } from './Routes.js';
|
|
11
|
+
const jsonArrayConverter = (value) => {
|
|
12
|
+
if (!value)
|
|
13
|
+
return [];
|
|
14
|
+
try {
|
|
15
|
+
return JSON.parse(value);
|
|
16
|
+
}
|
|
17
|
+
catch {
|
|
18
|
+
return [];
|
|
19
|
+
}
|
|
20
|
+
};
|
|
9
21
|
export class TtNavbar extends LitElement {
|
|
10
22
|
constructor() {
|
|
11
23
|
super(...arguments);
|
|
12
24
|
this.campaignManagerUrl = 'https://app.campaign-manager.triptease.io';
|
|
25
|
+
this.clients = [];
|
|
13
26
|
this.sidebarOpen = true;
|
|
14
27
|
/*
|
|
15
28
|
* Set the active state for the current page.
|
|
@@ -36,9 +49,9 @@ export class TtNavbar extends LitElement {
|
|
|
36
49
|
let bestMatch;
|
|
37
50
|
let bestMatchLength = 0;
|
|
38
51
|
// Check special cases first, as everything will always match on / and return Dashboard
|
|
39
|
-
if (this.
|
|
52
|
+
if (this.activeRoute === Routes.CampaignManager) {
|
|
40
53
|
const links = Object.values(this.allNavLinks);
|
|
41
|
-
bestMatch = links.find(link => link.
|
|
54
|
+
bestMatch = links.find(link => link.id === Routes.CampaignManager);
|
|
42
55
|
}
|
|
43
56
|
if (!bestMatch && this.clientKey) {
|
|
44
57
|
const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');
|
|
@@ -136,7 +149,7 @@ export class TtNavbar extends LitElement {
|
|
|
136
149
|
@click=${this.onAnchorClick}
|
|
137
150
|
>${unsafeSVG(home)}<span>Dashboard</span></a
|
|
138
151
|
>
|
|
139
|
-
<a class="nav-item" href=${this.campaignManagerUrl}
|
|
152
|
+
<a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
|
|
140
153
|
>${unsafeSVG(campaigns)}<span>Campaigns</span></a
|
|
141
154
|
>
|
|
142
155
|
<a
|
|
@@ -275,7 +288,25 @@ export class TtNavbar extends LitElement {
|
|
|
275
288
|
<hr />
|
|
276
289
|
</div>
|
|
277
290
|
<div class='nav-items'>
|
|
278
|
-
<
|
|
291
|
+
<div id="client-selector">
|
|
292
|
+
${this.clients.length > 1 ? html `
|
|
293
|
+
<tt-combobox
|
|
294
|
+
.openUpward=${true}
|
|
295
|
+
.value=${this.clientKey}
|
|
296
|
+
.onChange=${this.onClientChange}
|
|
297
|
+
>
|
|
298
|
+
${this.clients.map((client) => html `
|
|
299
|
+
<option slot="option" value=${client.clientKey}>
|
|
300
|
+
${client.displayName}
|
|
301
|
+
</option>
|
|
302
|
+
`)}
|
|
303
|
+
</tt-combobox>
|
|
304
|
+
` : html `
|
|
305
|
+
<div class="single-client-name">
|
|
306
|
+
${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}
|
|
307
|
+
</div>
|
|
308
|
+
`}
|
|
309
|
+
</div>
|
|
279
310
|
<a
|
|
280
311
|
id="logout-link"
|
|
281
312
|
class="nav-item"
|
|
@@ -283,7 +314,6 @@ export class TtNavbar extends LitElement {
|
|
|
283
314
|
@click=${this.onAnchorClick}
|
|
284
315
|
>${unsafeSVG(logout)}<span>Logout</span></a>
|
|
285
316
|
</div>
|
|
286
|
-
<div>
|
|
287
317
|
</nav>
|
|
288
318
|
`;
|
|
289
319
|
}
|
|
@@ -301,6 +331,15 @@ __decorate([
|
|
|
301
331
|
__decorate([
|
|
302
332
|
property({ type: String, attribute: 'client-key' })
|
|
303
333
|
], TtNavbar.prototype, "clientKey", void 0);
|
|
334
|
+
__decorate([
|
|
335
|
+
property({ type: String, attribute: 'active-route' })
|
|
336
|
+
], TtNavbar.prototype, "activeRoute", void 0);
|
|
337
|
+
__decorate([
|
|
338
|
+
property({ type: Array, converter: jsonArrayConverter })
|
|
339
|
+
], TtNavbar.prototype, "clients", void 0);
|
|
340
|
+
__decorate([
|
|
341
|
+
property({ type: Object })
|
|
342
|
+
], TtNavbar.prototype, "onClientChange", void 0);
|
|
304
343
|
__decorate([
|
|
305
344
|
queryAll('details')
|
|
306
345
|
], TtNavbar.prototype, "allDetailsElements", void 0);
|
package/dist/src/TtNavbar.js.map
CHANGED
|
@@ -1 +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';\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 @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\n if (this.campaignManagerUrl.includes(window.location.host)) {\n const links = Object.values(this.allNavLinks);\n bestMatch = links.find(link =>\n link.href.includes(this.campaignManagerUrl),\n );\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 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"]}
|
|
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 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/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { TtNavbar } from './TtNavbar.js';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { TtNavbar } from './TtNavbar.js';\nexport { Routes } from './Routes.js';\n"]}
|
package/dist/src/styles.js
CHANGED
|
@@ -105,8 +105,8 @@ export const styles = css `
|
|
|
105
105
|
|
|
106
106
|
.tertiary-nav.sidebar-closed {
|
|
107
107
|
.external-link,
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
hr,
|
|
109
|
+
#client-selector {
|
|
110
110
|
display: none;
|
|
111
111
|
visibility: hidden;
|
|
112
112
|
}
|
|
@@ -334,5 +334,30 @@ export const styles = css `
|
|
|
334
334
|
visibility: visible;
|
|
335
335
|
opacity: 1;
|
|
336
336
|
}
|
|
337
|
+
|
|
338
|
+
#client-selector {
|
|
339
|
+
display: flex;
|
|
340
|
+
align-items: center;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
#client-selector tt-combobox {
|
|
344
|
+
--tt-combobox-color: var(--color-text-inverted-400);
|
|
345
|
+
--tt-combobox-dropdown-color: var(--color-text-inverted-400);
|
|
346
|
+
--tt-combobox-list-background-color: var(--color-surface-inverted-100);
|
|
347
|
+
--tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);
|
|
348
|
+
--tt-combobox-placeholder-color: var(--color-text-inverted-300);
|
|
349
|
+
--tt-combobox-background-color: var(--color-surface-inverted-100);
|
|
350
|
+
--tt-combobox-hover-background-color: var(--color-surface-inverted-200);
|
|
351
|
+
--tt-combobox-list-max-width: 80ch;
|
|
352
|
+
--tt-combobox-min-width: 244px;
|
|
353
|
+
--tt-combobox-max-width: 244px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.single-client-name {
|
|
357
|
+
height: 39px;
|
|
358
|
+
padding: var(--space-scale-1); /* match tt-combobox height */
|
|
359
|
+
font-size: var(--font-size-100);
|
|
360
|
+
color: var(--color-text-inverted-400);
|
|
361
|
+
}
|
|
337
362
|
`;
|
|
338
363
|
//# sourceMappingURL=styles.js.map
|
package/dist/src/styles.js.map
CHANGED
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
|
|
@@ -1,7 +1,34 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
1
2
|
import '../src/tt-navbar.js';
|
|
2
|
-
declare const
|
|
3
|
+
declare const meta: {
|
|
3
4
|
title: string;
|
|
4
5
|
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
clientKey: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
clients: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
campaignManagerUrl: {
|
|
14
|
+
control: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
5
17
|
};
|
|
6
|
-
export default
|
|
7
|
-
|
|
18
|
+
export default meta;
|
|
19
|
+
interface Story<T> {
|
|
20
|
+
(args: T): TemplateResult;
|
|
21
|
+
args?: Partial<T>;
|
|
22
|
+
argTypes?: Record<string, unknown>;
|
|
23
|
+
}
|
|
24
|
+
interface Client {
|
|
25
|
+
clientKey: string;
|
|
26
|
+
displayName: string;
|
|
27
|
+
}
|
|
28
|
+
interface ArgTypes {
|
|
29
|
+
clientKey?: string;
|
|
30
|
+
clients?: Client[];
|
|
31
|
+
campaignManagerUrl?: string;
|
|
32
|
+
}
|
|
33
|
+
export declare const MultipleClients: Story<ArgTypes>;
|
|
34
|
+
export declare const SingleClient: Story<ArgTypes>;
|
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import '../src/tt-navbar.js';
|
|
3
|
-
|
|
3
|
+
const meta = {
|
|
4
4
|
title: 'TtNavbar',
|
|
5
5
|
component: 'tt-navbar',
|
|
6
|
+
argTypes: {
|
|
7
|
+
clientKey: { control: 'text' },
|
|
8
|
+
clients: { control: 'object' },
|
|
9
|
+
campaignManagerUrl: { control: 'text' }
|
|
10
|
+
}
|
|
6
11
|
};
|
|
7
|
-
|
|
12
|
+
export default meta;
|
|
13
|
+
const Template = ({ clientKey = 'zxd47KQGAP', clients = [], campaignManagerUrl = 'https://app.campaign-manager.triptease.io' }) => html `
|
|
8
14
|
<div>
|
|
9
15
|
<tt-navbar
|
|
10
|
-
client-key
|
|
11
|
-
campaign-manager-url
|
|
16
|
+
client-key=${clientKey}
|
|
17
|
+
campaign-manager-url=${campaignManagerUrl}
|
|
18
|
+
.clients=${clients}
|
|
12
19
|
>
|
|
13
|
-
<div slot="clientSelector">
|
|
14
|
-
<p>My Cool Client Selector</p>
|
|
15
|
-
</div>
|
|
16
20
|
</tt-navbar>
|
|
17
21
|
</div>
|
|
18
22
|
`;
|
|
19
|
-
export const
|
|
23
|
+
export const MultipleClients = Template.bind({});
|
|
24
|
+
MultipleClients.args = {
|
|
25
|
+
clientKey: 'zxd47KQGAP',
|
|
26
|
+
clients: [
|
|
27
|
+
{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
|
|
28
|
+
{ clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
|
|
29
|
+
]
|
|
30
|
+
};
|
|
31
|
+
export const SingleClient = Template.bind({});
|
|
32
|
+
SingleClient.args = {
|
|
33
|
+
clientKey: 'zxd47KQGAP',
|
|
34
|
+
clients: [
|
|
35
|
+
{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }
|
|
36
|
+
]
|
|
37
|
+
};
|
|
20
38
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,
|
|
1
|
+
{"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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '../src/tt-navbar.js';
|
|
2
2
|
import { elementUpdated, expect, fixture, nextFrame, waitUntil, } from '@open-wc/testing';
|
|
3
|
+
import { Routes } from '../src/Routes.js';
|
|
3
4
|
// eslint-disable-next-line no-undef
|
|
4
5
|
const getLinkByHref = (links, href) => {
|
|
5
6
|
for (const link of links) {
|
|
@@ -79,10 +80,29 @@ describe('TtNavbar', () => {
|
|
|
79
80
|
links?.forEach(l => l.click());
|
|
80
81
|
await waitUntil(() => expect(navigateEventCount).to.equal(13), 'navigate event did not fire');
|
|
81
82
|
});
|
|
82
|
-
it('should render
|
|
83
|
-
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
it('should render a combobox when multiple clients are provided', async () => {
|
|
84
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
|
|
85
|
+
navbar.clients = [
|
|
86
|
+
{ clientKey: CLIENT_KEY, displayName: 'Client One' },
|
|
87
|
+
{ clientKey: 'abc123', displayName: 'Client Two' },
|
|
88
|
+
];
|
|
89
|
+
await navbar.updateComplete;
|
|
90
|
+
const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
|
|
91
|
+
const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
|
|
92
|
+
expect(combobox).to.exist;
|
|
93
|
+
expect(singleClientName).to.not.exist;
|
|
94
|
+
});
|
|
95
|
+
it('should render the client name when only one client is provided', async () => {
|
|
96
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
|
|
97
|
+
navbar.clients = [
|
|
98
|
+
{ clientKey: CLIENT_KEY, displayName: 'Single Client' },
|
|
99
|
+
];
|
|
100
|
+
await navbar.updateComplete;
|
|
101
|
+
const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
|
|
102
|
+
const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
|
|
103
|
+
expect(singleClientName).to.exist;
|
|
104
|
+
expect(singleClientName?.textContent?.trim()).to.equal('Single Client');
|
|
105
|
+
expect(combobox).to.not.exist;
|
|
86
106
|
});
|
|
87
107
|
it('should render the logout link', async () => {
|
|
88
108
|
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
|
|
@@ -182,7 +202,7 @@ describe('TtNavbar', () => {
|
|
|
182
202
|
it('should show the current page as campaign manager when on the given campaign manager url', async () => {
|
|
183
203
|
const platformUrl = 'https://app.triptease.io';
|
|
184
204
|
const campaignManagerUrl = 'http://localhost:8000';
|
|
185
|
-
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl}></tt-navbar>`);
|
|
205
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`);
|
|
186
206
|
const anchor = navbar.shadowRoot.querySelector('a[aria-current="page"]');
|
|
187
207
|
expect(anchor).to.exist;
|
|
188
208
|
expect(anchor.textContent).to.include('Campaigns');
|