@swisspost/design-system-components 9.0.0-next.18 → 9.0.0-next.19
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/{check-url-1ff4cf75.js → check-url-4c524d85.js} +1 -1
- package/dist/cjs/{index-f2eedfeb.js → index-d4222dcb.js} +1 -1
- package/dist/cjs/index.cjs.js +22 -22
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-5e20c234.js → package-1403e51d.js} +1 -1
- package/dist/cjs/{post-accordion-75c0c474.js → post-accordion-e84c9d23.js} +1 -1
- package/dist/cjs/{post-accordion-item-1157ea24.js → post-accordion-item-d1ef00c3.js} +3 -3
- package/dist/cjs/post-accordion-item.cjs.entry.js +4 -4
- package/dist/cjs/post-accordion.cjs.entry.js +2 -2
- package/dist/cjs/{post-avatar-35dcad67.js → post-avatar-7a8860df.js} +1 -1
- package/dist/cjs/post-avatar.cjs.entry.js +2 -2
- package/dist/cjs/{post-back-to-top-4de4041e.js → post-back-to-top-6c7057f9.js} +2 -2
- package/dist/cjs/post-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/{post-banner-2114b7e3.js → post-banner-ecc46714.js} +3 -3
- package/dist/cjs/post-banner.cjs.entry.js +4 -4
- package/dist/cjs/{post-breadcrumb-5bfcf477.js → post-breadcrumb-dbb85db9.js} +2 -2
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +4 -4
- package/dist/cjs/post-breadcrumb.cjs.entry.js +3 -3
- package/dist/cjs/{post-card-control-404ee898.js → post-card-control-76f6a5b3.js} +1 -1
- package/dist/cjs/post-card-control.cjs.entry.js +2 -2
- package/dist/cjs/post-closebutton_15.cjs.entry.js +4 -4
- package/dist/cjs/{post-collapsible-trigger-476cb22d.js → post-collapsible-trigger-8b242323.js} +2 -2
- 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-4318962c.js → post-footer-eeec84e0.js} +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +2 -2
- package/dist/cjs/post-linkarea-61dbfe5d.js +30 -0
- package/dist/cjs/post-linkarea.cjs.entry.js +2 -2
- package/dist/cjs/{post-menu-item-bce515b2.js → post-menu-item-12639f7c.js} +2 -2
- package/dist/cjs/{post-popover-5363267c.js → post-popover-9569b144.js} +2 -2
- package/dist/cjs/post-popover.cjs.entry.js +2 -2
- package/dist/cjs/{post-rating-a3f7c5df.js → post-rating-5645cae4.js} +2 -2
- package/dist/cjs/post-rating.cjs.entry.js +2 -2
- package/dist/cjs/{post-tab-header-68fcb0ed.js → post-tab-header-82e8ccd0.js} +3 -3
- package/dist/cjs/post-tab-header.cjs.entry.js +2 -2
- package/dist/cjs/{post-tab-panel-909efe62.js → post-tab-panel-ef3df53e.js} +2 -2
- package/dist/cjs/post-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/{post-tabs-8515f7a8.js → post-tabs-8f1e74d9.js} +2 -2
- package/dist/cjs/post-tabs.cjs.entry.js +2 -2
- package/dist/cjs/{post-tag-f66f6506.js → post-tag-c353e30c.js} +2 -2
- package/dist/cjs/post-tag.cjs.entry.js +2 -2
- package/dist/cjs/{post-togglebutton-c773c4f5.js → post-togglebutton-8949d278.js} +341 -171
- package/dist/cjs/{post-tooltip-dc0fef88.js → post-tooltip-cf18ac29.js} +4 -4
- package/dist/cjs/post-tooltip.cjs.entry.js +4 -4
- package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
- package/dist/collection/components/post-back-to-top/post-back-to-top.css +1 -1
- package/dist/collection/components/post-banner/post-banner.css +1 -1
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +10 -2
- package/dist/collection/components/post-icon/post-icon.js +41 -37
- 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 -25
- package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.js +8 -40
- package/dist/collection/components/post-language-switch/switch-variants.js +0 -1
- package/dist/collection/components/post-linkarea/post-linkarea.js +12 -14
- package/dist/collection/components/post-list/post-list.js +2 -2
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +55 -34
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +64 -21
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +24 -2
- package/dist/collection/components/post-menu/post-menu.js +17 -13
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +13 -7
- package/dist/collection/components/post-popover/post-popover.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +141 -33
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.css +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.js +1 -1
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +1 -1
- package/dist/collection/components/post-tag/post-tag.js +1 -1
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.css +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +1 -1
- package/dist/collection/utils/property-checkers/check-url.js +1 -1
- package/dist/components/index2.js +1 -1
- package/dist/components/package.js +1 -1
- package/dist/components/post-accordion-item2.js +1 -1
- package/dist/components/post-back-to-top2.js +1 -1
- package/dist/components/post-banner2.js +1 -1
- package/dist/components/post-header2.js +11 -3
- package/dist/components/post-icon2.js +41 -37
- package/dist/components/post-language-option2.js +2 -4
- package/dist/components/post-language-switch2.js +10 -19
- package/dist/components/post-linkarea2.js +11 -13
- package/dist/components/post-list2.js +2 -2
- package/dist/components/post-mainnavigation2.js +57 -36
- package/dist/components/post-megadropdown-trigger2.js +24 -2
- package/dist/components/post-megadropdown2.js +42 -19
- package/dist/components/post-menu-trigger2.js +13 -7
- package/dist/components/post-menu2.js +17 -13
- package/dist/components/post-popover2.js +1 -1
- package/dist/components/post-popovercontainer2.js +125 -33
- package/dist/components/post-rating2.js +1 -1
- package/dist/components/post-tab-header2.js +2 -2
- package/dist/components/post-tab-panel2.js +1 -1
- package/dist/components/post-tabs2.js +1 -1
- package/dist/components/post-tag2.js +1 -1
- package/dist/components/post-togglebutton2.js +1 -1
- package/dist/components/post-tooltip2.js +2 -2
- package/dist/docs.json +69 -79
- package/dist/esm/{check-url-8ab230de.js → check-url-f84034b1.js} +1 -1
- package/dist/esm/{index-0aec278f.js → index-1b263a63.js} +1 -1
- package/dist/esm/index.js +22 -22
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-21cb9eb8.js +3 -0
- package/dist/esm/{post-accordion-e5330c72.js → post-accordion-db14e23a.js} +1 -1
- package/dist/esm/{post-accordion-item-4e13a044.js → post-accordion-item-c1f42c05.js} +3 -3
- package/dist/esm/post-accordion-item.entry.js +4 -4
- package/dist/esm/post-accordion.entry.js +2 -2
- package/dist/esm/{post-avatar-d6612e0e.js → post-avatar-ccda94eb.js} +1 -1
- package/dist/esm/post-avatar.entry.js +2 -2
- package/dist/esm/{post-back-to-top-d5b3d5f5.js → post-back-to-top-f038d599.js} +2 -2
- package/dist/esm/post-back-to-top.entry.js +2 -2
- package/dist/esm/{post-banner-ae45a03b.js → post-banner-a24ccf11.js} +3 -3
- package/dist/esm/post-banner.entry.js +4 -4
- package/dist/esm/{post-breadcrumb-c7caf609.js → post-breadcrumb-e3e4b50c.js} +2 -2
- package/dist/esm/post-breadcrumb-item_2.entry.js +4 -4
- package/dist/esm/post-breadcrumb.entry.js +3 -3
- package/dist/esm/{post-card-control-c51f4406.js → post-card-control-0a4497d8.js} +1 -1
- package/dist/esm/post-card-control.entry.js +2 -2
- package/dist/esm/post-closebutton_15.entry.js +4 -4
- package/dist/esm/{post-collapsible-trigger-e086c018.js → post-collapsible-trigger-6b0253d8.js} +2 -2
- package/dist/esm/post-collapsible_2.entry.js +4 -4
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/{post-footer-fac4e9a3.js → post-footer-fa4a2a32.js} +1 -1
- package/dist/esm/post-footer.entry.js +2 -2
- package/dist/esm/post-linkarea-1458faa8.js +28 -0
- package/dist/esm/post-linkarea.entry.js +2 -2
- package/dist/esm/{post-menu-item-bdfe59ae.js → post-menu-item-b9af8b46.js} +2 -2
- package/dist/esm/{post-popover-15208f18.js → post-popover-425eb5c9.js} +2 -2
- package/dist/esm/post-popover.entry.js +2 -2
- package/dist/esm/{post-rating-261def37.js → post-rating-4057a5b5.js} +2 -2
- package/dist/esm/post-rating.entry.js +2 -2
- package/dist/esm/{post-tab-header-f2e84ba5.js → post-tab-header-602eb0cb.js} +3 -3
- package/dist/esm/post-tab-header.entry.js +2 -2
- package/dist/esm/{post-tab-panel-389e0709.js → post-tab-panel-fccea5b6.js} +2 -2
- package/dist/esm/post-tab-panel.entry.js +2 -2
- package/dist/esm/{post-tabs-79ea5b62.js → post-tabs-b9f41051.js} +2 -2
- package/dist/esm/post-tabs.entry.js +2 -2
- package/dist/esm/{post-tag-887d422c.js → post-tag-54b70906.js} +2 -2
- package/dist/esm/post-tag.entry.js +2 -2
- package/dist/esm/{post-togglebutton-70b0f44e.js → post-togglebutton-f6746062.js} +341 -171
- package/dist/esm/{post-tooltip-1be020fd.js → post-tooltip-eccf3d93.js} +4 -4
- package/dist/esm/post-tooltip.entry.js +4 -4
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-0337eb03.entry.js +1 -0
- package/dist/post-components/p-0470d5af.entry.js +1 -0
- package/dist/post-components/p-07b75b18.entry.js +1 -0
- package/dist/post-components/{p-5171e02f.js → p-0d879e8b.js} +1 -1
- package/dist/post-components/{p-6c3ac622.js → p-0f6fee8f.js} +1 -1
- package/dist/post-components/p-114bb8ba.js +1 -0
- package/dist/post-components/{p-99502c06.js → p-18fa847f.js} +1 -1
- package/dist/post-components/{p-fb8f5195.js → p-1c1a614d.js} +1 -1
- package/dist/post-components/p-202156ad.js +1 -0
- package/dist/post-components/p-2f5425e2.entry.js +1 -0
- package/dist/post-components/p-39586235.js +1 -0
- package/dist/post-components/p-3b1c2b8a.entry.js +1 -0
- package/dist/post-components/{p-5f1f7b49.js → p-46accc5f.js} +1 -1
- package/dist/post-components/{p-eb8b3ffa.js → p-470c7464.js} +1 -1
- package/dist/post-components/{p-9b179f0f.js → p-509fc6e6.js} +1 -1
- package/dist/post-components/{p-898d9196.js → p-541c7be9.js} +2 -2
- package/dist/post-components/p-54c98790.js +1 -0
- package/dist/post-components/p-5afa25c7.entry.js +1 -0
- package/dist/post-components/{p-a2ae208a.js → p-5b1c57d5.js} +1 -1
- package/dist/post-components/p-5cf79fe3.entry.js +1 -0
- package/dist/post-components/p-5d9c1fc3.entry.js +1 -0
- package/dist/post-components/p-608ba689.entry.js +1 -0
- package/dist/post-components/p-64776810.entry.js +1 -0
- package/dist/post-components/{p-bff8004e.js → p-6651164c.js} +1 -1
- package/dist/post-components/p-7085e0e7.entry.js +1 -0
- package/dist/post-components/{p-76257bba.entry.js → p-7bf39758.entry.js} +1 -1
- package/dist/post-components/p-7dc1ccf0.entry.js +1 -0
- package/dist/post-components/p-81eac2e5.entry.js +1 -0
- package/dist/post-components/p-8a31b2fc.entry.js +1 -0
- package/dist/post-components/p-8e7e9942.entry.js +1 -0
- package/dist/post-components/p-a24bf798.js +1 -0
- package/dist/post-components/p-a621090d.js +1 -0
- package/dist/post-components/p-a926c755.js +1 -0
- package/dist/post-components/{p-e7bec3de.js → p-b27b7d03.js} +1 -1
- package/dist/post-components/{p-74122649.js → p-b8100b63.js} +1 -1
- package/dist/post-components/p-c48553bd.entry.js +1 -0
- package/dist/post-components/{p-dc8af283.js → p-cb472e20.js} +1 -1
- package/dist/post-components/p-cea81e00.entry.js +1 -0
- package/dist/post-components/p-d2d2681a.js +1 -0
- package/dist/post-components/{p-ce34c58e.js → p-d8b179fb.js} +1 -1
- package/dist/post-components/p-f405f29e.entry.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-header/post-header.d.ts +1 -0
- package/dist/types/components/post-icon/post-icon.d.ts +5 -0
- package/dist/types/components/post-language-option/post-language-option.d.ts +1 -5
- package/dist/types/components/post-language-switch/post-language-switch.d.ts +2 -7
- package/dist/types/components/post-language-switch/switch-variants.d.ts +0 -2
- package/dist/types/components/post-linkarea/post-linkarea.d.ts +2 -2
- package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +2 -5
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +12 -5
- package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts +6 -0
- package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts +2 -1
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +15 -1
- package/dist/types/components.d.ts +17 -24
- package/loaders/index2.js +1 -1
- package/loaders/package.js +1 -1
- package/loaders/post-accordion-item2.js +1 -1
- package/loaders/post-back-to-top.js +1 -1
- package/loaders/post-banner.js +1 -1
- package/loaders/post-header.js +11 -3
- package/loaders/post-icon2.js +41 -37
- package/loaders/post-language-option.js +2 -4
- package/loaders/post-language-switch.js +10 -19
- package/loaders/post-linkarea.js +11 -13
- package/loaders/post-list.js +2 -2
- package/loaders/post-mainnavigation.js +57 -36
- package/loaders/post-megadropdown-trigger.js +24 -2
- package/loaders/post-megadropdown.js +42 -19
- package/loaders/post-menu-trigger2.js +13 -7
- package/loaders/post-menu2.js +17 -13
- package/loaders/post-popover.js +1 -1
- package/loaders/post-popovercontainer2.js +125 -33
- package/loaders/post-rating.js +1 -1
- package/loaders/post-tab-header.js +2 -2
- package/loaders/post-tab-panel.js +1 -1
- package/loaders/post-tabs.js +1 -1
- package/loaders/post-tag.js +1 -1
- package/loaders/post-togglebutton.js +1 -1
- package/loaders/post-tooltip.js +2 -2
- package/package.json +3 -3
- package/dist/cjs/post-linkarea-abe3848a.js +0 -32
- package/dist/esm/package-52c62831.js +0 -3
- package/dist/esm/post-linkarea-12db6e2a.js +0 -30
- package/dist/post-components/p-14312d05.entry.js +0 -1
- package/dist/post-components/p-19aa8e97.entry.js +0 -1
- package/dist/post-components/p-19d9ae56.entry.js +0 -1
- package/dist/post-components/p-3a8aa86c.entry.js +0 -1
- package/dist/post-components/p-4575b6be.js +0 -1
- package/dist/post-components/p-47e21420.js +0 -1
- package/dist/post-components/p-4f608797.entry.js +0 -1
- package/dist/post-components/p-59373941.js +0 -1
- package/dist/post-components/p-5c5b1fc0.entry.js +0 -1
- package/dist/post-components/p-7a7ce5d1.js +0 -1
- package/dist/post-components/p-7ed1123b.entry.js +0 -1
- package/dist/post-components/p-7ff34767.js +0 -1
- package/dist/post-components/p-82e405cc.entry.js +0 -1
- package/dist/post-components/p-98c7bec2.entry.js +0 -1
- package/dist/post-components/p-9f202ea3.entry.js +0 -1
- package/dist/post-components/p-a24295d5.entry.js +0 -1
- package/dist/post-components/p-bac3cb12.js +0 -1
- package/dist/post-components/p-bd85e141.js +0 -1
- package/dist/post-components/p-c9c86df8.entry.js +0 -1
- package/dist/post-components/p-d3c4e8ea.entry.js +0 -1
- package/dist/post-components/p-d72abd74.entry.js +0 -1
- package/dist/post-components/p-dfcee8dc.entry.js +0 -1
- package/dist/post-components/p-e0c0467e.entry.js +0 -1
- package/dist/post-components/p-f41b0150.entry.js +0 -1
- package/dist/post-components/p-f580d6dd.entry.js +0 -1
- package/dist/post-components/p-ff065ad4.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host, c as createEvent } from './index-40846676.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-21cb9eb8.js';
|
|
3
3
|
import { s as slideUp, a as slideDown } from './slide-62768431.js';
|
|
4
|
-
import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-
|
|
4
|
+
import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-1b263a63.js';
|
|
5
5
|
import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
|
|
6
6
|
import { c as checkType } from './check-type-a6ccc9a3.js';
|
|
7
7
|
import { n as nanoid } from './index.browser-51485f85.js';
|
|
@@ -185,7 +185,7 @@ function getFocusableChildren(element) {
|
|
|
185
185
|
return visibleFocusableChildren;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:
|
|
188
|
+
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.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(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out;border-block-end:1px solid #e1e0dc}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:9px;flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid #e1e0dc}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:-8px 0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--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:fixed;z-index:1;inset-inline:0;background:#fff;inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
|
|
189
189
|
const PostHeaderStyle0 = postHeaderCss;
|
|
190
190
|
|
|
191
191
|
const PostHeader = class {
|
|
@@ -213,6 +213,14 @@ const PostHeader = class {
|
|
|
213
213
|
componentDidLoad() {
|
|
214
214
|
this.updateLocalHeaderHeight();
|
|
215
215
|
}
|
|
216
|
+
// Clean up possible side effects when post-header is disconnected
|
|
217
|
+
disconnectedCallback() {
|
|
218
|
+
this.mobileMenuExtended = false;
|
|
219
|
+
document.body.style.overflow = '';
|
|
220
|
+
this.host.removeEventListener('keydown', e => {
|
|
221
|
+
this.keyboardHandler(e);
|
|
222
|
+
});
|
|
223
|
+
}
|
|
216
224
|
get host() { return getElement(this); }
|
|
217
225
|
frozeBody(isMobileMenuExtended) {
|
|
218
226
|
document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
|
|
@@ -313,7 +321,7 @@ const PostHeader = class {
|
|
|
313
321
|
updateLocalHeaderHeight() {
|
|
314
322
|
requestAnimationFrame(() => {
|
|
315
323
|
const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
|
|
316
|
-
this.host.style.setProperty('--
|
|
324
|
+
this.host.style.setProperty('--local-header-height', `${mhh}px`);
|
|
317
325
|
});
|
|
318
326
|
}
|
|
319
327
|
handleResize() {
|
|
@@ -358,7 +366,7 @@ const PostHeader = class {
|
|
|
358
366
|
return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
|
|
359
367
|
}
|
|
360
368
|
render() {
|
|
361
|
-
return (h(Host, { key: '
|
|
369
|
+
return (h(Host, { key: '45452d2c2f6ac9a067ce71330ea898a797040cca', version: version }, h("div", { key: 'c50478141de45d0a718b18c0edc416eb9c832fde', class: "global-header" }, h("div", { key: 'a2ddc2de9a94fb3b16928fe9c1ac3b3ae61ff9bf', class: "global-sub" }, h("div", { key: '30083683ff7683202118471473f2a0ed98a1c920', class: "logo" }, h("slot", { key: '028bd4a8f03a228378b09a80dce8654d52c30e5c', name: "post-logo" }))), h("div", { key: '853bcf2e6c8a95d88f62795cef8d8e58c8996811', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '40e3027a4e4358b7a614558ed7e1f59fa65ed312', name: "meta-navigation" }), h("slot", { key: '31c141cc45aa12441557d9b817630328df3d3778', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'afe4b2c3123a89c1a4390578c22e89dfff7be655', name: "post-language-switch" }), h("div", { key: 'aea74d0c7f25288afa18b5aeb3e557216d695ec3', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1efed8b7c823ef49b89120ed2e23f151c64b9c0e', name: "post-togglebutton" })))), h("div", { key: 'e09df2136d01c0516d0166f505055615cf1d70d3', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '491f9bbcb2743519f544b24ae6f00405be85e589', name: "title" }), h("div", { key: 'e85c0a76597832a6966e989111b4508579fb9c4d', class: "local-sub" }, h("slot", { key: 'f2d504ea6a3d7592a15551e6be8cb0c1ba220fbc', name: "local-controls" }), h("slot", { key: 'e0dd0f9c12e0c6bf5d5d66cb29139af59f7c0b4d' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
362
370
|
}
|
|
363
371
|
static get watchers() { return {
|
|
364
372
|
"mobileMenuExtended": ["frozeBody"]
|
|
@@ -369,7 +377,7 @@ PostHeader.style = PostHeaderStyle0;
|
|
|
369
377
|
const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
|
|
370
378
|
const PostIconStyle0 = postIconCss;
|
|
371
379
|
|
|
372
|
-
const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
|
|
380
|
+
const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons/';
|
|
373
381
|
const ANIMATION_NAMES = [
|
|
374
382
|
'cylon',
|
|
375
383
|
'cylon-vertical',
|
|
@@ -390,6 +398,7 @@ const PostIcon = class {
|
|
|
390
398
|
this.rotate = null;
|
|
391
399
|
this.scale = null;
|
|
392
400
|
}
|
|
401
|
+
isSSR = typeof window === 'undefined';
|
|
393
402
|
get host() { return getElement(this); }
|
|
394
403
|
validateAnimation(newValue = this.animation) {
|
|
395
404
|
if (newValue !== undefined)
|
|
@@ -416,51 +425,54 @@ const PostIcon = class {
|
|
|
416
425
|
}
|
|
417
426
|
// Construct the icon url from different possible sources
|
|
418
427
|
getUrl() {
|
|
428
|
+
let url;
|
|
429
|
+
const file = `${this.name}.svg`;
|
|
419
430
|
// the first definition object which defines a domain, will be used to set the domain of the file url
|
|
420
431
|
// the first definition object which defines a slug, will be used to set the slug of the file url
|
|
421
|
-
const urlDefinitions = [
|
|
422
|
-
|
|
423
|
-
getUrlDefinition(document.head
|
|
432
|
+
const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
|
|
433
|
+
if (!this.isSSR) {
|
|
434
|
+
urlDefinitions.push(this.getUrlDefinition(document.head
|
|
424
435
|
.querySelector('meta[name="design-system-settings"][data-post-icon-base]')
|
|
425
|
-
?.getAttribute('data-post-icon-base'), 'relative')
|
|
426
|
-
getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both')
|
|
427
|
-
|
|
428
|
-
// in case no
|
|
429
|
-
const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin
|
|
430
|
-
// in case no
|
|
436
|
+
?.getAttribute('data-post-icon-base'), 'relative'));
|
|
437
|
+
urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
|
|
438
|
+
}
|
|
439
|
+
// in case no definition defines a domain, a relative url is used to load the icon
|
|
440
|
+
const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
|
|
441
|
+
// in case no definition defines a slug either, the cdn url is used as a fallback
|
|
431
442
|
const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
443
|
+
if (origin && slug) {
|
|
444
|
+
url = `${origin}${slug}${file}`;
|
|
445
|
+
}
|
|
446
|
+
else if (!origin && slug) {
|
|
447
|
+
url = `${slug}${file}`;
|
|
436
448
|
}
|
|
437
449
|
else {
|
|
438
|
-
url =
|
|
450
|
+
url = `${CDN_URL}${file}`;
|
|
439
451
|
}
|
|
440
452
|
return url;
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
return url ? /^https?:\/\//.test(url) : false;
|
|
457
|
-
}
|
|
458
|
-
function definesSlug(url) {
|
|
459
|
-
const urlObject = getUrlObject(url);
|
|
460
|
-
return Boolean(/^\/.+/.test(urlObject?.pathname));
|
|
461
|
-
}
|
|
453
|
+
}
|
|
454
|
+
getUrlDefinition(url, allow) {
|
|
455
|
+
return {
|
|
456
|
+
url: this.getUrlObject(url),
|
|
457
|
+
definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
|
|
458
|
+
definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
|
|
459
|
+
};
|
|
460
|
+
}
|
|
461
|
+
getUrlObject(url) {
|
|
462
|
+
if (url) {
|
|
463
|
+
url = url?.endsWith('/') ? url : `${url}/`;
|
|
464
|
+
return new URL(url, 'https://url.base');
|
|
465
|
+
}
|
|
466
|
+
else {
|
|
467
|
+
return null;
|
|
462
468
|
}
|
|
463
469
|
}
|
|
470
|
+
definesDomain(url) {
|
|
471
|
+
return url ? /^https?:\/\//.test(url) : false;
|
|
472
|
+
}
|
|
473
|
+
definesSlug(url) {
|
|
474
|
+
return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
|
|
475
|
+
}
|
|
464
476
|
getStyles() {
|
|
465
477
|
const url = this.getUrl();
|
|
466
478
|
return Object.entries({
|
|
@@ -482,7 +494,7 @@ const PostIcon = class {
|
|
|
482
494
|
this.validateAnimation();
|
|
483
495
|
}
|
|
484
496
|
render() {
|
|
485
|
-
return (h(Host, { key: '
|
|
497
|
+
return (h(Host, { key: '77c38a8fb35ceca1c5cf63fdd44fd9ab23aee62c', "data-version": version }, h("span", { key: 'cc8072420ff881f0d7531ae09bbafad992400296', style: this.getStyles() })));
|
|
486
498
|
}
|
|
487
499
|
static get watchers() { return {
|
|
488
500
|
"animation": ["validateAnimation"],
|
|
@@ -496,7 +508,7 @@ const PostIcon = class {
|
|
|
496
508
|
};
|
|
497
509
|
PostIcon.style = PostIconStyle0;
|
|
498
510
|
|
|
499
|
-
const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:
|
|
511
|
+
const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */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 a{color:inherit;text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;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}@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}@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}post-language-option:where([variant=list]):not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}post-language-option:where([variant=list]):not([active=false]) :hover{color:#fff}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]):not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;left:-1px;width:calc(100% + 2px)}";
|
|
500
512
|
const PostLanguageOptionStyle0 = postLanguageOptionCss;
|
|
501
513
|
|
|
502
514
|
const PostLanguageOption = class {
|
|
@@ -506,7 +518,6 @@ const PostLanguageOption = class {
|
|
|
506
518
|
this.code = undefined;
|
|
507
519
|
this.active = undefined;
|
|
508
520
|
this.variant = undefined;
|
|
509
|
-
this.type = undefined;
|
|
510
521
|
this.name = undefined;
|
|
511
522
|
this.url = undefined;
|
|
512
523
|
}
|
|
@@ -556,7 +567,7 @@ const PostLanguageOption = class {
|
|
|
556
567
|
this.emitChange();
|
|
557
568
|
}
|
|
558
569
|
};
|
|
559
|
-
return (h(Host, { key: '
|
|
570
|
+
return (h(Host, { key: 'e13eda12ed933d86c46be60d883d7007de0ba93e', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
|
|
560
571
|
}
|
|
561
572
|
static get watchers() { return {
|
|
562
573
|
"code": ["validateCode"],
|
|
@@ -568,9 +579,8 @@ const PostLanguageOption = class {
|
|
|
568
579
|
PostLanguageOption.style = PostLanguageOptionStyle0;
|
|
569
580
|
|
|
570
581
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
571
|
-
const SWITCH_TYPES = ['language', 'region'];
|
|
572
582
|
|
|
573
|
-
const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap
|
|
583
|
+
const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;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-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{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-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:16px;width:16px}";
|
|
574
584
|
const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
|
|
575
585
|
|
|
576
586
|
const PostLanguageSwitch = class {
|
|
@@ -579,7 +589,6 @@ const PostLanguageSwitch = class {
|
|
|
579
589
|
this.caption = undefined;
|
|
580
590
|
this.description = undefined;
|
|
581
591
|
this.variant = 'list';
|
|
582
|
-
this.type = 'language';
|
|
583
592
|
this.activeLang = undefined;
|
|
584
593
|
}
|
|
585
594
|
get host() { return getElement(this); }
|
|
@@ -592,25 +601,21 @@ const PostLanguageSwitch = class {
|
|
|
592
601
|
validateVariant(value = this.variant) {
|
|
593
602
|
checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be: ${SWITCH_VARIANTS.join(', ')}`);
|
|
594
603
|
}
|
|
595
|
-
validateType(value = this.type) {
|
|
596
|
-
checkEmptyOrOneOf(value, SWITCH_TYPES, `The "type" property of the post-language-switch component must be: ${SWITCH_TYPES.join(', ')}`);
|
|
597
|
-
}
|
|
598
604
|
connectedCallback() {
|
|
599
|
-
this.
|
|
605
|
+
this.updateChildrenVariant();
|
|
600
606
|
// Get the active language based on children's active state
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
.getAttribute('code');
|
|
607
|
+
const activeLanguageOption = this.host.querySelector('post-language-option[active]:not([active="false"])');
|
|
608
|
+
if (activeLanguageOption)
|
|
609
|
+
this.activeLang = activeLanguageOption.getAttribute('code');
|
|
604
610
|
}
|
|
605
611
|
// Update post-language-option variant to have the correct style
|
|
606
|
-
|
|
612
|
+
updateChildrenVariant() {
|
|
607
613
|
this.host.querySelectorAll('post-language-option').forEach(el => {
|
|
608
614
|
el.setAttribute('variant', this.variant);
|
|
609
|
-
el.setAttribute('type', this.type);
|
|
610
615
|
});
|
|
611
616
|
}
|
|
612
617
|
componentWillUpdate() {
|
|
613
|
-
this.
|
|
618
|
+
this.updateChildrenVariant();
|
|
614
619
|
}
|
|
615
620
|
componentDidLoad() {
|
|
616
621
|
this.validateCaption();
|
|
@@ -637,7 +642,7 @@ const PostLanguageSwitch = class {
|
|
|
637
642
|
}
|
|
638
643
|
menuId = `p${nanoid(11)}`;
|
|
639
644
|
renderList() {
|
|
640
|
-
return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("
|
|
645
|
+
return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", null))));
|
|
641
646
|
}
|
|
642
647
|
renderDropdown() {
|
|
643
648
|
return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
|
|
@@ -648,8 +653,7 @@ const PostLanguageSwitch = class {
|
|
|
648
653
|
static get watchers() { return {
|
|
649
654
|
"caption": ["validateCaption"],
|
|
650
655
|
"description": ["validateDescription"],
|
|
651
|
-
"variant": ["validateVariant"]
|
|
652
|
-
"type": ["validateType"]
|
|
656
|
+
"variant": ["validateVariant"]
|
|
653
657
|
}; }
|
|
654
658
|
};
|
|
655
659
|
PostLanguageSwitch.style = PostLanguageSwitchStyle0;
|
|
@@ -677,11 +681,11 @@ const PostList = class {
|
|
|
677
681
|
}
|
|
678
682
|
checkTitle() {
|
|
679
683
|
if (!this.titleEl.textContent.trim()) {
|
|
680
|
-
|
|
684
|
+
console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
|
|
681
685
|
}
|
|
682
686
|
}
|
|
683
687
|
render() {
|
|
684
|
-
return (h(Host, { key: '
|
|
688
|
+
return (h(Host, { key: '085a63d7b4cc85461f2c8fd0c7b9d9f48f42055a', "data-version": version }, h("div", { key: 'd13a66ba16b71eff1a86666b04ca2f41957962e1', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0270bcd71c8a3a34390b98b6374a1a2f06e0d606' })), h("div", { key: 'de04b08bf94900435c53f972c8fcd0798c8a5faf', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'f7aa9976b3283ee4da3d32d84b36e2549c29e80f', name: "post-list-item" }))));
|
|
685
689
|
}
|
|
686
690
|
};
|
|
687
691
|
PostList.style = PostListStyle0;
|
|
@@ -735,19 +739,19 @@ const PostLogo = class {
|
|
|
735
739
|
};
|
|
736
740
|
PostLogo.style = PostLogoStyle0;
|
|
737
741
|
|
|
738
|
-
const postMainnavigationCss = "post-mainnavigation{flex:0 0 auto}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:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-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:var(--post-core-dimension-4)}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-16)}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-14)}}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:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}@media screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100vw;background:var(--post-core-color-brand-white);max-height:var(--main-navigation-height);user-select:none;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{position:absolute;inset-block:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:var(--post-core-color-brand-white);padding:var(--post-core-dimension-16);box-shadow:var(--post-core-elevation-5);line-height:var(--post-core-line-height-100);height:100%}post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}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:var(--post-core-dimension-12);height:var(--main-navigation-height);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16)}}@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:3}}@media screen and (min-width: 1024px)and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:4}}@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:var(--post-core-font-weight-700)}}@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:var(--post-core-font-size-14)}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}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:var(--post-core-dimension-48);padding-inline:8px 12px;gap:var(--post-core-dimension-16);font-weight:var(--post-core-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:var(--post-core-dimension-1);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 (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{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:var(--post-core-dimension-48);padding-inline:8px 12px;gap:var(--post-core-dimension-16);font-weight:var(--post-core-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:var(--post-core-dimension-1);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>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
|
|
742
|
+
const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-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}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}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 screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100vw;background:#fff;max-height:var(--main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button 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;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;margin-inline:4px}}@media screen and (min-width: 1024px){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(--main-navigation-height);gap:4px;font-size:16px;z-index:4}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}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%;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;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}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 (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{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)}}post-mainnavigation .back-button .btn{padding-inline:0}";
|
|
739
743
|
const PostMainnavigationStyle0 = postMainnavigationCss;
|
|
740
744
|
|
|
741
745
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
742
746
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
743
|
-
const NAVIGATION_LIST_SELECTOR = 'post-list
|
|
744
|
-
const NAVIGATION_ITEM_SELECTOR = '
|
|
747
|
+
const NAVIGATION_LIST_SELECTOR = 'post-list > [role="list"]:not(post-megadropdown *)';
|
|
748
|
+
const NAVIGATION_ITEM_SELECTOR = 'post-list-item :is(a, button):not(post-megadropdown *)';
|
|
745
749
|
const PostMainnavigation = class {
|
|
746
750
|
constructor(hostRef) {
|
|
747
751
|
registerInstance(this, hostRef);
|
|
748
752
|
this.canScrollLeft = false;
|
|
749
753
|
this.canScrollRight = false;
|
|
750
|
-
this.
|
|
754
|
+
this.translationAmount = 0;
|
|
751
755
|
}
|
|
752
756
|
header;
|
|
753
757
|
navbar;
|
|
@@ -768,7 +772,7 @@ const PostMainnavigation = class {
|
|
|
768
772
|
* Update navbar translation when 'translateAmount' changes and recalculate scrollability
|
|
769
773
|
*/
|
|
770
774
|
onTranslateAmountChanges(value) {
|
|
771
|
-
this.navbar.style.
|
|
775
|
+
this.navbar.style.marginInlineStart = `-${value}px`;
|
|
772
776
|
this.checkScrollability();
|
|
773
777
|
}
|
|
774
778
|
/**
|
|
@@ -788,11 +792,19 @@ const PostMainnavigation = class {
|
|
|
788
792
|
componentDidLoad() {
|
|
789
793
|
setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
|
|
790
794
|
this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
|
|
795
|
+
this.fixLayoutShift();
|
|
791
796
|
window.addEventListener('resize', // Recheck scrollability on window resize
|
|
792
797
|
throttle(100, () => this.checkScrollability()));
|
|
793
798
|
// Handle focus changes and adjust scroll as needed
|
|
794
799
|
this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
|
|
795
800
|
}
|
|
801
|
+
// Hack that duplicates navigation elements to fix the layout shift on active elements
|
|
802
|
+
fixLayoutShift() {
|
|
803
|
+
// Select first level of main navigation elements, both the links and the megadropdown trigger buttons
|
|
804
|
+
const children = this.host.querySelectorAll('nav > post-list > div > post-list-item > a, nav > post-list > div > post-list-item > post-megadropdown-trigger > button');
|
|
805
|
+
// Update HTML so that the content is duplicated
|
|
806
|
+
children.forEach(child => (child.innerHTML = `<span class="nav-el-active">${child.innerHTML}</span><span class="nav-el-inactive"aria-hidden="true">${child.innerHTML}</span>`));
|
|
807
|
+
}
|
|
796
808
|
handleBackButtonClick() {
|
|
797
809
|
if (this.header)
|
|
798
810
|
this.header.toggleMobileMenu();
|
|
@@ -824,11 +836,11 @@ const PostMainnavigation = class {
|
|
|
824
836
|
this.canScrollLeft = this.canScrollRight = false;
|
|
825
837
|
}
|
|
826
838
|
else {
|
|
827
|
-
this.canScrollLeft = this.
|
|
828
|
-
this.canScrollRight = clientWidth + this.
|
|
839
|
+
this.canScrollLeft = this.translationAmount > 0; // Scrolling left is possible if not at the start
|
|
840
|
+
this.canScrollRight = clientWidth + this.translationAmount < scrollWidth; // Scrolling right is possible if not at the end
|
|
829
841
|
}
|
|
830
842
|
if (couldScroll && !this.canScroll) {
|
|
831
|
-
this.withoutTransition(() => (this.
|
|
843
|
+
this.withoutTransition(() => (this.translationAmount = 0));
|
|
832
844
|
}
|
|
833
845
|
}
|
|
834
846
|
/**
|
|
@@ -864,40 +876,53 @@ const PostMainnavigation = class {
|
|
|
864
876
|
if (direction === 'left')
|
|
865
877
|
navigationItems.reverse();
|
|
866
878
|
for (const item of navigationItems) {
|
|
867
|
-
const couldScroll = direction === 'left' ? this.translateLeftTo(item) : this.translateRightTo(item);
|
|
879
|
+
const couldScroll = direction === 'left' ? this.translateLeftTo(item, true) : this.translateRightTo(item, true);
|
|
868
880
|
if (couldScroll)
|
|
869
881
|
break;
|
|
870
882
|
}
|
|
871
883
|
}
|
|
872
|
-
translateRightTo(navigationItem) {
|
|
873
|
-
const
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
884
|
+
translateRightTo(navigationItem, skipSmallTranslation = false) {
|
|
885
|
+
const listItem = navigationItem.closest('post-list-item');
|
|
886
|
+
// Calculate the right edge position of the list item relative to the left of the screen
|
|
887
|
+
const rightEdgePosition = listItem.offsetLeft + listItem.offsetWidth;
|
|
888
|
+
// Calculate the last visible position on the screen, right before the right scroll button
|
|
889
|
+
const lastVisiblePosition = this.host.clientWidth - this.rightScrollButton.clientWidth;
|
|
890
|
+
// If the item is already fully visible, no translation is needed
|
|
891
|
+
if (rightEdgePosition < lastVisiblePosition)
|
|
892
|
+
return false;
|
|
893
|
+
const translationIncrease = rightEdgePosition - lastVisiblePosition + 1; // + 1 because offset values are rounded
|
|
894
|
+
// If the required scroll distance is too small (less than half the width of the item), avoid unnecessary scroll
|
|
895
|
+
if (skipSmallTranslation && translationIncrease < listItem.clientWidth / 2)
|
|
877
896
|
return false;
|
|
878
|
-
|
|
879
|
-
const
|
|
880
|
-
|
|
897
|
+
// Calculate the maximum translation amount to prevent scrolling past the end of the content
|
|
898
|
+
const maximumTranslation = this.navbar.scrollWidth - this.host.clientWidth;
|
|
899
|
+
// Adjust the translation amount, ensuring it doesn't exceed the maximum scrollable area
|
|
900
|
+
const { marginRight } = getComputedStyle(this.navigationList);
|
|
901
|
+
this.translationAmount =
|
|
902
|
+
Math.min(this.translationAmount + translationIncrease, maximumTranslation) +
|
|
903
|
+
parseInt(marginRight);
|
|
881
904
|
return true;
|
|
882
905
|
}
|
|
883
|
-
translateLeftTo(navigationItem) {
|
|
884
|
-
const
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
906
|
+
translateLeftTo(navigationItem, skipSmallTranslation = false) {
|
|
907
|
+
const listItem = navigationItem.closest('post-list-item');
|
|
908
|
+
// Get the left edge position of the list item relative to the left of the screen
|
|
909
|
+
const leftEdgePosition = listItem.offsetLeft;
|
|
910
|
+
// Calculate the first visible position on the screen to the left, right after the left scroll button
|
|
911
|
+
const firstVisiblePosition = this.leftScrollButton.clientWidth;
|
|
912
|
+
// If the item is already fully visible, no translation is needed
|
|
913
|
+
if (leftEdgePosition > firstVisiblePosition)
|
|
888
914
|
return false;
|
|
889
|
-
const
|
|
890
|
-
|
|
891
|
-
|
|
915
|
+
const translationDecrease = firstVisiblePosition - leftEdgePosition + 1; // + 1 because offset values are rounded
|
|
916
|
+
// If the required scroll distance is too small (less than half the width of the item), don't perform the scroll
|
|
917
|
+
if (skipSmallTranslation && translationDecrease < listItem.clientWidth / 2)
|
|
918
|
+
return false;
|
|
919
|
+
// Calculate the minimum allowed translation amount (no negative scrolling allowed)
|
|
920
|
+
const minimumTranslation = 0;
|
|
921
|
+
// Adjust the translation amount, ensuring it doesn't go below the minimum scrollable area
|
|
922
|
+
const { marginLeft } = getComputedStyle(this.navigationList);
|
|
923
|
+
this.translationAmount = Math.max(this.translationAmount - translationDecrease - parseInt(marginLeft), minimumTranslation);
|
|
892
924
|
return true;
|
|
893
925
|
}
|
|
894
|
-
/**
|
|
895
|
-
* Calculate the margin required for focus outline around navigation items
|
|
896
|
-
*/
|
|
897
|
-
getFocusMargin(navigationItem) {
|
|
898
|
-
const { outlineWidth, outlineOffset } = getComputedStyle(navigationItem);
|
|
899
|
-
return parseInt(outlineWidth) + parseInt(outlineOffset) + 1;
|
|
900
|
-
}
|
|
901
926
|
/**
|
|
902
927
|
* Returns the navigation list container element
|
|
903
928
|
*/
|
|
@@ -934,15 +959,15 @@ const PostMainnavigation = class {
|
|
|
934
959
|
});
|
|
935
960
|
}
|
|
936
961
|
render() {
|
|
937
|
-
return (h(Host, { key: '
|
|
962
|
+
return (h(Host, { key: 'd9be56167f714c041eb05283832986ec38c451cd', slot: "post-mainnavigation" }, h("div", { key: '5852c66b93a6eb9697fd7c7b1379e748804c6917', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '0d4d98897fb5a8f8cf1c0871037ac01023c41cc2', name: "back-button" })), h("nav", { key: 'c60635b5db5a54b9e7661b92eeec29ed6d453cfe', ref: el => (this.navbar = el) }, h("slot", { key: 'd83facd6cb8c2a892ad432e42357123660c647ed' })), h("div", { key: 'e9afc48596b3e877d9efb9a4189abb8c84aadb6d', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'ef11720ec4f6d7811eb10027871a336e46ba6b84', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: 'f85ff2ef87841409f4b4f6c33e6d0dca4c764cc6', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '181dc100ddedcba3f07b5f0ff9aedf165499f74f', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: '83a8a824fcfe499207f6030e11381e68d530c67d', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '52caec8a9a8c15e97ea5702ec3fe30bd4777c728', "aria-hidden": "true", name: "chevronright" })))));
|
|
938
963
|
}
|
|
939
964
|
static get watchers() { return {
|
|
940
|
-
"
|
|
965
|
+
"translationAmount": ["onTranslateAmountChanges"]
|
|
941
966
|
}; }
|
|
942
967
|
};
|
|
943
968
|
PostMainnavigation.style = PostMainnavigationStyle0;
|
|
944
969
|
|
|
945
|
-
const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{
|
|
970
|
+
const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;border-top:1px solid #e1e0dc;width:100%;top:100%;left: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:4;top:0 !important;left:0;width:100%;position:fixed;height:calc(100vh - var(--header-height));max-height:calc(100vh - var(--header-height));border-top:unset;overflow:auto}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}.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-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-bottom:0;border-top: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;bottom:0;width:100%;height:2px;position:absolute;left:0}.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}.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-bottom: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;top:1rem;right:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
|
|
946
971
|
const PostMegadropdownStyle0 = postMegadropdownCss;
|
|
947
972
|
|
|
948
973
|
const PostMegadropdown = class {
|
|
@@ -961,11 +986,13 @@ const PostMegadropdown = class {
|
|
|
961
986
|
static activeDropdown = null;
|
|
962
987
|
/**
|
|
963
988
|
* Emits when the dropdown is shown or hidden.
|
|
964
|
-
* The event payload is
|
|
989
|
+
* The event payload is an object.
|
|
990
|
+
* `isVisible` is true when the dropdown gets opened and false when it gets closed
|
|
991
|
+
* `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
|
|
965
992
|
**/
|
|
966
993
|
postToggleMegadropdown;
|
|
967
994
|
disconnectedCallback() {
|
|
968
|
-
this.
|
|
995
|
+
this.removeListeners();
|
|
969
996
|
if (PostMegadropdown.activeDropdown === this) {
|
|
970
997
|
PostMegadropdown.activeDropdown = null;
|
|
971
998
|
}
|
|
@@ -996,23 +1023,32 @@ const PostMegadropdown = class {
|
|
|
996
1023
|
this.animationClass = 'slide-in';
|
|
997
1024
|
}
|
|
998
1025
|
this.isVisible = true;
|
|
999
|
-
this.host.addEventListener('keydown', e => this.keyboardHandler(e));
|
|
1000
1026
|
PostMegadropdown.activeDropdown = this;
|
|
1001
|
-
this.postToggleMegadropdown.emit(this.isVisible);
|
|
1002
|
-
|
|
1027
|
+
this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
|
|
1028
|
+
requestAnimationFrame(() => {
|
|
1029
|
+
if (this.firstFocusableEl &&
|
|
1030
|
+
window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
|
|
1031
|
+
this.firstFocusableEl.focus();
|
|
1032
|
+
}
|
|
1033
|
+
});
|
|
1034
|
+
this.addListeners();
|
|
1003
1035
|
}
|
|
1004
1036
|
/**
|
|
1005
1037
|
* Hides the dropdown with an animation.
|
|
1006
1038
|
*/
|
|
1007
|
-
async hide() {
|
|
1039
|
+
async hide(focusParent = true) {
|
|
1040
|
+
this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
|
|
1008
1041
|
this.animationClass = 'slide-out';
|
|
1009
|
-
|
|
1010
|
-
|
|
1042
|
+
}
|
|
1043
|
+
async focusFirst() {
|
|
1044
|
+
this.firstFocusableEl?.focus();
|
|
1011
1045
|
}
|
|
1012
1046
|
connectedCallback() {
|
|
1013
1047
|
this.header = this.host.closest('post-header');
|
|
1014
1048
|
if (this.header) {
|
|
1015
|
-
this.header.addEventListener('postUpdateDevice', (event) =>
|
|
1049
|
+
this.header.addEventListener('postUpdateDevice', (event) => {
|
|
1050
|
+
this.device = event.detail;
|
|
1051
|
+
});
|
|
1016
1052
|
}
|
|
1017
1053
|
}
|
|
1018
1054
|
/**
|
|
@@ -1021,15 +1057,15 @@ const PostMegadropdown = class {
|
|
|
1021
1057
|
forceClose() {
|
|
1022
1058
|
this.isVisible = false;
|
|
1023
1059
|
this.animationClass = null;
|
|
1024
|
-
this.postToggleMegadropdown.emit(this.isVisible);
|
|
1025
|
-
this.
|
|
1060
|
+
this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
|
|
1061
|
+
this.removeListeners();
|
|
1026
1062
|
}
|
|
1027
1063
|
handleAnimationEnd() {
|
|
1028
1064
|
if (this.animationClass === 'slide-out') {
|
|
1029
1065
|
this.isVisible = false;
|
|
1030
1066
|
this.animationClass = null;
|
|
1031
|
-
|
|
1032
|
-
this.
|
|
1067
|
+
PostMegadropdown.activeDropdown = null;
|
|
1068
|
+
this.removeListeners();
|
|
1033
1069
|
}
|
|
1034
1070
|
}
|
|
1035
1071
|
handleClickOutside = (event) => {
|
|
@@ -1046,12 +1082,16 @@ const PostMegadropdown = class {
|
|
|
1046
1082
|
}
|
|
1047
1083
|
}
|
|
1048
1084
|
}
|
|
1049
|
-
this.hide();
|
|
1085
|
+
this.hide(false);
|
|
1050
1086
|
};
|
|
1051
|
-
|
|
1087
|
+
addListeners() {
|
|
1088
|
+
this.host.addEventListener('keydown', e => this.keyboardHandler(e));
|
|
1089
|
+
document.addEventListener('keyup', e => this.handleTabOutside(e));
|
|
1052
1090
|
document.addEventListener('mousedown', this.handleClickOutside);
|
|
1053
1091
|
}
|
|
1054
|
-
|
|
1092
|
+
removeListeners() {
|
|
1093
|
+
this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
|
|
1094
|
+
document.removeEventListener('keyup', e => this.handleTabOutside(e));
|
|
1055
1095
|
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
1056
1096
|
}
|
|
1057
1097
|
getFocusableElements() {
|
|
@@ -1075,9 +1115,16 @@ const PostMegadropdown = class {
|
|
|
1075
1115
|
}
|
|
1076
1116
|
}
|
|
1077
1117
|
}
|
|
1118
|
+
handleTabOutside(e) {
|
|
1119
|
+
if (e.key === 'Tab' && this.device === 'desktop') {
|
|
1120
|
+
if (!this.host.contains(e.target)) {
|
|
1121
|
+
this.hide(false);
|
|
1122
|
+
}
|
|
1123
|
+
}
|
|
1124
|
+
}
|
|
1078
1125
|
render() {
|
|
1079
1126
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1080
|
-
return (h(Host, { key: '
|
|
1127
|
+
return (h(Host, { key: '83c6439c9f8b225a4252b2c9c525589bfe6d72b9' }, h("div", { key: 'fa59247d65f5c47699ae2ccca2cbb70706c22582', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '937d784bb303920d1e44337eb5a3d5bb8971f276', class: "megadropdown" }, h("slot", { key: '5b5196fd0427f52390d7d07505d03090b3e240cf', name: "megadropdown-title" }), h("div", { key: '8e339d051513396b24247c21b5e6d21bee1ba5d8', class: "megadropdown-content" }, h("slot", { key: '57209bb8428ebc4b6273a1442e96cb88d6af86d1' })), h("div", { key: '3aa4e57e7b523ed5c21108ac53d6664d81351c6c', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '44584be04f555e288dfa2cc9078010b7bfc93b97', name: "back-button" })), h("div", { key: '67e1aa1ac0d0071f46705608f9a965d5258c0263', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '7b3198f9581b725d9b43608a3d903e8c09689217', name: "close-button" }))))));
|
|
1081
1128
|
}
|
|
1082
1129
|
};
|
|
1083
1130
|
PostMegadropdown.style = PostMegadropdownStyle0;
|
|
@@ -1097,6 +1144,11 @@ const PostMegadropdownTrigger = class {
|
|
|
1097
1144
|
* Used to manage click and key events for mega dropdown control.
|
|
1098
1145
|
*/
|
|
1099
1146
|
slottedButton = null;
|
|
1147
|
+
/**
|
|
1148
|
+
* Tracks whether this trigger's dropdown was expanded before a state change.
|
|
1149
|
+
* Used to determine if this trigger should handle focus when its dropdown closes.
|
|
1150
|
+
*/
|
|
1151
|
+
wasExpanded = false;
|
|
1100
1152
|
/**
|
|
1101
1153
|
* Watch for changes to the `for` property to validate its type and ensure it is a string.
|
|
1102
1154
|
* @param forValue - The new value of the `for` property.
|
|
@@ -1118,12 +1170,28 @@ const PostMegadropdownTrigger = class {
|
|
|
1118
1170
|
console.warn(`No post-megadropdown found with ID: ${this.for}`);
|
|
1119
1171
|
}
|
|
1120
1172
|
}
|
|
1173
|
+
handleKeyDown = (event) => {
|
|
1174
|
+
if (event.key === 'Enter') {
|
|
1175
|
+
event.preventDefault();
|
|
1176
|
+
this.handleToggle();
|
|
1177
|
+
if (this.megadropdown && !this.ariaExpanded) {
|
|
1178
|
+
setTimeout(() => this.megadropdown.focusFirst(), 100);
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
};
|
|
1121
1182
|
componentDidLoad() {
|
|
1122
1183
|
this.validateControlFor();
|
|
1123
1184
|
// Check if the mega dropdown attached to the trigger is expanded or not
|
|
1124
1185
|
document.addEventListener('postToggleMegadropdown', (event) => {
|
|
1125
1186
|
if (event.target.id === this.for) {
|
|
1126
|
-
this.ariaExpanded = event.detail;
|
|
1187
|
+
this.ariaExpanded = event.detail.isVisible;
|
|
1188
|
+
// Focus on the trigger parent of the dropdown after it's closed if close button had been clicked
|
|
1189
|
+
if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
|
|
1190
|
+
setTimeout(() => {
|
|
1191
|
+
this.slottedButton?.focus();
|
|
1192
|
+
}, 100);
|
|
1193
|
+
}
|
|
1194
|
+
this.wasExpanded = this.ariaExpanded;
|
|
1127
1195
|
if (this.slottedButton) {
|
|
1128
1196
|
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
1129
1197
|
}
|
|
@@ -1135,13 +1203,14 @@ const PostMegadropdownTrigger = class {
|
|
|
1135
1203
|
this.slottedButton.addEventListener('click', () => {
|
|
1136
1204
|
this.handleToggle();
|
|
1137
1205
|
});
|
|
1206
|
+
this.slottedButton.addEventListener('keydown', this.handleKeyDown);
|
|
1138
1207
|
}
|
|
1139
1208
|
else {
|
|
1140
1209
|
console.warn('No button found within post-megadropdown-trigger');
|
|
1141
1210
|
}
|
|
1142
1211
|
}
|
|
1143
1212
|
render() {
|
|
1144
|
-
return (h(Host, { key: '
|
|
1213
|
+
return (h(Host, { key: '108c3703a2abb21bda4e907e3dfbbaf7a572ff0a', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd7ab70fef0db1dcaa908fdc75b8d751e94d04bb9' }, h("slot", { key: 'c2c4c633794da7777849bc1e6380e98a4bf0f1b5' }))));
|
|
1145
1214
|
}
|
|
1146
1215
|
static get watchers() { return {
|
|
1147
1216
|
"for": ["validateControlFor"]
|
|
@@ -1191,17 +1260,29 @@ const PostMenu = class {
|
|
|
1191
1260
|
this.popoverRef.addEventListener('postToggle', (event) => {
|
|
1192
1261
|
this.isVisible = event.detail;
|
|
1193
1262
|
this.toggleMenu.emit(this.isVisible);
|
|
1263
|
+
requestAnimationFrame(() => {
|
|
1264
|
+
if (this.isVisible) {
|
|
1265
|
+
this.lastFocusedElement = this.root.activeElement;
|
|
1266
|
+
const menuItems = this.getSlottedItems();
|
|
1267
|
+
if (menuItems.length > 0) {
|
|
1268
|
+
menuItems[0].focus();
|
|
1269
|
+
}
|
|
1270
|
+
}
|
|
1271
|
+
else if (this.lastFocusedElement) {
|
|
1272
|
+
this.lastFocusedElement.focus();
|
|
1273
|
+
}
|
|
1274
|
+
});
|
|
1194
1275
|
});
|
|
1195
1276
|
}
|
|
1196
1277
|
/**
|
|
1197
1278
|
* Toggles the menu visibility based on its current state.
|
|
1198
1279
|
*/
|
|
1199
1280
|
async toggle(target) {
|
|
1200
|
-
if (this.
|
|
1201
|
-
await this.
|
|
1281
|
+
if (this.popoverRef) {
|
|
1282
|
+
await this.popoverRef.toggle(target);
|
|
1202
1283
|
}
|
|
1203
1284
|
else {
|
|
1204
|
-
|
|
1285
|
+
console.error('toggle: popoverRef is null or undefined');
|
|
1205
1286
|
}
|
|
1206
1287
|
}
|
|
1207
1288
|
/**
|
|
@@ -1212,11 +1293,6 @@ const PostMenu = class {
|
|
|
1212
1293
|
async show(target) {
|
|
1213
1294
|
if (this.popoverRef) {
|
|
1214
1295
|
await this.popoverRef.show(target);
|
|
1215
|
-
this.lastFocusedElement = this.root.activeElement; // Use root's activeElement
|
|
1216
|
-
const menuItems = this.getSlottedItems();
|
|
1217
|
-
if (menuItems.length > 0) {
|
|
1218
|
-
menuItems[0].focus();
|
|
1219
|
-
}
|
|
1220
1296
|
}
|
|
1221
1297
|
else {
|
|
1222
1298
|
console.error('show: popoverRef is null or undefined');
|
|
@@ -1228,9 +1304,6 @@ const PostMenu = class {
|
|
|
1228
1304
|
async hide() {
|
|
1229
1305
|
if (this.popoverRef) {
|
|
1230
1306
|
await this.popoverRef.hide();
|
|
1231
|
-
if (this.lastFocusedElement) {
|
|
1232
|
-
this.lastFocusedElement.focus();
|
|
1233
|
-
}
|
|
1234
1307
|
}
|
|
1235
1308
|
else {
|
|
1236
1309
|
console.error('hide: popoverRef is null or undefined');
|
|
@@ -1274,10 +1347,10 @@ const PostMenu = class {
|
|
|
1274
1347
|
currentIndex = 0;
|
|
1275
1348
|
break;
|
|
1276
1349
|
case this.KEYCODES.END:
|
|
1350
|
+
e.preventDefault();
|
|
1277
1351
|
currentIndex = menuItems.length - 1;
|
|
1278
1352
|
break;
|
|
1279
1353
|
case this.KEYCODES.SPACE:
|
|
1280
|
-
case this.KEYCODES.ENTER:
|
|
1281
1354
|
this.toggle(this.host);
|
|
1282
1355
|
return;
|
|
1283
1356
|
case this.KEYCODES.TAB:
|
|
@@ -1300,7 +1373,7 @@ const PostMenu = class {
|
|
|
1300
1373
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
1301
1374
|
}
|
|
1302
1375
|
render() {
|
|
1303
|
-
return (h(Host, { key: '
|
|
1376
|
+
return (h(Host, { key: '3a79b9df5a5d4c121aa9ca36883d6e17cbf2a66e', "data-version": version }, h("post-popovercontainer", { key: '9c8a37a2c70b98ff9a960f467ab951af10c34726', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '0cda7fc8df3f201d4b4e0170bb8a94e72e123814', class: "popover-container", part: "popover-container" }, h("slot", { key: 'ac20e448dededb6ea79715c2c29122dccf0d7309' })))));
|
|
1304
1377
|
}
|
|
1305
1378
|
};
|
|
1306
1379
|
PostMenu.style = PostMenuStyle0;
|
|
@@ -1333,11 +1406,8 @@ const PostMenuTrigger = class {
|
|
|
1333
1406
|
return ref && ref.localName === 'post-menu' ? ref : null;
|
|
1334
1407
|
}
|
|
1335
1408
|
handleToggle() {
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
this.ariaExpanded = !this.ariaExpanded;
|
|
1339
|
-
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
1340
|
-
menu.toggle(this.host);
|
|
1409
|
+
if (this.menu) {
|
|
1410
|
+
this.menu.toggle(this.host);
|
|
1341
1411
|
}
|
|
1342
1412
|
else {
|
|
1343
1413
|
console.warn(`No post-menu found with ID: ${this.for}`);
|
|
@@ -1349,8 +1419,10 @@ const PostMenuTrigger = class {
|
|
|
1349
1419
|
this.handleToggle();
|
|
1350
1420
|
}
|
|
1351
1421
|
};
|
|
1352
|
-
|
|
1422
|
+
connectedCallback() {
|
|
1353
1423
|
this.root = getRoot(this.host);
|
|
1424
|
+
}
|
|
1425
|
+
componentDidLoad() {
|
|
1354
1426
|
this.validateControlFor();
|
|
1355
1427
|
this.slottedButton = this.host.querySelector('button');
|
|
1356
1428
|
// Check if the slottedButton is within a web component
|
|
@@ -1365,6 +1437,13 @@ const PostMenuTrigger = class {
|
|
|
1365
1437
|
}
|
|
1366
1438
|
if (this.slottedButton) {
|
|
1367
1439
|
this.slottedButton.setAttribute('aria-haspopup', 'menu');
|
|
1440
|
+
// Listen to the `toggleMenu` event emitted by the `post-menu` component
|
|
1441
|
+
if (this.menu && this.slottedButton) {
|
|
1442
|
+
this.menu.addEventListener('toggleMenu', (event) => {
|
|
1443
|
+
this.ariaExpanded = event.detail;
|
|
1444
|
+
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
1445
|
+
});
|
|
1446
|
+
}
|
|
1368
1447
|
this.slottedButton.addEventListener('click', () => {
|
|
1369
1448
|
this.handleToggle();
|
|
1370
1449
|
});
|
|
@@ -1375,7 +1454,7 @@ const PostMenuTrigger = class {
|
|
|
1375
1454
|
}
|
|
1376
1455
|
}
|
|
1377
1456
|
render() {
|
|
1378
|
-
return (h(Host, { key: '
|
|
1457
|
+
return (h(Host, { key: '39bea077fd4d85f442b7b1d56969a203c470a269', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9f7777a4167cdfbf9f1ab2dfe7c3d6e759c8a83b' })));
|
|
1379
1458
|
}
|
|
1380
1459
|
static get watchers() { return {
|
|
1381
1460
|
"for": ["validateControlFor"]
|
|
@@ -3485,15 +3564,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
3485
3564
|
}
|
|
3486
3565
|
`,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
|
|
3487
3566
|
|
|
3488
|
-
const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:var(--post-device-elevation-300);
|
|
3567
|
+
const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;z-index:1060;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;color:var(--post-current-palette-fg);background-color:var(--post-current-palette-bg);border:2px solid rgba(0,0,0,0);border-radius:4px}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--safe-space-cursor-x, 0) var(--safe-space-cursor-y, 0), var(--safe-space-popover-x-start, var(--safe-space-popover-x, 0)) var(--safe-space-popover-y, var(--safe-space-popover-y-start, 0)), var(--safe-space-popover-x-end, var(--safe-space-popover-x, 0)) var(--safe-space-popover-y, var(--safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--safe-space-trigger-x-start, var(--safe-space-trigger-x, 0)) var(--safe-space-trigger-y, var(--safe-space-trigger-y-start, 0)), var(--safe-space-trigger-x-end, var(--safe-space-trigger-x, 0)) var(--safe-space-trigger-y, var(--safe-space-trigger-y-end, 0)), var(--safe-space-popover-x-end, var(--safe-space-popover-x, 0)) var(--safe-space-popover-y, var(--safe-space-popover-y-end, 0)), var(--safe-space-popover-x-start, var(--safe-space-popover-x, 0)) var(--safe-space-popover-y, var(--safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
|
|
3489
3568
|
const PostPopovercontainerStyle0 = postPopovercontainerCss;
|
|
3490
3569
|
|
|
3491
|
-
const SIDE_MAP = {
|
|
3492
|
-
top: 'bottom',
|
|
3493
|
-
right: 'left',
|
|
3494
|
-
bottom: 'top',
|
|
3495
|
-
left: 'right',
|
|
3496
|
-
};
|
|
3497
3570
|
const PostPopovercontainer = class {
|
|
3498
3571
|
constructor(hostRef) {
|
|
3499
3572
|
registerInstance(this, hostRef);
|
|
@@ -3502,7 +3575,28 @@ const PostPopovercontainer = class {
|
|
|
3502
3575
|
this.placement = 'top';
|
|
3503
3576
|
this.edgeGap = 8;
|
|
3504
3577
|
this.arrow = false;
|
|
3578
|
+
this.safeSpace = undefined;
|
|
3505
3579
|
}
|
|
3580
|
+
static STATIC_SIDES = {
|
|
3581
|
+
top: 'bottom',
|
|
3582
|
+
right: 'left',
|
|
3583
|
+
bottom: 'top',
|
|
3584
|
+
left: 'right',
|
|
3585
|
+
};
|
|
3586
|
+
static PROPERTIES_TO_CLEAR = [
|
|
3587
|
+
'--safe-space-popover-x',
|
|
3588
|
+
'--safe-space-popover-y',
|
|
3589
|
+
'--safe-space-popover-x-start',
|
|
3590
|
+
'--safe-space-popover-x-end',
|
|
3591
|
+
'--safe-space-popover-y-start',
|
|
3592
|
+
'--safe-space-popover-y-end',
|
|
3593
|
+
'--safe-space-trigger-x',
|
|
3594
|
+
'--safe-space-trigger-y',
|
|
3595
|
+
'--safe-space-trigger-x-start',
|
|
3596
|
+
'--safe-space-trigger-x-end',
|
|
3597
|
+
'--safe-space-trigger-y-start',
|
|
3598
|
+
'--safe-space-trigger-y-end',
|
|
3599
|
+
];
|
|
3506
3600
|
get host() { return getElement(this); }
|
|
3507
3601
|
arrowRef;
|
|
3508
3602
|
eventTarget;
|
|
@@ -3512,12 +3606,22 @@ const PostPopovercontainer = class {
|
|
|
3512
3606
|
* Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
|
|
3513
3607
|
*/
|
|
3514
3608
|
postToggle;
|
|
3609
|
+
/**
|
|
3610
|
+
* Updates cursor position for safe space feature when popover is open.
|
|
3611
|
+
* Sets CSS custom properties for dynamic styling of safe area.
|
|
3612
|
+
* @param event MouseEvent with cursor position
|
|
3613
|
+
*/
|
|
3614
|
+
mouseTrackingHandler(event) {
|
|
3615
|
+
this.host.style.setProperty('--safe-space-cursor-x', `${event.clientX}px`);
|
|
3616
|
+
this.host.style.setProperty('--safe-space-cursor-y', `${event.clientY}px`);
|
|
3617
|
+
}
|
|
3515
3618
|
componentDidLoad() {
|
|
3516
3619
|
this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
3517
3620
|
}
|
|
3518
3621
|
disconnectedCallback() {
|
|
3519
|
-
if (typeof this.clearAutoUpdate === 'function')
|
|
3622
|
+
if (typeof this.clearAutoUpdate === 'function') {
|
|
3520
3623
|
this.clearAutoUpdate();
|
|
3624
|
+
}
|
|
3521
3625
|
}
|
|
3522
3626
|
/**
|
|
3523
3627
|
* Programmatically display the tooltip
|
|
@@ -3552,7 +3656,7 @@ const PostPopovercontainer = class {
|
|
|
3552
3656
|
this.host.togglePopover(force);
|
|
3553
3657
|
this.toggleTimeoutId = null;
|
|
3554
3658
|
}
|
|
3555
|
-
return this.host.matches(':where(:popover-open, .popover-open');
|
|
3659
|
+
return this.host.matches(':where(:popover-open, .popover-open)');
|
|
3556
3660
|
}
|
|
3557
3661
|
/**
|
|
3558
3662
|
* Start or stop auto updates based on tooltip events.
|
|
@@ -3565,10 +3669,14 @@ const PostPopovercontainer = class {
|
|
|
3565
3669
|
const isOpen = e.newState === 'open';
|
|
3566
3670
|
if (isOpen) {
|
|
3567
3671
|
this.startAutoupdates();
|
|
3672
|
+
if (this.safeSpace)
|
|
3673
|
+
window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
3568
3674
|
}
|
|
3569
3675
|
else {
|
|
3570
3676
|
if (typeof this.clearAutoUpdate === 'function')
|
|
3571
3677
|
this.clearAutoUpdate();
|
|
3678
|
+
if (this.safeSpace)
|
|
3679
|
+
window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
3572
3680
|
}
|
|
3573
3681
|
this.postToggle.emit(isOpen);
|
|
3574
3682
|
}
|
|
@@ -3580,14 +3688,35 @@ const PostPopovercontainer = class {
|
|
|
3580
3688
|
this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
|
|
3581
3689
|
}
|
|
3582
3690
|
async calculatePosition() {
|
|
3691
|
+
const { x, y, middlewareData, placement } = await this.computeMainPosition();
|
|
3692
|
+
const currentPlacement = placement.split('-')[0];
|
|
3693
|
+
// Position popover
|
|
3694
|
+
this.host.style.left = `${x}px`;
|
|
3695
|
+
this.host.style.top = `${y}px`;
|
|
3696
|
+
// Position arrow if enabled
|
|
3697
|
+
if (this.arrow && middlewareData.arrow) {
|
|
3698
|
+
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
3699
|
+
const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
|
|
3700
|
+
if (staticSide) {
|
|
3701
|
+
Object.assign(this.arrowRef.style, {
|
|
3702
|
+
left: arrowX ? `${arrowX}px` : '',
|
|
3703
|
+
top: arrowY ? `${arrowY}px` : '',
|
|
3704
|
+
[staticSide]: '-7px',
|
|
3705
|
+
});
|
|
3706
|
+
}
|
|
3707
|
+
}
|
|
3708
|
+
// Handle safe space if enabled
|
|
3709
|
+
if (this.safeSpace && this.eventTarget) {
|
|
3710
|
+
await this.updateSafeSpaceBoundaries(currentPlacement);
|
|
3711
|
+
}
|
|
3712
|
+
}
|
|
3713
|
+
async computeMainPosition() {
|
|
3583
3714
|
const gap = this.edgeGap;
|
|
3584
3715
|
const middleware = [
|
|
3585
3716
|
flip(),
|
|
3586
3717
|
inline(),
|
|
3587
3718
|
shift({
|
|
3588
3719
|
padding: gap,
|
|
3589
|
-
// Prevents shifting away from the anchor too far, while shifting as far as possible
|
|
3590
|
-
// https://floating-ui.com/docs/shift#limiter
|
|
3591
3720
|
limiter: limitShift({
|
|
3592
3721
|
offset: 32,
|
|
3593
3722
|
}),
|
|
@@ -3599,40 +3728,81 @@ const PostPopovercontainer = class {
|
|
|
3599
3728
|
});
|
|
3600
3729
|
},
|
|
3601
3730
|
}),
|
|
3602
|
-
offset(this.arrow ? gap + 4 : gap),
|
|
3731
|
+
offset(this.arrow ? gap + 4 : gap),
|
|
3603
3732
|
];
|
|
3604
3733
|
if (this.arrow) {
|
|
3605
3734
|
middleware.push(arrow({ element: this.arrowRef, padding: gap }));
|
|
3606
3735
|
}
|
|
3607
|
-
|
|
3736
|
+
return computePosition(this.eventTarget, this.host, {
|
|
3608
3737
|
placement: this.placement || 'top',
|
|
3609
3738
|
strategy: 'fixed',
|
|
3610
3739
|
middleware,
|
|
3611
3740
|
});
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
this.
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3741
|
+
}
|
|
3742
|
+
async updateSafeSpaceBoundaries(currentPlacement) {
|
|
3743
|
+
const targetRect = this.eventTarget.getBoundingClientRect();
|
|
3744
|
+
const popoverRect = this.host.getBoundingClientRect();
|
|
3745
|
+
const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
|
|
3746
|
+
// Helper function to get positioning data based on placement
|
|
3747
|
+
const getPositioningData = (placement, popoverRect, targetRect) => {
|
|
3748
|
+
if (placement === 'top' || placement === 'bottom') {
|
|
3749
|
+
return {
|
|
3750
|
+
popover: {
|
|
3751
|
+
y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
|
|
3752
|
+
xStart: popoverRect.left,
|
|
3753
|
+
xEnd: popoverRect.right,
|
|
3754
|
+
},
|
|
3755
|
+
trigger: {
|
|
3756
|
+
y: placement === 'top' ? targetRect.top : targetRect.bottom,
|
|
3757
|
+
xStart: targetRect.left,
|
|
3758
|
+
xEnd: targetRect.right,
|
|
3759
|
+
},
|
|
3760
|
+
};
|
|
3761
|
+
}
|
|
3762
|
+
else {
|
|
3763
|
+
// left or right
|
|
3764
|
+
return {
|
|
3765
|
+
popover: {
|
|
3766
|
+
x: placement === 'left' ? popoverRect.right : popoverRect.left,
|
|
3767
|
+
yStart: popoverRect.top,
|
|
3768
|
+
yEnd: popoverRect.bottom,
|
|
3769
|
+
},
|
|
3770
|
+
trigger: {
|
|
3771
|
+
x: placement === 'left' ? targetRect.left : targetRect.right,
|
|
3772
|
+
yStart: targetRect.top,
|
|
3773
|
+
yEnd: targetRect.bottom,
|
|
3774
|
+
},
|
|
3775
|
+
};
|
|
3776
|
+
}
|
|
3777
|
+
};
|
|
3778
|
+
const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
|
|
3779
|
+
// Clear previous values
|
|
3780
|
+
PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
|
|
3781
|
+
this.host.style.removeProperty(prop);
|
|
3782
|
+
});
|
|
3783
|
+
if (isVertical) {
|
|
3784
|
+
// For top/bottom placement
|
|
3785
|
+
this.host.style.setProperty('--safe-space-popover-y', `${posData.popover.y}px`);
|
|
3786
|
+
this.host.style.setProperty('--safe-space-popover-x-start', `${posData.popover.xStart}px`);
|
|
3787
|
+
this.host.style.setProperty('--safe-space-popover-x-end', `${posData.popover.xEnd}px`);
|
|
3788
|
+
this.host.style.setProperty('--safe-space-trigger-y', `${posData.trigger.y}px`);
|
|
3789
|
+
this.host.style.setProperty('--safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
|
|
3790
|
+
this.host.style.setProperty('--safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
|
|
3791
|
+
}
|
|
3792
|
+
else {
|
|
3793
|
+
// For left/right placement
|
|
3794
|
+
this.host.style.setProperty('--safe-space-popover-x', `${posData.popover.x}px`);
|
|
3795
|
+
this.host.style.setProperty('--safe-space-popover-y-start', `${posData.popover.yStart}px`);
|
|
3796
|
+
this.host.style.setProperty('--safe-space-popover-y-end', `${posData.popover.yEnd}px`);
|
|
3797
|
+
this.host.style.setProperty('--safe-space-trigger-x', `${posData.trigger.x}px`);
|
|
3798
|
+
this.host.style.setProperty('--safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
|
|
3799
|
+
this.host.style.setProperty('--safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
|
|
3630
3800
|
}
|
|
3631
3801
|
}
|
|
3632
3802
|
render() {
|
|
3633
|
-
return (h(Host, { key: '
|
|
3803
|
+
return (h(Host, { key: '2d04c94fe2a6de0c0fe17c1e2dcb99481d13336b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '3653be7880e5b896ae85e97ad709838732032f2d' }, this.arrow && (h("span", { key: '770f1727acf0ccb47e3940d034850df9fc3a6096', class: "arrow", ref: el => {
|
|
3634
3804
|
this.arrowRef = el;
|
|
3635
|
-
} })), h("slot", { key: '
|
|
3805
|
+
} })), h("slot", { key: 'b12e95d51accec79a08fda3970f3b46ba7147ed7' }))));
|
|
3636
3806
|
}
|
|
3637
3807
|
};
|
|
3638
3808
|
PostPopovercontainer.style = PostPopovercontainerStyle0;
|
|
@@ -3666,7 +3836,7 @@ const PostTogglebutton = class {
|
|
|
3666
3836
|
}
|
|
3667
3837
|
};
|
|
3668
3838
|
render() {
|
|
3669
|
-
return (h(Host, { key: '
|
|
3839
|
+
return (h(Host, { key: 'b8488abcad38f815ff6ccaef358bebee904512cd', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '6bc5745dca9c408c241ca1993a5d75ff94d3b444' })));
|
|
3670
3840
|
}
|
|
3671
3841
|
static get watchers() { return {
|
|
3672
3842
|
"toggled": ["validateToggled"]
|