@swisspost/design-system-components 10.0.0-next.47 → 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/{event-from-AKK8RQrn.js → event-from-C6kpQwhw.js} +2 -2
- package/dist/cjs/index-CpDyH7Ww.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-wsZ6ig4j.js → package-CR0YynRY.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +6 -6
- package/dist/cjs/post-avatar.cjs.entry.js +107 -80
- package/dist/cjs/post-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/post-banner.cjs.entry.js +3 -3
- 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 +133 -74
- package/dist/cjs/post-collapsible_2.cjs.entry.js +4 -4
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +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-accordion-item/post-accordion-item.js +5 -5
- package/dist/collection/components/post-avatar/avatar-utils.js +16 -0
- package/dist/collection/components/post-avatar/post-avatar.css +1 -1
- package/dist/collection/components/post-avatar/post-avatar.js +119 -82
- 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 +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 -19
- 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 +41 -5
- 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 +3 -3
- 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 +2 -2
- package/dist/component-names.json +39 -0
- package/dist/{esm/event-from-8U5GFtQP.js → components/event-from.js} +2 -2
- package/dist/components/get-root.js +15 -0
- package/dist/components/index.d.ts +73 -0
- package/dist/components/index.js +36 -2315
- package/dist/components/package.js +3 -0
- package/dist/components/post-accordion-item.js +1 -1
- package/dist/components/post-accordion-item2.js +113 -0
- package/dist/components/post-accordion.js +1 -1
- package/dist/components/post-accordion2.js +138 -0
- package/dist/components/post-avatar.js +117 -88
- package/dist/components/post-back-to-top.js +7 -8
- package/dist/components/post-banner.js +10 -11
- package/dist/components/post-breadcrumb-item.js +1 -1
- package/dist/components/post-breadcrumb-item2.js +79 -0
- package/dist/components/post-breadcrumbs.js +16 -17
- package/dist/components/post-card-control.js +11 -12
- package/dist/components/post-closebutton.js +5 -7
- package/dist/components/post-collapsible-trigger.js +1 -1
- package/dist/components/post-collapsible-trigger2.js +135 -0
- package/dist/components/post-collapsible.js +1 -1
- package/dist/components/post-collapsible2.js +110 -0
- package/dist/components/post-footer.js +12 -13
- package/dist/components/post-header.js +18 -10
- package/dist/components/post-icon.js +1 -1
- package/dist/components/post-icon2.js +159 -0
- package/dist/components/post-language-option.js +10 -12
- package/dist/components/post-language-switch.js +13 -15
- package/dist/components/post-linkarea.js +24 -12
- package/dist/components/post-list-item.js +4 -5
- package/dist/components/post-list.js +6 -7
- package/dist/components/post-logo.js +6 -7
- package/dist/components/post-mainnavigation.js +6 -7
- package/dist/components/post-megadropdown-trigger.js +7 -8
- package/dist/components/post-megadropdown.js +20 -11
- package/dist/components/post-menu-item.js +1 -1
- package/dist/components/post-menu-item2.js +30 -0
- package/dist/components/post-menu-trigger.js +1 -1
- package/dist/components/post-menu-trigger2.js +110 -0
- package/dist/components/post-menu.js +1 -1
- package/dist/components/post-menu2.js +237 -0
- package/dist/components/post-popover.js +8 -9
- package/dist/components/post-popovercontainer.js +1 -1
- package/dist/components/post-popovercontainer2.js +3043 -0
- package/dist/components/post-rating.js +10 -11
- package/dist/components/post-tab-header.js +8 -9
- package/dist/components/post-tab-panel.js +7 -8
- package/dist/components/post-tabs.js +7 -8
- package/dist/components/post-togglebutton.js +4 -5
- package/dist/components/post-tooltip-trigger.js +7 -8
- package/dist/components/post-tooltip.js +8 -9
- package/dist/components/react/index.d.ts +33 -0
- package/dist/components/react/index.js +2315 -0
- package/dist/components/{p-Cxrx7SXz.js → react/p-Amg0f2Yo.js} +40 -34
- package/dist/components/{p-C0H2ohSv.js → react/p-B6vPT8S3.js} +3 -3
- package/dist/components/{p-336Lbkey.js → react/p-BDs0pvkX.js} +2 -2
- package/dist/components/react/p-BLchVpF6.js +14 -0
- package/dist/components/{p-BM8mtEfS.js → react/p-BMdFdJWl.js} +2 -2
- package/dist/components/{p-DP5pj8mq.js → react/p-BS0ZqwA-.js} +31 -6
- package/dist/components/react/p-C35MCWIp.js +35 -0
- package/dist/components/react/p-CJ80BZ06.js +178 -0
- package/dist/{esm/index-BWC0gtGU.js → components/react/p-CV7fm1rW.js} +1 -1
- package/dist/components/react/p-C_2k3G1c.js +264 -0
- package/dist/components/{p-DVGX_JCp.js → react/p-D1oOccKr.js} +3 -3
- package/dist/components/{p-pHxypsHK.js → react/p-D50E7y6E.js} +24 -9
- package/dist/components/react/p-DO48NanC.js +3 -0
- package/dist/components/{p-i0-mizzM.js → react/p-DOo9tmN-.js} +2 -2
- package/dist/components/{p-DEi5TIMq.js → react/p-Do9awHW7.js} +3 -3
- package/dist/components/react/p-SbIC4aZX.js +11 -0
- package/dist/components/{p-8U5GFtQP.js → react/p-kraHE1r3.js} +2 -2
- package/dist/components/react/p-r4txK0AC.js +3 -0
- package/dist/components/{p-BSvy4uym.js → react/p-xelWyg_P.js} +8 -8
- package/dist/components/react/post-accordion-item.d.ts +11 -0
- package/dist/components/react/post-accordion-item.js +6 -0
- package/dist/components/react/post-accordion.d.ts +11 -0
- package/dist/components/react/post-accordion.js +6 -0
- package/dist/components/react/post-avatar.d.ts +11 -0
- package/dist/components/react/post-avatar.js +218 -0
- package/dist/components/react/post-back-to-top.d.ts +11 -0
- package/dist/components/react/post-back-to-top.js +145 -0
- package/dist/components/react/post-banner.d.ts +11 -0
- package/dist/components/react/post-banner.js +99 -0
- package/dist/components/react/post-breadcrumb-item.d.ts +11 -0
- package/dist/components/react/post-breadcrumb-item.js +6 -0
- package/dist/components/react/post-breadcrumbs.d.ts +11 -0
- package/dist/components/react/post-breadcrumbs.js +187 -0
- package/dist/components/react/post-card-control.d.ts +11 -0
- package/dist/components/react/post-card-control.js +327 -0
- package/dist/components/react/post-closebutton.d.ts +11 -0
- package/dist/components/react/post-closebutton.js +50 -0
- package/dist/components/react/post-collapsible-trigger.d.ts +11 -0
- package/dist/components/react/post-collapsible-trigger.js +6 -0
- package/dist/components/react/post-collapsible.d.ts +11 -0
- package/dist/components/react/post-collapsible.js +6 -0
- package/dist/components/react/post-footer.d.ts +11 -0
- package/dist/components/react/post-footer.js +117 -0
- package/dist/components/react/post-header.d.ts +11 -0
- package/dist/components/react/post-header.js +342 -0
- package/dist/components/react/post-icon.d.ts +11 -0
- package/dist/components/react/post-icon.js +6 -0
- package/dist/components/react/post-language-option.d.ts +11 -0
- package/dist/components/react/post-language-option.js +100 -0
- package/dist/components/react/post-language-switch.d.ts +11 -0
- package/dist/components/react/post-language-switch.js +158 -0
- package/dist/components/react/post-linkarea.d.ts +11 -0
- package/dist/components/react/post-linkarea.js +59 -0
- package/dist/components/react/post-list-item.d.ts +11 -0
- package/dist/components/react/post-list-item.js +39 -0
- package/dist/components/react/post-list.d.ts +11 -0
- package/dist/components/react/post-list.js +62 -0
- package/dist/components/react/post-logo.d.ts +11 -0
- package/dist/components/react/post-logo.js +59 -0
- package/dist/components/react/post-mainnavigation.d.ts +11 -0
- package/dist/components/react/post-mainnavigation.js +181 -0
- package/dist/components/react/post-megadropdown-trigger.d.ts +11 -0
- package/dist/components/react/post-megadropdown-trigger.js +137 -0
- package/dist/components/react/post-megadropdown.d.ts +11 -0
- package/dist/components/react/post-megadropdown.js +207 -0
- package/dist/components/react/post-menu-item.d.ts +11 -0
- package/dist/components/react/post-menu-item.js +6 -0
- package/dist/components/react/post-menu-trigger.d.ts +11 -0
- package/dist/components/react/post-menu-trigger.js +6 -0
- package/dist/components/react/post-menu.d.ts +11 -0
- package/dist/components/react/post-menu.js +6 -0
- package/dist/components/react/post-popover.d.ts +11 -0
- package/dist/components/react/post-popover.js +189 -0
- package/dist/components/react/post-popovercontainer.d.ts +11 -0
- package/dist/components/react/post-popovercontainer.js +6 -0
- package/dist/components/react/post-rating.d.ts +11 -0
- package/dist/components/react/post-rating.js +153 -0
- package/dist/components/react/post-tab-header.d.ts +11 -0
- package/dist/components/react/post-tab-header.js +53 -0
- package/dist/components/react/post-tab-panel.d.ts +11 -0
- package/dist/components/react/post-tab-panel.js +55 -0
- package/dist/components/react/post-tabs.d.ts +11 -0
- package/dist/components/react/post-tabs.js +197 -0
- package/dist/components/react/post-togglebutton.d.ts +11 -0
- package/dist/components/react/post-togglebutton.js +57 -0
- package/dist/components/react/post-tooltip-trigger.d.ts +11 -0
- package/dist/components/react/post-tooltip-trigger.js +5223 -0
- package/dist/components/react/post-tooltip.d.ts +11 -0
- package/dist/components/react/post-tooltip.js +115 -0
- package/dist/components/switch-variants.js +3 -0
- package/dist/docs.json +71 -35
- package/dist/esm/event-from-kraHE1r3.js +105 -0
- package/dist/esm/index-C8a0ddDa.js +4 -4
- package/dist/esm/index-VmK3ABCB.js +88 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-DO48NanC.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +7 -7
- package/dist/esm/post-avatar.entry.js +108 -81
- package/dist/esm/post-back-to-top.entry.js +3 -3
- package/dist/esm/post-banner.entry.js +4 -4
- package/dist/esm/post-breadcrumb-item_2.entry.js +4 -4
- package/dist/esm/post-breadcrumbs.entry.js +5 -5
- package/dist/esm/post-card-control.entry.js +5 -5
- package/dist/esm/post-closebutton_15.entry.js +135 -76
- package/dist/esm/post-collapsible_2.entry.js +5 -5
- 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 +2 -2
- package/dist/esm/post-tooltip-trigger.entry.js +3 -3
- package/dist/esm/post-tooltip.entry.js +4 -4
- package/dist/loader/cdn.js +1 -0
- package/dist/loader/index.cjs.js +1 -0
- package/{loader → dist/loader}/index.d.ts +1 -1
- package/dist/loader/index.es2017.js +1 -0
- package/{loader → dist/loader}/index.js +1 -1
- 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-45007aac.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-e9802b56.entry.js → p-84395e1d.entry.js} +1 -1
- package/dist/post-components/p-848c10ac.entry.js +1 -0
- package/dist/post-components/{p-ab8017bb.entry.js → p-8d2e5814.entry.js} +1 -1
- package/dist/post-components/{p-a2fa5ce4.entry.js → p-9dbe6595.entry.js} +1 -1
- package/dist/post-components/p-DO48NanC.js +1 -0
- package/dist/post-components/{p-BWC0gtGU.js → p-VmK3ABCB.js} +1 -1
- package/dist/post-components/p-a982458f.entry.js +1 -0
- package/dist/post-components/{p-f67b616a.entry.js → p-b0aaa058.entry.js} +1 -1
- package/dist/post-components/{p-bbe02ba3.entry.js → p-bdeef760.entry.js} +1 -1
- package/dist/post-components/{p-2f698af4.entry.js → p-d221395c.entry.js} +1 -1
- package/dist/post-components/{p-57703aee.entry.js → p-e49aa78e.entry.js} +1 -1
- package/dist/post-components/p-eb405167.entry.js +1 -0
- package/dist/post-components/p-kraHE1r3.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-accordion-item/post-accordion-item.d.ts +3 -3
- package/dist/types/components/post-avatar/avatar-utils.d.ts +3 -0
- package/dist/types/components/post-avatar/post-avatar.d.ts +17 -13
- package/dist/types/components/post-closebutton/post-closebutton.d.ts +0 -6
- 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 +7 -0
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +6 -2
- package/dist/types/components/post-tabs/post-tabs.d.ts +2 -2
- package/dist/types/components.d.ts +19 -22
- package/dist/types/utils/component-on-ready.d.ts +2 -2
- package/hydrate/index.js +308 -201
- package/hydrate/index.mjs +308 -201
- package/package.json +24 -12
- package/dist/components/p-Z01QMrov.js +0 -3
- package/dist/esm/package-Z01QMrov.js +0 -3
- package/dist/post-components/p-031f7489.entry.js +0 -1
- package/dist/post-components/p-1e6a068a.entry.js +0 -1
- package/dist/post-components/p-2ca196d6.entry.js +0 -1
- package/dist/post-components/p-3adbdda7.entry.js +0 -1
- package/dist/post-components/p-7b8ab026.entry.js +0 -1
- package/dist/post-components/p-8U5GFtQP.js +0 -1
- package/dist/post-components/p-9428231b.entry.js +0 -1
- package/dist/post-components/p-Z01QMrov.js +0 -1
- package/dist/post-components/p-ac73ab00.entry.js +0 -1
- package/dist/post-components/p-c1cf39cb.entry.js +0 -1
- package/dist/post-components/p-d0d92071.entry.js +0 -1
- package/dist/post-components/p-e96239c4.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
- package/loader/cdn.js +0 -1
- package/loader/index.cjs.js +0 -1
- package/loader/index.es2017.js +0 -1
- /package/dist/components/{p-CJ80BZ06.js → breakpoints.js} +0 -0
- /package/dist/components/{p-SbIC4aZX.js → fade.js} +0 -0
- /package/dist/components/{p-C35MCWIp.js → get-focusable-children.js} +0 -0
- /package/dist/components/{p-r4txK0AC.js → heading-levels.js} +0 -0
- /package/dist/components/{p-BLchVpF6.js → index.browser.js} +0 -0
- /package/dist/components/{p-CV7fm1rW.js → index2.js} +0 -0
- /package/dist/components/{p-C_2k3G1c.js → long-press-event.js} +0 -0
- /package/dist/components/{p-CBFgkSgY.js → react/p-CBFgkSgY.js} +0 -0
- /package/dist/components/{p-DjIHLduJ.js → react/p-DjIHLduJ.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-post-list-flex-direction: column;--post-footer-post-list-gap: 8px;--post-footer-post-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-post-list-flex-direction: row;--post-footer-post-list-gap: 16px;--post-footer-post-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-post-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}
|
|
1
|
+
:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-post-list-flex-direction: column;--post-footer-post-list-gap: 8px;--post-footer-post-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-post-list-flex-direction: row;--post-footer-post-list-gap: 16px;--post-footer-post-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-post-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}
|
|
@@ -54,7 +54,7 @@ export class PostFooter {
|
|
|
54
54
|
return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
|
|
55
55
|
}
|
|
56
56
|
render() {
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: '36aa67b511dd3fdb9c0244b89f80c24feb86b3a6', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '0b4accb1d39734fda0b2ae7e602ae05618d1f6f8' }, h("h2", { key: '3b6147bb75772338192b17da5086e33d45f0cc4e', class: "visually-hidden" }, this.label), h("div", { key: '3ae237e599d226c8413bd785540f2706a61f130f', class: "footer-container" }, h("div", { key: 'c844467c43a718b117cc863beb75ac1ffccc7286', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'ab0859972f61a8a0b28184654b0b8a7da5d6d199', class: "footer-column" }, h("div", { key: '9356dc60f36a614718b1e668aa6c8f988e611305', class: "footer-socialmedia" }, h("slot", { key: 'aeea4c639ae1b092a90816cebfc892e7ae9608ac', name: "socialmedia" })), h("div", { key: '6404adf8c76f4756c729c453a4f5285577973596', class: "footer-app" }, h("slot", { key: 'ebfbf7f1b5db296b1de165035156819043d2a329', name: "app" }))), h("div", { key: '38017619c9da0f5abd0b34e9406f94e239e54b99', class: "footer-businesssectors" }, h("slot", { key: '93f13e71cbd102074b6f2a55c369470f66b3ae8d', name: "businesssectors" })), h("div", { key: '88c077c96627d557a47d3136a65196b67fafc2c1', class: "footer-meta" }, h("slot", { key: '9c0f64a2f2d715d6b420938efa63c861415376bd', name: "meta" })), h("div", { key: '1dc3cdbe0cb628d7e688c15de5959758e8837489', class: "footer-copyright" }, h("slot", { key: 'b62fe042ac7b098747bb21605fed2fa6883dbb23', name: "copyright" }))))));
|
|
58
58
|
}
|
|
59
59
|
static get is() { return "post-footer"; }
|
|
60
60
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::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), /* 0 when header is static, large negative when header shrinks to enable offset */ 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}}
|
|
1
|
+
*,::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), /* 0 when header is static, large negative when header shrinks to enable offset */ 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}}
|
|
@@ -59,6 +59,7 @@ export class PostHeader {
|
|
|
59
59
|
this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
|
|
60
60
|
this.device = breakpoint.get('device');
|
|
61
61
|
this.hasNavigation = false;
|
|
62
|
+
this.hasTitle = false;
|
|
62
63
|
this.mobileMenuExtended = false;
|
|
63
64
|
this.megadropdownOpen = false;
|
|
64
65
|
this.breakpointChange = (e) => {
|
|
@@ -95,6 +96,7 @@ export class PostHeader {
|
|
|
95
96
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
96
97
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
97
98
|
this.checkNavigationExistence();
|
|
99
|
+
this.checkTitleExistence();
|
|
98
100
|
this.switchLanguageSwitchMode();
|
|
99
101
|
this.handleScrollParentResize();
|
|
100
102
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -132,6 +134,9 @@ export class PostHeader {
|
|
|
132
134
|
checkNavigationExistence() {
|
|
133
135
|
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
134
136
|
}
|
|
137
|
+
checkTitleExistence() {
|
|
138
|
+
this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
|
|
139
|
+
}
|
|
135
140
|
async closeMobileMenu() {
|
|
136
141
|
this.mobileMenuAnimation.finish();
|
|
137
142
|
const menuButton = this.getMenuButton();
|
|
@@ -271,9 +276,12 @@ export class PostHeader {
|
|
|
271
276
|
const localHeaderClasses = ['local-header'];
|
|
272
277
|
if (this.mobileMenuExtended)
|
|
273
278
|
localHeaderClasses.push('local-header-mobile-extended');
|
|
274
|
-
if (!this.hasNavigation)
|
|
279
|
+
if (this.device !== 'desktop' || !this.hasNavigation)
|
|
275
280
|
localHeaderClasses.push('no-navigation');
|
|
276
|
-
|
|
281
|
+
if (!this.hasTitle)
|
|
282
|
+
localHeaderClasses.push('no-title');
|
|
283
|
+
return (h(Host, { key: 'd327fc8735749f46cb8b38531a8514978f92c197', "data-version": version, "data-color-scheme": "light" }, h("div", { key: '07b7a4861cc11d55fce5d749a1d074d37900b48f', class: "global-header" }, h("div", { key: 'bb23cf58b62b53e273921bb0a27a2371983bc8a8', class: "global-sub" }, h("div", { key: '0028ff1ba8be25a238d944eaf25f9679b9e163c6', class: "logo" }, h("slot", { key: '98e0584188a391b99df904fbdf463606548859c7', name: "post-logo" }))), h("div", { key: '6da75517e0923191cc4d478a3f0c7e20d89b860d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'bf5730915d734e9accb0e10bcd0d48ee99781930', name: "target-group" })), h("div", { key: '64f3eafd98d8c34248de4fb78619bb7f3147e5e9', class: "global-sub" }, !this.hasMobileMenu && (h("slot", { key: 'c3ad33a44bf25fede0afbea50937626142e69b6e', name: "meta-navigation" })), h("slot", { key: 'e85d50753a40958be785deebfe01ffbee91f120b', name: "global-controls" }), !this.hasMobileMenu && h("slot", { key: 'e423f47daa544cb7bd11ed54f0ecef93a50e6470', name: "post-language-switch" }), this.hasNavigation && (h("div", { key: '96be5d590fbee1986238e1b7b22a1e6928c1c97f', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '4c9db8b0c416cbd2ffa4e1df6b05aea757bdc6a6', name: "post-togglebutton" }))))), h("div", { key: '43285a4032f7ae356145ce6fb62e3c9896ad8542', class: localHeaderClasses.join(' ') }, h("slot", { key: '74c2313baa4da4bf37d13189c07645374df684d1', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle &&
|
|
284
|
+
(h("div", { key: '414b5378922221715071a5d8cfc0b7920018a5b3', class: "local-sub" }, h("slot", { key: 'acb09003e517669a50405a04e5dafa983e78b5f2', name: "local-controls" }), h("slot", { key: '8e1043c4d2e25b6b9432a2ba1885d2128abb9f85' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
277
285
|
}
|
|
278
286
|
static get is() { return "post-header"; }
|
|
279
287
|
static get encapsulation() { return "shadow"; }
|
|
@@ -291,6 +299,7 @@ export class PostHeader {
|
|
|
291
299
|
return {
|
|
292
300
|
"device": {},
|
|
293
301
|
"hasNavigation": {},
|
|
302
|
+
"hasTitle": {},
|
|
294
303
|
"mobileMenuExtended": {},
|
|
295
304
|
"megadropdownOpen": {}
|
|
296
305
|
};
|
|
@@ -40,52 +40,58 @@ export class PostIcon {
|
|
|
40
40
|
validateScale() {
|
|
41
41
|
checkEmptyOrType(this, 'scale', 'number');
|
|
42
42
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
/**
|
|
44
|
+
* Construct the icon URL according to the following rules:
|
|
45
|
+
* 1. `@base` (absolute URL) → use directly.
|
|
46
|
+
* 2. `@base` (relative URL) → resolve with `base href` and/or `origin`
|
|
47
|
+
* - If `base href` is absolute → use just that.
|
|
48
|
+
* - If `base href` is relative → prepend with `origin`.
|
|
49
|
+
* - If `base href` does not exist → use only `origin`.
|
|
50
|
+
* 3. `@meta` (absolute URL) → use directly.
|
|
51
|
+
* 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
|
|
52
|
+
* 5. `CDN_URL` fallback → `https://unpkg.com/...`.
|
|
53
|
+
**/
|
|
47
54
|
getUrl() {
|
|
48
55
|
const fileName = `${this.name}.svg`;
|
|
49
56
|
if (!IS_BROWSER && !this.base) {
|
|
50
57
|
return `${CDN_URL}${fileName}`;
|
|
51
58
|
}
|
|
59
|
+
const isAbsolute = (url) => /^https?:\/\//.test(url);
|
|
60
|
+
const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
|
|
61
|
+
const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
|
|
52
62
|
const currentDomain = IS_BROWSER ? window.location.origin : '';
|
|
53
63
|
const baseHref = IS_BROWSER
|
|
54
64
|
? document.querySelector('base[href]')?.getAttribute('href') || ''
|
|
55
65
|
: '';
|
|
56
|
-
const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
|
|
57
66
|
const metaIconBase = IS_BROWSER
|
|
58
|
-
? document
|
|
59
|
-
.querySelector('meta[name="design-system-settings"]')
|
|
60
|
-
?.getAttribute('data-post-icon-base') || ''
|
|
67
|
+
? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
|
|
61
68
|
: '';
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return
|
|
70
|
-
}
|
|
69
|
+
// Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
|
|
70
|
+
const buildUrlWithBase = (relativeUrl) => {
|
|
71
|
+
const normalizedHref = normalizeUrl(baseHref);
|
|
72
|
+
const normalizedRelative = normalizeUrl(relativeUrl);
|
|
73
|
+
if (isAbsolute(normalizedHref)) {
|
|
74
|
+
return `${normalizedHref}${normalizedRelative}`;
|
|
75
|
+
}
|
|
76
|
+
return `${currentDomain}${normalizedHref}${normalizedRelative}`;
|
|
77
|
+
};
|
|
71
78
|
let url;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
url =
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
79
|
-
}
|
|
80
|
-
else if (iconBase || baseHref) {
|
|
81
|
-
// Standard case: domain + baseHref + iconBase
|
|
82
|
-
url = `${currentDomain}${normalizedBaseHref}${normalizedIconBase}${fileName}`;
|
|
79
|
+
// Highest Priority is this.base
|
|
80
|
+
if (this.base) {
|
|
81
|
+
url = isAbsolute(this.base)
|
|
82
|
+
? `${normalizeUrl(this.base)}${fileName}`
|
|
83
|
+
: `${buildUrlWithBase(this.base)}${fileName}`;
|
|
84
|
+
return cleanUrl(url);
|
|
83
85
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
url =
|
|
86
|
+
// Second Priority is metaIconBase
|
|
87
|
+
if (metaIconBase) {
|
|
88
|
+
url = isAbsolute(metaIconBase)
|
|
89
|
+
? `${normalizeUrl(metaIconBase)}${fileName}`
|
|
90
|
+
: `${buildUrlWithBase(metaIconBase)}${fileName}`;
|
|
91
|
+
return cleanUrl(url);
|
|
87
92
|
}
|
|
88
|
-
|
|
93
|
+
// Fallback to CDN
|
|
94
|
+
return cleanUrl(`${CDN_URL}${fileName}`);
|
|
89
95
|
}
|
|
90
96
|
getStyles() {
|
|
91
97
|
const url = this.getUrl();
|
|
@@ -106,7 +112,7 @@ export class PostIcon {
|
|
|
106
112
|
this.validateAnimation();
|
|
107
113
|
}
|
|
108
114
|
render() {
|
|
109
|
-
return (h(Host, { key: '
|
|
115
|
+
return (h(Host, { key: '521fb549cef7d0838c999628cf69c5c23e87dfc6', "data-version": version }, h("span", { key: 'cc9ca579bd90fee8cec7868c697bfe59dd677246', style: this.getStyles() })));
|
|
110
116
|
}
|
|
111
117
|
static get is() { return "post-icon"; }
|
|
112
118
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
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}
|
|
@@ -44,13 +44,12 @@ export class PostLanguageOption {
|
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
46
|
const lang = this.code.toLowerCase();
|
|
47
|
-
const role = this.variant === 'menu' ? 'menuitem' : undefined;
|
|
48
47
|
const emitOnKeyDown = (e) => {
|
|
49
48
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
50
49
|
this.emitChange();
|
|
51
50
|
}
|
|
52
51
|
};
|
|
53
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: 'deaee69d7e0c551af5162ae124f78c9418aba062', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
|
|
54
53
|
}
|
|
55
54
|
static get is() { return "post-language-option"; }
|
|
56
55
|
static get originalStyleUrls() {
|
|
@@ -74,14 +74,13 @@ export class PostLanguageSwitch {
|
|
|
74
74
|
updateChildrenVariant() {
|
|
75
75
|
this.languageOptions.forEach(el => {
|
|
76
76
|
el.setAttribute('variant', this.variant);
|
|
77
|
-
el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
|
|
78
77
|
});
|
|
79
78
|
}
|
|
80
79
|
renderList() {
|
|
81
80
|
return (h(Host, { "data-version": version }, h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
|
|
82
81
|
}
|
|
83
82
|
renderDropdown() {
|
|
84
|
-
return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container"
|
|
83
|
+
return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container" }, h("slot", null))));
|
|
85
84
|
}
|
|
86
85
|
render() {
|
|
87
86
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{display:
|
|
1
|
+
:host{display:block;cursor:pointer}
|
|
@@ -3,16 +3,29 @@ import { version } from "../../../../package";
|
|
|
3
3
|
const INTERACTIVE_ELEMENTS = ['a'].join(',');
|
|
4
4
|
const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
|
|
5
5
|
export class PostLinkarea {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.mutationObserver = new MutationObserver(this.checkInteractiveElements.bind(this));
|
|
8
|
+
}
|
|
6
9
|
dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
this.interactiveElements[0]?.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
|
|
11
|
+
}
|
|
12
|
+
checkInteractiveElements() {
|
|
13
|
+
this.interactiveElements = this.host.querySelectorAll(INTERACTIVE_ELEMENTS_SELECTOR);
|
|
14
|
+
if (this.interactiveElements.length > 1) {
|
|
15
|
+
console.error(`The \`post-linkarea\` currently contains ${this.interactiveElements.length} interactive elements when it should contain only one.`);
|
|
11
16
|
}
|
|
12
|
-
|
|
17
|
+
}
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
this.mutationObserver.observe(this.host, { childList: true });
|
|
20
|
+
}
|
|
21
|
+
componentWillLoad() {
|
|
22
|
+
this.checkInteractiveElements();
|
|
23
|
+
}
|
|
24
|
+
disconnectedCallback() {
|
|
25
|
+
this.mutationObserver.disconnect();
|
|
13
26
|
}
|
|
14
27
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: '37351b168e654e8c563225061510dacdbda8fef4', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '26aeb1fc5de5f610ef485396f2cec4c2ba7e5a9a' })));
|
|
16
29
|
}
|
|
17
30
|
static get is() { return "post-linkarea"; }
|
|
18
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,5 +39,10 @@ export class PostLinkarea {
|
|
|
26
39
|
"$": ["post-linkarea.css"]
|
|
27
40
|
};
|
|
28
41
|
}
|
|
42
|
+
static get states() {
|
|
43
|
+
return {
|
|
44
|
+
"interactiveElements": {}
|
|
45
|
+
};
|
|
46
|
+
}
|
|
29
47
|
static get elementRef() { return "host"; }
|
|
30
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
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}
|
|
@@ -31,7 +31,7 @@ export class PostList {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '27dc0177ba3d81149b6b5dce24d6f18b8f57c9e5', "data-version": version }, h("div", { key: 'f860eaeafc60605c67fb0c47e452ecfdbf03d002', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '17e20fdcf588649a9d678f873687cdedaef931aa' })), h("div", { key: 'aebdcd2fe4b5a4d232b0fe3de7f6273c93f505f6', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'fa15f227e3251d44d1519421960bb5f3056fc371', name: "post-list-item" }))));
|
|
35
35
|
}
|
|
36
36
|
static get is() { return "post-list"; }
|
|
37
37
|
static get originalStyleUrls() {
|
|
@@ -8,7 +8,7 @@ export class PostListItem {
|
|
|
8
8
|
this.host.setAttribute('slot', 'post-list-item');
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'd15e750cd663def9363bedd020f09e634aba14c9', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '361853e5c5994de4e5a5884cc32d7c7280b62b56' })));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "post-list-item"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -20,7 +20,7 @@ export class PostLogo {
|
|
|
20
20
|
render() {
|
|
21
21
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
22
22
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '1c268056329697baccc5bf65b1e66acd8531d5f3', "data-version": version }, h(LogoTag, { key: '9b73fc4922a5ea0f72d761e82136ef1111eb7e21', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '4042a64056f3d22a99d6b245201be20d1afe5dc0', class: "description" }, h("slot", { key: 'eb437f087d952b4f4a961bcba0dc18eb6836c6c9', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'b658e94d0e7f63d2f80245e12017f87f50a0b2c9', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '90c0c8f64d0c9023dfa7296e68333232b9023276', id: "Logo" }, h("rect", { key: 'a1dfd6e0bcaedb485398f1896603af36e3f119dc', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), 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" }), 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" }))))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "post-logo"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-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)}}
|
|
1
|
+
post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-current=page],post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}
|
|
@@ -142,7 +142,7 @@ export class PostMainnavigation {
|
|
|
142
142
|
}, NAVBAR_DISABLE_DURATION);
|
|
143
143
|
}
|
|
144
144
|
render() {
|
|
145
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: '1876abaa01a705b5bed07b6f4ab7f795ca994759', slot: "post-mainnavigation", version: version }, h("div", { key: 'c61592c959287dcf329921e11dd0d1414329b15a', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '51b460d2bfdb0ce52e2639f7521de67477972fba', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '54d8f2a52c935713251d752b30ff163bf7bd8b5f', ref: el => (this.navbar = el) }, h("slot", { key: '749a000aa37381cbcf7a68514f77a4ff3da7e90b' })), h("div", { key: 'a42aa9a06704dfd4ebb2357b3dc1efa21f7ac136', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '64ef94d58da05da4ea86c9458b7775c431d0461b', "aria-hidden": "true", name: "chevronright" }))));
|
|
146
146
|
}
|
|
147
147
|
static get is() { return "post-mainnavigation"; }
|
|
148
148
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.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}}
|
|
1
|
+
@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.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}}
|
|
@@ -11,6 +11,7 @@ export class PostMegadropdown {
|
|
|
11
11
|
* and updates automatically when the dropdown is toggled.
|
|
12
12
|
*/
|
|
13
13
|
this.isVisible = false;
|
|
14
|
+
this.trigger = false;
|
|
14
15
|
/** Holds the current animation class. */
|
|
15
16
|
this.animationClass = null;
|
|
16
17
|
this.handleClickOutside = (event) => {
|
|
@@ -45,7 +46,7 @@ export class PostMegadropdown {
|
|
|
45
46
|
PostMegadropdown.activeDropdown = null;
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
|
-
|
|
49
|
+
componentDidRender() {
|
|
49
50
|
this.getFocusableElements();
|
|
50
51
|
}
|
|
51
52
|
/**
|
|
@@ -128,6 +129,14 @@ export class PostMegadropdown {
|
|
|
128
129
|
getFocusableElements() {
|
|
129
130
|
const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
|
|
130
131
|
const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
|
|
132
|
+
const hostId = this.host.getAttribute('id');
|
|
133
|
+
// Proceed if the host has an ID and one of its focusable children is marked as the current page (`aria-current="page"`)
|
|
134
|
+
if (hostId && focusableChildren.some(el => el.getAttribute('aria-current') === 'page')) {
|
|
135
|
+
// Find the trigger element via its "for" attribute, then locate its button and set `aria-current="page"`
|
|
136
|
+
document
|
|
137
|
+
.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
|
|
138
|
+
.classList.add('selected');
|
|
139
|
+
}
|
|
131
140
|
this.firstFocusableEl = focusableChildren[0];
|
|
132
141
|
this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
|
|
133
142
|
}
|
|
@@ -155,7 +164,7 @@ export class PostMegadropdown {
|
|
|
155
164
|
}
|
|
156
165
|
render() {
|
|
157
166
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
158
|
-
return (h(Host, { key: '
|
|
167
|
+
return (h(Host, { key: '18685d3da311fd0563a3c5a498df1e1fef96b524', version: version }, h("div", { key: 'fb3feb160e46b80ed60c202871152ac3f7862f83', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '34e0d3e68bd9bfbeec8ebe37b8977076c91cfe02', class: "megadropdown" }, h("slot", { key: '67d17ec51f7436f2a8acc1216b37820ff999f985', name: "megadropdown-title" }), h("div", { key: '6671d31fcc17d435991a253f04a83bbe56551942', class: "megadropdown-content" }, h("slot", { key: 'd0d313a98202f2d502e4574bed8802682d4da6f3' })), h("div", { key: 'd42560e7a4f3142cb548a1ffb97ad391fd14871f', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '76f0a36d5ca87834b9d857a8f13d53ecb82f9a24', name: "back-button" })), h("div", { key: 'a9ea0c1f24f5c997a1a4c9432f0c7d537b8d6da0', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '1c815102d7f4d1e21aaaaffcf277d98454eda17d', name: "close-button" }))))));
|
|
159
168
|
}
|
|
160
169
|
static get is() { return "post-megadropdown"; }
|
|
161
170
|
static get originalStyleUrls() {
|
|
@@ -172,6 +181,7 @@ export class PostMegadropdown {
|
|
|
172
181
|
return {
|
|
173
182
|
"device": {},
|
|
174
183
|
"isVisible": {},
|
|
184
|
+
"trigger": {},
|
|
175
185
|
"animationClass": {}
|
|
176
186
|
};
|
|
177
187
|
}
|
|
@@ -93,7 +93,7 @@ export class PostMegadropdownTrigger {
|
|
|
93
93
|
document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: 'b5194e2160ffc439f3219807ec86196c01f60d31', "data-version": version, "tab-index": "-1" }, h("button", { key: '3bf811bc35c85fc570a0b6ba3af9b5f7765676cb' }, h("slot", { key: '15b6f17c8b812b43b4aec56b5396b4e194ccd711' }))));
|
|
97
97
|
}
|
|
98
98
|
static get is() { return "post-megadropdown-trigger"; }
|
|
99
99
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}
|