@swisspost/design-system-components 9.0.0-next.17 → 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-6000ba84.js → package-1403e51d.js} +1 -1
- package/dist/cjs/{post-accordion-562d63d3.js → post-accordion-e84c9d23.js} +1 -1
- package/dist/cjs/{post-accordion-item-2b9a7c01.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-d9194b7f.js → post-avatar-7a8860df.js} +1 -1
- package/dist/cjs/post-avatar.cjs.entry.js +2 -2
- package/dist/cjs/{post-back-to-top-fa8d4e1d.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-3b91a695.js → post-banner-ecc46714.js} +3 -3
- package/dist/cjs/post-banner.cjs.entry.js +4 -4
- package/dist/cjs/{post-breadcrumb-839a2652.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-14a4dfc8.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-05be3759.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-a70591e7.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-e20f184b.js → post-menu-item-12639f7c.js} +2 -2
- package/dist/cjs/{post-popover-e398bdfb.js → post-popover-9569b144.js} +2 -2
- package/dist/cjs/post-popover.cjs.entry.js +2 -2
- package/dist/cjs/{post-rating-7aff1856.js → post-rating-5645cae4.js} +2 -2
- package/dist/cjs/post-rating.cjs.entry.js +2 -2
- package/dist/cjs/{post-tab-header-a2dbedd3.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-5be6d90e.js → post-tab-panel-ef3df53e.js} +2 -2
- package/dist/cjs/post-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/{post-tabs-c0ff849b.js → post-tabs-8f1e74d9.js} +2 -2
- package/dist/cjs/post-tabs.cjs.entry.js +2 -2
- package/dist/cjs/{post-tag-0d9d3036.js → post-tag-c353e30c.js} +2 -2
- package/dist/cjs/post-tag.cjs.entry.js +2 -2
- package/dist/cjs/{post-togglebutton-46c57375.js → post-togglebutton-8949d278.js} +341 -161
- package/dist/cjs/{post-tooltip-fd1b7b47.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 +13 -3
- 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 +2 -2
- package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.js +6 -6
- package/dist/collection/components/post-linkarea/post-linkarea.css +1 -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 +14 -4
- package/dist/components/post-icon2.js +41 -37
- package/dist/components/post-language-option2.js +2 -2
- package/dist/components/post-language-switch2.js +6 -6
- package/dist/components/post-linkarea2.js +12 -14
- 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 +71 -11
- 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-ae79061a.js → post-accordion-db14e23a.js} +1 -1
- package/dist/esm/{post-accordion-item-6aa9b5bd.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-2384ca3b.js → post-avatar-ccda94eb.js} +1 -1
- package/dist/esm/post-avatar.entry.js +2 -2
- package/dist/esm/{post-back-to-top-ec1c2754.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-c7b88ac2.js → post-banner-a24ccf11.js} +3 -3
- package/dist/esm/post-banner.entry.js +4 -4
- package/dist/esm/{post-breadcrumb-d48cb773.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-b63a2837.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-8f4daf1e.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-b4b75c94.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-d087d910.js → post-menu-item-b9af8b46.js} +2 -2
- package/dist/esm/{post-popover-a096ee08.js → post-popover-425eb5c9.js} +2 -2
- package/dist/esm/post-popover.entry.js +2 -2
- package/dist/esm/{post-rating-0ead6a2a.js → post-rating-4057a5b5.js} +2 -2
- package/dist/esm/post-rating.entry.js +2 -2
- package/dist/esm/{post-tab-header-e29d371b.js → post-tab-header-602eb0cb.js} +3 -3
- package/dist/esm/post-tab-header.entry.js +2 -2
- package/dist/esm/{post-tab-panel-57840a1a.js → post-tab-panel-fccea5b6.js} +2 -2
- package/dist/esm/post-tab-panel.entry.js +2 -2
- package/dist/esm/{post-tabs-70dfc43c.js → post-tabs-b9f41051.js} +2 -2
- package/dist/esm/post-tabs.entry.js +2 -2
- package/dist/esm/{post-tag-be1ad18d.js → post-tag-54b70906.js} +2 -2
- package/dist/esm/post-tag.entry.js +2 -2
- package/dist/esm/{post-togglebutton-8da6d613.js → post-togglebutton-f6746062.js} +341 -161
- package/dist/esm/{post-tooltip-cb549b9f.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-c3135c18.js → p-0d879e8b.js} +1 -1
- package/dist/post-components/{p-9b46c8f2.js → p-0f6fee8f.js} +1 -1
- package/dist/post-components/p-114bb8ba.js +1 -0
- package/dist/post-components/{p-fa65c799.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-16d20563.js → p-46accc5f.js} +1 -1
- package/dist/post-components/{p-f513fd5d.js → p-470c7464.js} +1 -1
- package/dist/post-components/{p-77eb06d0.js → p-509fc6e6.js} +1 -1
- package/dist/post-components/{p-7f09a864.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-49b69e0e.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-faaa4c0a.js → p-6651164c.js} +1 -1
- package/dist/post-components/p-7085e0e7.entry.js +1 -0
- package/dist/post-components/{p-904b3028.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-ce76e0bf.js → p-b27b7d03.js} +1 -1
- package/dist/post-components/{p-76bbd883.js → p-b8100b63.js} +1 -1
- package/dist/post-components/p-c48553bd.entry.js +1 -0
- package/dist/post-components/{p-26951eb6.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-baf06ea0.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 -1
- package/dist/types/components/post-language-switch/post-language-switch.d.ts +1 -1
- 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 +19 -10
- 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 +14 -4
- package/loaders/post-icon2.js +41 -37
- package/loaders/post-language-option.js +2 -2
- package/loaders/post-language-switch.js +6 -6
- package/loaders/post-linkarea.js +12 -14
- 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-199a2615.js +0 -32
- package/dist/esm/package-0d05729a.js +0 -3
- package/dist/esm/post-linkarea-d3ae37f9.js +0 -30
- package/dist/post-components/p-0ca3d16c.entry.js +0 -1
- package/dist/post-components/p-1a695d66.entry.js +0 -1
- package/dist/post-components/p-1eb54abb.entry.js +0 -1
- package/dist/post-components/p-2bcf91f6.entry.js +0 -1
- package/dist/post-components/p-3e94d076.entry.js +0 -1
- package/dist/post-components/p-3ef59370.entry.js +0 -1
- package/dist/post-components/p-3fdd351e.js +0 -1
- package/dist/post-components/p-413b656c.entry.js +0 -1
- package/dist/post-components/p-480169b9.js +0 -1
- package/dist/post-components/p-59373941.js +0 -1
- package/dist/post-components/p-78ae731e.js +0 -1
- package/dist/post-components/p-78b6020e.entry.js +0 -1
- package/dist/post-components/p-88c5e0bf.entry.js +0 -1
- package/dist/post-components/p-8c732622.entry.js +0 -1
- package/dist/post-components/p-8f2e8a63.entry.js +0 -1
- package/dist/post-components/p-9a5111ca.entry.js +0 -1
- package/dist/post-components/p-9ae6517d.entry.js +0 -1
- package/dist/post-components/p-a2806a35.js +0 -1
- package/dist/post-components/p-c6a239f2.entry.js +0 -1
- package/dist/post-components/p-ceb96aaa.js +0 -1
- package/dist/post-components/p-d2646369.entry.js +0 -1
- package/dist/post-components/p-debe5b2d.entry.js +0 -1
- package/dist/post-components/p-f2ed28e5.js +0 -1
- package/dist/post-components/p-f3c23d8c.entry.js +0 -1
- package/dist/post-components/p-f573860f.js +0 -1
- package/dist/post-components/p-facba41d.entry.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() {
|
|
@@ -346,7 +354,9 @@ const PostHeader = class {
|
|
|
346
354
|
}
|
|
347
355
|
switchLanguageSwitchMode() {
|
|
348
356
|
const variant = this.device === 'desktop' ? 'menu' : 'list';
|
|
349
|
-
this.host.
|
|
357
|
+
Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
|
|
358
|
+
languageSwitch?.setAttribute('variant', variant);
|
|
359
|
+
});
|
|
350
360
|
}
|
|
351
361
|
renderNavigation() {
|
|
352
362
|
const navigationClasses = ['navigation'];
|
|
@@ -356,7 +366,7 @@ const PostHeader = class {
|
|
|
356
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" })))));
|
|
357
367
|
}
|
|
358
368
|
render() {
|
|
359
|
-
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()));
|
|
360
370
|
}
|
|
361
371
|
static get watchers() { return {
|
|
362
372
|
"mobileMenuExtended": ["frozeBody"]
|
|
@@ -367,7 +377,7 @@ PostHeader.style = PostHeaderStyle0;
|
|
|
367
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)}}";
|
|
368
378
|
const PostIconStyle0 = postIconCss;
|
|
369
379
|
|
|
370
|
-
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/';
|
|
371
381
|
const ANIMATION_NAMES = [
|
|
372
382
|
'cylon',
|
|
373
383
|
'cylon-vertical',
|
|
@@ -388,6 +398,7 @@ const PostIcon = class {
|
|
|
388
398
|
this.rotate = null;
|
|
389
399
|
this.scale = null;
|
|
390
400
|
}
|
|
401
|
+
isSSR = typeof window === 'undefined';
|
|
391
402
|
get host() { return getElement(this); }
|
|
392
403
|
validateAnimation(newValue = this.animation) {
|
|
393
404
|
if (newValue !== undefined)
|
|
@@ -414,50 +425,53 @@ const PostIcon = class {
|
|
|
414
425
|
}
|
|
415
426
|
// Construct the icon url from different possible sources
|
|
416
427
|
getUrl() {
|
|
428
|
+
let url;
|
|
429
|
+
const file = `${this.name}.svg`;
|
|
417
430
|
// the first definition object which defines a domain, will be used to set the domain of the file url
|
|
418
431
|
// the first definition object which defines a slug, will be used to set the slug of the file url
|
|
419
|
-
const urlDefinitions = [
|
|
420
|
-
|
|
421
|
-
getUrlDefinition(document.head
|
|
432
|
+
const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
|
|
433
|
+
if (!this.isSSR) {
|
|
434
|
+
urlDefinitions.push(this.getUrlDefinition(document.head
|
|
422
435
|
.querySelector('meta[name="design-system-settings"][data-post-icon-base]')
|
|
423
|
-
?.getAttribute('data-post-icon-base'), 'relative')
|
|
424
|
-
getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both')
|
|
425
|
-
|
|
426
|
-
// in case no
|
|
427
|
-
const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin
|
|
428
|
-
// 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
|
|
429
442
|
const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
443
|
+
if (origin && slug) {
|
|
444
|
+
url = `${origin}${slug}${file}`;
|
|
445
|
+
}
|
|
446
|
+
else if (!origin && slug) {
|
|
447
|
+
url = `${slug}${file}`;
|
|
434
448
|
}
|
|
435
449
|
else {
|
|
436
|
-
url =
|
|
450
|
+
url = `${CDN_URL}${file}`;
|
|
437
451
|
}
|
|
438
452
|
return url;
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
function definesDomain(url) {
|
|
454
|
-
return url ? /^https?:\/\//.test(url) : false;
|
|
455
|
-
}
|
|
456
|
-
function definesSlug(url) {
|
|
457
|
-
const urlObject = getUrlObject(url);
|
|
458
|
-
return Boolean(/^\/.+/.test(urlObject?.pathname));
|
|
459
|
-
}
|
|
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');
|
|
460
465
|
}
|
|
466
|
+
else {
|
|
467
|
+
return null;
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
definesDomain(url) {
|
|
471
|
+
return url ? /^https?:\/\//.test(url) : false;
|
|
472
|
+
}
|
|
473
|
+
definesSlug(url) {
|
|
474
|
+
return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
|
|
461
475
|
}
|
|
462
476
|
getStyles() {
|
|
463
477
|
const url = this.getUrl();
|
|
@@ -480,7 +494,7 @@ const PostIcon = class {
|
|
|
480
494
|
this.validateAnimation();
|
|
481
495
|
}
|
|
482
496
|
render() {
|
|
483
|
-
return (h(Host, { key: '
|
|
497
|
+
return (h(Host, { key: '77c38a8fb35ceca1c5cf63fdd44fd9ab23aee62c', "data-version": version }, h("span", { key: 'cc8072420ff881f0d7531ae09bbafad992400296', style: this.getStyles() })));
|
|
484
498
|
}
|
|
485
499
|
static get watchers() { return {
|
|
486
500
|
"animation": ["validateAnimation"],
|
|
@@ -494,7 +508,7 @@ const PostIcon = class {
|
|
|
494
508
|
};
|
|
495
509
|
PostIcon.style = PostIconStyle0;
|
|
496
510
|
|
|
497
|
-
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)}";
|
|
498
512
|
const PostLanguageOptionStyle0 = postLanguageOptionCss;
|
|
499
513
|
|
|
500
514
|
const PostLanguageOption = class {
|
|
@@ -553,7 +567,7 @@ const PostLanguageOption = class {
|
|
|
553
567
|
this.emitChange();
|
|
554
568
|
}
|
|
555
569
|
};
|
|
556
|
-
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)))));
|
|
557
571
|
}
|
|
558
572
|
static get watchers() { return {
|
|
559
573
|
"code": ["validateCode"],
|
|
@@ -566,7 +580,7 @@ PostLanguageOption.style = PostLanguageOptionStyle0;
|
|
|
566
580
|
|
|
567
581
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
568
582
|
|
|
569
|
-
const postLanguageSwitchCss = ":host{display:flex
|
|
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}";
|
|
570
584
|
const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
|
|
571
585
|
|
|
572
586
|
const PostLanguageSwitch = class {
|
|
@@ -590,9 +604,9 @@ const PostLanguageSwitch = class {
|
|
|
590
604
|
connectedCallback() {
|
|
591
605
|
this.updateChildrenVariant();
|
|
592
606
|
// Get the active language based on children's active state
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
.getAttribute('code');
|
|
607
|
+
const activeLanguageOption = this.host.querySelector('post-language-option[active]:not([active="false"])');
|
|
608
|
+
if (activeLanguageOption)
|
|
609
|
+
this.activeLang = activeLanguageOption.getAttribute('code');
|
|
596
610
|
}
|
|
597
611
|
// Update post-language-option variant to have the correct style
|
|
598
612
|
updateChildrenVariant() {
|
|
@@ -628,10 +642,10 @@ const PostLanguageSwitch = class {
|
|
|
628
642
|
}
|
|
629
643
|
menuId = `p${nanoid(11)}`;
|
|
630
644
|
renderList() {
|
|
631
|
-
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))));
|
|
632
646
|
}
|
|
633
647
|
renderDropdown() {
|
|
634
|
-
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
|
|
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))));
|
|
635
649
|
}
|
|
636
650
|
render() {
|
|
637
651
|
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
@@ -667,11 +681,11 @@ const PostList = class {
|
|
|
667
681
|
}
|
|
668
682
|
checkTitle() {
|
|
669
683
|
if (!this.titleEl.textContent.trim()) {
|
|
670
|
-
|
|
684
|
+
console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
|
|
671
685
|
}
|
|
672
686
|
}
|
|
673
687
|
render() {
|
|
674
|
-
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" }))));
|
|
675
689
|
}
|
|
676
690
|
};
|
|
677
691
|
PostList.style = PostListStyle0;
|
|
@@ -725,19 +739,19 @@ const PostLogo = class {
|
|
|
725
739
|
};
|
|
726
740
|
PostLogo.style = PostLogoStyle0;
|
|
727
741
|
|
|
728
|
-
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)}}@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);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}}@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:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}}@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]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}}@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{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);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-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));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:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{height:var(--post-core-dimension-3)}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::after,post-mainnavigation post-megadropdown a:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}}@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-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));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:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}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{height:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}}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}";
|
|
729
743
|
const PostMainnavigationStyle0 = postMainnavigationCss;
|
|
730
744
|
|
|
731
745
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
732
746
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
733
|
-
const NAVIGATION_LIST_SELECTOR = 'post-list
|
|
734
|
-
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 *)';
|
|
735
749
|
const PostMainnavigation = class {
|
|
736
750
|
constructor(hostRef) {
|
|
737
751
|
registerInstance(this, hostRef);
|
|
738
752
|
this.canScrollLeft = false;
|
|
739
753
|
this.canScrollRight = false;
|
|
740
|
-
this.
|
|
754
|
+
this.translationAmount = 0;
|
|
741
755
|
}
|
|
742
756
|
header;
|
|
743
757
|
navbar;
|
|
@@ -758,7 +772,7 @@ const PostMainnavigation = class {
|
|
|
758
772
|
* Update navbar translation when 'translateAmount' changes and recalculate scrollability
|
|
759
773
|
*/
|
|
760
774
|
onTranslateAmountChanges(value) {
|
|
761
|
-
this.navbar.style.
|
|
775
|
+
this.navbar.style.marginInlineStart = `-${value}px`;
|
|
762
776
|
this.checkScrollability();
|
|
763
777
|
}
|
|
764
778
|
/**
|
|
@@ -778,11 +792,19 @@ const PostMainnavigation = class {
|
|
|
778
792
|
componentDidLoad() {
|
|
779
793
|
setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
|
|
780
794
|
this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
|
|
795
|
+
this.fixLayoutShift();
|
|
781
796
|
window.addEventListener('resize', // Recheck scrollability on window resize
|
|
782
797
|
throttle(100, () => this.checkScrollability()));
|
|
783
798
|
// Handle focus changes and adjust scroll as needed
|
|
784
799
|
this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
|
|
785
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
|
+
}
|
|
786
808
|
handleBackButtonClick() {
|
|
787
809
|
if (this.header)
|
|
788
810
|
this.header.toggleMobileMenu();
|
|
@@ -814,11 +836,11 @@ const PostMainnavigation = class {
|
|
|
814
836
|
this.canScrollLeft = this.canScrollRight = false;
|
|
815
837
|
}
|
|
816
838
|
else {
|
|
817
|
-
this.canScrollLeft = this.
|
|
818
|
-
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
|
|
819
841
|
}
|
|
820
842
|
if (couldScroll && !this.canScroll) {
|
|
821
|
-
this.withoutTransition(() => (this.
|
|
843
|
+
this.withoutTransition(() => (this.translationAmount = 0));
|
|
822
844
|
}
|
|
823
845
|
}
|
|
824
846
|
/**
|
|
@@ -854,40 +876,53 @@ const PostMainnavigation = class {
|
|
|
854
876
|
if (direction === 'left')
|
|
855
877
|
navigationItems.reverse();
|
|
856
878
|
for (const item of navigationItems) {
|
|
857
|
-
const couldScroll = direction === 'left' ? this.translateLeftTo(item) : this.translateRightTo(item);
|
|
879
|
+
const couldScroll = direction === 'left' ? this.translateLeftTo(item, true) : this.translateRightTo(item, true);
|
|
858
880
|
if (couldScroll)
|
|
859
881
|
break;
|
|
860
882
|
}
|
|
861
883
|
}
|
|
862
|
-
translateRightTo(navigationItem) {
|
|
863
|
-
const
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
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)
|
|
867
896
|
return false;
|
|
868
|
-
|
|
869
|
-
const
|
|
870
|
-
|
|
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);
|
|
871
904
|
return true;
|
|
872
905
|
}
|
|
873
|
-
translateLeftTo(navigationItem) {
|
|
874
|
-
const
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
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)
|
|
878
914
|
return false;
|
|
879
|
-
const
|
|
880
|
-
|
|
881
|
-
|
|
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);
|
|
882
924
|
return true;
|
|
883
925
|
}
|
|
884
|
-
/**
|
|
885
|
-
* Calculate the margin required for focus outline around navigation items
|
|
886
|
-
*/
|
|
887
|
-
getFocusMargin(navigationItem) {
|
|
888
|
-
const { outlineWidth, outlineOffset } = getComputedStyle(navigationItem);
|
|
889
|
-
return parseInt(outlineWidth) + parseInt(outlineOffset) + 1;
|
|
890
|
-
}
|
|
891
926
|
/**
|
|
892
927
|
* Returns the navigation list container element
|
|
893
928
|
*/
|
|
@@ -924,15 +959,15 @@ const PostMainnavigation = class {
|
|
|
924
959
|
});
|
|
925
960
|
}
|
|
926
961
|
render() {
|
|
927
|
-
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" })))));
|
|
928
963
|
}
|
|
929
964
|
static get watchers() { return {
|
|
930
|
-
"
|
|
965
|
+
"translationAmount": ["onTranslateAmountChanges"]
|
|
931
966
|
}; }
|
|
932
967
|
};
|
|
933
968
|
PostMainnavigation.style = PostMainnavigationStyle0;
|
|
934
969
|
|
|
935
|
-
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}}";
|
|
936
971
|
const PostMegadropdownStyle0 = postMegadropdownCss;
|
|
937
972
|
|
|
938
973
|
const PostMegadropdown = class {
|
|
@@ -951,11 +986,13 @@ const PostMegadropdown = class {
|
|
|
951
986
|
static activeDropdown = null;
|
|
952
987
|
/**
|
|
953
988
|
* Emits when the dropdown is shown or hidden.
|
|
954
|
-
* 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
|
|
955
992
|
**/
|
|
956
993
|
postToggleMegadropdown;
|
|
957
994
|
disconnectedCallback() {
|
|
958
|
-
this.
|
|
995
|
+
this.removeListeners();
|
|
959
996
|
if (PostMegadropdown.activeDropdown === this) {
|
|
960
997
|
PostMegadropdown.activeDropdown = null;
|
|
961
998
|
}
|
|
@@ -986,23 +1023,32 @@ const PostMegadropdown = class {
|
|
|
986
1023
|
this.animationClass = 'slide-in';
|
|
987
1024
|
}
|
|
988
1025
|
this.isVisible = true;
|
|
989
|
-
this.host.addEventListener('keydown', e => this.keyboardHandler(e));
|
|
990
1026
|
PostMegadropdown.activeDropdown = this;
|
|
991
|
-
this.postToggleMegadropdown.emit(this.isVisible);
|
|
992
|
-
|
|
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();
|
|
993
1035
|
}
|
|
994
1036
|
/**
|
|
995
1037
|
* Hides the dropdown with an animation.
|
|
996
1038
|
*/
|
|
997
|
-
async hide() {
|
|
1039
|
+
async hide(focusParent = true) {
|
|
1040
|
+
this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
|
|
998
1041
|
this.animationClass = 'slide-out';
|
|
999
|
-
|
|
1000
|
-
|
|
1042
|
+
}
|
|
1043
|
+
async focusFirst() {
|
|
1044
|
+
this.firstFocusableEl?.focus();
|
|
1001
1045
|
}
|
|
1002
1046
|
connectedCallback() {
|
|
1003
1047
|
this.header = this.host.closest('post-header');
|
|
1004
1048
|
if (this.header) {
|
|
1005
|
-
this.header.addEventListener('postUpdateDevice', (event) =>
|
|
1049
|
+
this.header.addEventListener('postUpdateDevice', (event) => {
|
|
1050
|
+
this.device = event.detail;
|
|
1051
|
+
});
|
|
1006
1052
|
}
|
|
1007
1053
|
}
|
|
1008
1054
|
/**
|
|
@@ -1011,15 +1057,15 @@ const PostMegadropdown = class {
|
|
|
1011
1057
|
forceClose() {
|
|
1012
1058
|
this.isVisible = false;
|
|
1013
1059
|
this.animationClass = null;
|
|
1014
|
-
this.postToggleMegadropdown.emit(this.isVisible);
|
|
1015
|
-
this.
|
|
1060
|
+
this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
|
|
1061
|
+
this.removeListeners();
|
|
1016
1062
|
}
|
|
1017
1063
|
handleAnimationEnd() {
|
|
1018
1064
|
if (this.animationClass === 'slide-out') {
|
|
1019
1065
|
this.isVisible = false;
|
|
1020
1066
|
this.animationClass = null;
|
|
1021
|
-
|
|
1022
|
-
this.
|
|
1067
|
+
PostMegadropdown.activeDropdown = null;
|
|
1068
|
+
this.removeListeners();
|
|
1023
1069
|
}
|
|
1024
1070
|
}
|
|
1025
1071
|
handleClickOutside = (event) => {
|
|
@@ -1036,12 +1082,16 @@ const PostMegadropdown = class {
|
|
|
1036
1082
|
}
|
|
1037
1083
|
}
|
|
1038
1084
|
}
|
|
1039
|
-
this.hide();
|
|
1085
|
+
this.hide(false);
|
|
1040
1086
|
};
|
|
1041
|
-
|
|
1087
|
+
addListeners() {
|
|
1088
|
+
this.host.addEventListener('keydown', e => this.keyboardHandler(e));
|
|
1089
|
+
document.addEventListener('keyup', e => this.handleTabOutside(e));
|
|
1042
1090
|
document.addEventListener('mousedown', this.handleClickOutside);
|
|
1043
1091
|
}
|
|
1044
|
-
|
|
1092
|
+
removeListeners() {
|
|
1093
|
+
this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
|
|
1094
|
+
document.removeEventListener('keyup', e => this.handleTabOutside(e));
|
|
1045
1095
|
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
1046
1096
|
}
|
|
1047
1097
|
getFocusableElements() {
|
|
@@ -1065,9 +1115,16 @@ const PostMegadropdown = class {
|
|
|
1065
1115
|
}
|
|
1066
1116
|
}
|
|
1067
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
|
+
}
|
|
1068
1125
|
render() {
|
|
1069
1126
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1070
|
-
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" }))))));
|
|
1071
1128
|
}
|
|
1072
1129
|
};
|
|
1073
1130
|
PostMegadropdown.style = PostMegadropdownStyle0;
|
|
@@ -1087,6 +1144,11 @@ const PostMegadropdownTrigger = class {
|
|
|
1087
1144
|
* Used to manage click and key events for mega dropdown control.
|
|
1088
1145
|
*/
|
|
1089
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;
|
|
1090
1152
|
/**
|
|
1091
1153
|
* Watch for changes to the `for` property to validate its type and ensure it is a string.
|
|
1092
1154
|
* @param forValue - The new value of the `for` property.
|
|
@@ -1108,12 +1170,28 @@ const PostMegadropdownTrigger = class {
|
|
|
1108
1170
|
console.warn(`No post-megadropdown found with ID: ${this.for}`);
|
|
1109
1171
|
}
|
|
1110
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
|
+
};
|
|
1111
1182
|
componentDidLoad() {
|
|
1112
1183
|
this.validateControlFor();
|
|
1113
1184
|
// Check if the mega dropdown attached to the trigger is expanded or not
|
|
1114
1185
|
document.addEventListener('postToggleMegadropdown', (event) => {
|
|
1115
1186
|
if (event.target.id === this.for) {
|
|
1116
|
-
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;
|
|
1117
1195
|
if (this.slottedButton) {
|
|
1118
1196
|
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
1119
1197
|
}
|
|
@@ -1125,13 +1203,14 @@ const PostMegadropdownTrigger = class {
|
|
|
1125
1203
|
this.slottedButton.addEventListener('click', () => {
|
|
1126
1204
|
this.handleToggle();
|
|
1127
1205
|
});
|
|
1206
|
+
this.slottedButton.addEventListener('keydown', this.handleKeyDown);
|
|
1128
1207
|
}
|
|
1129
1208
|
else {
|
|
1130
1209
|
console.warn('No button found within post-megadropdown-trigger');
|
|
1131
1210
|
}
|
|
1132
1211
|
}
|
|
1133
1212
|
render() {
|
|
1134
|
-
return (h(Host, { key: '
|
|
1213
|
+
return (h(Host, { key: '108c3703a2abb21bda4e907e3dfbbaf7a572ff0a', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd7ab70fef0db1dcaa908fdc75b8d751e94d04bb9' }, h("slot", { key: 'c2c4c633794da7777849bc1e6380e98a4bf0f1b5' }))));
|
|
1135
1214
|
}
|
|
1136
1215
|
static get watchers() { return {
|
|
1137
1216
|
"for": ["validateControlFor"]
|
|
@@ -1181,17 +1260,29 @@ const PostMenu = class {
|
|
|
1181
1260
|
this.popoverRef.addEventListener('postToggle', (event) => {
|
|
1182
1261
|
this.isVisible = event.detail;
|
|
1183
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
|
+
});
|
|
1184
1275
|
});
|
|
1185
1276
|
}
|
|
1186
1277
|
/**
|
|
1187
1278
|
* Toggles the menu visibility based on its current state.
|
|
1188
1279
|
*/
|
|
1189
1280
|
async toggle(target) {
|
|
1190
|
-
if (this.
|
|
1191
|
-
await this.
|
|
1281
|
+
if (this.popoverRef) {
|
|
1282
|
+
await this.popoverRef.toggle(target);
|
|
1192
1283
|
}
|
|
1193
1284
|
else {
|
|
1194
|
-
|
|
1285
|
+
console.error('toggle: popoverRef is null or undefined');
|
|
1195
1286
|
}
|
|
1196
1287
|
}
|
|
1197
1288
|
/**
|
|
@@ -1202,11 +1293,6 @@ const PostMenu = class {
|
|
|
1202
1293
|
async show(target) {
|
|
1203
1294
|
if (this.popoverRef) {
|
|
1204
1295
|
await this.popoverRef.show(target);
|
|
1205
|
-
this.lastFocusedElement = this.root.activeElement; // Use root's activeElement
|
|
1206
|
-
const menuItems = this.getSlottedItems();
|
|
1207
|
-
if (menuItems.length > 0) {
|
|
1208
|
-
menuItems[0].focus();
|
|
1209
|
-
}
|
|
1210
1296
|
}
|
|
1211
1297
|
else {
|
|
1212
1298
|
console.error('show: popoverRef is null or undefined');
|
|
@@ -1218,9 +1304,6 @@ const PostMenu = class {
|
|
|
1218
1304
|
async hide() {
|
|
1219
1305
|
if (this.popoverRef) {
|
|
1220
1306
|
await this.popoverRef.hide();
|
|
1221
|
-
if (this.lastFocusedElement) {
|
|
1222
|
-
this.lastFocusedElement.focus();
|
|
1223
|
-
}
|
|
1224
1307
|
}
|
|
1225
1308
|
else {
|
|
1226
1309
|
console.error('hide: popoverRef is null or undefined');
|
|
@@ -1264,10 +1347,10 @@ const PostMenu = class {
|
|
|
1264
1347
|
currentIndex = 0;
|
|
1265
1348
|
break;
|
|
1266
1349
|
case this.KEYCODES.END:
|
|
1350
|
+
e.preventDefault();
|
|
1267
1351
|
currentIndex = menuItems.length - 1;
|
|
1268
1352
|
break;
|
|
1269
1353
|
case this.KEYCODES.SPACE:
|
|
1270
|
-
case this.KEYCODES.ENTER:
|
|
1271
1354
|
this.toggle(this.host);
|
|
1272
1355
|
return;
|
|
1273
1356
|
case this.KEYCODES.TAB:
|
|
@@ -1290,7 +1373,7 @@ const PostMenu = class {
|
|
|
1290
1373
|
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
1291
1374
|
}
|
|
1292
1375
|
render() {
|
|
1293
|
-
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' })))));
|
|
1294
1377
|
}
|
|
1295
1378
|
};
|
|
1296
1379
|
PostMenu.style = PostMenuStyle0;
|
|
@@ -1323,11 +1406,8 @@ const PostMenuTrigger = class {
|
|
|
1323
1406
|
return ref && ref.localName === 'post-menu' ? ref : null;
|
|
1324
1407
|
}
|
|
1325
1408
|
handleToggle() {
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
this.ariaExpanded = !this.ariaExpanded;
|
|
1329
|
-
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
1330
|
-
menu.toggle(this.host);
|
|
1409
|
+
if (this.menu) {
|
|
1410
|
+
this.menu.toggle(this.host);
|
|
1331
1411
|
}
|
|
1332
1412
|
else {
|
|
1333
1413
|
console.warn(`No post-menu found with ID: ${this.for}`);
|
|
@@ -1339,8 +1419,10 @@ const PostMenuTrigger = class {
|
|
|
1339
1419
|
this.handleToggle();
|
|
1340
1420
|
}
|
|
1341
1421
|
};
|
|
1342
|
-
|
|
1422
|
+
connectedCallback() {
|
|
1343
1423
|
this.root = getRoot(this.host);
|
|
1424
|
+
}
|
|
1425
|
+
componentDidLoad() {
|
|
1344
1426
|
this.validateControlFor();
|
|
1345
1427
|
this.slottedButton = this.host.querySelector('button');
|
|
1346
1428
|
// Check if the slottedButton is within a web component
|
|
@@ -1355,6 +1437,13 @@ const PostMenuTrigger = class {
|
|
|
1355
1437
|
}
|
|
1356
1438
|
if (this.slottedButton) {
|
|
1357
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
|
+
}
|
|
1358
1447
|
this.slottedButton.addEventListener('click', () => {
|
|
1359
1448
|
this.handleToggle();
|
|
1360
1449
|
});
|
|
@@ -1365,7 +1454,7 @@ const PostMenuTrigger = class {
|
|
|
1365
1454
|
}
|
|
1366
1455
|
}
|
|
1367
1456
|
render() {
|
|
1368
|
-
return (h(Host, { key: '
|
|
1457
|
+
return (h(Host, { key: '39bea077fd4d85f442b7b1d56969a203c470a269', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9f7777a4167cdfbf9f1ab2dfe7c3d6e759c8a83b' })));
|
|
1369
1458
|
}
|
|
1370
1459
|
static get watchers() { return {
|
|
1371
1460
|
"for": ["validateControlFor"]
|
|
@@ -3475,15 +3564,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
3475
3564
|
}
|
|
3476
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();})();
|
|
3477
3566
|
|
|
3478
|
-
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)}";
|
|
3479
3568
|
const PostPopovercontainerStyle0 = postPopovercontainerCss;
|
|
3480
3569
|
|
|
3481
|
-
const SIDE_MAP = {
|
|
3482
|
-
top: 'bottom',
|
|
3483
|
-
right: 'left',
|
|
3484
|
-
bottom: 'top',
|
|
3485
|
-
left: 'right',
|
|
3486
|
-
};
|
|
3487
3570
|
const PostPopovercontainer = class {
|
|
3488
3571
|
constructor(hostRef) {
|
|
3489
3572
|
registerInstance(this, hostRef);
|
|
@@ -3492,7 +3575,28 @@ const PostPopovercontainer = class {
|
|
|
3492
3575
|
this.placement = 'top';
|
|
3493
3576
|
this.edgeGap = 8;
|
|
3494
3577
|
this.arrow = false;
|
|
3578
|
+
this.safeSpace = undefined;
|
|
3495
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
|
+
];
|
|
3496
3600
|
get host() { return getElement(this); }
|
|
3497
3601
|
arrowRef;
|
|
3498
3602
|
eventTarget;
|
|
@@ -3502,12 +3606,22 @@ const PostPopovercontainer = class {
|
|
|
3502
3606
|
* Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
|
|
3503
3607
|
*/
|
|
3504
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
|
+
}
|
|
3505
3618
|
componentDidLoad() {
|
|
3506
3619
|
this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
3507
3620
|
}
|
|
3508
3621
|
disconnectedCallback() {
|
|
3509
|
-
if (typeof this.clearAutoUpdate === 'function')
|
|
3622
|
+
if (typeof this.clearAutoUpdate === 'function') {
|
|
3510
3623
|
this.clearAutoUpdate();
|
|
3624
|
+
}
|
|
3511
3625
|
}
|
|
3512
3626
|
/**
|
|
3513
3627
|
* Programmatically display the tooltip
|
|
@@ -3542,7 +3656,7 @@ const PostPopovercontainer = class {
|
|
|
3542
3656
|
this.host.togglePopover(force);
|
|
3543
3657
|
this.toggleTimeoutId = null;
|
|
3544
3658
|
}
|
|
3545
|
-
return this.host.matches(':where(:popover-open, .popover-open');
|
|
3659
|
+
return this.host.matches(':where(:popover-open, .popover-open)');
|
|
3546
3660
|
}
|
|
3547
3661
|
/**
|
|
3548
3662
|
* Start or stop auto updates based on tooltip events.
|
|
@@ -3555,10 +3669,14 @@ const PostPopovercontainer = class {
|
|
|
3555
3669
|
const isOpen = e.newState === 'open';
|
|
3556
3670
|
if (isOpen) {
|
|
3557
3671
|
this.startAutoupdates();
|
|
3672
|
+
if (this.safeSpace)
|
|
3673
|
+
window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
3558
3674
|
}
|
|
3559
3675
|
else {
|
|
3560
3676
|
if (typeof this.clearAutoUpdate === 'function')
|
|
3561
3677
|
this.clearAutoUpdate();
|
|
3678
|
+
if (this.safeSpace)
|
|
3679
|
+
window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
|
|
3562
3680
|
}
|
|
3563
3681
|
this.postToggle.emit(isOpen);
|
|
3564
3682
|
}
|
|
@@ -3570,14 +3688,35 @@ const PostPopovercontainer = class {
|
|
|
3570
3688
|
this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
|
|
3571
3689
|
}
|
|
3572
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() {
|
|
3573
3714
|
const gap = this.edgeGap;
|
|
3574
3715
|
const middleware = [
|
|
3575
3716
|
flip(),
|
|
3576
3717
|
inline(),
|
|
3577
3718
|
shift({
|
|
3578
3719
|
padding: gap,
|
|
3579
|
-
// Prevents shifting away from the anchor too far, while shifting as far as possible
|
|
3580
|
-
// https://floating-ui.com/docs/shift#limiter
|
|
3581
3720
|
limiter: limitShift({
|
|
3582
3721
|
offset: 32,
|
|
3583
3722
|
}),
|
|
@@ -3589,40 +3728,81 @@ const PostPopovercontainer = class {
|
|
|
3589
3728
|
});
|
|
3590
3729
|
},
|
|
3591
3730
|
}),
|
|
3592
|
-
offset(this.arrow ? gap + 4 : gap),
|
|
3731
|
+
offset(this.arrow ? gap + 4 : gap),
|
|
3593
3732
|
];
|
|
3594
3733
|
if (this.arrow) {
|
|
3595
3734
|
middleware.push(arrow({ element: this.arrowRef, padding: gap }));
|
|
3596
3735
|
}
|
|
3597
|
-
|
|
3736
|
+
return computePosition(this.eventTarget, this.host, {
|
|
3598
3737
|
placement: this.placement || 'top',
|
|
3599
3738
|
strategy: 'fixed',
|
|
3600
3739
|
middleware,
|
|
3601
3740
|
});
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
this.
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
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`);
|
|
3620
3800
|
}
|
|
3621
3801
|
}
|
|
3622
3802
|
render() {
|
|
3623
|
-
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 => {
|
|
3624
3804
|
this.arrowRef = el;
|
|
3625
|
-
} })), h("slot", { key: '
|
|
3805
|
+
} })), h("slot", { key: 'b12e95d51accec79a08fda3970f3b46ba7147ed7' }))));
|
|
3626
3806
|
}
|
|
3627
3807
|
};
|
|
3628
3808
|
PostPopovercontainer.style = PostPopovercontainerStyle0;
|
|
@@ -3656,7 +3836,7 @@ const PostTogglebutton = class {
|
|
|
3656
3836
|
}
|
|
3657
3837
|
};
|
|
3658
3838
|
render() {
|
|
3659
|
-
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' })));
|
|
3660
3840
|
}
|
|
3661
3841
|
static get watchers() { return {
|
|
3662
3842
|
"toggled": ["validateToggled"]
|