@swisspost/design-system-components 10.0.0-next.48 → 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-CZyXYkIN.js → package-qtH-QrKv.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +5 -5
- package/dist/cjs/post-avatar.cjs.entry.js +27 -37
- package/dist/cjs/post-back-to-top.cjs.entry.js +3 -3
- package/dist/cjs/post-banner.cjs.entry.js +5 -5
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +5 -5
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +12 -7
- package/dist/cjs/post-card-control.cjs.entry.js +5 -5
- package/dist/cjs/post-closebutton_15.cjs.entry.js +274 -134
- package/dist/cjs/post-collapsible_2.cjs.entry.js +6 -6
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +4 -4
- package/dist/cjs/post-linkarea.cjs.entry.js +19 -8
- package/dist/cjs/post-popover.cjs.entry.js +4 -4
- package/dist/cjs/post-rating.cjs.entry.js +4 -4
- package/dist/cjs/post-tab-header.cjs.entry.js +4 -4
- 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 +4 -4
- package/dist/collection/animations/pop-in.js +14 -0
- package/dist/collection/components/post-accordion/post-accordion.css +1 -1
- package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
- package/dist/collection/components/post-avatar/post-avatar.css +1 -1
- package/dist/collection/components/post-avatar/post-avatar.js +38 -34
- package/dist/collection/components/post-back-to-top/post-back-to-top.js +1 -1
- package/dist/collection/components/post-banner/post-banner.js +2 -2
- package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +1 -1
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js +30 -4
- package/dist/collection/components/post-card-control/post-card-control.css +1 -1
- package/dist/collection/components/post-card-control/post-card-control.js +2 -2
- 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-collapsible/post-collapsible.js +1 -1
- package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +1 -1
- package/dist/collection/components/post-footer/post-footer.css +1 -1
- package/dist/collection/components/post-footer/post-footer.js +1 -1
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +19 -11
- package/dist/collection/components/post-icon/post-icon.js +39 -33
- package/dist/collection/components/post-language-option/post-language-option.css +1 -1
- package/dist/collection/components/post-language-option/post-language-option.js +1 -2
- package/dist/collection/components/post-language-switch/post-language-switch.js +1 -2
- package/dist/collection/components/post-linkarea/post-linkarea.css +1 -1
- package/dist/collection/components/post-linkarea/post-linkarea.js +24 -6
- package/dist/collection/components/post-list/post-list.css +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 +73 -11
- 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 +51 -9
- 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.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +18 -7
- package/dist/collection/components/post-rating/post-rating.css +1 -1
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.css +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 +2 -2
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
- package/dist/collection/utils/event-from.js +20 -6
- package/dist/component-names.json +39 -0
- package/dist/components/event-from.js +20 -6
- package/dist/components/package.js +1 -1
- package/dist/components/post-accordion-item2.js +1 -1
- package/dist/components/post-accordion2.js +1 -1
- package/dist/components/post-avatar.js +28 -36
- package/dist/components/post-back-to-top.js +1 -1
- package/dist/components/post-banner.js +2 -2
- package/dist/components/post-breadcrumb-item2.js +1 -1
- package/dist/components/post-breadcrumbs.js +14 -7
- package/dist/components/post-card-control.js +3 -3
- package/dist/components/post-closebutton.js +1 -44
- package/dist/components/post-closebutton2.js +77 -0
- package/dist/components/post-collapsible-trigger2.js +1 -1
- package/dist/components/post-collapsible2.js +1 -1
- package/dist/components/post-footer.js +2 -2
- package/dist/components/post-header.js +17 -12
- package/dist/components/post-icon2.js +39 -33
- package/dist/components/post-language-option.js +2 -3
- package/dist/components/post-language-switch.js +1 -2
- package/dist/components/post-linkarea.js +21 -8
- package/dist/components/post-list-item.js +1 -1
- package/dist/components/post-list.js +2 -2
- 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 +74 -12
- package/dist/components/post-menu-item2.js +2 -2
- package/dist/components/post-menu-trigger2.js +1 -1
- package/dist/components/post-menu2.js +33 -11
- package/dist/components/post-popover.js +15 -3
- package/dist/components/post-popovercontainer2.js +30 -5
- package/dist/components/post-rating.js +2 -2
- package/dist/components/post-tab-header.js +2 -2
- 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 +2 -2
- package/dist/components/react/{p-Tg0GNTZM.js → p-B392lG2N.js} +3 -3
- package/dist/components/react/{p-Dq9F2i7n.js → p-B9Y7UQKI.js} +3 -3
- package/dist/components/react/{p-38PqL5iD.js → p-BXPcgIqO.js} +3 -3
- package/dist/components/react/{p-Da5wbVP8.js → p-BcVKzjda.js} +40 -34
- package/dist/components/react/{p-CiYSngKM.js → p-BlOv-NDA.js} +6 -6
- package/dist/components/react/{p-q8Fvf8A0.js → p-BmpB1vs4.js} +2 -2
- package/dist/components/react/p-BuKAaKXE.js +78 -0
- package/dist/components/react/{p-JHuJA2Lv.js → p-Bw6vnK1I.js} +36 -14
- package/dist/components/react/{p-Ce7jgYmK.js → p-CDsgZHvX.js} +31 -6
- package/dist/components/react/{p-kraHE1r3.js → p-CzIKqBrS.js} +20 -6
- package/dist/components/react/p-DimG3b3P.js +3 -0
- package/dist/components/react/{p-DzYquz3e.js → p-DnHwlsBi.js} +3 -3
- package/dist/components/react/{p-CGsAj6ij.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 +29 -37
- package/dist/components/react/post-back-to-top.js +3 -3
- 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 +21 -14
- package/dist/components/react/post-card-control.js +5 -5
- 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 +8 -8
- package/dist/components/react/post-header.js +19 -14
- package/dist/components/react/post-icon.js +1 -1
- package/dist/components/react/post-language-option.js +3 -4
- package/dist/components/react/post-language-switch.js +7 -8
- package/dist/components/react/post-linkarea.js +22 -9
- package/dist/components/react/post-list-item.js +2 -2
- package/dist/components/react/post-list.js +3 -3
- 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 +75 -13
- 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 +4 -4
- package/dist/components/react/post-tab-header.js +3 -3
- 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 +4 -4
- package/dist/docs.json +174 -12
- package/dist/esm/{event-from-kraHE1r3.js → 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 +5 -5
- package/dist/esm/post-avatar.entry.js +27 -37
- package/dist/esm/post-back-to-top.entry.js +3 -3
- package/dist/esm/post-banner.entry.js +5 -5
- package/dist/esm/post-breadcrumb-item_2.entry.js +5 -5
- package/dist/esm/post-breadcrumbs.entry.js +13 -8
- package/dist/esm/post-card-control.entry.js +5 -5
- package/dist/esm/post-closebutton_15.entry.js +274 -134
- package/dist/esm/post-collapsible_2.entry.js +6 -6
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +4 -4
- package/dist/esm/post-linkarea.entry.js +19 -8
- package/dist/esm/post-popover.entry.js +4 -4
- package/dist/esm/post-rating.entry.js +4 -4
- package/dist/esm/post-tab-header.entry.js +4 -4
- 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 +4 -4
- package/dist/post-components/{p-3c71f590.entry.js → p-048d2c1a.entry.js} +1 -1
- package/dist/post-components/p-0a4d9f33.entry.js +1 -0
- package/dist/post-components/p-11abb64f.entry.js +1 -0
- package/dist/post-components/p-1253185c.entry.js +1 -0
- package/dist/post-components/p-15e0d4b8.entry.js +1 -0
- package/dist/post-components/{p-d61bb2ff.entry.js → p-1d4252ba.entry.js} +1 -1
- package/dist/post-components/{p-aad86320.entry.js → p-3d30eafa.entry.js} +1 -1
- package/dist/post-components/p-4114fc83.entry.js +1 -0
- package/dist/post-components/p-5ddde390.entry.js +1 -0
- package/dist/post-components/p-89411986.entry.js +1 -0
- package/dist/post-components/{p-6777e505.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-b82e7cbe.entry.js +1 -0
- package/dist/post-components/{p-6add880f.entry.js → p-e7fbb03d.entry.js} +1 -1
- package/dist/post-components/p-f1d53256.entry.js +1 -0
- package/dist/post-components/p-f97f3a19.entry.js +1 -0
- package/dist/post-components/{p-16772417.entry.js → p-f9d044a3.entry.js} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/animations/pop-in.d.ts +1 -0
- package/dist/types/components/post-avatar/post-avatar.d.ts +5 -4
- 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 +5 -0
- package/dist/types/components/post-icon/post-icon.d.ts +11 -0
- package/dist/types/components/post-linkarea/post-linkarea.d.ts +6 -0
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +33 -6
- package/dist/types/components/post-menu/post-menu.d.ts +7 -1
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +6 -2
- package/dist/types/components.d.ts +39 -3
- package/dist/types/utils/event-from.d.ts +2 -1
- package/hydrate/index.js +357 -184
- package/hydrate/index.mjs +357 -184
- package/package.json +8 -6
- package/dist/components/react/p-0Ltezq5O.js +0 -3
- package/dist/esm/package-0Ltezq5O.js +0 -3
- package/dist/post-components/p-0Ltezq5O.js +0 -1
- package/dist/post-components/p-38d3d441.entry.js +0 -1
- package/dist/post-components/p-40f21542.entry.js +0 -1
- package/dist/post-components/p-4243cdd1.entry.js +0 -1
- package/dist/post-components/p-4c18cb8c.entry.js +0 -1
- package/dist/post-components/p-51dc7647.entry.js +0 -1
- package/dist/post-components/p-8363fedb.entry.js +0 -1
- package/dist/post-components/p-83998038.entry.js +0 -1
- package/dist/post-components/p-85bb1b5e.entry.js +0 -1
- package/dist/post-components/p-8f4d8685.entry.js +0 -1
- package/dist/post-components/p-95ad536d.entry.js +0 -1
- package/dist/post-components/p-9d806e89.entry.js +0 -1
- package/dist/post-components/p-_0G7tavk.js +0 -1
- package/dist/post-components/p-c3e38acf.entry.js +0 -1
- package/dist/post-components/p-kraHE1r3.js +0 -1
- package/dist/prebuild.js +0 -26
- package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/prebuild.d.ts +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
|
@@ -1,56 +1,11 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-C8a0ddDa.js';
|
|
2
|
-
import { v as version } from './package-
|
|
3
|
-
import { t as throttle, b as breakpoint, I as IS_BROWSER } from './breakpoints-_0G7tavk.js';
|
|
4
|
-
import { E as EventFrom } from './event-from-kraHE1r3.js';
|
|
2
|
+
import { v as version } from './package-DimG3b3P.js';
|
|
5
3
|
import { d as checkEmptyOrOneOf, a as checkEmptyOrType, c as checkRequiredAndType, g as checkEmptyOrUrl } from './index-VmK3ABCB.js';
|
|
4
|
+
import { t as throttle, b as breakpoint, I as IS_BROWSER } from './breakpoints-CJ80BZ06.js';
|
|
5
|
+
import { E as EventFrom } from './event-from-CzIKqBrS.js';
|
|
6
6
|
import { n as nanoid } from './index.browser-BLchVpF6.js';
|
|
7
7
|
import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
|
|
8
|
-
import { g as getRoot } from './get-root-
|
|
9
|
-
|
|
10
|
-
const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
|
|
11
|
-
|
|
12
|
-
const PostClosebutton = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
registerInstance(this, hostRef);
|
|
15
|
-
}
|
|
16
|
-
componentDidLoad() {
|
|
17
|
-
this.checkHiddenLabel();
|
|
18
|
-
}
|
|
19
|
-
checkHiddenLabel(slot = this.host.shadowRoot.querySelector('.visually-hidden slot')) {
|
|
20
|
-
if (slot.assignedNodes().length === 0) {
|
|
21
|
-
console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
render() {
|
|
25
|
-
return (h(Host, { key: 'a8db3ecbefea609234c4c8c29dbf085637592c2c', "data-version": version }, h("button", { key: '58cef7f32f6ec89d46a1ea57b5497089a96aebf3', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '023a67437b69bb9966d08b027cc5f10d68baac40', "aria-hidden": "true", name: "closex" }), h("span", { key: 'b1a21810b6179ddd8d66b426a3149966c1972f59', class: "visually-hidden" }, h("slot", { key: '2a2417bedbcb57c75993722d3267342c7df7381d', onSlotchange: () => this.checkHiddenLabel() })))));
|
|
26
|
-
}
|
|
27
|
-
get host() { return getElement(this); }
|
|
28
|
-
};
|
|
29
|
-
PostClosebutton.style = postClosebuttonCss;
|
|
30
|
-
|
|
31
|
-
const easing = 'ease';
|
|
32
|
-
const duration = 500;
|
|
33
|
-
const fill = 'forwards';
|
|
34
|
-
function slideUp(el, translateSize = '-100%') {
|
|
35
|
-
return el.animate([
|
|
36
|
-
{ transform: 'translateY(0)' }, // Starting position (no translation)
|
|
37
|
-
{ transform: `translateY(${translateSize})` }, // End position
|
|
38
|
-
], {
|
|
39
|
-
duration: duration,
|
|
40
|
-
easing,
|
|
41
|
-
fill,
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
function slideDown(el, translateSize = '-100%') {
|
|
45
|
-
return el.animate([
|
|
46
|
-
{ transform: `translateY(${translateSize})` }, // Starting position (no translation)
|
|
47
|
-
{ transform: 'translateY(0)' }, // End position
|
|
48
|
-
], {
|
|
49
|
-
duration: duration,
|
|
50
|
-
easing,
|
|
51
|
-
fill,
|
|
52
|
-
});
|
|
53
|
-
}
|
|
8
|
+
import { g as getRoot } from './get-root-BkQ3CrLq.js';
|
|
54
9
|
|
|
55
10
|
const focusableSelector = `:where(${[
|
|
56
11
|
'button',
|
|
@@ -86,7 +41,78 @@ function getFocusableChildren(element) {
|
|
|
86
41
|
return visibleFocusableChildren;
|
|
87
42
|
}
|
|
88
43
|
|
|
89
|
-
const
|
|
44
|
+
const BUTTON_TYPES = ['button', 'submit', 'reset'];
|
|
45
|
+
|
|
46
|
+
const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
|
|
47
|
+
|
|
48
|
+
const PostClosebutton = class {
|
|
49
|
+
constructor(hostRef) {
|
|
50
|
+
registerInstance(this, hostRef);
|
|
51
|
+
this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
|
|
52
|
+
/**
|
|
53
|
+
* Overrides the close button's type ("button" by default)
|
|
54
|
+
*/
|
|
55
|
+
this.buttonType = 'button';
|
|
56
|
+
}
|
|
57
|
+
validateButtonType() {
|
|
58
|
+
checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
|
|
59
|
+
}
|
|
60
|
+
componentDidLoad() {
|
|
61
|
+
this.checkContent();
|
|
62
|
+
}
|
|
63
|
+
connectedCallback() {
|
|
64
|
+
this.mutationObserver.observe(this.host, {
|
|
65
|
+
childList: true,
|
|
66
|
+
characterData: true,
|
|
67
|
+
subtree: true,
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
disconnectedCallback() {
|
|
71
|
+
if (this.mutationObserver) {
|
|
72
|
+
this.mutationObserver.disconnect();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
checkContent() {
|
|
76
|
+
this.validateButtonType();
|
|
77
|
+
if (!this.host.querySelector('.visually-hidden').textContent) {
|
|
78
|
+
console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
render() {
|
|
82
|
+
return (h(Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": version }, h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
|
|
83
|
+
}
|
|
84
|
+
get host() { return getElement(this); }
|
|
85
|
+
static get watchers() { return {
|
|
86
|
+
"buttonType": ["validateButtonType"]
|
|
87
|
+
}; }
|
|
88
|
+
};
|
|
89
|
+
PostClosebutton.style = postClosebuttonCss;
|
|
90
|
+
|
|
91
|
+
const easing$1 = 'ease';
|
|
92
|
+
const duration$1 = 500;
|
|
93
|
+
const fill = 'forwards';
|
|
94
|
+
function slideUp(el, translateSize = '-100%') {
|
|
95
|
+
return el.animate([
|
|
96
|
+
{ transform: 'translateY(0)' }, // Starting position (no translation)
|
|
97
|
+
{ transform: `translateY(${translateSize})` }, // End position
|
|
98
|
+
], {
|
|
99
|
+
duration: duration$1,
|
|
100
|
+
easing: easing$1,
|
|
101
|
+
fill,
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function slideDown(el, translateSize = '-100%') {
|
|
105
|
+
return el.animate([
|
|
106
|
+
{ transform: `translateY(${translateSize})` }, // Starting position (no translation)
|
|
107
|
+
{ transform: 'translateY(0)' }, // End position
|
|
108
|
+
], {
|
|
109
|
+
duration: duration$1,
|
|
110
|
+
easing: easing$1,
|
|
111
|
+
fill,
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-header:has(+.local-header.no-navigation.no-title){box-shadow:var(--post-device-elevation-300)}.global-sub{display:flex;align-items:center;gap:4px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}.local-header:not(.no-title){padding-block-start:18px}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-header.no-navigation.no-title{display:none}.local-sub{margin-inline-end:16px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{display:flex;align-items:center;justify-content:space-between;inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}.navigation-header,::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column}.navigation.extended .navigation-header,.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
|
|
90
116
|
|
|
91
117
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
92
118
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -133,6 +159,7 @@ const PostHeader = class {
|
|
|
133
159
|
this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
|
|
134
160
|
this.device = breakpoint.get('device');
|
|
135
161
|
this.hasNavigation = false;
|
|
162
|
+
this.hasTitle = false;
|
|
136
163
|
this.mobileMenuExtended = false;
|
|
137
164
|
this.megadropdownOpen = false;
|
|
138
165
|
this.breakpointChange = (e) => {
|
|
@@ -169,6 +196,7 @@ const PostHeader = class {
|
|
|
169
196
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
170
197
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
171
198
|
this.checkNavigationExistence();
|
|
199
|
+
this.checkTitleExistence();
|
|
172
200
|
this.switchLanguageSwitchMode();
|
|
173
201
|
this.handleScrollParentResize();
|
|
174
202
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -189,7 +217,8 @@ const PostHeader = class {
|
|
|
189
217
|
window.removeEventListener('postBreakpoint:device', this.breakpointChange);
|
|
190
218
|
window.removeEventListener('resize', this.throttledResize);
|
|
191
219
|
window.removeEventListener('scroll', this.handleScrollEvent);
|
|
192
|
-
scrollParent
|
|
220
|
+
if (scrollParent)
|
|
221
|
+
scrollParent.removeEventListener('scroll', this.handleScrollEvent);
|
|
193
222
|
document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
194
223
|
this.host.removeEventListener('keydown', this.keyboardHandler);
|
|
195
224
|
this.host.removeEventListener('click', this.handleLinkClick);
|
|
@@ -206,6 +235,9 @@ const PostHeader = class {
|
|
|
206
235
|
checkNavigationExistence() {
|
|
207
236
|
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
208
237
|
}
|
|
238
|
+
checkTitleExistence() {
|
|
239
|
+
this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
|
|
240
|
+
}
|
|
209
241
|
async closeMobileMenu() {
|
|
210
242
|
this.mobileMenuAnimation.finish();
|
|
211
243
|
const menuButton = this.getMenuButton();
|
|
@@ -331,23 +363,21 @@ const PostHeader = class {
|
|
|
331
363
|
});
|
|
332
364
|
}
|
|
333
365
|
renderNavigation() {
|
|
334
|
-
const
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
navigationClasses.push('extended');
|
|
338
|
-
}
|
|
339
|
-
if (this.megadropdownOpen) {
|
|
340
|
-
navigationClasses.push('megadropdown-open');
|
|
366
|
+
const mainNavigation = (h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }));
|
|
367
|
+
if (this.device === 'desktop') {
|
|
368
|
+
return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, mainNavigation, h("slot", { name: "navigation-controls" })));
|
|
341
369
|
}
|
|
342
|
-
return (h("div", { class:
|
|
370
|
+
return (h("div", { class: { navigation: true, extended: this.mobileMenuExtended }, style: { '--post-header-navigation-current-inset': `${this.mobileMenu?.scrollTop ?? 0}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("div", { class: "navigation-header" }, h("slot", { name: "navigation-controls" }), h("slot", { name: "target-group" })), mainNavigation, h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
|
|
343
371
|
}
|
|
344
372
|
render() {
|
|
345
373
|
const localHeaderClasses = ['local-header'];
|
|
346
374
|
if (this.mobileMenuExtended)
|
|
347
375
|
localHeaderClasses.push('local-header-mobile-extended');
|
|
348
|
-
if (!this.hasNavigation)
|
|
376
|
+
if (this.device !== 'desktop' || !this.hasNavigation)
|
|
349
377
|
localHeaderClasses.push('no-navigation');
|
|
350
|
-
|
|
378
|
+
if (!this.hasTitle)
|
|
379
|
+
localHeaderClasses.push('no-title');
|
|
380
|
+
return (h(Host, { key: 'fd3c4a534af28b2e35f4a02502283e04be0d9683', "data-version": version, "data-color-scheme": "light" }, h("div", { key: '61c70adea7525d3daa7690ac9243c7697df5c8bc', class: "global-header" }, h("div", { key: '1fdb106a9624a07d3ad3fd1cb4eade9b05282ab5', class: "global-sub" }, h("div", { key: '2c62bccfa8d5fa9642528db265e76aac0d13022c', class: "logo" }, h("slot", { key: '75b87c2428b7ccad6940976e46156b807257cbc5', name: "post-logo" }))), h("div", { key: 'c1950198cbac96132ca5b1c886bb94238c53b903', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '2e695987df3da854db3ec18cc4b1283d0f06dfd1', name: "target-group" })), h("div", { key: '50366842180e3aae87d4e4da68a8f73c2f62c347', class: "global-sub" }, h("slot", { key: '7eba07e3dddbc26843a50b39a69953a01d9e2a5e', name: "global-controls" }), !this.hasMobileMenu && h("slot", { key: 'aa9fc50e2eb8eee4e3d9de76ccbf564ac30a8d03', name: "meta-navigation" }), !this.hasMobileMenu && h("slot", { key: '7742f0d0e30d5b0d90ca9352fec72e49a97ec3cb', name: "post-language-switch" }), h("slot", { key: 'a3545c4bb2a61c00105763059f3bd66ddd829681', name: "global-login" }), this.hasNavigation && (h("div", { key: 'bb8df618571ea8cadb89b0cd8d50bba7c0dec038', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '83b9542127213e39644c280cf9f4e19aaf3f071a', name: "post-togglebutton" }))))), h("div", { key: '2ab719d2610d46050fc99345237b7b9cc54fd467', class: localHeaderClasses.join(' ') }, h("slot", { key: '0e02b3f7421a1c67e99fdc92aadcf61153665820', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle && (h("div", { key: '94b091a29727bd556a4907ac4bdb2f8757483135', class: "local-sub" }, h("slot", { key: '7647015350e21278b104ff4538525abeaea98442', name: "local-controls" }), h("slot", { key: '4e42d3fe5c4f676b7bb836c976c1d7e59a1052ae' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
351
381
|
}
|
|
352
382
|
get host() { return getElement(this); }
|
|
353
383
|
static get watchers() { return {
|
|
@@ -399,52 +429,58 @@ const PostIcon = class {
|
|
|
399
429
|
validateScale() {
|
|
400
430
|
checkEmptyOrType(this, 'scale', 'number');
|
|
401
431
|
}
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
432
|
+
/**
|
|
433
|
+
* Construct the icon URL according to the following rules:
|
|
434
|
+
* 1. `@base` (absolute URL) → use directly.
|
|
435
|
+
* 2. `@base` (relative URL) → resolve with `base href` and/or `origin`
|
|
436
|
+
* - If `base href` is absolute → use just that.
|
|
437
|
+
* - If `base href` is relative → prepend with `origin`.
|
|
438
|
+
* - If `base href` does not exist → use only `origin`.
|
|
439
|
+
* 3. `@meta` (absolute URL) → use directly.
|
|
440
|
+
* 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
|
|
441
|
+
* 5. `CDN_URL` fallback → `https://unpkg.com/...`.
|
|
442
|
+
**/
|
|
406
443
|
getUrl() {
|
|
407
444
|
const fileName = `${this.name}.svg`;
|
|
408
445
|
if (!IS_BROWSER && !this.base) {
|
|
409
446
|
return `${CDN_URL}${fileName}`;
|
|
410
447
|
}
|
|
448
|
+
const isAbsolute = (url) => /^https?:\/\//.test(url);
|
|
449
|
+
const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
|
|
450
|
+
const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
|
|
411
451
|
const currentDomain = IS_BROWSER ? window.location.origin : '';
|
|
412
452
|
const baseHref = IS_BROWSER
|
|
413
453
|
? document.querySelector('base[href]')?.getAttribute('href') || ''
|
|
414
454
|
: '';
|
|
415
|
-
const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
|
|
416
455
|
const metaIconBase = IS_BROWSER
|
|
417
|
-
? document
|
|
418
|
-
.querySelector('meta[name="design-system-settings"]')
|
|
419
|
-
?.getAttribute('data-post-icon-base') || ''
|
|
456
|
+
? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
|
|
420
457
|
: '';
|
|
421
|
-
|
|
422
|
-
const
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
return
|
|
429
|
-
}
|
|
458
|
+
// Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
|
|
459
|
+
const buildUrlWithBase = (relativeUrl) => {
|
|
460
|
+
const normalizedHref = normalizeUrl(baseHref);
|
|
461
|
+
const normalizedRelative = normalizeUrl(relativeUrl);
|
|
462
|
+
if (isAbsolute(normalizedHref)) {
|
|
463
|
+
return `${normalizedHref}${normalizedRelative}`;
|
|
464
|
+
}
|
|
465
|
+
return `${currentDomain}${normalizedHref}${normalizedRelative}`;
|
|
466
|
+
};
|
|
430
467
|
let url;
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
url =
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
468
|
+
// Highest Priority is this.base
|
|
469
|
+
if (this.base) {
|
|
470
|
+
url = isAbsolute(this.base)
|
|
471
|
+
? `${normalizeUrl(this.base)}${fileName}`
|
|
472
|
+
: `${buildUrlWithBase(this.base)}${fileName}`;
|
|
473
|
+
return cleanUrl(url);
|
|
438
474
|
}
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
url =
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
url = `${CDN_URL}${fileName}`;
|
|
475
|
+
// Second Priority is metaIconBase
|
|
476
|
+
if (metaIconBase) {
|
|
477
|
+
url = isAbsolute(metaIconBase)
|
|
478
|
+
? `${normalizeUrl(metaIconBase)}${fileName}`
|
|
479
|
+
: `${buildUrlWithBase(metaIconBase)}${fileName}`;
|
|
480
|
+
return cleanUrl(url);
|
|
446
481
|
}
|
|
447
|
-
|
|
482
|
+
// Fallback to CDN
|
|
483
|
+
return cleanUrl(`${CDN_URL}${fileName}`);
|
|
448
484
|
}
|
|
449
485
|
getStyles() {
|
|
450
486
|
const url = this.getUrl();
|
|
@@ -465,7 +501,7 @@ const PostIcon = class {
|
|
|
465
501
|
this.validateAnimation();
|
|
466
502
|
}
|
|
467
503
|
render() {
|
|
468
|
-
return (h(Host, { key: '
|
|
504
|
+
return (h(Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": version }, h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
|
|
469
505
|
}
|
|
470
506
|
get host() { return getElement(this); }
|
|
471
507
|
static get watchers() { return {
|
|
@@ -480,7 +516,7 @@ PostIcon.style = postIconCss;
|
|
|
480
516
|
|
|
481
517
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
482
518
|
|
|
483
|
-
const postLanguageOptionCss = "
|
|
519
|
+
const postLanguageOptionCss = "post-language-option{display:inline-block}post-language-option 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-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
|
|
484
520
|
|
|
485
521
|
const PostLanguageOption = class {
|
|
486
522
|
constructor(hostRef) {
|
|
@@ -526,13 +562,12 @@ const PostLanguageOption = class {
|
|
|
526
562
|
}
|
|
527
563
|
render() {
|
|
528
564
|
const lang = this.code.toLowerCase();
|
|
529
|
-
const role = this.variant === 'menu' ? 'menuitem' : undefined;
|
|
530
565
|
const emitOnKeyDown = (e) => {
|
|
531
566
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
532
567
|
this.emitChange();
|
|
533
568
|
}
|
|
534
569
|
};
|
|
535
|
-
return (h(Host, { key: '
|
|
570
|
+
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)))));
|
|
536
571
|
}
|
|
537
572
|
get host() { return getElement(this); }
|
|
538
573
|
static get watchers() { return {
|
|
@@ -618,14 +653,13 @@ const PostLanguageSwitch = class {
|
|
|
618
653
|
updateChildrenVariant() {
|
|
619
654
|
this.languageOptions.forEach(el => {
|
|
620
655
|
el.setAttribute('variant', this.variant);
|
|
621
|
-
el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
|
|
622
656
|
});
|
|
623
657
|
}
|
|
624
658
|
renderList() {
|
|
625
659
|
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))));
|
|
626
660
|
}
|
|
627
661
|
renderDropdown() {
|
|
628
|
-
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",
|
|
662
|
+
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))));
|
|
629
663
|
}
|
|
630
664
|
render() {
|
|
631
665
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -642,7 +676,7 @@ __decorate$2([
|
|
|
642
676
|
], PostLanguageSwitch.prototype, "handlePostChange", null);
|
|
643
677
|
PostLanguageSwitch.style = postLanguageSwitchCss;
|
|
644
678
|
|
|
645
|
-
const postListCss = "
|
|
679
|
+
const postListCss = "post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
|
|
646
680
|
|
|
647
681
|
const PostList = class {
|
|
648
682
|
constructor(hostRef) {
|
|
@@ -671,7 +705,7 @@ const PostList = class {
|
|
|
671
705
|
}
|
|
672
706
|
}
|
|
673
707
|
render() {
|
|
674
|
-
return (h(Host, { key: '
|
|
708
|
+
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" }))));
|
|
675
709
|
}
|
|
676
710
|
get host() { return getElement(this); }
|
|
677
711
|
};
|
|
@@ -687,7 +721,7 @@ const PostListItem = class {
|
|
|
687
721
|
this.host.setAttribute('slot', 'post-list-item');
|
|
688
722
|
}
|
|
689
723
|
render() {
|
|
690
|
-
return (h(Host, { key: '
|
|
724
|
+
return (h(Host, { key: '67204f0c31a6bc4cad3359030a8da57a045de7c5', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '0c68073c601a3792880fc0e68af24a4a204548ed' })));
|
|
691
725
|
}
|
|
692
726
|
get host() { return getElement(this); }
|
|
693
727
|
};
|
|
@@ -714,7 +748,7 @@ const PostLogo = class {
|
|
|
714
748
|
render() {
|
|
715
749
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
716
750
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
717
|
-
return (h(Host, { key: '
|
|
751
|
+
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" }))))));
|
|
718
752
|
}
|
|
719
753
|
get host() { return getElement(this); }
|
|
720
754
|
static get watchers() { return {
|
|
@@ -723,7 +757,7 @@ const PostLogo = class {
|
|
|
723
757
|
};
|
|
724
758
|
PostLogo.style = postLogoCss;
|
|
725
759
|
|
|
726
|
-
const postMainnavigationCss = "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-expanded=true],post-mainnavigation post-list-item>button.selected,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-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-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .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-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .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-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-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.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::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-expanded=true],post-mainnavigation post-megadropdown a.selected,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-expanded=true],post-mainnavigation post-list-item>button.selected,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-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)}}";
|
|
760
|
+
const postMainnavigationCss = "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)}}";
|
|
727
761
|
|
|
728
762
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
729
763
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
@@ -868,12 +902,12 @@ const PostMainnavigation = class {
|
|
|
868
902
|
}, NAVBAR_DISABLE_DURATION);
|
|
869
903
|
}
|
|
870
904
|
render() {
|
|
871
|
-
return (h(Host, { key: '
|
|
905
|
+
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" }))));
|
|
872
906
|
}
|
|
873
907
|
};
|
|
874
908
|
PostMainnavigation.style = postMainnavigationCss;
|
|
875
909
|
|
|
876
|
-
const postMegadropdownCss = "@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.
|
|
910
|
+
const postMegadropdownCss = "@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}}";
|
|
877
911
|
|
|
878
912
|
const PostMegadropdown = class {
|
|
879
913
|
constructor(hostRef) {
|
|
@@ -886,6 +920,7 @@ const PostMegadropdown = class {
|
|
|
886
920
|
* and updates automatically when the dropdown is toggled.
|
|
887
921
|
*/
|
|
888
922
|
this.isVisible = false;
|
|
923
|
+
this.trigger = false;
|
|
889
924
|
/** Holds the current animation class. */
|
|
890
925
|
this.animationClass = null;
|
|
891
926
|
this.handleClickOutside = (event) => {
|
|
@@ -907,11 +942,20 @@ const PostMegadropdown = class {
|
|
|
907
942
|
this.hide(false);
|
|
908
943
|
};
|
|
909
944
|
}
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
945
|
+
get megadropdownTrigger() {
|
|
946
|
+
const hostId = this.host.getAttribute('id');
|
|
947
|
+
return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
|
|
948
|
+
}
|
|
949
|
+
connectedCallback() {
|
|
950
|
+
window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
|
|
951
|
+
}
|
|
952
|
+
componentDidRender() {
|
|
953
|
+
this.getFocusableElements();
|
|
954
|
+
}
|
|
955
|
+
componentDidLoad() {
|
|
956
|
+
this.checkInitialAriaCurrent();
|
|
957
|
+
this.setupObserver();
|
|
958
|
+
this.handleAriaCurrentChange([]);
|
|
915
959
|
}
|
|
916
960
|
disconnectedCallback() {
|
|
917
961
|
this.removeListeners();
|
|
@@ -919,9 +963,7 @@ const PostMegadropdown = class {
|
|
|
919
963
|
if (PostMegadropdown.activeDropdown === this) {
|
|
920
964
|
PostMegadropdown.activeDropdown = null;
|
|
921
965
|
}
|
|
922
|
-
|
|
923
|
-
componentWillRender() {
|
|
924
|
-
this.getFocusableElements();
|
|
966
|
+
this.defaultSlotObserver.disconnect();
|
|
925
967
|
}
|
|
926
968
|
/**
|
|
927
969
|
* Toggles the dropdown visibility based on its current state.
|
|
@@ -970,8 +1012,11 @@ const PostMegadropdown = class {
|
|
|
970
1012
|
async focusFirst() {
|
|
971
1013
|
this.firstFocusableEl?.focus();
|
|
972
1014
|
}
|
|
973
|
-
|
|
974
|
-
|
|
1015
|
+
breakpointChange(e) {
|
|
1016
|
+
this.device = e.detail;
|
|
1017
|
+
if (this.device === 'desktop' && this.isVisible) {
|
|
1018
|
+
this.animationClass = null;
|
|
1019
|
+
}
|
|
975
1020
|
}
|
|
976
1021
|
/**
|
|
977
1022
|
* Forces the dropdown to close without animation.
|
|
@@ -1028,9 +1073,59 @@ const PostMegadropdown = class {
|
|
|
1028
1073
|
}
|
|
1029
1074
|
}
|
|
1030
1075
|
}
|
|
1076
|
+
/**
|
|
1077
|
+
* Sets up a MutationObserver on the host to watch for changes
|
|
1078
|
+
* in `aria-current` attributes.
|
|
1079
|
+
*/
|
|
1080
|
+
setupObserver() {
|
|
1081
|
+
const config = {
|
|
1082
|
+
subtree: true,
|
|
1083
|
+
attributes: true,
|
|
1084
|
+
attributeFilter: ['aria-current'],
|
|
1085
|
+
};
|
|
1086
|
+
this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
|
|
1087
|
+
this.defaultSlotObserver.observe(this.host, config);
|
|
1088
|
+
}
|
|
1089
|
+
/**
|
|
1090
|
+
* Adds or removes the 'active' class on the megadropdown trigger button
|
|
1091
|
+
* based on the active state.
|
|
1092
|
+
*
|
|
1093
|
+
* @param isActive - Whether the trigger should appear active
|
|
1094
|
+
*/
|
|
1095
|
+
setTriggerActive(isActive) {
|
|
1096
|
+
const trigger = this.megadropdownTrigger;
|
|
1097
|
+
if (!trigger)
|
|
1098
|
+
return;
|
|
1099
|
+
if (isActive) {
|
|
1100
|
+
trigger.classList.add('active');
|
|
1101
|
+
}
|
|
1102
|
+
else {
|
|
1103
|
+
trigger.classList.remove('active');
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
/**
|
|
1107
|
+
* Updates the megadropdown trigger state when the megadropdown content changes.
|
|
1108
|
+
* Checks if any element inside the megadropdown has `aria-current="page"`
|
|
1109
|
+
* and sets the trigger as active accordingly.
|
|
1110
|
+
*/
|
|
1111
|
+
handleAriaCurrentChange(mutations) {
|
|
1112
|
+
if (!mutations.length)
|
|
1113
|
+
return;
|
|
1114
|
+
const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
|
|
1115
|
+
this.setTriggerActive(hasCurrentPage);
|
|
1116
|
+
}
|
|
1117
|
+
/**
|
|
1118
|
+
* Checks on initialization if any element inside the megadropdown
|
|
1119
|
+
* has `aria-current="page"` and sets the trigger as active if so.
|
|
1120
|
+
*/
|
|
1121
|
+
checkInitialAriaCurrent() {
|
|
1122
|
+
const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
|
|
1123
|
+
if (hasCurrentPage)
|
|
1124
|
+
this.setTriggerActive(true);
|
|
1125
|
+
}
|
|
1031
1126
|
render() {
|
|
1032
1127
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1033
|
-
return (h(Host, { key: '
|
|
1128
|
+
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" }))))));
|
|
1034
1129
|
}
|
|
1035
1130
|
get host() { return getElement(this); }
|
|
1036
1131
|
};
|
|
@@ -1133,7 +1228,7 @@ const PostMegadropdownTrigger = class {
|
|
|
1133
1228
|
document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
|
|
1134
1229
|
}
|
|
1135
1230
|
render() {
|
|
1136
|
-
return (h(Host, { key: '
|
|
1231
|
+
return (h(Host, { key: 'a817027c84bb4a3418807ccbb200d36190e03d6f', "data-version": version, "tab-index": "-1" }, h("button", { key: '1e560734f4a5f742a9efa2bff6833c1ae3e11117' }, h("slot", { key: '42bf1a30f432b1fcf8e0fec1cd1d499126623234' }))));
|
|
1137
1232
|
}
|
|
1138
1233
|
get host() { return getElement(this); }
|
|
1139
1234
|
static get watchers() { return {
|
|
@@ -1145,7 +1240,7 @@ __decorate$1([
|
|
|
1145
1240
|
], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
|
|
1146
1241
|
PostMegadropdownTrigger.style = postMegadropdownTriggerCss;
|
|
1147
1242
|
|
|
1148
|
-
const postMenuCss = "
|
|
1243
|
+
const postMenuCss = ":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}}";
|
|
1149
1244
|
|
|
1150
1245
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1151
1246
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1195,18 +1290,32 @@ const PostMenu = class {
|
|
|
1195
1290
|
}
|
|
1196
1291
|
};
|
|
1197
1292
|
this.handlePostToggle = (event) => {
|
|
1198
|
-
this.isVisible = event.detail;
|
|
1293
|
+
this.isVisible = event.detail.isOpen;
|
|
1199
1294
|
this.toggleMenu.emit(this.isVisible);
|
|
1200
1295
|
requestAnimationFrame(() => {
|
|
1201
1296
|
if (this.isVisible) {
|
|
1202
1297
|
this.lastFocusedElement = this.root?.activeElement;
|
|
1203
1298
|
const menuItems = this.getSlottedItems();
|
|
1204
|
-
if (
|
|
1205
|
-
menuItems
|
|
1299
|
+
if (event.detail.first) {
|
|
1300
|
+
if (menuItems.length > 0) {
|
|
1301
|
+
// Add role="menu" to the popovercontainer
|
|
1302
|
+
this.host.setAttribute('role', 'menu');
|
|
1303
|
+
// Add role="menuitem" to the focusable elements
|
|
1304
|
+
menuItems.forEach(item => {
|
|
1305
|
+
item.setAttribute('role', 'menuitem');
|
|
1306
|
+
});
|
|
1307
|
+
// Add aria-label to the menu
|
|
1308
|
+
if (this.label)
|
|
1309
|
+
this.host.setAttribute('aria-label', this.label);
|
|
1310
|
+
}
|
|
1206
1311
|
}
|
|
1312
|
+
menuItems[0].focus();
|
|
1207
1313
|
}
|
|
1208
1314
|
else if (this.lastFocusedElement) {
|
|
1209
|
-
|
|
1315
|
+
setTimeout(() => {
|
|
1316
|
+
// This timeout is added for NVDA to announce the menu as collapsed
|
|
1317
|
+
this.lastFocusedElement.focus();
|
|
1318
|
+
}, 0);
|
|
1210
1319
|
}
|
|
1211
1320
|
});
|
|
1212
1321
|
};
|
|
@@ -1220,6 +1329,9 @@ const PostMenu = class {
|
|
|
1220
1329
|
validatePlacement() {
|
|
1221
1330
|
checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
|
|
1222
1331
|
}
|
|
1332
|
+
validateLabel() {
|
|
1333
|
+
checkRequiredAndType(this, 'label', 'string');
|
|
1334
|
+
}
|
|
1223
1335
|
connectedCallback() {
|
|
1224
1336
|
this.root = getRoot(this.host);
|
|
1225
1337
|
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
@@ -1232,6 +1344,7 @@ const PostMenu = class {
|
|
|
1232
1344
|
}
|
|
1233
1345
|
componentDidLoad() {
|
|
1234
1346
|
this.validatePlacement();
|
|
1347
|
+
this.validateLabel();
|
|
1235
1348
|
if (this.popoverRef) {
|
|
1236
1349
|
this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
|
|
1237
1350
|
}
|
|
@@ -1308,8 +1421,9 @@ const PostMenu = class {
|
|
|
1308
1421
|
}
|
|
1309
1422
|
}
|
|
1310
1423
|
getSlottedItems() {
|
|
1311
|
-
const slot = this.host.shadowRoot.
|
|
1312
|
-
const slottedElements =
|
|
1424
|
+
const slot = this.host.shadowRoot.querySelectorAll('slot');
|
|
1425
|
+
const slottedElements = [];
|
|
1426
|
+
slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
|
|
1313
1427
|
return (slottedElements
|
|
1314
1428
|
// If the element is a slot, get the assigned elements
|
|
1315
1429
|
.flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
|
|
@@ -1317,11 +1431,12 @@ const PostMenu = class {
|
|
|
1317
1431
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
1318
1432
|
}
|
|
1319
1433
|
render() {
|
|
1320
|
-
return (h(Host, { key: '
|
|
1434
|
+
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' })))));
|
|
1321
1435
|
}
|
|
1322
1436
|
get host() { return getElement(this); }
|
|
1323
1437
|
static get watchers() { return {
|
|
1324
|
-
"placement": ["validatePlacement"]
|
|
1438
|
+
"placement": ["validatePlacement"],
|
|
1439
|
+
"label": ["validateLabel"]
|
|
1325
1440
|
}; }
|
|
1326
1441
|
};
|
|
1327
1442
|
__decorate([
|
|
@@ -1404,7 +1519,7 @@ const PostMenuTrigger = class {
|
|
|
1404
1519
|
}
|
|
1405
1520
|
}
|
|
1406
1521
|
render() {
|
|
1407
|
-
return (h(Host, { key: '
|
|
1522
|
+
return (h(Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
|
|
1408
1523
|
}
|
|
1409
1524
|
get host() { return getElement(this); }
|
|
1410
1525
|
static get watchers() { return {
|
|
@@ -4102,12 +4217,28 @@ function apply() {
|
|
|
4102
4217
|
injectStyles(document);
|
|
4103
4218
|
}
|
|
4104
4219
|
|
|
4105
|
-
const
|
|
4220
|
+
const duration = 250;
|
|
4221
|
+
const easing = 'ease-out';
|
|
4222
|
+
function popIn(el) {
|
|
4223
|
+
if (!el)
|
|
4224
|
+
return;
|
|
4225
|
+
return el.animate([
|
|
4226
|
+
{ transform: 'scale(0.9)', opacity: 0 },
|
|
4227
|
+
{ transform: 'scale(1)', opacity: 1 },
|
|
4228
|
+
], {
|
|
4229
|
+
duration,
|
|
4230
|
+
easing,
|
|
4231
|
+
fill: 'forwards',
|
|
4232
|
+
});
|
|
4233
|
+
}
|
|
4234
|
+
|
|
4235
|
+
const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
|
|
4106
4236
|
|
|
4107
4237
|
const PostPopovercontainer = class {
|
|
4108
4238
|
constructor(hostRef) {
|
|
4109
4239
|
registerInstance(this, hostRef);
|
|
4110
4240
|
this.postToggle = createEvent(this, "postToggle");
|
|
4241
|
+
this.firstOpen = true;
|
|
4111
4242
|
/**
|
|
4112
4243
|
* Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
|
|
4113
4244
|
* Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
|
|
@@ -4207,9 +4338,19 @@ const PostPopovercontainer = class {
|
|
|
4207
4338
|
this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
4208
4339
|
const isOpen = e.newState === 'open';
|
|
4209
4340
|
if (isOpen) {
|
|
4341
|
+
const content = this.host.querySelector('.popover-content');
|
|
4210
4342
|
this.startAutoupdates();
|
|
4343
|
+
if (content && this.animation === 'pop-in') {
|
|
4344
|
+
popIn(content);
|
|
4345
|
+
}
|
|
4211
4346
|
if (this.safeSpace)
|
|
4212
4347
|
window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4348
|
+
// Emit event with `first` flag only true on the first open
|
|
4349
|
+
if (this.firstOpen) {
|
|
4350
|
+
this.postToggle.emit({ isOpen, first: this.firstOpen });
|
|
4351
|
+
this.firstOpen = false;
|
|
4352
|
+
return;
|
|
4353
|
+
}
|
|
4213
4354
|
}
|
|
4214
4355
|
else {
|
|
4215
4356
|
if (typeof this.clearAutoUpdate === 'function')
|
|
@@ -4217,7 +4358,7 @@ const PostPopovercontainer = class {
|
|
|
4217
4358
|
if (this.safeSpace)
|
|
4218
4359
|
window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4219
4360
|
}
|
|
4220
|
-
this.postToggle.emit(isOpen);
|
|
4361
|
+
this.postToggle.emit({ isOpen: isOpen, first: false });
|
|
4221
4362
|
}
|
|
4222
4363
|
/**
|
|
4223
4364
|
* Start listening for DOM updates, scroll events etc. that have
|
|
@@ -4348,10 +4489,9 @@ const PostPopovercontainer = class {
|
|
|
4348
4489
|
}
|
|
4349
4490
|
}
|
|
4350
4491
|
render() {
|
|
4351
|
-
|
|
4352
|
-
return (h(Host, { key: '357f53696ca28ab2c137d47e2192038dc756c289', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '9c40bdc5034ccf14157ee1ae8ce33fe58a9049e4', class: animationClass }, this.arrow && (h("span", { key: '6133ab54aaea6f198560ca5cb30f5604318203f6', class: "arrow", ref: el => {
|
|
4492
|
+
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 => {
|
|
4353
4493
|
this.arrowRef = el;
|
|
4354
|
-
} })), h("slot", { key: '
|
|
4494
|
+
} })), h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
|
|
4355
4495
|
}
|
|
4356
4496
|
get host() { return getElement(this); }
|
|
4357
4497
|
static get watchers() { return {
|
|
@@ -4408,7 +4548,7 @@ const PostTogglebutton = class {
|
|
|
4408
4548
|
this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
|
|
4409
4549
|
}
|
|
4410
4550
|
render() {
|
|
4411
|
-
return (h(Host, { key: '
|
|
4551
|
+
return (h(Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
|
|
4412
4552
|
}
|
|
4413
4553
|
get host() { return getElement(this); }
|
|
4414
4554
|
};
|