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