@triptease/tt-navbar 0.0.5 → 0.0.7
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/dist/src/TtNavbar.js +3 -2
- package/dist/src/TtNavbar.js.map +1 -1
- package/dist/src/styles.js +7 -1
- package/dist/src/styles.js.map +1 -1
- package/dist/stories/index.stories.js +4 -2
- package/dist/stories/index.stories.js.map +1 -1
- package/dist/test/tt-navbar.test.js +17 -8
- package/dist/test/tt-navbar.test.js.map +1 -1
- package/dist/web/TtNavbar.js +11 -4
- package/dist/web/TtNavbar.js.map +2 -2
- package/dist/web/index.js +11 -4
- package/dist/web/index.js.map +2 -2
- package/dist/web/styles.js +8 -2
- package/dist/web/styles.js.map +2 -2
- package/dist/web/tt-navbar.js +11 -4
- package/dist/web/tt-navbar.js.map +2 -2
- package/package.json +1 -1
- package/src/TtNavbar.ts +3 -2
- package/src/styles.ts +7 -1
- package/stories/index.stories.ts +4 -5
- package/test/tt-navbar.test.ts +42 -21
- package/demo/index.html +0 -30
package/dist/src/TtNavbar.js
CHANGED
|
@@ -96,6 +96,7 @@ export class TtNavbar extends LitElement {
|
|
|
96
96
|
>
|
|
97
97
|
</div>
|
|
98
98
|
</details>
|
|
99
|
+
<slot name="clientSelector"></slot>
|
|
99
100
|
</nav>
|
|
100
101
|
`;
|
|
101
102
|
}
|
|
@@ -105,9 +106,9 @@ __decorate([
|
|
|
105
106
|
property({ type: Function })
|
|
106
107
|
], TtNavbar.prototype, "navigate", void 0);
|
|
107
108
|
__decorate([
|
|
108
|
-
property({ type: String })
|
|
109
|
+
property({ type: String, attribute: 'base-url' })
|
|
109
110
|
], TtNavbar.prototype, "baseUrl", void 0);
|
|
110
111
|
__decorate([
|
|
111
|
-
property({ type: String })
|
|
112
|
+
property({ type: String, attribute: 'client-key' })
|
|
112
113
|
], TtNavbar.prototype, "clientKey", void 0);
|
|
113
114
|
//# sourceMappingURL=TtNavbar.js.map
|
package/dist/src/TtNavbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAYU,aAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;YAE9D,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,aAAa,CAAC;YAExC,OAAO,IAAI,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAYU,aAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;YAE9D,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,aAAa,CAAC;YAExC,OAAO,IAAI,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IAmFJ,CAAC;IAjFC,MAAM;QACJ,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,EAAE;kBACL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,IAAI,CAAC,aAAa;;kBAE/C,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,IAAI,CAAC,aAAa;;;;;;;qBAOpD,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC;uBAClC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,6BAA6B,CAAC;uBAC1C,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;uBAClD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC;uBACtC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC;uBAC9B,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,+BAA+B,CAAC;uBAC5C,IAAI,CAAC,aAAa;;;;;;;;;sBASnB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,IAAI,CAAC,aAAa;;;;qBAIvD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC;uBACxC,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,yCAAyC,CAAC;uBACtD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;uBACzC,IAAI,CAAC,aAAa;;;;;;;KAOpC,CAAC;IACJ,CAAC;;AA1GM,eAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CACmB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCACjC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACjC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.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: 'base-url' })\n baseUrl?: string;\n\n @property({ type: String, attribute: 'client-key' })\n clientKey?: string;\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.baseUrl) return formattedPath;\n\n return new URL(formattedPath, this.baseUrl).toString();\n };\n\n private onAnchorClick = (e: MouseEvent) => {\n if (this.navigate) {\n this.navigate(e);\n }\n };\n\n render() {\n return html`\n <nav id=${this.id}>\n <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>\n <a href=\"https://app.campaign-manager.triptease.io\">Campaigns</a>\n <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}\n >Channels</a\n >\n <details>\n <summary>Market Insights</summary>\n <div>\n <a\n href=${this.buildUrl('/parity/$CLIENT_KEY')}\n @click=${this.onAnchorClick}\n >Parity</a\n >\n <a\n href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n @click=${this.onAnchorClick}\n >Guest insights</a\n >\n </div>\n </details>\n <details>\n <summary>Settings</summary>\n <div>\n <a\n href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n @click=${this.onAnchorClick}\n >Email setup</a\n >\n <a\n href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n @click=${this.onAnchorClick}\n >CRM connectivity</a\n >\n <a\n href=${this.buildUrl('/settings/group')}\n @click=${this.onAnchorClick}\n >Group settings</a\n >\n <a\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>\n <summary>Account</summary>\n <div>\n <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}\n >User settings</a\n >\n <a\n href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n @click=${this.onAnchorClick}\n >Team and permissions</a\n >\n </div>\n </details>\n <details>\n <summary>Billing</summary>\n <div>\n <a\n href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n @click=${this.onAnchorClick}\n >Booking reconciliation</a\n >\n <a\n href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n @click=${this.onAnchorClick}\n >Subscriptions</a\n >\n </div>\n </details>\n <slot name=\"clientSelector\"></slot>\n </nav>\n `;\n }\n}\n"]}
|
package/dist/src/styles.js
CHANGED
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,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n height: 100vh;\n max-width: 260px;\n }\n\n nav {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n nav details div {\n display: flex;\n flex-direction: column;\n }\n\n hr {\n background: black;\n width: 100%;\n height: 1px;\n border: none;\n }\n`;\n"]}
|
|
@@ -6,10 +6,12 @@ export default {
|
|
|
6
6
|
};
|
|
7
7
|
const Template = () => html `
|
|
8
8
|
<div>
|
|
9
|
-
<tt-navbar
|
|
9
|
+
<tt-navbar client-key="zxd47KQGAP">
|
|
10
|
+
<div slot="clientSelector">
|
|
11
|
+
<p>My Cool Client Selector</p>
|
|
12
|
+
</div>
|
|
10
13
|
</tt-navbar>
|
|
11
14
|
</div>
|
|
12
|
-
|
|
13
15
|
`;
|
|
14
16
|
export const Regular = Template.bind({});
|
|
15
17
|
//# 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,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;CACvB,CAAC;
|
|
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;;;;;;;;CAQ1B,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 client-key=\"zxd47KQGAP\">\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"]}
|
|
@@ -11,7 +11,7 @@ const getLinkByHref = (links, href) => {
|
|
|
11
11
|
};
|
|
12
12
|
const CLIENT_KEY = 'zxd47KQGAP';
|
|
13
13
|
describe('TtNavbar', () => {
|
|
14
|
-
it(
|
|
14
|
+
it('should throw an error if the clientKey is not provided', async () => {
|
|
15
15
|
try {
|
|
16
16
|
await fixture(`<tt-navbar></tt-navbar>`);
|
|
17
17
|
}
|
|
@@ -20,32 +20,36 @@ describe('TtNavbar', () => {
|
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
it('should render with the default links', async () => {
|
|
23
|
-
const navbar = await fixture(`<tt-navbar
|
|
23
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
|
|
24
24
|
const links = navbar.shadowRoot?.querySelectorAll('a');
|
|
25
25
|
expect(links?.length).to.equal(13);
|
|
26
26
|
if (links) {
|
|
27
27
|
expect(getLinkByHref(links, '/')).to.exist;
|
|
28
|
-
expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
|
|
28
|
+
expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
|
|
29
|
+
.to.exist;
|
|
29
30
|
expect(getLinkByHref(links, '/channels')).to.exist;
|
|
30
31
|
expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
|
|
31
32
|
expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;
|
|
32
|
-
expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
|
|
33
|
+
expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
|
|
34
|
+
.exist;
|
|
33
35
|
expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
|
|
34
36
|
expect(getLinkByHref(links, `/settings/group`)).to.exist;
|
|
35
37
|
expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;
|
|
36
38
|
expect(getLinkByHref(links, `/account`)).to.exist;
|
|
37
39
|
expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;
|
|
38
|
-
expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))
|
|
40
|
+
expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))
|
|
41
|
+
.to.exist;
|
|
39
42
|
expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;
|
|
40
43
|
}
|
|
41
44
|
});
|
|
42
45
|
it('should render platform URLs against the base URL when it is defined', async () => {
|
|
43
46
|
const baseUrl = 'https://app.triptease.io';
|
|
44
|
-
const navbar = await fixture(`<tt-navbar
|
|
47
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY} base-url="${baseUrl}"></tt-navbar>`);
|
|
45
48
|
const links = navbar.shadowRoot?.querySelectorAll('a');
|
|
46
49
|
if (links) {
|
|
47
50
|
expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;
|
|
48
|
-
expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
|
|
51
|
+
expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
|
|
52
|
+
.to.exist; // This shouldn't change
|
|
49
53
|
expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
|
|
50
54
|
}
|
|
51
55
|
});
|
|
@@ -55,12 +59,17 @@ describe('TtNavbar', () => {
|
|
|
55
59
|
e.preventDefault();
|
|
56
60
|
navigateEventCount += 1;
|
|
57
61
|
};
|
|
58
|
-
const navbar = await fixture(`<tt-navbar
|
|
62
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
|
|
59
63
|
navbar.navigate = onNavigate;
|
|
60
64
|
await navbar.updateComplete;
|
|
61
65
|
const links = navbar.shadowRoot?.querySelectorAll('a');
|
|
62
66
|
links?.forEach(l => l.click());
|
|
63
67
|
await waitUntil(() => expect(navigateEventCount).to.equal(12), 'navigate event did not fire');
|
|
64
68
|
});
|
|
69
|
+
it('should render the given client selector', async () => {
|
|
70
|
+
const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`);
|
|
71
|
+
const clientSelector = navbar.querySelector('#myCoolClientSelector');
|
|
72
|
+
expect(clientSelector).to.exist;
|
|
73
|
+
});
|
|
65
74
|
});
|
|
66
75
|
//# sourceMappingURL=tt-navbar.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG9D,oCAAoC;AACpC,MAAM,aAAa,GAAG,CAAC,
|
|
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 { expect, fixture, waitUntil } from '@open-wc/testing';\nimport { TtNavbar } from '../src/index.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 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 expect(links?.length).to.equal(13);\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/group`)).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 baseUrl = 'https://app.triptease.io';\n const navbar = await fixture<TtNavbar>(\n `<tt-navbar client-key=${CLIENT_KEY} base-url=\"${baseUrl}\"></tt-navbar>`,\n );\n const links = navbar.shadowRoot?.querySelectorAll('a');\n\n if (links) {\n expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;\n expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n .to.exist; // This shouldn't change\n expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;\n }\n });\n\n it('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(12),\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"]}
|
package/dist/web/TtNavbar.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @triptease/tt-navbar v0.0.
|
|
2
|
+
* @triptease/tt-navbar v0.0.7
|
|
3
3
|
*/
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -592,10 +592,16 @@ function n4(t3) {
|
|
|
592
592
|
|
|
593
593
|
// src/styles.ts
|
|
594
594
|
var styles = i`
|
|
595
|
-
|
|
595
|
+
:host {
|
|
596
|
+
display: block;
|
|
597
|
+
height: 100vh;
|
|
596
598
|
max-width: 260px;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
nav {
|
|
597
602
|
display: flex;
|
|
598
603
|
flex-direction: column;
|
|
604
|
+
height: 100%;
|
|
599
605
|
}
|
|
600
606
|
|
|
601
607
|
nav details div {
|
|
@@ -704,6 +710,7 @@ var TtNavbar = class extends i4 {
|
|
|
704
710
|
>
|
|
705
711
|
</div>
|
|
706
712
|
</details>
|
|
713
|
+
<slot name="clientSelector"></slot>
|
|
707
714
|
</nav>
|
|
708
715
|
`;
|
|
709
716
|
}
|
|
@@ -713,10 +720,10 @@ __decorateClass([
|
|
|
713
720
|
n4({ type: Function })
|
|
714
721
|
], TtNavbar.prototype, "navigate", 2);
|
|
715
722
|
__decorateClass([
|
|
716
|
-
n4({ type: String })
|
|
723
|
+
n4({ type: String, attribute: "base-url" })
|
|
717
724
|
], TtNavbar.prototype, "baseUrl", 2);
|
|
718
725
|
__decorateClass([
|
|
719
|
-
n4({ type: String })
|
|
726
|
+
n4({ type: String, attribute: "client-key" })
|
|
720
727
|
], TtNavbar.prototype, "clientKey", 2);
|
|
721
728
|
export {
|
|
722
729
|
TtNavbar
|