@swisspost/design-system-components 10.0.0-next.49 → 10.0.0-next.50
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/cjs/{event-from-C6kpQwhw.js → event-from-CLvtSUKf.js} +20 -6
- package/dist/cjs/{get-root-CfQ2PogP.js → get-root-CyMf3Vsd.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-CR0YynRY.js → package-qtH-QrKv.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +3 -3
- package/dist/cjs/post-avatar.cjs.entry.js +3 -3
- package/dist/cjs/post-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/post-banner.cjs.entry.js +5 -5
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +4 -4
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +11 -6
- package/dist/cjs/post-card-control.cjs.entry.js +2 -2
- package/dist/cjs/post-closebutton_15.cjs.entry.js +173 -93
- package/dist/cjs/post-collapsible_2.cjs.entry.js +4 -4
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +2 -2
- package/dist/cjs/post-linkarea.cjs.entry.js +2 -2
- package/dist/cjs/post-popover.cjs.entry.js +4 -4
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-header.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/post-tabs.cjs.entry.js +3 -3
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +3 -3
- package/dist/cjs/post-tooltip.cjs.entry.js +3 -3
- package/dist/collection/components/post-avatar/post-avatar.css +1 -1
- package/dist/collection/components/post-banner/post-banner.js +2 -2
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js +30 -4
- package/dist/collection/components/post-closebutton/button-types.js +1 -0
- package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
- package/dist/collection/components/post-closebutton/post-closebutton.js +65 -5
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +10 -11
- package/dist/collection/components/post-icon/post-icon.js +1 -1
- package/dist/collection/components/post-language-option/post-language-option.js +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.js +1 -1
- package/dist/collection/components/post-linkarea/post-linkarea.js +1 -1
- package/dist/collection/components/post-list/post-list.js +1 -1
- package/dist/collection/components/post-list-item/post-list-item.js +1 -1
- package/dist/collection/components/post-logo/post-logo.js +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +71 -19
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +1 -1
- package/dist/collection/components/post-menu/post-menu.css +1 -1
- package/dist/collection/components/post-menu/post-menu.js +15 -6
- package/dist/collection/components/post-menu-item/post-menu-item.css +1 -1
- package/dist/collection/components/post-menu-item/post-menu-item.js +1 -1
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +1 -1
- package/dist/collection/components/post-popover/post-popover.css +1 -1
- package/dist/collection/components/post-popover/post-popover.js +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +2 -2
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.js +1 -1
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +1 -1
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +1 -1
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
- package/dist/collection/utils/event-from.js +20 -6
- package/dist/components/event-from.js +20 -6
- package/dist/components/package.js +1 -1
- package/dist/components/post-avatar.js +1 -1
- package/dist/components/post-banner.js +2 -2
- package/dist/components/post-breadcrumbs.js +13 -6
- package/dist/components/post-closebutton.js +1 -44
- package/dist/components/post-closebutton2.js +77 -0
- package/dist/components/post-header.js +8 -12
- package/dist/components/post-icon2.js +1 -1
- package/dist/components/post-language-option.js +1 -1
- package/dist/components/post-language-switch.js +1 -1
- package/dist/components/post-linkarea.js +1 -1
- package/dist/components/post-list-item.js +1 -1
- package/dist/components/post-list.js +1 -1
- package/dist/components/post-logo.js +1 -1
- package/dist/components/post-mainnavigation.js +2 -2
- package/dist/components/post-megadropdown-trigger.js +1 -1
- package/dist/components/post-megadropdown.js +72 -20
- package/dist/components/post-menu-item2.js +2 -2
- package/dist/components/post-menu-trigger2.js +1 -1
- package/dist/components/post-menu2.js +14 -7
- package/dist/components/post-popover.js +15 -3
- package/dist/components/post-popovercontainer2.js +2 -2
- package/dist/components/post-rating.js +1 -1
- package/dist/components/post-tab-header.js +1 -1
- package/dist/components/post-tab-panel.js +1 -1
- package/dist/components/post-tabs.js +1 -1
- package/dist/components/post-togglebutton.js +1 -1
- package/dist/components/post-tooltip-trigger.js +1 -1
- package/dist/components/post-tooltip.js +1 -1
- package/dist/components/react/{p-B6vPT8S3.js → p-B392lG2N.js} +2 -2
- package/dist/components/react/{p-D1oOccKr.js → p-B9Y7UQKI.js} +2 -2
- package/dist/components/react/{p-DOo9tmN-.js → p-BXPcgIqO.js} +3 -3
- package/dist/components/react/{p-Amg0f2Yo.js → p-BcVKzjda.js} +2 -2
- package/dist/components/react/{p-xelWyg_P.js → p-BlOv-NDA.js} +5 -5
- package/dist/components/react/{p-BMdFdJWl.js → p-BmpB1vs4.js} +1 -1
- package/dist/components/react/p-BuKAaKXE.js +78 -0
- package/dist/components/react/{p-D50E7y6E.js → p-Bw6vnK1I.js} +17 -10
- package/dist/components/react/{p-BS0ZqwA-.js → p-CDsgZHvX.js} +3 -3
- package/dist/{esm/event-from-kraHE1r3.js → components/react/p-CzIKqBrS.js} +20 -6
- package/dist/components/react/p-DimG3b3P.js +3 -0
- package/dist/components/react/{p-Do9awHW7.js → p-DnHwlsBi.js} +2 -2
- package/dist/components/react/{p-BDs0pvkX.js → p-U9MTjvRU.js} +2 -2
- package/dist/components/react/post-accordion-item.js +1 -1
- package/dist/components/react/post-accordion.js +1 -1
- package/dist/components/react/post-avatar.js +2 -2
- package/dist/components/react/post-back-to-top.js +2 -2
- package/dist/components/react/post-banner.js +4 -4
- package/dist/components/react/post-breadcrumb-item.js +1 -1
- package/dist/components/react/post-breadcrumbs.js +20 -13
- package/dist/components/react/post-card-control.js +2 -2
- package/dist/components/react/post-closebutton.js +1 -45
- package/dist/components/react/post-collapsible-trigger.js +1 -1
- package/dist/components/react/post-collapsible.js +1 -1
- package/dist/components/react/post-footer.js +6 -6
- package/dist/components/react/post-header.js +10 -14
- package/dist/components/react/post-icon.js +1 -1
- package/dist/components/react/post-language-option.js +2 -2
- package/dist/components/react/post-language-switch.js +7 -7
- package/dist/components/react/post-linkarea.js +2 -2
- package/dist/components/react/post-list-item.js +2 -2
- package/dist/components/react/post-list.js +2 -2
- package/dist/components/react/post-logo.js +2 -2
- package/dist/components/react/post-mainnavigation.js +4 -4
- package/dist/components/react/post-megadropdown-trigger.js +3 -3
- package/dist/components/react/post-megadropdown.js +73 -21
- package/dist/components/react/post-menu-item.js +1 -1
- package/dist/components/react/post-menu-trigger.js +1 -1
- package/dist/components/react/post-menu.js +1 -1
- package/dist/components/react/post-popover.js +17 -5
- package/dist/components/react/post-popovercontainer.js +1 -1
- package/dist/components/react/post-rating.js +3 -3
- package/dist/components/react/post-tab-header.js +2 -2
- package/dist/components/react/post-tab-panel.js +2 -2
- package/dist/components/react/post-tabs.js +2 -2
- package/dist/components/react/post-togglebutton.js +2 -2
- package/dist/components/react/post-tooltip-trigger.js +2 -2
- package/dist/components/react/post-tooltip.js +3 -3
- package/dist/docs.json +125 -9
- package/dist/{components/react/p-kraHE1r3.js → esm/event-from-CzIKqBrS.js} +20 -6
- package/dist/esm/{get-root-hlzxoycr.js → get-root-BkQ3CrLq.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-DimG3b3P.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +3 -3
- package/dist/esm/post-avatar.entry.js +3 -3
- package/dist/esm/post-back-to-top.entry.js +2 -2
- package/dist/esm/post-banner.entry.js +5 -5
- package/dist/esm/post-breadcrumb-item_2.entry.js +4 -4
- package/dist/esm/post-breadcrumbs.entry.js +12 -7
- package/dist/esm/post-card-control.entry.js +2 -2
- package/dist/esm/post-closebutton_15.entry.js +173 -93
- package/dist/esm/post-collapsible_2.entry.js +4 -4
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +2 -2
- package/dist/esm/post-linkarea.entry.js +2 -2
- package/dist/esm/post-popover.entry.js +4 -4
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/post-tab-header.entry.js +3 -3
- package/dist/esm/post-tab-panel.entry.js +3 -3
- package/dist/esm/post-tabs.entry.js +3 -3
- package/dist/esm/post-tooltip-trigger.entry.js +3 -3
- package/dist/esm/post-tooltip.entry.js +3 -3
- package/dist/post-components/{p-b0aaa058.entry.js → p-048d2c1a.entry.js} +1 -1
- package/dist/post-components/p-0a4d9f33.entry.js +1 -0
- package/dist/post-components/{p-33008981.entry.js → p-11abb64f.entry.js} +1 -1
- package/dist/post-components/{p-36358cd4.entry.js → p-1253185c.entry.js} +1 -1
- package/dist/post-components/{p-a982458f.entry.js → p-15e0d4b8.entry.js} +1 -1
- package/dist/post-components/{p-8d2e5814.entry.js → p-1d4252ba.entry.js} +1 -1
- package/dist/post-components/{p-e49aa78e.entry.js → p-3d30eafa.entry.js} +1 -1
- package/dist/post-components/{p-01bc39c2.entry.js → p-4114fc83.entry.js} +1 -1
- package/dist/post-components/p-5ddde390.entry.js +1 -0
- package/dist/post-components/{p-16da91bc.entry.js → p-89411986.entry.js} +1 -1
- package/dist/post-components/{p-84395e1d.entry.js → p-9bbf7271.entry.js} +1 -1
- package/dist/post-components/{p-BkvZk-PA.js → p-CBFgkSgY.js} +1 -1
- package/dist/post-components/p-CJ80BZ06.js +1 -0
- package/dist/post-components/p-CzIKqBrS.js +1 -0
- package/dist/post-components/p-DimG3b3P.js +1 -0
- package/dist/post-components/p-b034d196.entry.js +1 -0
- package/dist/post-components/p-b36c129a.entry.js +1 -0
- package/dist/post-components/{p-2f2f9b22.entry.js → p-b82e7cbe.entry.js} +1 -1
- package/dist/post-components/p-e7fbb03d.entry.js +1 -0
- package/dist/post-components/p-f1d53256.entry.js +1 -0
- package/dist/post-components/{p-26a04741.entry.js → p-f97f3a19.entry.js} +1 -1
- package/dist/post-components/{p-bdeef760.entry.js → p-f9d044a3.entry.js} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-breadcrumbs/post-breadcrumbs.d.ts +5 -0
- package/dist/types/components/post-closebutton/button-types.d.ts +2 -0
- package/dist/types/components/post-closebutton/post-closebutton.d.ts +10 -1
- package/dist/types/components/post-header/post-header.d.ts +3 -0
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +32 -6
- package/dist/types/components/post-menu/post-menu.d.ts +3 -1
- package/dist/types/components.d.ts +22 -2
- package/dist/types/utils/event-from.d.ts +2 -1
- package/hydrate/index.js +188 -82
- package/hydrate/index.mjs +188 -82
- package/package.json +3 -3
- package/dist/components/react/p-DO48NanC.js +0 -3
- package/dist/esm/package-DO48NanC.js +0 -3
- package/dist/post-components/p-0dc1e940.entry.js +0 -1
- package/dist/post-components/p-71c48d48.entry.js +0 -1
- package/dist/post-components/p-848c10ac.entry.js +0 -1
- package/dist/post-components/p-9dbe6595.entry.js +0 -1
- package/dist/post-components/p-DO48NanC.js +0 -1
- package/dist/post-components/p-_0G7tavk.js +0 -1
- package/dist/post-components/p-d221395c.entry.js +0 -1
- package/dist/post-components/p-eb405167.entry.js +0 -1
- package/dist/post-components/p-kraHE1r3.js +0 -1
- package/dist/cjs/{breakpoints-DmZ_BQGo.js → breakpoints-CEkeixld.js} +3 -3
- package/dist/esm/{breakpoints-_0G7tavk.js → breakpoints-CJ80BZ06.js} +3 -3
|
@@ -49,7 +49,7 @@ export class PostLanguageOption {
|
|
|
49
49
|
this.emitChange();
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: 'b86bf33feb890e5dfbfae16f45ce2e56fdfaf16a', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "post-language-option"; }
|
|
55
55
|
static get originalStyleUrls() {
|
|
@@ -80,7 +80,7 @@ export class PostLanguageSwitch {
|
|
|
80
80
|
return (h(Host, { "data-version": version }, h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
|
|
81
81
|
}
|
|
82
82
|
renderDropdown() {
|
|
83
|
-
return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container" }, h("slot", null))));
|
|
83
|
+
return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, h("slot", null))));
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
86
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -25,7 +25,7 @@ export class PostLinkarea {
|
|
|
25
25
|
this.mutationObserver.disconnect();
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: 'faa2a8c9b2fc4261496e0dbb091bae2aeee04e3b', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '57c30507720e9a04436cb4e518aa19b023cd2c39' })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "post-linkarea"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,7 +31,7 @@ export class PostList {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '908588a3f1261efbb85dbefade9f85f8ec6f16f8', "data-version": version }, h("div", { key: '44b224379be814dab98e16ad12a3ca0f10e61ac0', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '1aed36b7c286796a4d617643e7606e63bc2dd95a' })), h("div", { key: '3e1d137712b3e7616bab450426964f6c9334198e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'fd5abb2fca95d32295fbfa158795413264200ae8', name: "post-list-item" }))));
|
|
35
35
|
}
|
|
36
36
|
static get is() { return "post-list"; }
|
|
37
37
|
static get originalStyleUrls() {
|
|
@@ -8,7 +8,7 @@ export class PostListItem {
|
|
|
8
8
|
this.host.setAttribute('slot', 'post-list-item');
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: '67204f0c31a6bc4cad3359030a8da57a045de7c5', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '0c68073c601a3792880fc0e68af24a4a204548ed' })));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "post-list-item"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -20,7 +20,7 @@ export class PostLogo {
|
|
|
20
20
|
render() {
|
|
21
21
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
22
22
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'acd3bfab8d395cde2d79066580a8e53e65c426f4', "data-version": version }, h(LogoTag, { key: 'c5c2f8a2be6204bb693d5d53fd95e75133518a1d', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '675b756441237173c1046b74c2dfe2dfc08bfd7f', class: "description" }, h("slot", { key: '710fd3483f56ad353e1a99f4fff2acc78ee53b46', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'e72b70e26da0fefd52a7e9aec41772dd5c9f0258', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'b67d56c9319bb576a56c76c5299f4a81c93d6c3c', id: "Logo" }, h("rect", { key: '8c073060a51c5e6942c1b33fc5c2a3a7eb422f07', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f97840922aa977b0f74bc5e8a88ff99136c80e46', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'f7faf347bb660e2a4550b48fc2d997ad01b2b8ae', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "post-logo"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-current=page],post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}
|
|
1
|
+
post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:flex;overflow:hidden;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;z-index:5;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{margin-inline-end:-3rem}post-mainnavigation .scroll-control.scroll-right{margin-inline-start:-3rem}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.active .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.active .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.active .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.active .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)).active,post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-current=page],post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-expanded=true],post-mainnavigation post-megadropdown a.active,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}
|
|
@@ -142,7 +142,7 @@ export class PostMainnavigation {
|
|
|
142
142
|
}, NAVBAR_DISABLE_DURATION);
|
|
143
143
|
}
|
|
144
144
|
render() {
|
|
145
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: '04ae6ffdd6560113431b70c3c27f16057fc9a87d', slot: "post-mainnavigation", version: version }, h("div", { key: '2f79728dcbbfe94a343b880e2ba07331f45c9f30', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '3e762484bbcd03ac0d67b4ab722ffcd862bb073e', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1150bfdf724e4d93b45f1fff071fba56d31d15b5', ref: el => (this.navbar = el) }, h("slot", { key: '3496b7c6d2d75300b1727148ff9b9965717d9909' })), h("div", { key: '1fa6dd50d9650ab6e5047c607f7e5ed0416ed245', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '9487d621e1d7289a0afeb1d0443ec8bc70cd5f3e', "aria-hidden": "true", name: "chevronright" }))));
|
|
146
146
|
}
|
|
147
147
|
static get is() { return "post-mainnavigation"; }
|
|
148
148
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.
|
|
1
|
+
@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}
|
|
@@ -33,11 +33,20 @@ export class PostMegadropdown {
|
|
|
33
33
|
this.hide(false);
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
get megadropdownTrigger() {
|
|
37
|
+
const hostId = this.host.getAttribute('id');
|
|
38
|
+
return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
|
|
39
|
+
}
|
|
40
|
+
connectedCallback() {
|
|
41
|
+
window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
|
|
42
|
+
}
|
|
43
|
+
componentDidRender() {
|
|
44
|
+
this.getFocusableElements();
|
|
45
|
+
}
|
|
46
|
+
componentDidLoad() {
|
|
47
|
+
this.checkInitialAriaCurrent();
|
|
48
|
+
this.setupObserver();
|
|
49
|
+
this.handleAriaCurrentChange([]);
|
|
41
50
|
}
|
|
42
51
|
disconnectedCallback() {
|
|
43
52
|
this.removeListeners();
|
|
@@ -45,9 +54,7 @@ export class PostMegadropdown {
|
|
|
45
54
|
if (PostMegadropdown.activeDropdown === this) {
|
|
46
55
|
PostMegadropdown.activeDropdown = null;
|
|
47
56
|
}
|
|
48
|
-
|
|
49
|
-
componentDidRender() {
|
|
50
|
-
this.getFocusableElements();
|
|
57
|
+
this.defaultSlotObserver.disconnect();
|
|
51
58
|
}
|
|
52
59
|
/**
|
|
53
60
|
* Toggles the dropdown visibility based on its current state.
|
|
@@ -96,8 +103,11 @@ export class PostMegadropdown {
|
|
|
96
103
|
async focusFirst() {
|
|
97
104
|
this.firstFocusableEl?.focus();
|
|
98
105
|
}
|
|
99
|
-
|
|
100
|
-
|
|
106
|
+
breakpointChange(e) {
|
|
107
|
+
this.device = e.detail;
|
|
108
|
+
if (this.device === 'desktop' && this.isVisible) {
|
|
109
|
+
this.animationClass = null;
|
|
110
|
+
}
|
|
101
111
|
}
|
|
102
112
|
/**
|
|
103
113
|
* Forces the dropdown to close without animation.
|
|
@@ -129,14 +139,6 @@ export class PostMegadropdown {
|
|
|
129
139
|
getFocusableElements() {
|
|
130
140
|
const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
|
|
131
141
|
const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
|
|
132
|
-
const hostId = this.host.getAttribute('id');
|
|
133
|
-
// Proceed if the host has an ID and one of its focusable children is marked as the current page (`aria-current="page"`)
|
|
134
|
-
if (hostId && focusableChildren.some(el => el.getAttribute('aria-current') === 'page')) {
|
|
135
|
-
// Find the trigger element via its "for" attribute, then locate its button and set `aria-current="page"`
|
|
136
|
-
document
|
|
137
|
-
.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
|
|
138
|
-
.classList.add('selected');
|
|
139
|
-
}
|
|
140
142
|
this.firstFocusableEl = focusableChildren[0];
|
|
141
143
|
this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
|
|
142
144
|
}
|
|
@@ -162,9 +164,59 @@ export class PostMegadropdown {
|
|
|
162
164
|
}
|
|
163
165
|
}
|
|
164
166
|
}
|
|
167
|
+
/**
|
|
168
|
+
* Sets up a MutationObserver on the host to watch for changes
|
|
169
|
+
* in `aria-current` attributes.
|
|
170
|
+
*/
|
|
171
|
+
setupObserver() {
|
|
172
|
+
const config = {
|
|
173
|
+
subtree: true,
|
|
174
|
+
attributes: true,
|
|
175
|
+
attributeFilter: ['aria-current'],
|
|
176
|
+
};
|
|
177
|
+
this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
|
|
178
|
+
this.defaultSlotObserver.observe(this.host, config);
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Adds or removes the 'active' class on the megadropdown trigger button
|
|
182
|
+
* based on the active state.
|
|
183
|
+
*
|
|
184
|
+
* @param isActive - Whether the trigger should appear active
|
|
185
|
+
*/
|
|
186
|
+
setTriggerActive(isActive) {
|
|
187
|
+
const trigger = this.megadropdownTrigger;
|
|
188
|
+
if (!trigger)
|
|
189
|
+
return;
|
|
190
|
+
if (isActive) {
|
|
191
|
+
trigger.classList.add('active');
|
|
192
|
+
}
|
|
193
|
+
else {
|
|
194
|
+
trigger.classList.remove('active');
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* Updates the megadropdown trigger state when the megadropdown content changes.
|
|
199
|
+
* Checks if any element inside the megadropdown has `aria-current="page"`
|
|
200
|
+
* and sets the trigger as active accordingly.
|
|
201
|
+
*/
|
|
202
|
+
handleAriaCurrentChange(mutations) {
|
|
203
|
+
if (!mutations.length)
|
|
204
|
+
return;
|
|
205
|
+
const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
|
|
206
|
+
this.setTriggerActive(hasCurrentPage);
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* Checks on initialization if any element inside the megadropdown
|
|
210
|
+
* has `aria-current="page"` and sets the trigger as active if so.
|
|
211
|
+
*/
|
|
212
|
+
checkInitialAriaCurrent() {
|
|
213
|
+
const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
|
|
214
|
+
if (hasCurrentPage)
|
|
215
|
+
this.setTriggerActive(true);
|
|
216
|
+
}
|
|
165
217
|
render() {
|
|
166
218
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
167
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: '40023f8684db4cfff78f69d2d5786e4c3a0332b4', version: version }, h("div", { key: '986f114148d355b7a6e92c19d1c02c925eb27fce', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'c14d01be681f596148d39f272375615eafdf25c0', class: "megadropdown" }, h("slot", { key: '5f60ff26e694c107c569e06d30e18a5940d3e7b1', name: "megadropdown-title" }), h("div", { key: '49202a8a0dcebc086220db637cf25d96510b6eac', class: "megadropdown-content" }, h("slot", { key: '98593b2824d21f065b4c183c8980d94136b175bf' })), h("div", { key: 'ed1dfbbebd101a98153657007f8037c0282b47ef', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '4e737d72e77271cb025976ae5e5fe4d5f653480a', name: "back-button" })), h("div", { key: '0bf1316c091efbf294be89efeebae7937c013b29', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '594a412944fff3fee09639b85cc13a9291b96a10', name: "close-button" }))))));
|
|
168
220
|
}
|
|
169
221
|
static get is() { return "post-megadropdown"; }
|
|
170
222
|
static get originalStyleUrls() {
|
|
@@ -93,7 +93,7 @@ export class PostMegadropdownTrigger {
|
|
|
93
93
|
document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: 'a817027c84bb4a3418807ccbb200d36190e03d6f', "data-version": version, "tab-index": "-1" }, h("button", { key: '1e560734f4a5f742a9efa2bff6833c1ae3e11117' }, h("slot", { key: '42bf1a30f432b1fcf8e0fec1cd1d499126623234' }))));
|
|
97
97
|
}
|
|
98
98
|
static get is() { return "post-megadropdown-trigger"; }
|
|
99
99
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}
|
|
1
|
+
:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}
|
|
@@ -12,9 +12,10 @@ import { h, Host, } from "@stencil/core";
|
|
|
12
12
|
import { PLACEMENT_TYPES } from "../../types/index";
|
|
13
13
|
import { version } from "../../../../package";
|
|
14
14
|
import { getFocusableChildren } from "../../utils/get-focusable-children";
|
|
15
|
-
import { getRoot, checkEmptyOrOneOf, EventFrom } from "../../utils/index";
|
|
15
|
+
import { getRoot, checkEmptyOrOneOf, EventFrom, checkRequiredAndType } from "../../utils/index";
|
|
16
16
|
/**
|
|
17
17
|
* @part menu - The container element that holds the list of menu items.
|
|
18
|
+
* @slot header - Holds the header part of the menu.
|
|
18
19
|
*/
|
|
19
20
|
export class PostMenu {
|
|
20
21
|
constructor() {
|
|
@@ -91,6 +92,9 @@ export class PostMenu {
|
|
|
91
92
|
validatePlacement() {
|
|
92
93
|
checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
|
|
93
94
|
}
|
|
95
|
+
validateLabel() {
|
|
96
|
+
checkRequiredAndType(this, 'label', 'string');
|
|
97
|
+
}
|
|
94
98
|
connectedCallback() {
|
|
95
99
|
this.root = getRoot(this.host);
|
|
96
100
|
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
@@ -103,6 +107,7 @@ export class PostMenu {
|
|
|
103
107
|
}
|
|
104
108
|
componentDidLoad() {
|
|
105
109
|
this.validatePlacement();
|
|
110
|
+
this.validateLabel();
|
|
106
111
|
if (this.popoverRef) {
|
|
107
112
|
this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
|
|
108
113
|
}
|
|
@@ -181,8 +186,9 @@ export class PostMenu {
|
|
|
181
186
|
}
|
|
182
187
|
}
|
|
183
188
|
getSlottedItems() {
|
|
184
|
-
const slot = this.host.shadowRoot.
|
|
185
|
-
const slottedElements =
|
|
189
|
+
const slot = this.host.shadowRoot.querySelectorAll('slot');
|
|
190
|
+
const slottedElements = [];
|
|
191
|
+
slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
|
|
186
192
|
return (slottedElements
|
|
187
193
|
// If the element is a slot, get the assigned elements
|
|
188
194
|
.flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
|
|
@@ -190,7 +196,7 @@ export class PostMenu {
|
|
|
190
196
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
191
197
|
}
|
|
192
198
|
render() {
|
|
193
|
-
return (h(Host, { key: '
|
|
199
|
+
return (h(Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": version }, h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
|
|
194
200
|
}
|
|
195
201
|
static get is() { return "post-menu"; }
|
|
196
202
|
static get encapsulation() { return "shadow"; }
|
|
@@ -241,8 +247,8 @@ export class PostMenu {
|
|
|
241
247
|
"resolved": "string",
|
|
242
248
|
"references": {}
|
|
243
249
|
},
|
|
244
|
-
"required":
|
|
245
|
-
"optional":
|
|
250
|
+
"required": true,
|
|
251
|
+
"optional": false,
|
|
246
252
|
"docs": {
|
|
247
253
|
"tags": [],
|
|
248
254
|
"text": "An accessible name for the menu."
|
|
@@ -355,6 +361,9 @@ export class PostMenu {
|
|
|
355
361
|
return [{
|
|
356
362
|
"propName": "placement",
|
|
357
363
|
"methodName": "validatePlacement"
|
|
364
|
+
}, {
|
|
365
|
+
"propName": "label",
|
|
366
|
+
"methodName": "validateLabel"
|
|
358
367
|
}];
|
|
359
368
|
}
|
|
360
369
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem 1rem;gap:.5rem;font-size
|
|
1
|
+
post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem .75rem .5rem 1rem;gap:.5rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1.25rem;height:1.25rem;margin:.125rem}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:.75rem;gap:1rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.375rem;height:1.375rem;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:.8125rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}
|
|
@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
import { version } from "../../../../package";
|
|
3
3
|
export class PostMenuItem {
|
|
4
4
|
render() {
|
|
5
|
-
return (h(Host, { key: '
|
|
5
|
+
return (h(Host, { key: '6b2c8542aed22132c627fadb6be036124e37853e', "data-version": version }, h("slot", { key: '8059cb5112270641ef7ba860cdacb2cdaa75fd59' })));
|
|
6
6
|
}
|
|
7
7
|
static get is() { return "post-menu-item"; }
|
|
8
8
|
static get originalStyleUrls() {
|
|
@@ -73,7 +73,7 @@ export class PostMenuTrigger {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
|
|
77
77
|
}
|
|
78
78
|
static get is() { return "post-menu-trigger"; }
|
|
79
79
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}
|
|
@@ -113,7 +113,7 @@ export class PostPopover {
|
|
|
113
113
|
trigger.setAttribute('aria-expanded', force ? 'false' : null);
|
|
114
114
|
}
|
|
115
115
|
render() {
|
|
116
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: '4224bfe1dc1bdb7fdfb86da67b54816e8cc6fce4', "data-version": version }, h("post-popovercontainer", { key: '3d7e370a89214878d33598cafd3d118c74d16312', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ed806f93ddec2656a15a1b242246c9c09b34f58a', class: "popover-container" }, h("div", { key: 'd60dd75153f88fc65d56dc9ec7387363e78cb835', class: "popover-content" }, h("slot", { key: 'f37005a225ecde32a80dd5efc3e61ccea7ab6dc5' })), h("post-closebutton", { key: 'c440bc94fb2832a8b8fcc0dd545b5f9d65cf834a', onClick: () => this.hide() }, this.closeButtonCaption)))));
|
|
117
117
|
}
|
|
118
118
|
static get is() { return "post-popover"; }
|
|
119
119
|
static get encapsulation() { return "shadow"; }
|
|
@@ -262,9 +262,9 @@ export class PostPopovercontainer {
|
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
264
|
render() {
|
|
265
|
-
return (h(Host, { key: '
|
|
265
|
+
return (h(Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
|
|
266
266
|
this.arrowRef = el;
|
|
267
|
-
} })), h("slot", { key: '
|
|
267
|
+
} })), h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
|
|
268
268
|
}
|
|
269
269
|
static get is() { return "post-popovercontainer"; }
|
|
270
270
|
static get originalStyleUrls() {
|
|
@@ -91,7 +91,7 @@ export class PostRating {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
-
return (h(Host, { key: '
|
|
94
|
+
return (h(Host, { key: 'befb055aff44467d2da231043db28797f843c239', "data-version": version }, h("div", { key: 'c231944ad2638c2b69b6ae9e8ad92a962aa50139', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
|
|
95
95
|
'star': true,
|
|
96
96
|
'before-hover': i < this.hoveredIndex,
|
|
97
97
|
'active': i < Math.round(this.currentRating),
|
|
@@ -13,7 +13,7 @@ export class PostTabHeader {
|
|
|
13
13
|
this.tabId = `tab-${this.host.id || nanoid(6)}`;
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: '387d9db0111153ca4a7da1a9ad600daeafa3b7a1', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '62126f05530776ca45b151b00834fa0c68c5b26e' })));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "post-tab-header"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -15,7 +15,7 @@ export class PostTabPanel {
|
|
|
15
15
|
this.panelId = `panel-${this.host.id || nanoid(6)}`;
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '97ae92b05f495a63bd5ec5f57eb196fdf6772ca8', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8b36e0849fcd65662a27bc62ac29cec0d8db4f41' })));
|
|
19
19
|
}
|
|
20
20
|
static get is() { return "post-tab-panel"; }
|
|
21
21
|
static get encapsulation() { return "shadow"; }
|
|
@@ -145,7 +145,7 @@ export class PostTabs {
|
|
|
145
145
|
nextTab.focus();
|
|
146
146
|
}
|
|
147
147
|
render() {
|
|
148
|
-
return (h(Host, { key: '
|
|
148
|
+
return (h(Host, { key: 'eb30ee19d073caf4f32e255045eff58c0cb511f5', "data-version": version }, h("div", { key: '0920e0cbb6565ff8a9ff663e938291c050d6c93c', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'df3a5a698a77719b371879effba16e11709b2c22', class: "tabs", role: "tablist" }, h("slot", { key: 'e6c9592b39e999369eb1b6f43b08e7130872add9', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '14cdae926ce10f854577de34b713c8e269568dbb', class: "tab-content", part: "content" }, h("slot", { key: 'f2aaff6a23f8dd2683963cb25c95d41953e708f5', onSlotchange: () => this.moveMisplacedTabs() }))));
|
|
149
149
|
}
|
|
150
150
|
static get is() { return "post-tabs"; }
|
|
151
151
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,7 +26,7 @@ export class PostTogglebutton {
|
|
|
26
26
|
this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "post-togglebutton"; }
|
|
32
32
|
static get encapsulation() { return "shadow"; }
|
|
@@ -64,7 +64,7 @@ export class PostTooltip {
|
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
66
|
const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
|
|
67
|
-
return (h(Host, { key: '
|
|
67
|
+
return (h(Host, { key: 'cdde276f07efb0916bb3b0cd7cf761788421e251', "data-version": version }, h("post-popovercontainer", { key: '06b4d472448d4083f717ce13e73ff9426f422ec4', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c5efcac53b6c0fa207ceee34ee86580c7566f8a8' }))));
|
|
68
68
|
}
|
|
69
69
|
static get is() { return "post-tooltip"; }
|
|
70
70
|
static get encapsulation() { return "shadow"; }
|
|
@@ -169,7 +169,7 @@ export class PostTooltipTrigger {
|
|
|
169
169
|
this.tooltip?.hide();
|
|
170
170
|
}
|
|
171
171
|
render() {
|
|
172
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: '49529a68fdcc56e8967cdd147ac4c5c35177e70f', "data-version": version }, h("slot", { key: '2b38e3412393f39dd6b2da480f591e4bec38ba34', onSlotchange: () => this.handleSlotChange() })));
|
|
173
173
|
}
|
|
174
174
|
static get is() { return "post-tooltip-trigger"; }
|
|
175
175
|
static get encapsulation() { return "shadow"; }
|
|
@@ -6,12 +6,20 @@
|
|
|
6
6
|
* @param ignoreNestedComponents - Whether to ignore events from nested components
|
|
7
7
|
* @returns true if the event should be processed, false otherwise
|
|
8
8
|
*/
|
|
9
|
-
function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
|
|
9
|
+
function shouldProcessEvent(event, tag, host, ignoreNestedComponents, allowDescendants = false) {
|
|
10
10
|
if (!(event instanceof Event && event.target instanceof HTMLElement))
|
|
11
11
|
return false;
|
|
12
12
|
const eventTarget = event.target;
|
|
13
|
-
if (
|
|
14
|
-
|
|
13
|
+
if (allowDescendants) {
|
|
14
|
+
// Accept event if target or any ancestor matches tag
|
|
15
|
+
if (!eventTarget.closest(tag))
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
// Only accept event if target exactly matches tag
|
|
20
|
+
if (eventTarget.localName !== tag)
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
15
23
|
if (ignoreNestedComponents) {
|
|
16
24
|
// Find the closest parent with the same tag as the host
|
|
17
25
|
const closestParentWithSameTag = findClosestParentWithTag(eventTarget, host.localName);
|
|
@@ -26,12 +34,18 @@ function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
|
|
|
26
34
|
* @param option - Configuration options for the event guard
|
|
27
35
|
* @param option.ignoreNestedComponents - Whether to ignore events from nested components
|
|
28
36
|
*/
|
|
29
|
-
export function EventFrom(tag, option
|
|
37
|
+
export function EventFrom(tag, option) {
|
|
38
|
+
// Set default values here
|
|
39
|
+
const opts = {
|
|
40
|
+
ignoreNestedComponents: true,
|
|
41
|
+
allowDescendants: false,
|
|
42
|
+
...option,
|
|
43
|
+
};
|
|
30
44
|
return function (target, propertyKey, descriptor) {
|
|
31
45
|
if (descriptor) {
|
|
32
46
|
const originalMethod = descriptor.value;
|
|
33
47
|
descriptor.value = function (event) {
|
|
34
|
-
if (!shouldProcessEvent(event, tag, this.host,
|
|
48
|
+
if (!shouldProcessEvent(event, tag, this.host, opts.ignoreNestedComponents, opts.allowDescendants)) {
|
|
35
49
|
return;
|
|
36
50
|
}
|
|
37
51
|
return originalMethod.call(this, event);
|
|
@@ -57,7 +71,7 @@ export function EventFrom(tag, option = { ignoreNestedComponents: true }) {
|
|
|
57
71
|
if (typeof originalFunction === 'function') {
|
|
58
72
|
// Store original and add new behavior
|
|
59
73
|
this[privateKey] = (event) => {
|
|
60
|
-
if (!shouldProcessEvent(event, tag, this.host,
|
|
74
|
+
if (!shouldProcessEvent(event, tag, this.host, opts.ignoreNestedComponents)) {
|
|
61
75
|
return;
|
|
62
76
|
}
|
|
63
77
|
return originalFunction.call(this, event);
|