@swisspost/design-system-components 10.0.0-next.48 → 10.0.0-next.49
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/loader.cjs.js +1 -1
- package/dist/cjs/{package-CZyXYkIN.js → package-CR0YynRY.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +3 -3
- package/dist/cjs/post-avatar.cjs.entry.js +26 -36
- package/dist/cjs/post-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/post-banner.cjs.entry.js +2 -2
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +3 -3
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +4 -4
- package/dist/cjs/post-card-control.cjs.entry.js +4 -4
- package/dist/cjs/post-closebutton_15.cjs.entry.js +132 -72
- package/dist/cjs/post-collapsible_2.cjs.entry.js +3 -3
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +3 -3
- package/dist/cjs/post-linkarea.cjs.entry.js +19 -8
- package/dist/cjs/post-popover.cjs.entry.js +3 -3
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-header.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/post-tabs.cjs.entry.js +2 -2
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +2 -2
- package/dist/cjs/post-tooltip.cjs.entry.js +3 -3
- 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 +1 -1
- 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 +2 -2
- 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/post-closebutton.js +1 -1
- 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 +11 -2
- 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 +12 -2
- 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 +39 -6
- 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/component-names.json +39 -0
- 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 +1 -1
- package/dist/components/post-breadcrumb-item2.js +1 -1
- package/dist/components/post-breadcrumbs.js +3 -3
- package/dist/components/post-card-control.js +3 -3
- package/dist/components/post-closebutton.js +1 -1
- 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 +12 -3
- 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 +13 -3
- package/dist/components/post-menu-item2.js +1 -1
- package/dist/components/post-menu-trigger2.js +1 -1
- package/dist/components/post-menu2.js +21 -6
- package/dist/components/post-popover.js +2 -2
- 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-Da5wbVP8.js → p-Amg0f2Yo.js} +40 -34
- package/dist/components/react/{p-Tg0GNTZM.js → p-B6vPT8S3.js} +2 -2
- package/dist/components/react/{p-CGsAj6ij.js → p-BDs0pvkX.js} +2 -2
- package/dist/components/react/{p-q8Fvf8A0.js → p-BMdFdJWl.js} +2 -2
- package/dist/components/react/{p-Ce7jgYmK.js → p-BS0ZqwA-.js} +31 -6
- package/dist/components/react/{p-Dq9F2i7n.js → p-D1oOccKr.js} +2 -2
- package/dist/components/react/{p-JHuJA2Lv.js → p-D50E7y6E.js} +23 -8
- package/dist/components/react/p-DO48NanC.js +3 -0
- package/dist/components/react/{p-38PqL5iD.js → p-DOo9tmN-.js} +2 -2
- package/dist/components/react/{p-DzYquz3e.js → p-Do9awHW7.js} +3 -3
- package/dist/components/react/{p-CiYSngKM.js → p-xelWyg_P.js} +5 -5
- 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 +2 -2
- package/dist/components/react/post-breadcrumb-item.js +1 -1
- package/dist/components/react/post-breadcrumbs.js +10 -10
- package/dist/components/react/post-card-control.js +5 -5
- package/dist/components/react/post-closebutton.js +3 -3
- 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 +13 -4
- 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 +6 -7
- 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 +2 -2
- package/dist/components/react/post-megadropdown.js +14 -4
- 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 +4 -4
- 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 +52 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-DO48NanC.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +3 -3
- package/dist/esm/post-avatar.entry.js +26 -36
- package/dist/esm/post-back-to-top.entry.js +2 -2
- package/dist/esm/post-banner.entry.js +2 -2
- package/dist/esm/post-breadcrumb-item_2.entry.js +3 -3
- package/dist/esm/post-breadcrumbs.entry.js +4 -4
- package/dist/esm/post-card-control.entry.js +4 -4
- package/dist/esm/post-closebutton_15.entry.js +132 -72
- package/dist/esm/post-collapsible_2.entry.js +3 -3
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +3 -3
- package/dist/esm/post-linkarea.entry.js +19 -8
- package/dist/esm/post-popover.entry.js +3 -3
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/post-tab-header.entry.js +3 -3
- package/dist/esm/post-tab-panel.entry.js +2 -2
- package/dist/esm/post-tabs.entry.js +2 -2
- package/dist/esm/post-tooltip-trigger.entry.js +2 -2
- package/dist/esm/post-tooltip.entry.js +3 -3
- package/dist/post-components/p-01bc39c2.entry.js +1 -0
- package/dist/post-components/p-0dc1e940.entry.js +1 -0
- package/dist/post-components/p-16da91bc.entry.js +1 -0
- package/dist/post-components/p-26a04741.entry.js +1 -0
- package/dist/post-components/p-2f2f9b22.entry.js +1 -0
- package/dist/post-components/{p-38d3d441.entry.js → p-33008981.entry.js} +1 -1
- package/dist/post-components/p-36358cd4.entry.js +1 -0
- package/dist/post-components/p-71c48d48.entry.js +1 -0
- package/dist/post-components/{p-6777e505.entry.js → p-84395e1d.entry.js} +1 -1
- package/dist/post-components/p-848c10ac.entry.js +1 -0
- package/dist/post-components/{p-d61bb2ff.entry.js → p-8d2e5814.entry.js} +1 -1
- package/dist/post-components/{p-40f21542.entry.js → p-9dbe6595.entry.js} +1 -1
- package/dist/post-components/p-DO48NanC.js +1 -0
- package/dist/post-components/p-a982458f.entry.js +1 -0
- package/dist/post-components/{p-3c71f590.entry.js → p-b0aaa058.entry.js} +1 -1
- package/dist/post-components/{p-16772417.entry.js → p-bdeef760.entry.js} +1 -1
- package/dist/post-components/{p-6add880f.entry.js → p-d221395c.entry.js} +1 -1
- package/dist/post-components/{p-aad86320.entry.js → p-e49aa78e.entry.js} +1 -1
- package/dist/post-components/p-eb405167.entry.js +1 -0
- 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-header/post-header.d.ts +2 -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 +2 -1
- package/dist/types/components/post-menu/post-menu.d.ts +5 -1
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +6 -2
- package/dist/types/components.d.ts +19 -3
- package/hydrate/index.js +214 -147
- package/hydrate/index.mjs +214 -147
- 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-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-c3e38acf.entry.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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CpDyH7Ww.js');
|
|
4
|
-
var _package = require('./package-
|
|
4
|
+
var _package = require('./package-CR0YynRY.js');
|
|
5
5
|
var breakpoints = require('./breakpoints-DmZ_BQGo.js');
|
|
6
6
|
var eventFrom = require('./event-from-C6kpQwhw.js');
|
|
7
7
|
var index$1 = require('./index-DtvYdwe1.js');
|
|
@@ -24,22 +24,22 @@ const PostClosebutton = class {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (index.h(index.Host, { key: '
|
|
27
|
+
return (index.h(index.Host, { key: 'ee54a84df2fbb214706f5f2eb527769b03846819', "data-version": _package.version }, index.h("button", { key: '39ce661db0611bbe4387a32a9d7c91b1f5bc8b17', class: "btn btn-icon-close", type: "button" }, index.h("post-icon", { key: '26aced13eacfa369e82178e5551372700499e556', "aria-hidden": "true", name: "closex" }), index.h("span", { key: '01bcad725724a3ae95e79e25d58958eb4ee2ffa3', class: "visually-hidden" }, index.h("slot", { key: 'bd794bf53acbf2fbcf1855ce882bcd442d2a846f', onSlotchange: () => this.checkHiddenLabel() })))));
|
|
28
28
|
}
|
|
29
29
|
get host() { return index.getElement(this); }
|
|
30
30
|
};
|
|
31
31
|
PostClosebutton.style = postClosebuttonCss;
|
|
32
32
|
|
|
33
|
-
const easing = 'ease';
|
|
34
|
-
const duration = 500;
|
|
33
|
+
const easing$1 = 'ease';
|
|
34
|
+
const duration$1 = 500;
|
|
35
35
|
const fill = 'forwards';
|
|
36
36
|
function slideUp(el, translateSize = '-100%') {
|
|
37
37
|
return el.animate([
|
|
38
38
|
{ transform: 'translateY(0)' }, // Starting position (no translation)
|
|
39
39
|
{ transform: `translateY(${translateSize})` }, // End position
|
|
40
40
|
], {
|
|
41
|
-
duration: duration,
|
|
42
|
-
easing,
|
|
41
|
+
duration: duration$1,
|
|
42
|
+
easing: easing$1,
|
|
43
43
|
fill,
|
|
44
44
|
});
|
|
45
45
|
}
|
|
@@ -48,8 +48,8 @@ function slideDown(el, translateSize = '-100%') {
|
|
|
48
48
|
{ transform: `translateY(${translateSize})` }, // Starting position (no translation)
|
|
49
49
|
{ transform: 'translateY(0)' }, // End position
|
|
50
50
|
], {
|
|
51
|
-
duration: duration,
|
|
52
|
-
easing,
|
|
51
|
+
duration: duration$1,
|
|
52
|
+
easing: easing$1,
|
|
53
53
|
fill,
|
|
54
54
|
});
|
|
55
55
|
}
|
|
@@ -88,7 +88,7 @@ function getFocusableChildren(element) {
|
|
|
88
88
|
return visibleFocusableChildren;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
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}}
|
|
91
|
+
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:24px}@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{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}::slotted(post-mainnavigation),.navigation-footer,.navigation-target-group{display:none;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer,.navigation.extended .navigation-target-group{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
92
|
|
|
93
93
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
94
94
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -135,6 +135,7 @@ const PostHeader = class {
|
|
|
135
135
|
this.throttledResize = breakpoints.throttle(50, () => this.updateLocalHeaderHeight());
|
|
136
136
|
this.device = breakpoints.breakpoint.get('device');
|
|
137
137
|
this.hasNavigation = false;
|
|
138
|
+
this.hasTitle = false;
|
|
138
139
|
this.mobileMenuExtended = false;
|
|
139
140
|
this.megadropdownOpen = false;
|
|
140
141
|
this.breakpointChange = (e) => {
|
|
@@ -171,6 +172,7 @@ const PostHeader = class {
|
|
|
171
172
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
172
173
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
173
174
|
this.checkNavigationExistence();
|
|
175
|
+
this.checkTitleExistence();
|
|
174
176
|
this.switchLanguageSwitchMode();
|
|
175
177
|
this.handleScrollParentResize();
|
|
176
178
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -208,6 +210,9 @@ const PostHeader = class {
|
|
|
208
210
|
checkNavigationExistence() {
|
|
209
211
|
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
210
212
|
}
|
|
213
|
+
checkTitleExistence() {
|
|
214
|
+
this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
|
|
215
|
+
}
|
|
211
216
|
async closeMobileMenu() {
|
|
212
217
|
this.mobileMenuAnimation.finish();
|
|
213
218
|
const menuButton = this.getMenuButton();
|
|
@@ -347,9 +352,12 @@ const PostHeader = class {
|
|
|
347
352
|
const localHeaderClasses = ['local-header'];
|
|
348
353
|
if (this.mobileMenuExtended)
|
|
349
354
|
localHeaderClasses.push('local-header-mobile-extended');
|
|
350
|
-
if (!this.hasNavigation)
|
|
355
|
+
if (this.device !== 'desktop' || !this.hasNavigation)
|
|
351
356
|
localHeaderClasses.push('no-navigation');
|
|
352
|
-
|
|
357
|
+
if (!this.hasTitle)
|
|
358
|
+
localHeaderClasses.push('no-title');
|
|
359
|
+
return (index.h(index.Host, { key: 'd327fc8735749f46cb8b38531a8514978f92c197', "data-version": _package.version, "data-color-scheme": "light" }, index.h("div", { key: '07b7a4861cc11d55fce5d749a1d074d37900b48f', class: "global-header" }, index.h("div", { key: 'bb23cf58b62b53e273921bb0a27a2371983bc8a8', class: "global-sub" }, index.h("div", { key: '0028ff1ba8be25a238d944eaf25f9679b9e163c6', class: "logo" }, index.h("slot", { key: '98e0584188a391b99df904fbdf463606548859c7', name: "post-logo" }))), index.h("div", { key: '6da75517e0923191cc4d478a3f0c7e20d89b860d', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: 'bf5730915d734e9accb0e10bcd0d48ee99781930', name: "target-group" })), index.h("div", { key: '64f3eafd98d8c34248de4fb78619bb7f3147e5e9', class: "global-sub" }, !this.hasMobileMenu && (index.h("slot", { key: 'c3ad33a44bf25fede0afbea50937626142e69b6e', name: "meta-navigation" })), index.h("slot", { key: 'e85d50753a40958be785deebfe01ffbee91f120b', name: "global-controls" }), !this.hasMobileMenu && index.h("slot", { key: 'e423f47daa544cb7bd11ed54f0ecef93a50e6470', name: "post-language-switch" }), this.hasNavigation && (index.h("div", { key: '96be5d590fbee1986238e1b7b22a1e6928c1c97f', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '4c9db8b0c416cbd2ffa4e1df6b05aea757bdc6a6', name: "post-togglebutton" }))))), index.h("div", { key: '43285a4032f7ae356145ce6fb62e3c9896ad8542', class: localHeaderClasses.join(' ') }, index.h("slot", { key: '74c2313baa4da4bf37d13189c07645374df684d1', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle &&
|
|
360
|
+
(index.h("div", { key: '414b5378922221715071a5d8cfc0b7920018a5b3', class: "local-sub" }, index.h("slot", { key: 'acb09003e517669a50405a04e5dafa983e78b5f2', name: "local-controls" }), index.h("slot", { key: '8e1043c4d2e25b6b9432a2ba1885d2128abb9f85' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
353
361
|
}
|
|
354
362
|
get host() { return index.getElement(this); }
|
|
355
363
|
static get watchers() { return {
|
|
@@ -401,52 +409,58 @@ const PostIcon = class {
|
|
|
401
409
|
validateScale() {
|
|
402
410
|
index$1.checkEmptyOrType(this, 'scale', 'number');
|
|
403
411
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
412
|
+
/**
|
|
413
|
+
* Construct the icon URL according to the following rules:
|
|
414
|
+
* 1. `@base` (absolute URL) → use directly.
|
|
415
|
+
* 2. `@base` (relative URL) → resolve with `base href` and/or `origin`
|
|
416
|
+
* - If `base href` is absolute → use just that.
|
|
417
|
+
* - If `base href` is relative → prepend with `origin`.
|
|
418
|
+
* - If `base href` does not exist → use only `origin`.
|
|
419
|
+
* 3. `@meta` (absolute URL) → use directly.
|
|
420
|
+
* 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
|
|
421
|
+
* 5. `CDN_URL` fallback → `https://unpkg.com/...`.
|
|
422
|
+
**/
|
|
408
423
|
getUrl() {
|
|
409
424
|
const fileName = `${this.name}.svg`;
|
|
410
425
|
if (!breakpoints.IS_BROWSER && !this.base) {
|
|
411
426
|
return `${CDN_URL}${fileName}`;
|
|
412
427
|
}
|
|
428
|
+
const isAbsolute = (url) => /^https?:\/\//.test(url);
|
|
429
|
+
const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
|
|
430
|
+
const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
|
|
413
431
|
const currentDomain = breakpoints.IS_BROWSER ? window.location.origin : '';
|
|
414
432
|
const baseHref = breakpoints.IS_BROWSER
|
|
415
433
|
? document.querySelector('base[href]')?.getAttribute('href') || ''
|
|
416
434
|
: '';
|
|
417
|
-
const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
|
|
418
435
|
const metaIconBase = breakpoints.IS_BROWSER
|
|
419
|
-
? document
|
|
420
|
-
.querySelector('meta[name="design-system-settings"]')
|
|
421
|
-
?.getAttribute('data-post-icon-base') || ''
|
|
436
|
+
? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
|
|
422
437
|
: '';
|
|
423
|
-
|
|
424
|
-
const
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
return
|
|
431
|
-
}
|
|
438
|
+
// Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
|
|
439
|
+
const buildUrlWithBase = (relativeUrl) => {
|
|
440
|
+
const normalizedHref = normalizeUrl(baseHref);
|
|
441
|
+
const normalizedRelative = normalizeUrl(relativeUrl);
|
|
442
|
+
if (isAbsolute(normalizedHref)) {
|
|
443
|
+
return `${normalizedHref}${normalizedRelative}`;
|
|
444
|
+
}
|
|
445
|
+
return `${currentDomain}${normalizedHref}${normalizedRelative}`;
|
|
446
|
+
};
|
|
432
447
|
let url;
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
url =
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
440
|
-
}
|
|
441
|
-
else if (iconBase || baseHref) {
|
|
442
|
-
// Standard case: domain + baseHref + iconBase
|
|
443
|
-
url = `${currentDomain}${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
448
|
+
// Highest Priority is this.base
|
|
449
|
+
if (this.base) {
|
|
450
|
+
url = isAbsolute(this.base)
|
|
451
|
+
? `${normalizeUrl(this.base)}${fileName}`
|
|
452
|
+
: `${buildUrlWithBase(this.base)}${fileName}`;
|
|
453
|
+
return cleanUrl(url);
|
|
444
454
|
}
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
url =
|
|
455
|
+
// Second Priority is metaIconBase
|
|
456
|
+
if (metaIconBase) {
|
|
457
|
+
url = isAbsolute(metaIconBase)
|
|
458
|
+
? `${normalizeUrl(metaIconBase)}${fileName}`
|
|
459
|
+
: `${buildUrlWithBase(metaIconBase)}${fileName}`;
|
|
460
|
+
return cleanUrl(url);
|
|
448
461
|
}
|
|
449
|
-
|
|
462
|
+
// Fallback to CDN
|
|
463
|
+
return cleanUrl(`${CDN_URL}${fileName}`);
|
|
450
464
|
}
|
|
451
465
|
getStyles() {
|
|
452
466
|
const url = this.getUrl();
|
|
@@ -467,7 +481,7 @@ const PostIcon = class {
|
|
|
467
481
|
this.validateAnimation();
|
|
468
482
|
}
|
|
469
483
|
render() {
|
|
470
|
-
return (index.h(index.Host, { key: '
|
|
484
|
+
return (index.h(index.Host, { key: '521fb549cef7d0838c999628cf69c5c23e87dfc6', "data-version": _package.version }, index.h("span", { key: 'cc9ca579bd90fee8cec7868c697bfe59dd677246', style: this.getStyles() })));
|
|
471
485
|
}
|
|
472
486
|
get host() { return index.getElement(this); }
|
|
473
487
|
static get watchers() { return {
|
|
@@ -482,7 +496,7 @@ PostIcon.style = postIconCss;
|
|
|
482
496
|
|
|
483
497
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
484
498
|
|
|
485
|
-
const postLanguageOptionCss = "
|
|
499
|
+
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
500
|
|
|
487
501
|
const PostLanguageOption = class {
|
|
488
502
|
constructor(hostRef) {
|
|
@@ -528,13 +542,12 @@ const PostLanguageOption = class {
|
|
|
528
542
|
}
|
|
529
543
|
render() {
|
|
530
544
|
const lang = this.code.toLowerCase();
|
|
531
|
-
const role = this.variant === 'menu' ? 'menuitem' : undefined;
|
|
532
545
|
const emitOnKeyDown = (e) => {
|
|
533
546
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
534
547
|
this.emitChange();
|
|
535
548
|
}
|
|
536
549
|
};
|
|
537
|
-
return (index.h(index.Host, { key: '
|
|
550
|
+
return (index.h(index.Host, { key: 'deaee69d7e0c551af5162ae124f78c9418aba062', "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
551
|
}
|
|
539
552
|
get host() { return index.getElement(this); }
|
|
540
553
|
static get watchers() { return {
|
|
@@ -620,14 +633,13 @@ const PostLanguageSwitch = class {
|
|
|
620
633
|
updateChildrenVariant() {
|
|
621
634
|
this.languageOptions.forEach(el => {
|
|
622
635
|
el.setAttribute('variant', this.variant);
|
|
623
|
-
el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
|
|
624
636
|
});
|
|
625
637
|
}
|
|
626
638
|
renderList() {
|
|
627
639
|
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
640
|
}
|
|
629
641
|
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"
|
|
642
|
+
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" }, index.h("slot", null))));
|
|
631
643
|
}
|
|
632
644
|
render() {
|
|
633
645
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -644,7 +656,7 @@ __decorate$2([
|
|
|
644
656
|
], PostLanguageSwitch.prototype, "handlePostChange", null);
|
|
645
657
|
PostLanguageSwitch.style = postLanguageSwitchCss;
|
|
646
658
|
|
|
647
|
-
const postListCss = "
|
|
659
|
+
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
660
|
|
|
649
661
|
const PostList = class {
|
|
650
662
|
constructor(hostRef) {
|
|
@@ -673,7 +685,7 @@ const PostList = class {
|
|
|
673
685
|
}
|
|
674
686
|
}
|
|
675
687
|
render() {
|
|
676
|
-
return (index.h(index.Host, { key: '
|
|
688
|
+
return (index.h(index.Host, { key: '27dc0177ba3d81149b6b5dce24d6f18b8f57c9e5', "data-version": _package.version }, index.h("div", { key: 'f860eaeafc60605c67fb0c47e452ecfdbf03d002', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '17e20fdcf588649a9d678f873687cdedaef931aa' })), index.h("div", { key: 'aebdcd2fe4b5a4d232b0fe3de7f6273c93f505f6', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: 'fa15f227e3251d44d1519421960bb5f3056fc371', name: "post-list-item" }))));
|
|
677
689
|
}
|
|
678
690
|
get host() { return index.getElement(this); }
|
|
679
691
|
};
|
|
@@ -689,7 +701,7 @@ const PostListItem = class {
|
|
|
689
701
|
this.host.setAttribute('slot', 'post-list-item');
|
|
690
702
|
}
|
|
691
703
|
render() {
|
|
692
|
-
return (index.h(index.Host, { key: '
|
|
704
|
+
return (index.h(index.Host, { key: 'd15e750cd663def9363bedd020f09e634aba14c9', role: "listitem", slot: "post-list-item", version: _package.version }, index.h("slot", { key: '361853e5c5994de4e5a5884cc32d7c7280b62b56' })));
|
|
693
705
|
}
|
|
694
706
|
get host() { return index.getElement(this); }
|
|
695
707
|
};
|
|
@@ -716,7 +728,7 @@ const PostLogo = class {
|
|
|
716
728
|
render() {
|
|
717
729
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
718
730
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
719
|
-
return (index.h(index.Host, { key: '
|
|
731
|
+
return (index.h(index.Host, { key: '1c268056329697baccc5bf65b1e66acd8531d5f3', "data-version": _package.version }, index.h(LogoTag, { key: '9b73fc4922a5ea0f72d761e82136ef1111eb7e21', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '4042a64056f3d22a99d6b245201be20d1afe5dc0', class: "description" }, index.h("slot", { key: 'eb437f087d952b4f4a961bcba0dc18eb6836c6c9', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'b658e94d0e7f63d2f80245e12017f87f50a0b2c9', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '90c0c8f64d0c9023dfa7296e68333232b9023276', id: "Logo" }, index.h("rect", { key: 'a1dfd6e0bcaedb485398f1896603af36e3f119dc', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '44d5ee8e45b7b320d75530e00ab1ff8dc4b8e21c', 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: '788524d12213fdfe0d21712b14d72e30d0195b4d', 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
732
|
}
|
|
721
733
|
get host() { return index.getElement(this); }
|
|
722
734
|
static get watchers() { return {
|
|
@@ -725,7 +737,7 @@ const PostLogo = class {
|
|
|
725
737
|
};
|
|
726
738
|
PostLogo.style = postLogoCss;
|
|
727
739
|
|
|
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)}}";
|
|
740
|
+
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-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-current=page],post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
|
|
729
741
|
|
|
730
742
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
731
743
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
@@ -870,12 +882,12 @@ const PostMainnavigation = class {
|
|
|
870
882
|
}, NAVBAR_DISABLE_DURATION);
|
|
871
883
|
}
|
|
872
884
|
render() {
|
|
873
|
-
return (index.h(index.Host, { key: '
|
|
885
|
+
return (index.h(index.Host, { key: '1876abaa01a705b5bed07b6f4ab7f795ca994759', slot: "post-mainnavigation", version: _package.version }, index.h("div", { key: 'c61592c959287dcf329921e11dd0d1414329b15a', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '51b460d2bfdb0ce52e2639f7521de67477972fba', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '54d8f2a52c935713251d752b30ff163bf7bd8b5f', ref: el => (this.navbar = el) }, index.h("slot", { key: '749a000aa37381cbcf7a68514f77a4ff3da7e90b' })), index.h("div", { key: 'a42aa9a06704dfd4ebb2357b3dc1efa21f7ac136', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '64ef94d58da05da4ea86c9458b7775c431d0461b', "aria-hidden": "true", name: "chevronright" }))));
|
|
874
886
|
}
|
|
875
887
|
};
|
|
876
888
|
PostMainnavigation.style = postMainnavigationCss;
|
|
877
889
|
|
|
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.selected,.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}}";
|
|
890
|
+
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.selected,.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
891
|
|
|
880
892
|
const PostMegadropdown = class {
|
|
881
893
|
constructor(hostRef) {
|
|
@@ -888,6 +900,7 @@ const PostMegadropdown = class {
|
|
|
888
900
|
* and updates automatically when the dropdown is toggled.
|
|
889
901
|
*/
|
|
890
902
|
this.isVisible = false;
|
|
903
|
+
this.trigger = false;
|
|
891
904
|
/** Holds the current animation class. */
|
|
892
905
|
this.animationClass = null;
|
|
893
906
|
this.handleClickOutside = (event) => {
|
|
@@ -922,7 +935,7 @@ const PostMegadropdown = class {
|
|
|
922
935
|
PostMegadropdown.activeDropdown = null;
|
|
923
936
|
}
|
|
924
937
|
}
|
|
925
|
-
|
|
938
|
+
componentDidRender() {
|
|
926
939
|
this.getFocusableElements();
|
|
927
940
|
}
|
|
928
941
|
/**
|
|
@@ -1005,6 +1018,14 @@ const PostMegadropdown = class {
|
|
|
1005
1018
|
getFocusableElements() {
|
|
1006
1019
|
const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
|
|
1007
1020
|
const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
|
|
1021
|
+
const hostId = this.host.getAttribute('id');
|
|
1022
|
+
// Proceed if the host has an ID and one of its focusable children is marked as the current page (`aria-current="page"`)
|
|
1023
|
+
if (hostId && focusableChildren.some(el => el.getAttribute('aria-current') === 'page')) {
|
|
1024
|
+
// Find the trigger element via its "for" attribute, then locate its button and set `aria-current="page"`
|
|
1025
|
+
document
|
|
1026
|
+
.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
|
|
1027
|
+
.classList.add('selected');
|
|
1028
|
+
}
|
|
1008
1029
|
this.firstFocusableEl = focusableChildren[0];
|
|
1009
1030
|
this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
|
|
1010
1031
|
}
|
|
@@ -1032,7 +1053,7 @@ const PostMegadropdown = class {
|
|
|
1032
1053
|
}
|
|
1033
1054
|
render() {
|
|
1034
1055
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1035
|
-
return (index.h(index.Host, { key: '
|
|
1056
|
+
return (index.h(index.Host, { key: '18685d3da311fd0563a3c5a498df1e1fef96b524', version: _package.version }, index.h("div", { key: 'fb3feb160e46b80ed60c202871152ac3f7862f83', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { key: '34e0d3e68bd9bfbeec8ebe37b8977076c91cfe02', class: "megadropdown" }, index.h("slot", { key: '67d17ec51f7436f2a8acc1216b37820ff999f985', name: "megadropdown-title" }), index.h("div", { key: '6671d31fcc17d435991a253f04a83bbe56551942', class: "megadropdown-content" }, index.h("slot", { key: 'd0d313a98202f2d502e4574bed8802682d4da6f3' })), index.h("div", { key: 'd42560e7a4f3142cb548a1ffb97ad391fd14871f', onClick: () => this.hide(true), class: "back-button" }, index.h("slot", { key: '76f0a36d5ca87834b9d857a8f13d53ecb82f9a24', name: "back-button" })), index.h("div", { key: 'a9ea0c1f24f5c997a1a4c9432f0c7d537b8d6da0', onClick: () => this.hide(true), class: "close-button" }, index.h("slot", { key: '1c815102d7f4d1e21aaaaffcf277d98454eda17d', name: "close-button" }))))));
|
|
1036
1057
|
}
|
|
1037
1058
|
get host() { return index.getElement(this); }
|
|
1038
1059
|
};
|
|
@@ -1135,7 +1156,7 @@ const PostMegadropdownTrigger = class {
|
|
|
1135
1156
|
document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
|
|
1136
1157
|
}
|
|
1137
1158
|
render() {
|
|
1138
|
-
return (index.h(index.Host, { key: '
|
|
1159
|
+
return (index.h(index.Host, { key: 'b5194e2160ffc439f3219807ec86196c01f60d31', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: '3bf811bc35c85fc570a0b6ba3af9b5f7765676cb' }, index.h("slot", { key: '15b6f17c8b812b43b4aec56b5396b4e194ccd711' }))));
|
|
1139
1160
|
}
|
|
1140
1161
|
get host() { return index.getElement(this); }
|
|
1141
1162
|
static get watchers() { return {
|
|
@@ -1147,7 +1168,7 @@ __decorate$1([
|
|
|
1147
1168
|
], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
|
|
1148
1169
|
PostMegadropdownTrigger.style = postMegadropdownTriggerCss;
|
|
1149
1170
|
|
|
1150
|
-
const postMenuCss = "
|
|
1171
|
+
const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}";
|
|
1151
1172
|
|
|
1152
1173
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1153
1174
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1197,18 +1218,32 @@ const PostMenu = class {
|
|
|
1197
1218
|
}
|
|
1198
1219
|
};
|
|
1199
1220
|
this.handlePostToggle = (event) => {
|
|
1200
|
-
this.isVisible = event.detail;
|
|
1221
|
+
this.isVisible = event.detail.isOpen;
|
|
1201
1222
|
this.toggleMenu.emit(this.isVisible);
|
|
1202
1223
|
requestAnimationFrame(() => {
|
|
1203
1224
|
if (this.isVisible) {
|
|
1204
1225
|
this.lastFocusedElement = this.root?.activeElement;
|
|
1205
1226
|
const menuItems = this.getSlottedItems();
|
|
1206
|
-
if (
|
|
1207
|
-
menuItems
|
|
1227
|
+
if (event.detail.first) {
|
|
1228
|
+
if (menuItems.length > 0) {
|
|
1229
|
+
// Add role="menu" to the popovercontainer
|
|
1230
|
+
this.host.setAttribute('role', 'menu');
|
|
1231
|
+
// Add role="menuitem" to the focusable elements
|
|
1232
|
+
menuItems.forEach(item => {
|
|
1233
|
+
item.setAttribute('role', 'menuitem');
|
|
1234
|
+
});
|
|
1235
|
+
// Add aria-label to the menu
|
|
1236
|
+
if (this.label)
|
|
1237
|
+
this.host.setAttribute('aria-label', this.label);
|
|
1238
|
+
}
|
|
1208
1239
|
}
|
|
1240
|
+
menuItems[0].focus();
|
|
1209
1241
|
}
|
|
1210
1242
|
else if (this.lastFocusedElement) {
|
|
1211
|
-
|
|
1243
|
+
setTimeout(() => {
|
|
1244
|
+
// This timeout is added for NVDA to announce the menu as collapsed
|
|
1245
|
+
this.lastFocusedElement.focus();
|
|
1246
|
+
}, 0);
|
|
1212
1247
|
}
|
|
1213
1248
|
});
|
|
1214
1249
|
};
|
|
@@ -1319,7 +1354,7 @@ const PostMenu = class {
|
|
|
1319
1354
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
1320
1355
|
}
|
|
1321
1356
|
render() {
|
|
1322
|
-
return (index.h(index.Host, { key: '
|
|
1357
|
+
return (index.h(index.Host, { key: '7b7fe6fccd27d3ff12eae3094b1a55b9b9778eb1', "data-version": _package.version }, index.h("post-popovercontainer", { key: '6dae2883febd1e96ae1b34518dd2e9c634fafecb', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: 'e19c107831b020aa0039ea7a18465e4bb72380c4', part: "menu" }, index.h("slot", { key: '9d9862e73dd222435d196e67c540bf8266952d94' })))));
|
|
1323
1358
|
}
|
|
1324
1359
|
get host() { return index.getElement(this); }
|
|
1325
1360
|
static get watchers() { return {
|
|
@@ -1406,7 +1441,7 @@ const PostMenuTrigger = class {
|
|
|
1406
1441
|
}
|
|
1407
1442
|
}
|
|
1408
1443
|
render() {
|
|
1409
|
-
return (index.h(index.Host, { key: '
|
|
1444
|
+
return (index.h(index.Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
|
|
1410
1445
|
}
|
|
1411
1446
|
get host() { return index.getElement(this); }
|
|
1412
1447
|
static get watchers() { return {
|
|
@@ -4104,12 +4139,28 @@ function apply() {
|
|
|
4104
4139
|
injectStyles(document);
|
|
4105
4140
|
}
|
|
4106
4141
|
|
|
4107
|
-
const
|
|
4142
|
+
const duration = 250;
|
|
4143
|
+
const easing = 'ease-out';
|
|
4144
|
+
function popIn(el) {
|
|
4145
|
+
if (!el)
|
|
4146
|
+
return;
|
|
4147
|
+
return el.animate([
|
|
4148
|
+
{ transform: 'scale(0.9)', opacity: 0 },
|
|
4149
|
+
{ transform: 'scale(1)', opacity: 1 },
|
|
4150
|
+
], {
|
|
4151
|
+
duration,
|
|
4152
|
+
easing,
|
|
4153
|
+
fill: 'forwards',
|
|
4154
|
+
});
|
|
4155
|
+
}
|
|
4156
|
+
|
|
4157
|
+
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
4158
|
|
|
4109
4159
|
const PostPopovercontainer = class {
|
|
4110
4160
|
constructor(hostRef) {
|
|
4111
4161
|
index.registerInstance(this, hostRef);
|
|
4112
4162
|
this.postToggle = index.createEvent(this, "postToggle");
|
|
4163
|
+
this.firstOpen = true;
|
|
4113
4164
|
/**
|
|
4114
4165
|
* Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
|
|
4115
4166
|
* Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
|
|
@@ -4209,9 +4260,19 @@ const PostPopovercontainer = class {
|
|
|
4209
4260
|
this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
4210
4261
|
const isOpen = e.newState === 'open';
|
|
4211
4262
|
if (isOpen) {
|
|
4263
|
+
const content = this.host.querySelector('.popover-content');
|
|
4212
4264
|
this.startAutoupdates();
|
|
4265
|
+
if (content && this.animation === 'pop-in') {
|
|
4266
|
+
popIn(content);
|
|
4267
|
+
}
|
|
4213
4268
|
if (this.safeSpace)
|
|
4214
4269
|
window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4270
|
+
// Emit event with `first` flag only true on the first open
|
|
4271
|
+
if (this.firstOpen) {
|
|
4272
|
+
this.postToggle.emit({ isOpen, first: this.firstOpen });
|
|
4273
|
+
this.firstOpen = false;
|
|
4274
|
+
return;
|
|
4275
|
+
}
|
|
4215
4276
|
}
|
|
4216
4277
|
else {
|
|
4217
4278
|
if (typeof this.clearAutoUpdate === 'function')
|
|
@@ -4219,7 +4280,7 @@ const PostPopovercontainer = class {
|
|
|
4219
4280
|
if (this.safeSpace)
|
|
4220
4281
|
window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
4221
4282
|
}
|
|
4222
|
-
this.postToggle.emit(isOpen);
|
|
4283
|
+
this.postToggle.emit({ isOpen: isOpen, first: false });
|
|
4223
4284
|
}
|
|
4224
4285
|
/**
|
|
4225
4286
|
* Start listening for DOM updates, scroll events etc. that have
|
|
@@ -4350,10 +4411,9 @@ const PostPopovercontainer = class {
|
|
|
4350
4411
|
}
|
|
4351
4412
|
}
|
|
4352
4413
|
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 => {
|
|
4414
|
+
return (index.h(index.Host, { key: '1594b782ac56ae23eba2df3f452ad40015ace67d', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '565cbf870aca9abbc665525a627922d1cfdb9195', class: "popover-content" }, this.arrow && (index.h("span", { key: 'add7d6f7b176e7365b5a0c25fa81dd2a9520e7f3', class: "arrow", ref: el => {
|
|
4355
4415
|
this.arrowRef = el;
|
|
4356
|
-
} })), index.h("slot", { key: '
|
|
4416
|
+
} })), index.h("slot", { key: '308138890a4148c5c94b675e2a6b911fef1c31b5' }))));
|
|
4357
4417
|
}
|
|
4358
4418
|
get host() { return index.getElement(this); }
|
|
4359
4419
|
static get watchers() { return {
|
|
@@ -4410,7 +4470,7 @@ const PostTogglebutton = class {
|
|
|
4410
4470
|
this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
|
|
4411
4471
|
}
|
|
4412
4472
|
render() {
|
|
4413
|
-
return (index.h(index.Host, { key: '
|
|
4473
|
+
return (index.h(index.Host, { key: 'f6b56dc64dbff8ef94e4104eebe845a04f113c75', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '2846bb617c7a68ba6390fe27b043265569a9fd55' })));
|
|
4414
4474
|
}
|
|
4415
4475
|
get host() { return index.getElement(this); }
|
|
4416
4476
|
};
|