@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,58 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CpDyH7Ww.js');
|
|
4
|
-
var _package = require('./package-
|
|
5
|
-
var breakpoints = require('./breakpoints-DmZ_BQGo.js');
|
|
6
|
-
var eventFrom = require('./event-from-C6kpQwhw.js');
|
|
4
|
+
var _package = require('./package-qtH-QrKv.js');
|
|
7
5
|
var index$1 = require('./index-DtvYdwe1.js');
|
|
6
|
+
var breakpoints = require('./breakpoints-CEkeixld.js');
|
|
7
|
+
var eventFrom = require('./event-from-CLvtSUKf.js');
|
|
8
8
|
var index_browser = require('./index.browser-Doj636JV.js');
|
|
9
9
|
var placement = require('./placement-qEFR9hmI.js');
|
|
10
|
-
var getRoot = require('./get-root-
|
|
11
|
-
|
|
12
|
-
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}";
|
|
13
|
-
|
|
14
|
-
const PostClosebutton = class {
|
|
15
|
-
constructor(hostRef) {
|
|
16
|
-
index.registerInstance(this, hostRef);
|
|
17
|
-
}
|
|
18
|
-
componentDidLoad() {
|
|
19
|
-
this.checkHiddenLabel();
|
|
20
|
-
}
|
|
21
|
-
checkHiddenLabel(slot = this.host.shadowRoot.querySelector('.visually-hidden slot')) {
|
|
22
|
-
if (slot.assignedNodes().length === 0) {
|
|
23
|
-
console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
return (index.h(index.Host, { key: 'a8db3ecbefea609234c4c8c29dbf085637592c2c', "data-version": _package.version }, index.h("button", { key: '58cef7f32f6ec89d46a1ea57b5497089a96aebf3', class: "btn btn-icon-close", type: "button" }, index.h("post-icon", { key: '023a67437b69bb9966d08b027cc5f10d68baac40', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'b1a21810b6179ddd8d66b426a3149966c1972f59', class: "visually-hidden" }, index.h("slot", { key: '2a2417bedbcb57c75993722d3267342c7df7381d', onSlotchange: () => this.checkHiddenLabel() })))));
|
|
28
|
-
}
|
|
29
|
-
get host() { return index.getElement(this); }
|
|
30
|
-
};
|
|
31
|
-
PostClosebutton.style = postClosebuttonCss;
|
|
32
|
-
|
|
33
|
-
const easing = 'ease';
|
|
34
|
-
const duration = 500;
|
|
35
|
-
const fill = 'forwards';
|
|
36
|
-
function slideUp(el, translateSize = '-100%') {
|
|
37
|
-
return el.animate([
|
|
38
|
-
{ transform: 'translateY(0)' }, // Starting position (no translation)
|
|
39
|
-
{ transform: `translateY(${translateSize})` }, // End position
|
|
40
|
-
], {
|
|
41
|
-
duration: duration,
|
|
42
|
-
easing,
|
|
43
|
-
fill,
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
function slideDown(el, translateSize = '-100%') {
|
|
47
|
-
return el.animate([
|
|
48
|
-
{ transform: `translateY(${translateSize})` }, // Starting position (no translation)
|
|
49
|
-
{ transform: 'translateY(0)' }, // End position
|
|
50
|
-
], {
|
|
51
|
-
duration: duration,
|
|
52
|
-
easing,
|
|
53
|
-
fill,
|
|
54
|
-
});
|
|
55
|
-
}
|
|
10
|
+
var getRoot = require('./get-root-CyMf3Vsd.js');
|
|
56
11
|
|
|
57
12
|
const focusableSelector = `:where(${[
|
|
58
13
|
'button',
|
|
@@ -88,7 +43,78 @@ function getFocusableChildren(element) {
|
|
|
88
43
|
return visibleFocusableChildren;
|
|
89
44
|
}
|
|
90
45
|
|
|
91
|
-
const
|
|
46
|
+
const BUTTON_TYPES = ['button', 'submit', 'reset'];
|
|
47
|
+
|
|
48
|
+
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}}";
|
|
49
|
+
|
|
50
|
+
const PostClosebutton = class {
|
|
51
|
+
constructor(hostRef) {
|
|
52
|
+
index.registerInstance(this, hostRef);
|
|
53
|
+
this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
|
|
54
|
+
/**
|
|
55
|
+
* Overrides the close button's type ("button" by default)
|
|
56
|
+
*/
|
|
57
|
+
this.buttonType = 'button';
|
|
58
|
+
}
|
|
59
|
+
validateButtonType() {
|
|
60
|
+
index$1.checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
|
|
61
|
+
}
|
|
62
|
+
componentDidLoad() {
|
|
63
|
+
this.checkContent();
|
|
64
|
+
}
|
|
65
|
+
connectedCallback() {
|
|
66
|
+
this.mutationObserver.observe(this.host, {
|
|
67
|
+
childList: true,
|
|
68
|
+
characterData: true,
|
|
69
|
+
subtree: true,
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
disconnectedCallback() {
|
|
73
|
+
if (this.mutationObserver) {
|
|
74
|
+
this.mutationObserver.disconnect();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
checkContent() {
|
|
78
|
+
this.validateButtonType();
|
|
79
|
+
if (!this.host.querySelector('.visually-hidden').textContent) {
|
|
80
|
+
console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
return (index.h(index.Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": _package.version }, index.h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, index.h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), index.h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, index.h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
|
|
85
|
+
}
|
|
86
|
+
get host() { return index.getElement(this); }
|
|
87
|
+
static get watchers() { return {
|
|
88
|
+
"buttonType": ["validateButtonType"]
|
|
89
|
+
}; }
|
|
90
|
+
};
|
|
91
|
+
PostClosebutton.style = postClosebuttonCss;
|
|
92
|
+
|
|
93
|
+
const easing$1 = 'ease';
|
|
94
|
+
const duration$1 = 500;
|
|
95
|
+
const fill = 'forwards';
|
|
96
|
+
function slideUp(el, translateSize = '-100%') {
|
|
97
|
+
return el.animate([
|
|
98
|
+
{ transform: 'translateY(0)' }, // Starting position (no translation)
|
|
99
|
+
{ transform: `translateY(${translateSize})` }, // End position
|
|
100
|
+
], {
|
|
101
|
+
duration: duration$1,
|
|
102
|
+
easing: easing$1,
|
|
103
|
+
fill,
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
function slideDown(el, translateSize = '-100%') {
|
|
107
|
+
return el.animate([
|
|
108
|
+
{ transform: `translateY(${translateSize})` }, // Starting position (no translation)
|
|
109
|
+
{ transform: 'translateY(0)' }, // End position
|
|
110
|
+
], {
|
|
111
|
+
duration: duration$1,
|
|
112
|
+
easing: easing$1,
|
|
113
|
+
fill,
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
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}}";
|
|
92
118
|
|
|
93
119
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
94
120
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -135,6 +161,7 @@ const PostHeader = class {
|
|
|
135
161
|
this.throttledResize = breakpoints.throttle(50, () => this.updateLocalHeaderHeight());
|
|
136
162
|
this.device = breakpoints.breakpoint.get('device');
|
|
137
163
|
this.hasNavigation = false;
|
|
164
|
+
this.hasTitle = false;
|
|
138
165
|
this.mobileMenuExtended = false;
|
|
139
166
|
this.megadropdownOpen = false;
|
|
140
167
|
this.breakpointChange = (e) => {
|
|
@@ -171,6 +198,7 @@ const PostHeader = class {
|
|
|
171
198
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
172
199
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
173
200
|
this.checkNavigationExistence();
|
|
201
|
+
this.checkTitleExistence();
|
|
174
202
|
this.switchLanguageSwitchMode();
|
|
175
203
|
this.handleScrollParentResize();
|
|
176
204
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -191,7 +219,8 @@ const PostHeader = class {
|
|
|
191
219
|
window.removeEventListener('postBreakpoint:device', this.breakpointChange);
|
|
192
220
|
window.removeEventListener('resize', this.throttledResize);
|
|
193
221
|
window.removeEventListener('scroll', this.handleScrollEvent);
|
|
194
|
-
scrollParent
|
|
222
|
+
if (scrollParent)
|
|
223
|
+
scrollParent.removeEventListener('scroll', this.handleScrollEvent);
|
|
195
224
|
document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
196
225
|
this.host.removeEventListener('keydown', this.keyboardHandler);
|
|
197
226
|
this.host.removeEventListener('click', this.handleLinkClick);
|
|
@@ -208,6 +237,9 @@ const PostHeader = class {
|
|
|
208
237
|
checkNavigationExistence() {
|
|
209
238
|
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
210
239
|
}
|
|
240
|
+
checkTitleExistence() {
|
|
241
|
+
this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
|
|
242
|
+
}
|
|
211
243
|
async closeMobileMenu() {
|
|
212
244
|
this.mobileMenuAnimation.finish();
|
|
213
245
|
const menuButton = this.getMenuButton();
|
|
@@ -333,23 +365,21 @@ const PostHeader = class {
|
|
|
333
365
|
});
|
|
334
366
|
}
|
|
335
367
|
renderNavigation() {
|
|
336
|
-
const
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
navigationClasses.push('extended');
|
|
340
|
-
}
|
|
341
|
-
if (this.megadropdownOpen) {
|
|
342
|
-
navigationClasses.push('megadropdown-open');
|
|
368
|
+
const mainNavigation = (index.h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }));
|
|
369
|
+
if (this.device === 'desktop') {
|
|
370
|
+
return (index.h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, mainNavigation, index.h("slot", { name: "navigation-controls" })));
|
|
343
371
|
}
|
|
344
|
-
return (index.h("div", { class:
|
|
372
|
+
return (index.h("div", { class: { navigation: true, extended: this.mobileMenuExtended }, style: { '--post-header-navigation-current-inset': `${this.mobileMenu?.scrollTop ?? 0}px` } }, index.h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, index.h("div", { class: "navigation-header" }, index.h("slot", { name: "navigation-controls" }), index.h("slot", { name: "target-group" })), mainNavigation, index.h("div", { class: "navigation-footer" }, index.h("slot", { name: "meta-navigation" }), index.h("slot", { name: "post-language-switch" })))));
|
|
345
373
|
}
|
|
346
374
|
render() {
|
|
347
375
|
const localHeaderClasses = ['local-header'];
|
|
348
376
|
if (this.mobileMenuExtended)
|
|
349
377
|
localHeaderClasses.push('local-header-mobile-extended');
|
|
350
|
-
if (!this.hasNavigation)
|
|
378
|
+
if (this.device !== 'desktop' || !this.hasNavigation)
|
|
351
379
|
localHeaderClasses.push('no-navigation');
|
|
352
|
-
|
|
380
|
+
if (!this.hasTitle)
|
|
381
|
+
localHeaderClasses.push('no-title');
|
|
382
|
+
return (index.h(index.Host, { key: 'fd3c4a534af28b2e35f4a02502283e04be0d9683', "data-version": _package.version, "data-color-scheme": "light" }, index.h("div", { key: '61c70adea7525d3daa7690ac9243c7697df5c8bc', class: "global-header" }, index.h("div", { key: '1fdb106a9624a07d3ad3fd1cb4eade9b05282ab5', class: "global-sub" }, index.h("div", { key: '2c62bccfa8d5fa9642528db265e76aac0d13022c', class: "logo" }, index.h("slot", { key: '75b87c2428b7ccad6940976e46156b807257cbc5', name: "post-logo" }))), index.h("div", { key: 'c1950198cbac96132ca5b1c886bb94238c53b903', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '2e695987df3da854db3ec18cc4b1283d0f06dfd1', name: "target-group" })), index.h("div", { key: '50366842180e3aae87d4e4da68a8f73c2f62c347', class: "global-sub" }, index.h("slot", { key: '7eba07e3dddbc26843a50b39a69953a01d9e2a5e', name: "global-controls" }), !this.hasMobileMenu && index.h("slot", { key: 'aa9fc50e2eb8eee4e3d9de76ccbf564ac30a8d03', name: "meta-navigation" }), !this.hasMobileMenu && index.h("slot", { key: '7742f0d0e30d5b0d90ca9352fec72e49a97ec3cb', name: "post-language-switch" }), index.h("slot", { key: 'a3545c4bb2a61c00105763059f3bd66ddd829681', name: "global-login" }), this.hasNavigation && (index.h("div", { key: 'bb8df618571ea8cadb89b0cd8d50bba7c0dec038', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '83b9542127213e39644c280cf9f4e19aaf3f071a', name: "post-togglebutton" }))))), index.h("div", { key: '2ab719d2610d46050fc99345237b7b9cc54fd467', class: localHeaderClasses.join(' ') }, index.h("slot", { key: '0e02b3f7421a1c67e99fdc92aadcf61153665820', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle && (index.h("div", { key: '94b091a29727bd556a4907ac4bdb2f8757483135', class: "local-sub" }, index.h("slot", { key: '7647015350e21278b104ff4538525abeaea98442', name: "local-controls" }), index.h("slot", { key: '4e42d3fe5c4f676b7bb836c976c1d7e59a1052ae' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
353
383
|
}
|
|
354
384
|
get host() { return index.getElement(this); }
|
|
355
385
|
static get watchers() { return {
|
|
@@ -401,52 +431,58 @@ const PostIcon = class {
|
|
|
401
431
|
validateScale() {
|
|
402
432
|
index$1.checkEmptyOrType(this, 'scale', 'number');
|
|
403
433
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
434
|
+
/**
|
|
435
|
+
* Construct the icon URL according to the following rules:
|
|
436
|
+
* 1. `@base` (absolute URL) → use directly.
|
|
437
|
+
* 2. `@base` (relative URL) → resolve with `base href` and/or `origin`
|
|
438
|
+
* - If `base href` is absolute → use just that.
|
|
439
|
+
* - If `base href` is relative → prepend with `origin`.
|
|
440
|
+
* - If `base href` does not exist → use only `origin`.
|
|
441
|
+
* 3. `@meta` (absolute URL) → use directly.
|
|
442
|
+
* 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
|
|
443
|
+
* 5. `CDN_URL` fallback → `https://unpkg.com/...`.
|
|
444
|
+
**/
|
|
408
445
|
getUrl() {
|
|
409
446
|
const fileName = `${this.name}.svg`;
|
|
410
447
|
if (!breakpoints.IS_BROWSER && !this.base) {
|
|
411
448
|
return `${CDN_URL}${fileName}`;
|
|
412
449
|
}
|
|
450
|
+
const isAbsolute = (url) => /^https?:\/\//.test(url);
|
|
451
|
+
const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
|
|
452
|
+
const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
|
|
413
453
|
const currentDomain = breakpoints.IS_BROWSER ? window.location.origin : '';
|
|
414
454
|
const baseHref = breakpoints.IS_BROWSER
|
|
415
455
|
? document.querySelector('base[href]')?.getAttribute('href') || ''
|
|
416
456
|
: '';
|
|
417
|
-
const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
|
|
418
457
|
const metaIconBase = breakpoints.IS_BROWSER
|
|
419
|
-
? document
|
|
420
|
-
.querySelector('meta[name="design-system-settings"]')
|
|
421
|
-
?.getAttribute('data-post-icon-base') || ''
|
|
458
|
+
? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
|
|
422
459
|
: '';
|
|
423
|
-
|
|
424
|
-
const
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
return
|
|
431
|
-
}
|
|
460
|
+
// Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
|
|
461
|
+
const buildUrlWithBase = (relativeUrl) => {
|
|
462
|
+
const normalizedHref = normalizeUrl(baseHref);
|
|
463
|
+
const normalizedRelative = normalizeUrl(relativeUrl);
|
|
464
|
+
if (isAbsolute(normalizedHref)) {
|
|
465
|
+
return `${normalizedHref}${normalizedRelative}`;
|
|
466
|
+
}
|
|
467
|
+
return `${currentDomain}${normalizedHref}${normalizedRelative}`;
|
|
468
|
+
};
|
|
432
469
|
let url;
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
url =
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
470
|
+
// Highest Priority is this.base
|
|
471
|
+
if (this.base) {
|
|
472
|
+
url = isAbsolute(this.base)
|
|
473
|
+
? `${normalizeUrl(this.base)}${fileName}`
|
|
474
|
+
: `${buildUrlWithBase(this.base)}${fileName}`;
|
|
475
|
+
return cleanUrl(url);
|
|
440
476
|
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
url =
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
url = `${CDN_URL}${fileName}`;
|
|
477
|
+
// Second Priority is metaIconBase
|
|
478
|
+
if (metaIconBase) {
|
|
479
|
+
url = isAbsolute(metaIconBase)
|
|
480
|
+
? `${normalizeUrl(metaIconBase)}${fileName}`
|
|
481
|
+
: `${buildUrlWithBase(metaIconBase)}${fileName}`;
|
|
482
|
+
return cleanUrl(url);
|
|
448
483
|
}
|
|
449
|
-
|
|
484
|
+
// Fallback to CDN
|
|
485
|
+
return cleanUrl(`${CDN_URL}${fileName}`);
|
|
450
486
|
}
|
|
451
487
|
getStyles() {
|
|
452
488
|
const url = this.getUrl();
|
|
@@ -467,7 +503,7 @@ const PostIcon = class {
|
|
|
467
503
|
this.validateAnimation();
|
|
468
504
|
}
|
|
469
505
|
render() {
|
|
470
|
-
return (index.h(index.Host, { key: '
|
|
506
|
+
return (index.h(index.Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": _package.version }, index.h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
|
|
471
507
|
}
|
|
472
508
|
get host() { return index.getElement(this); }
|
|
473
509
|
static get watchers() { return {
|
|
@@ -482,7 +518,7 @@ PostIcon.style = postIconCss;
|
|
|
482
518
|
|
|
483
519
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
484
520
|
|
|
485
|
-
const postLanguageOptionCss = "
|
|
521
|
+
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}";
|
|
486
522
|
|
|
487
523
|
const PostLanguageOption = class {
|
|
488
524
|
constructor(hostRef) {
|
|
@@ -528,13 +564,12 @@ const PostLanguageOption = class {
|
|
|
528
564
|
}
|
|
529
565
|
render() {
|
|
530
566
|
const lang = this.code.toLowerCase();
|
|
531
|
-
const role = this.variant === 'menu' ? 'menuitem' : undefined;
|
|
532
567
|
const emitOnKeyDown = (e) => {
|
|
533
568
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
534
569
|
this.emitChange();
|
|
535
570
|
}
|
|
536
571
|
};
|
|
537
|
-
return (index.h(index.Host, { key: '
|
|
572
|
+
return (index.h(index.Host, { key: 'b86bf33feb890e5dfbfae16f45ce2e56fdfaf16a', "data-version": _package.version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name)))));
|
|
538
573
|
}
|
|
539
574
|
get host() { return index.getElement(this); }
|
|
540
575
|
static get watchers() { return {
|
|
@@ -620,14 +655,13 @@ const PostLanguageSwitch = class {
|
|
|
620
655
|
updateChildrenVariant() {
|
|
621
656
|
this.languageOptions.forEach(el => {
|
|
622
657
|
el.setAttribute('variant', this.variant);
|
|
623
|
-
el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
|
|
624
658
|
});
|
|
625
659
|
}
|
|
626
660
|
renderList() {
|
|
627
661
|
return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, index.h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), index.h("slot", null))));
|
|
628
662
|
}
|
|
629
663
|
renderDropdown() {
|
|
630
|
-
return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger" }, this.activeLang, index.h("span", { class: "visually-hidden" }, this.caption), index.h("span", { class: "visually-hidden" }, this.description), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container",
|
|
664
|
+
return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger" }, this.activeLang, index.h("span", { class: "visually-hidden" }, this.caption), index.h("span", { class: "visually-hidden" }, this.description), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, index.h("slot", null))));
|
|
631
665
|
}
|
|
632
666
|
render() {
|
|
633
667
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -644,7 +678,7 @@ __decorate$2([
|
|
|
644
678
|
], PostLanguageSwitch.prototype, "handlePostChange", null);
|
|
645
679
|
PostLanguageSwitch.style = postLanguageSwitchCss;
|
|
646
680
|
|
|
647
|
-
const postListCss = "
|
|
681
|
+
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}";
|
|
648
682
|
|
|
649
683
|
const PostList = class {
|
|
650
684
|
constructor(hostRef) {
|
|
@@ -673,7 +707,7 @@ const PostList = class {
|
|
|
673
707
|
}
|
|
674
708
|
}
|
|
675
709
|
render() {
|
|
676
|
-
return (index.h(index.Host, { key: '
|
|
710
|
+
return (index.h(index.Host, { key: '908588a3f1261efbb85dbefade9f85f8ec6f16f8', "data-version": _package.version }, index.h("div", { key: '44b224379be814dab98e16ad12a3ca0f10e61ac0', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '1aed36b7c286796a4d617643e7606e63bc2dd95a' })), index.h("div", { key: '3e1d137712b3e7616bab450426964f6c9334198e', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: 'fd5abb2fca95d32295fbfa158795413264200ae8', name: "post-list-item" }))));
|
|
677
711
|
}
|
|
678
712
|
get host() { return index.getElement(this); }
|
|
679
713
|
};
|
|
@@ -689,7 +723,7 @@ const PostListItem = class {
|
|
|
689
723
|
this.host.setAttribute('slot', 'post-list-item');
|
|
690
724
|
}
|
|
691
725
|
render() {
|
|
692
|
-
return (index.h(index.Host, { key: '
|
|
726
|
+
return (index.h(index.Host, { key: '67204f0c31a6bc4cad3359030a8da57a045de7c5', role: "listitem", slot: "post-list-item", version: _package.version }, index.h("slot", { key: '0c68073c601a3792880fc0e68af24a4a204548ed' })));
|
|
693
727
|
}
|
|
694
728
|
get host() { return index.getElement(this); }
|
|
695
729
|
};
|
|
@@ -716,7 +750,7 @@ const PostLogo = class {
|
|
|
716
750
|
render() {
|
|
717
751
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
718
752
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
719
|
-
return (index.h(index.Host, { key: '
|
|
753
|
+
return (index.h(index.Host, { key: 'acd3bfab8d395cde2d79066580a8e53e65c426f4', "data-version": _package.version }, index.h(LogoTag, { key: 'c5c2f8a2be6204bb693d5d53fd95e75133518a1d', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '675b756441237173c1046b74c2dfe2dfc08bfd7f', class: "description" }, index.h("slot", { key: '710fd3483f56ad353e1a99f4fff2acc78ee53b46', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'e72b70e26da0fefd52a7e9aec41772dd5c9f0258', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'b67d56c9319bb576a56c76c5299f4a81c93d6c3c', id: "Logo" }, index.h("rect", { key: '8c073060a51c5e6942c1b33fc5c2a3a7eb422f07', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.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" }), index.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" }))))));
|
|
720
754
|
}
|
|
721
755
|
get host() { return index.getElement(this); }
|
|
722
756
|
static get watchers() { return {
|
|
@@ -725,7 +759,7 @@ const PostLogo = class {
|
|
|
725
759
|
};
|
|
726
760
|
PostLogo.style = postLogoCss;
|
|
727
761
|
|
|
728
|
-
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)}}";
|
|
762
|
+
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)}}";
|
|
729
763
|
|
|
730
764
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
731
765
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
@@ -870,12 +904,12 @@ const PostMainnavigation = class {
|
|
|
870
904
|
}, NAVBAR_DISABLE_DURATION);
|
|
871
905
|
}
|
|
872
906
|
render() {
|
|
873
|
-
return (index.h(index.Host, { key: '
|
|
907
|
+
return (index.h(index.Host, { key: '04ae6ffdd6560113431b70c3c27f16057fc9a87d', slot: "post-mainnavigation", version: _package.version }, index.h("div", { key: '2f79728dcbbfe94a343b880e2ba07331f45c9f30', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '3e762484bbcd03ac0d67b4ab722ffcd862bb073e', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '1150bfdf724e4d93b45f1fff071fba56d31d15b5', ref: el => (this.navbar = el) }, index.h("slot", { key: '3496b7c6d2d75300b1727148ff9b9965717d9909' })), index.h("div", { key: '1fa6dd50d9650ab6e5047c607f7e5ed0416ed245', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '9487d621e1d7289a0afeb1d0443ec8bc70cd5f3e', "aria-hidden": "true", name: "chevronright" }))));
|
|
874
908
|
}
|
|
875
909
|
};
|
|
876
910
|
PostMainnavigation.style = postMainnavigationCss;
|
|
877
911
|
|
|
878
|
-
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.
|
|
912
|
+
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}}";
|
|
879
913
|
|
|
880
914
|
const PostMegadropdown = class {
|
|
881
915
|
constructor(hostRef) {
|
|
@@ -888,6 +922,7 @@ const PostMegadropdown = class {
|
|
|
888
922
|
* and updates automatically when the dropdown is toggled.
|
|
889
923
|
*/
|
|
890
924
|
this.isVisible = false;
|
|
925
|
+
this.trigger = false;
|
|
891
926
|
/** Holds the current animation class. */
|
|
892
927
|
this.animationClass = null;
|
|
893
928
|
this.handleClickOutside = (event) => {
|
|
@@ -909,11 +944,20 @@ const PostMegadropdown = class {
|
|
|
909
944
|
this.hide(false);
|
|
910
945
|
};
|
|
911
946
|
}
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
947
|
+
get megadropdownTrigger() {
|
|
948
|
+
const hostId = this.host.getAttribute('id');
|
|
949
|
+
return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
|
|
950
|
+
}
|
|
951
|
+
connectedCallback() {
|
|
952
|
+
window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
|
|
953
|
+
}
|
|
954
|
+
componentDidRender() {
|
|
955
|
+
this.getFocusableElements();
|
|
956
|
+
}
|
|
957
|
+
componentDidLoad() {
|
|
958
|
+
this.checkInitialAriaCurrent();
|
|
959
|
+
this.setupObserver();
|
|
960
|
+
this.handleAriaCurrentChange([]);
|
|
917
961
|
}
|
|
918
962
|
disconnectedCallback() {
|
|
919
963
|
this.removeListeners();
|
|
@@ -921,9 +965,7 @@ const PostMegadropdown = class {
|
|
|
921
965
|
if (PostMegadropdown.activeDropdown === this) {
|
|
922
966
|
PostMegadropdown.activeDropdown = null;
|
|
923
967
|
}
|
|
924
|
-
|
|
925
|
-
componentWillRender() {
|
|
926
|
-
this.getFocusableElements();
|
|
968
|
+
this.defaultSlotObserver.disconnect();
|
|
927
969
|
}
|
|
928
970
|
/**
|
|
929
971
|
* Toggles the dropdown visibility based on its current state.
|
|
@@ -972,8 +1014,11 @@ const PostMegadropdown = class {
|
|
|
972
1014
|
async focusFirst() {
|
|
973
1015
|
this.firstFocusableEl?.focus();
|
|
974
1016
|
}
|
|
975
|
-
|
|
976
|
-
|
|
1017
|
+
breakpointChange(e) {
|
|
1018
|
+
this.device = e.detail;
|
|
1019
|
+
if (this.device === 'desktop' && this.isVisible) {
|
|
1020
|
+
this.animationClass = null;
|
|
1021
|
+
}
|
|
977
1022
|
}
|
|
978
1023
|
/**
|
|
979
1024
|
* Forces the dropdown to close without animation.
|
|
@@ -1030,9 +1075,59 @@ const PostMegadropdown = class {
|
|
|
1030
1075
|
}
|
|
1031
1076
|
}
|
|
1032
1077
|
}
|
|
1078
|
+
/**
|
|
1079
|
+
* Sets up a MutationObserver on the host to watch for changes
|
|
1080
|
+
* in `aria-current` attributes.
|
|
1081
|
+
*/
|
|
1082
|
+
setupObserver() {
|
|
1083
|
+
const config = {
|
|
1084
|
+
subtree: true,
|
|
1085
|
+
attributes: true,
|
|
1086
|
+
attributeFilter: ['aria-current'],
|
|
1087
|
+
};
|
|
1088
|
+
this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
|
|
1089
|
+
this.defaultSlotObserver.observe(this.host, config);
|
|
1090
|
+
}
|
|
1091
|
+
/**
|
|
1092
|
+
* Adds or removes the 'active' class on the megadropdown trigger button
|
|
1093
|
+
* based on the active state.
|
|
1094
|
+
*
|
|
1095
|
+
* @param isActive - Whether the trigger should appear active
|
|
1096
|
+
*/
|
|
1097
|
+
setTriggerActive(isActive) {
|
|
1098
|
+
const trigger = this.megadropdownTrigger;
|
|
1099
|
+
if (!trigger)
|
|
1100
|
+
return;
|
|
1101
|
+
if (isActive) {
|
|
1102
|
+
trigger.classList.add('active');
|
|
1103
|
+
}
|
|
1104
|
+
else {
|
|
1105
|
+
trigger.classList.remove('active');
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
/**
|
|
1109
|
+
* Updates the megadropdown trigger state when the megadropdown content changes.
|
|
1110
|
+
* Checks if any element inside the megadropdown has `aria-current="page"`
|
|
1111
|
+
* and sets the trigger as active accordingly.
|
|
1112
|
+
*/
|
|
1113
|
+
handleAriaCurrentChange(mutations) {
|
|
1114
|
+
if (!mutations.length)
|
|
1115
|
+
return;
|
|
1116
|
+
const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
|
|
1117
|
+
this.setTriggerActive(hasCurrentPage);
|
|
1118
|
+
}
|
|
1119
|
+
/**
|
|
1120
|
+
* Checks on initialization if any element inside the megadropdown
|
|
1121
|
+
* has `aria-current="page"` and sets the trigger as active if so.
|
|
1122
|
+
*/
|
|
1123
|
+
checkInitialAriaCurrent() {
|
|
1124
|
+
const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
|
|
1125
|
+
if (hasCurrentPage)
|
|
1126
|
+
this.setTriggerActive(true);
|
|
1127
|
+
}
|
|
1033
1128
|
render() {
|
|
1034
1129
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1035
|
-
return (index.h(index.Host, { key: '
|
|
1130
|
+
return (index.h(index.Host, { key: '40023f8684db4cfff78f69d2d5786e4c3a0332b4', version: _package.version }, index.h("div", { key: '986f114148d355b7a6e92c19d1c02c925eb27fce', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { key: 'c14d01be681f596148d39f272375615eafdf25c0', class: "megadropdown" }, index.h("slot", { key: '5f60ff26e694c107c569e06d30e18a5940d3e7b1', name: "megadropdown-title" }), index.h("div", { key: '49202a8a0dcebc086220db637cf25d96510b6eac', class: "megadropdown-content" }, index.h("slot", { key: '98593b2824d21f065b4c183c8980d94136b175bf' })), index.h("div", { key: 'ed1dfbbebd101a98153657007f8037c0282b47ef', onClick: () => this.hide(true), class: "back-button" }, index.h("slot", { key: '4e737d72e77271cb025976ae5e5fe4d5f653480a', name: "back-button" })), index.h("div", { key: '0bf1316c091efbf294be89efeebae7937c013b29', onClick: () => this.hide(true), class: "close-button" }, index.h("slot", { key: '594a412944fff3fee09639b85cc13a9291b96a10', name: "close-button" }))))));
|
|
1036
1131
|
}
|
|
1037
1132
|
get host() { return index.getElement(this); }
|
|
1038
1133
|
};
|
|
@@ -1135,7 +1230,7 @@ const PostMegadropdownTrigger = class {
|
|
|
1135
1230
|
document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
|
|
1136
1231
|
}
|
|
1137
1232
|
render() {
|
|
1138
|
-
return (index.h(index.Host, { key: '
|
|
1233
|
+
return (index.h(index.Host, { key: 'a817027c84bb4a3418807ccbb200d36190e03d6f', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: '1e560734f4a5f742a9efa2bff6833c1ae3e11117' }, index.h("slot", { key: '42bf1a30f432b1fcf8e0fec1cd1d499126623234' }))));
|
|
1139
1234
|
}
|
|
1140
1235
|
get host() { return index.getElement(this); }
|
|
1141
1236
|
static get watchers() { return {
|
|
@@ -1147,7 +1242,7 @@ __decorate$1([
|
|
|
1147
1242
|
], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
|
|
1148
1243
|
PostMegadropdownTrigger.style = postMegadropdownTriggerCss;
|
|
1149
1244
|
|
|
1150
|
-
const postMenuCss = "
|
|
1245
|
+
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}}";
|
|
1151
1246
|
|
|
1152
1247
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1153
1248
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1197,18 +1292,32 @@ const PostMenu = class {
|
|
|
1197
1292
|
}
|
|
1198
1293
|
};
|
|
1199
1294
|
this.handlePostToggle = (event) => {
|
|
1200
|
-
this.isVisible = event.detail;
|
|
1295
|
+
this.isVisible = event.detail.isOpen;
|
|
1201
1296
|
this.toggleMenu.emit(this.isVisible);
|
|
1202
1297
|
requestAnimationFrame(() => {
|
|
1203
1298
|
if (this.isVisible) {
|
|
1204
1299
|
this.lastFocusedElement = this.root?.activeElement;
|
|
1205
1300
|
const menuItems = this.getSlottedItems();
|
|
1206
|
-
if (
|
|
1207
|
-
menuItems
|
|
1301
|
+
if (event.detail.first) {
|
|
1302
|
+
if (menuItems.length > 0) {
|
|
1303
|
+
// Add role="menu" to the popovercontainer
|
|
1304
|
+
this.host.setAttribute('role', 'menu');
|
|
1305
|
+
// Add role="menuitem" to the focusable elements
|
|
1306
|
+
menuItems.forEach(item => {
|
|
1307
|
+
item.setAttribute('role', 'menuitem');
|
|
1308
|
+
});
|
|
1309
|
+
// Add aria-label to the menu
|
|
1310
|
+
if (this.label)
|
|
1311
|
+
this.host.setAttribute('aria-label', this.label);
|
|
1312
|
+
}
|
|
1208
1313
|
}
|
|
1314
|
+
menuItems[0].focus();
|
|
1209
1315
|
}
|
|
1210
1316
|
else if (this.lastFocusedElement) {
|
|
1211
|
-
|
|
1317
|
+
setTimeout(() => {
|
|
1318
|
+
// This timeout is added for NVDA to announce the menu as collapsed
|
|
1319
|
+
this.lastFocusedElement.focus();
|
|
1320
|
+
}, 0);
|
|
1212
1321
|
}
|
|
1213
1322
|
});
|
|
1214
1323
|
};
|
|
@@ -1222,6 +1331,9 @@ const PostMenu = class {
|
|
|
1222
1331
|
validatePlacement() {
|
|
1223
1332
|
index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
|
|
1224
1333
|
}
|
|
1334
|
+
validateLabel() {
|
|
1335
|
+
index$1.checkRequiredAndType(this, 'label', 'string');
|
|
1336
|
+
}
|
|
1225
1337
|
connectedCallback() {
|
|
1226
1338
|
this.root = getRoot.getRoot(this.host);
|
|
1227
1339
|
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
@@ -1234,6 +1346,7 @@ const PostMenu = class {
|
|
|
1234
1346
|
}
|
|
1235
1347
|
componentDidLoad() {
|
|
1236
1348
|
this.validatePlacement();
|
|
1349
|
+
this.validateLabel();
|
|
1237
1350
|
if (this.popoverRef) {
|
|
1238
1351
|
this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
|
|
1239
1352
|
}
|
|
@@ -1310,8 +1423,9 @@ const PostMenu = class {
|
|
|
1310
1423
|
}
|
|
1311
1424
|
}
|
|
1312
1425
|
getSlottedItems() {
|
|
1313
|
-
const slot = this.host.shadowRoot.
|
|
1314
|
-
const slottedElements =
|
|
1426
|
+
const slot = this.host.shadowRoot.querySelectorAll('slot');
|
|
1427
|
+
const slottedElements = [];
|
|
1428
|
+
slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
|
|
1315
1429
|
return (slottedElements
|
|
1316
1430
|
// If the element is a slot, get the assigned elements
|
|
1317
1431
|
.flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
|
|
@@ -1319,11 +1433,12 @@ const PostMenu = class {
|
|
|
1319
1433
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
1320
1434
|
}
|
|
1321
1435
|
render() {
|
|
1322
|
-
return (index.h(index.Host, { key: '
|
|
1436
|
+
return (index.h(index.Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": _package.version }, index.h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, index.h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), index.h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
|
|
1323
1437
|
}
|
|
1324
1438
|
get host() { return index.getElement(this); }
|
|
1325
1439
|
static get watchers() { return {
|
|
1326
|
-
"placement": ["validatePlacement"]
|
|
1440
|
+
"placement": ["validatePlacement"],
|
|
1441
|
+
"label": ["validateLabel"]
|
|
1327
1442
|
}; }
|
|
1328
1443
|
};
|
|
1329
1444
|
__decorate([
|
|
@@ -1406,7 +1521,7 @@ const PostMenuTrigger = class {
|
|
|
1406
1521
|
}
|
|
1407
1522
|
}
|
|
1408
1523
|
render() {
|
|
1409
|
-
return (index.h(index.Host, { key: '
|
|
1524
|
+
return (index.h(index.Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
|
|
1410
1525
|
}
|
|
1411
1526
|
get host() { return index.getElement(this); }
|
|
1412
1527
|
static get watchers() { return {
|
|
@@ -4104,12 +4219,28 @@ function apply() {
|
|
|
4104
4219
|
injectStyles(document);
|
|
4105
4220
|
}
|
|
4106
4221
|
|
|
4107
|
-
const
|
|
4222
|
+
const duration = 250;
|
|
4223
|
+
const easing = 'ease-out';
|
|
4224
|
+
function popIn(el) {
|
|
4225
|
+
if (!el)
|
|
4226
|
+
return;
|
|
4227
|
+
return el.animate([
|
|
4228
|
+
{ transform: 'scale(0.9)', opacity: 0 },
|
|
4229
|
+
{ transform: 'scale(1)', opacity: 1 },
|
|
4230
|
+
], {
|
|
4231
|
+
duration,
|
|
4232
|
+
easing,
|
|
4233
|
+
fill: 'forwards',
|
|
4234
|
+
});
|
|
4235
|
+
}
|
|
4236
|
+
|
|
4237
|
+
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)}";
|
|
4108
4238
|
|
|
4109
4239
|
const PostPopovercontainer = class {
|
|
4110
4240
|
constructor(hostRef) {
|
|
4111
4241
|
index.registerInstance(this, hostRef);
|
|
4112
4242
|
this.postToggle = index.createEvent(this, "postToggle");
|
|
4243
|
+
this.firstOpen = true;
|
|
4113
4244
|
/**
|
|
4114
4245
|
* Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
|
|
4115
4246
|
* Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
|
|
@@ -4209,9 +4340,19 @@ const PostPopovercontainer = class {
|
|
|
4209
4340
|
this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
4210
4341
|
const isOpen = e.newState === 'open';
|
|
4211
4342
|
if (isOpen) {
|
|
4343
|
+
const content = this.host.querySelector('.popover-content');
|
|
4212
4344
|
this.startAutoupdates();
|
|
4345
|
+
if (content && this.animation === 'pop-in') {
|
|
4346
|
+
popIn(content);
|
|
4347
|
+
}
|
|
4213
4348
|
if (this.safeSpace)
|
|
4214
4349
|
window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4350
|
+
// Emit event with `first` flag only true on the first open
|
|
4351
|
+
if (this.firstOpen) {
|
|
4352
|
+
this.postToggle.emit({ isOpen, first: this.firstOpen });
|
|
4353
|
+
this.firstOpen = false;
|
|
4354
|
+
return;
|
|
4355
|
+
}
|
|
4215
4356
|
}
|
|
4216
4357
|
else {
|
|
4217
4358
|
if (typeof this.clearAutoUpdate === 'function')
|
|
@@ -4219,7 +4360,7 @@ const PostPopovercontainer = class {
|
|
|
4219
4360
|
if (this.safeSpace)
|
|
4220
4361
|
window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4221
4362
|
}
|
|
4222
|
-
this.postToggle.emit(isOpen);
|
|
4363
|
+
this.postToggle.emit({ isOpen: isOpen, first: false });
|
|
4223
4364
|
}
|
|
4224
4365
|
/**
|
|
4225
4366
|
* Start listening for DOM updates, scroll events etc. that have
|
|
@@ -4350,10 +4491,9 @@ const PostPopovercontainer = class {
|
|
|
4350
4491
|
}
|
|
4351
4492
|
}
|
|
4352
4493
|
render() {
|
|
4353
|
-
|
|
4354
|
-
return (index.h(index.Host, { key: '357f53696ca28ab2c137d47e2192038dc756c289', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '9c40bdc5034ccf14157ee1ae8ce33fe58a9049e4', class: animationClass }, this.arrow && (index.h("span", { key: '6133ab54aaea6f198560ca5cb30f5604318203f6', class: "arrow", ref: el => {
|
|
4494
|
+
return (index.h(index.Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (index.h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
|
|
4355
4495
|
this.arrowRef = el;
|
|
4356
|
-
} })), index.h("slot", { key: '
|
|
4496
|
+
} })), index.h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
|
|
4357
4497
|
}
|
|
4358
4498
|
get host() { return index.getElement(this); }
|
|
4359
4499
|
static get watchers() { return {
|
|
@@ -4410,7 +4550,7 @@ const PostTogglebutton = class {
|
|
|
4410
4550
|
this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
|
|
4411
4551
|
}
|
|
4412
4552
|
render() {
|
|
4413
|
-
return (index.h(index.Host, { key: '
|
|
4553
|
+
return (index.h(index.Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
|
|
4414
4554
|
}
|
|
4415
4555
|
get host() { return index.getElement(this); }
|
|
4416
4556
|
};
|