@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37
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/.config/bindings.angular.js +4 -0
- package/dist/cjs/breakpoints-cdf1b747.js +59 -0
- package/dist/cjs/check-non-empty-bd99d236.js +15 -0
- package/dist/cjs/check-one-of-75d270b5.js +13 -0
- package/dist/cjs/check-type-cdbf6d29.js +21 -0
- package/dist/cjs/check-url-220a286c.js +19 -0
- package/dist/cjs/event-guard-efabc84f.js +47 -0
- package/dist/cjs/fade-72d5ef55.js +14 -0
- package/dist/cjs/get-root-8102fecd.js +17 -0
- package/dist/cjs/index-23e36ff7.js +37 -0
- package/dist/cjs/{index-010dc207.js → index-b60129c4.js} +17 -10
- package/dist/cjs/index.browser-4af21c17.js +16 -0
- package/dist/cjs/index.cjs.js +36 -31
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/long-press-event-6e62d113.js +266 -0
- package/dist/cjs/{package-8e810a59.js → package-8121f093.js} +1 -1
- package/dist/cjs/{post-accordion-b9df8522.js → post-accordion-beac7c9f.js} +11 -12
- package/dist/cjs/post-accordion-item-4846fbee.js +64 -0
- package/dist/cjs/post-accordion-item.cjs.entry.js +10 -7
- package/dist/cjs/post-accordion.cjs.entry.js +6 -4
- package/dist/cjs/{post-avatar-f7236084.js → post-avatar-a36991fb.js} +10 -13
- package/dist/cjs/post-avatar.cjs.entry.js +5 -4
- package/dist/cjs/post-back-to-top-32aa9017.js +96 -0
- package/dist/cjs/post-back-to-top.cjs.entry.js +7 -6
- package/dist/cjs/post-banner-be0e8909.js +92 -0
- package/dist/cjs/post-banner.cjs.entry.js +11 -9
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +8 -7
- package/dist/cjs/post-breadcrumbs-6ef82a41.js +120 -0
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +13 -0
- package/dist/cjs/post-card-control-fe919333.js +269 -0
- package/dist/cjs/post-card-control.cjs.entry.js +6 -5
- package/dist/cjs/post-closebutton_15.cjs.entry.js +13 -10
- package/dist/cjs/{post-collapsible-trigger-143cf84a.js → post-collapsible-trigger-f42be607.js} +59 -60
- package/dist/cjs/post-collapsible_2.cjs.entry.js +11 -10
- package/dist/cjs/post-components.cjs.js +2 -2
- package/dist/cjs/{post-footer-5f7fdf96.js → post-footer-5179aa17.js} +11 -57
- package/dist/cjs/post-footer.cjs.entry.js +4 -3
- package/dist/cjs/post-linkarea-27125078.js +30 -0
- package/dist/cjs/post-linkarea.cjs.entry.js +11 -0
- package/dist/cjs/{post-menu-item-bb0b0b9e.js → post-menu-item-d78a9121.js} +11 -17
- package/dist/cjs/post-popover-feb1e773.js +135 -0
- package/dist/cjs/post-popover.cjs.entry.js +4 -4
- package/dist/cjs/{post-rating-1082197c.js → post-rating-6d153a2c.js} +4 -4
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-header-e4532918.js +34 -0
- package/dist/cjs/post-tab-header.cjs.entry.js +6 -4
- package/dist/cjs/{post-tab-panel-60f211a5.js → post-tab-panel-40df21ad.js} +5 -4
- package/dist/cjs/post-tab-panel.cjs.entry.js +4 -3
- package/dist/cjs/{post-tabs-1f797ce4.js → post-tabs-45db2696.js} +13 -15
- package/dist/cjs/post-tabs.cjs.entry.js +5 -4
- package/dist/cjs/post-tag-0967bb1e.js +47 -0
- package/dist/cjs/post-tag.cjs.entry.js +3 -3
- package/dist/cjs/post-togglebutton-42b7d166.js +4494 -0
- package/dist/cjs/post-tooltip-f833d51d.js +73 -0
- package/dist/cjs/{post-tooltip-38c839a4.js → post-tooltip-trigger-3ceac010.js} +143 -456
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +13 -0
- package/dist/cjs/post-tooltip.cjs.entry.js +5 -9
- package/dist/cjs/{slide-5d51abe8.js → slide-cd1f09b3.js} +8 -8
- package/dist/collection/animations/collapse.js +8 -6
- package/dist/collection/animations/fade.js +6 -2
- package/dist/collection/animations/slide.js +8 -8
- package/dist/collection/collection-manifest.json +5 -3
- package/dist/collection/components/post-accordion/post-accordion.css +1 -1
- package/dist/collection/components/post-accordion/post-accordion.js +6 -8
- package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
- package/dist/collection/components/post-accordion-item/post-accordion-item.js +12 -12
- package/dist/collection/components/post-avatar/post-avatar.css +1 -3
- package/dist/collection/components/post-avatar/post-avatar.js +7 -11
- package/dist/collection/components/post-back-to-top/post-back-to-top.css +1 -1
- package/dist/collection/components/post-back-to-top/post-back-to-top.js +38 -18
- package/dist/collection/components/post-banner/post-banner.css +1 -3
- package/dist/collection/components/post-banner/post-banner.js +13 -12
- package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +11 -8
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -0
- package/dist/collection/components/{post-breadcrumb/post-breadcrumb.js → post-breadcrumbs/post-breadcrumbs.js} +20 -21
- package/dist/collection/components/post-card-control/post-card-control.css +1 -3
- package/dist/collection/components/post-card-control/post-card-control.js +15 -19
- package/dist/collection/components/post-closebutton/post-closebutton.css +1 -0
- package/dist/collection/components/post-closebutton/post-closebutton.js +12 -1
- package/dist/collection/components/post-collapsible/post-collapsible.css +1 -1
- package/dist/collection/components/post-collapsible/post-collapsible.js +3 -2
- package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +43 -45
- package/dist/collection/components/post-footer/post-footer.js +8 -8
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +212 -52
- package/dist/collection/components/post-icon/post-icon.css +1 -1
- package/dist/collection/components/post-icon/post-icon.js +71 -29
- package/dist/collection/components/post-language-option/post-language-option.css +1 -3
- package/dist/collection/components/post-language-option/post-language-option.js +34 -12
- package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.js +56 -33
- package/dist/collection/components/post-language-switch/switch-variants.js +1 -1
- package/dist/collection/components/post-linkarea/post-linkarea.css +1 -0
- package/dist/collection/components/post-linkarea/post-linkarea.js +30 -0
- package/dist/collection/components/post-list/post-list.css +1 -3
- package/dist/collection/components/post-list/post-list.js +4 -3
- package/dist/collection/components/post-list-item/post-list-item.js +2 -1
- package/dist/collection/components/post-logo/post-logo.css +1 -1
- package/dist/collection/components/post-logo/post-logo.js +2 -2
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +157 -25
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +179 -55
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css +1 -1
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +41 -12
- package/dist/collection/components/post-menu/post-menu.css +1 -3
- package/dist/collection/components/post-menu/post-menu.js +44 -30
- package/dist/collection/components/post-menu-item/post-menu-item.js +1 -13
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +16 -10
- package/dist/collection/components/post-popover/post-popover.css +1 -3
- package/dist/collection/components/post-popover/post-popover.js +23 -16
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +217 -56
- package/dist/collection/components/post-rating/post-rating.css +1 -3
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.css +1 -3
- package/dist/collection/components/post-tab-header/post-tab-header.js +6 -5
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +4 -3
- package/dist/collection/components/post-tabs/post-tabs.css +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +6 -14
- package/dist/collection/components/post-tag/post-tag.css +1 -3
- package/dist/collection/components/post-tag/post-tag.js +2 -2
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +3 -3
- package/dist/collection/components/post-tooltip/post-tooltip.css +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +62 -212
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.css +1 -0
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +230 -0
- package/dist/collection/index.js +3 -1
- package/dist/collection/utils/attribute-observer.js +6 -5
- package/dist/collection/utils/breakpoints.js +21 -15
- package/dist/collection/utils/component-on-ready.js +4 -4
- package/dist/collection/utils/debounce.js +2 -1
- package/dist/collection/utils/environment.js +2 -0
- package/dist/collection/utils/event-guard.js +43 -0
- package/dist/collection/utils/{is-focusable.js → get-focusable-children.js} +10 -3
- package/dist/collection/utils/get-root.js +6 -1
- package/dist/collection/utils/index.js +5 -0
- package/dist/collection/utils/is-motion-reduced.js +2 -1
- package/dist/collection/utils/property-checkers/check-non-empty.js +6 -2
- package/dist/collection/utils/property-checkers/check-one-of.js +8 -3
- package/dist/collection/utils/property-checkers/check-pattern.js +8 -3
- package/dist/collection/utils/property-checkers/check-type.js +11 -6
- package/dist/collection/utils/property-checkers/check-url.js +11 -6
- package/dist/collection/utils/property-checkers/empty-or.js +5 -2
- package/dist/collection/utils/sass-export.js +8 -5
- package/dist/components/breakpoints.js +56 -0
- package/dist/components/check-non-empty.js +6 -2
- package/dist/components/check-one-of.js +8 -3
- package/dist/components/check-type.js +11 -6
- package/dist/components/event-guard.js +45 -0
- package/dist/components/fade.js +6 -2
- package/dist/components/get-focusable-children.js +35 -0
- package/dist/components/get-root.js +7 -1
- package/dist/components/index.browser.js +14 -0
- package/dist/components/index.js +3 -1
- package/dist/components/index2.js +24 -11
- package/dist/components/long-press-event.js +264 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-accordion-item2.js +14 -13
- package/dist/components/post-accordion2.js +8 -9
- package/dist/components/post-avatar2.js +8 -11
- package/dist/components/post-back-to-top2.js +41 -20
- package/dist/components/post-banner2.js +15 -13
- package/dist/components/post-breadcrumb-item2.js +9 -9
- package/dist/components/post-breadcrumbs.d.ts +11 -0
- package/dist/components/post-breadcrumbs.js +6 -0
- package/dist/components/post-breadcrumbs2.js +177 -0
- package/dist/components/post-card-control2.js +16 -19
- package/dist/components/post-closebutton2.js +7 -2
- package/dist/components/post-collapsible-trigger2.js +46 -48
- package/dist/components/post-collapsible2.js +13 -10
- package/dist/components/post-footer2.js +8 -54
- package/dist/components/post-header2.js +174 -51
- package/dist/components/post-icon2.js +72 -29
- package/dist/components/post-language-option2.js +21 -12
- package/dist/components/post-language-switch2.js +44 -45
- package/dist/components/{post-breadcrumb.d.ts → post-linkarea.d.ts} +4 -4
- package/dist/components/post-linkarea.js +6 -0
- package/dist/components/post-linkarea2.js +43 -0
- package/dist/components/post-list-item2.js +2 -1
- package/dist/components/post-list2.js +5 -4
- package/dist/components/post-logo2.js +4 -3
- package/dist/components/post-mainnavigation2.js +150 -15
- package/dist/components/post-megadropdown-trigger2.js +43 -13
- package/dist/components/post-megadropdown2.js +136 -39
- package/dist/components/post-menu-item2.js +2 -8
- package/dist/components/post-menu-trigger2.js +17 -10
- package/dist/components/post-menu2.js +43 -54
- package/dist/components/post-popover2.js +46 -15
- package/dist/components/post-popovercontainer2.js +921 -111
- package/dist/components/post-rating2.js +2 -2
- package/dist/components/post-tab-header2.js +8 -6
- package/dist/components/post-tab-panel2.js +4 -3
- package/dist/components/post-tabs2.js +10 -12
- package/dist/components/post-tag2.js +2 -2
- package/dist/components/post-togglebutton2.js +4 -3
- package/dist/components/post-tooltip-trigger.d.ts +11 -0
- package/dist/components/post-tooltip-trigger.js +6 -0
- package/dist/components/post-tooltip-trigger2.js +4705 -0
- package/dist/components/post-tooltip2.js +34 -4960
- package/dist/components/slide.js +9 -9
- package/dist/docs.json +567 -252
- package/dist/esm/breakpoints-7812702e.js +56 -0
- package/dist/esm/check-non-empty-258a56b3.js +13 -0
- package/dist/esm/check-one-of-0bee20f5.js +11 -0
- package/dist/esm/check-type-37d5d307.js +19 -0
- package/dist/esm/check-url-17962bc8.js +17 -0
- package/dist/esm/event-guard-538ee077.js +45 -0
- package/dist/esm/fade-1f3cacf4.js +11 -0
- package/dist/esm/get-root-1b1af46f.js +15 -0
- package/dist/esm/index-8f8fe5b0.js +32 -0
- package/dist/esm/{index-fb8d6be7.js → index-f4d19816.js} +17 -10
- package/dist/esm/index.browser-ff103197.js +14 -0
- package/dist/esm/index.js +33 -30
- package/dist/esm/loader.js +3 -3
- package/dist/esm/long-press-event-04d24397.js +264 -0
- package/dist/esm/package-d9237b44.js +3 -0
- package/dist/esm/{post-accordion-ee54a3ef.js → post-accordion-fdcf7205.js} +11 -12
- package/dist/esm/post-accordion-item-e11e3804.js +62 -0
- package/dist/esm/post-accordion-item.entry.js +10 -7
- package/dist/esm/post-accordion.entry.js +6 -4
- package/dist/esm/{post-avatar-5572fa73.js → post-avatar-d360c6d2.js} +10 -13
- package/dist/esm/post-avatar.entry.js +5 -4
- package/dist/esm/post-back-to-top-85796c8b.js +94 -0
- package/dist/esm/post-back-to-top.entry.js +7 -6
- package/dist/esm/post-banner-a3090f67.js +90 -0
- package/dist/esm/post-banner.entry.js +11 -9
- package/dist/esm/post-breadcrumb-item_2.entry.js +8 -7
- package/dist/esm/post-breadcrumbs-15ec5a26.js +118 -0
- package/dist/esm/post-breadcrumbs.entry.js +5 -0
- package/dist/esm/post-card-control-6142534e.js +267 -0
- package/dist/esm/post-card-control.entry.js +6 -5
- package/dist/esm/post-closebutton_15.entry.js +13 -10
- package/dist/esm/{post-collapsible-trigger-1c7833f8.js → post-collapsible-trigger-68306358.js} +59 -60
- package/dist/esm/post-collapsible_2.entry.js +11 -10
- package/dist/esm/post-components.js +3 -3
- package/dist/esm/{post-footer-b18875e7.js → post-footer-d2a3270e.js} +10 -56
- package/dist/esm/post-footer.entry.js +4 -3
- package/dist/esm/post-linkarea-64998c67.js +28 -0
- package/dist/esm/post-linkarea.entry.js +3 -0
- package/dist/esm/{post-menu-item-2906384b.js → post-menu-item-95a0a647.js} +11 -17
- package/dist/esm/post-popover-c5f81087.js +133 -0
- package/dist/esm/post-popover.entry.js +4 -4
- package/dist/esm/{post-rating-95cbdbb8.js → post-rating-7bfedafb.js} +4 -4
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/post-tab-header-08033da4.js +32 -0
- package/dist/esm/post-tab-header.entry.js +6 -4
- package/dist/esm/{post-tab-panel-cafd9e04.js → post-tab-panel-be701793.js} +5 -4
- package/dist/esm/post-tab-panel.entry.js +4 -3
- package/dist/esm/{post-tabs-beef8eae.js → post-tabs-c69e2842.js} +13 -15
- package/dist/esm/post-tabs.entry.js +5 -4
- package/dist/esm/post-tag-ebac7f3e.js +45 -0
- package/dist/esm/post-tag.entry.js +3 -3
- package/dist/esm/post-togglebutton-706e3af0.js +4478 -0
- package/dist/esm/post-tooltip-9a195d47.js +71 -0
- package/dist/esm/{post-tooltip-b298039a.js → post-tooltip-trigger-7d6f234b.js} +143 -456
- package/dist/esm/post-tooltip-trigger.entry.js +5 -0
- package/dist/esm/post-tooltip.entry.js +5 -9
- package/dist/esm/{slide-3422b8a3.js → slide-cd2850ee.js} +9 -9
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-034715ec.js +1 -0
- package/dist/post-components/p-0717fe4c.js +1 -0
- package/dist/post-components/p-0889c759.js +1 -0
- package/dist/post-components/p-0c03547b.js +1 -0
- package/dist/post-components/p-0de8d05f.js +1 -0
- package/dist/post-components/p-1373a79b.entry.js +1 -0
- package/dist/post-components/{p-4f9746f6.js → p-17dc4170.js} +2 -9
- package/dist/post-components/p-181c73d5.js +1 -0
- package/dist/post-components/p-1a21fd8d.js +1 -0
- package/dist/post-components/p-1ab3eba4.entry.js +1 -0
- package/dist/post-components/p-2d6c0670.js +1 -0
- package/dist/post-components/p-2dc0a2d0.js +1 -0
- package/dist/post-components/p-35ad2e11.entry.js +1 -0
- package/dist/post-components/p-368c473a.js +1 -0
- package/dist/post-components/p-38f778a7.entry.js +1 -0
- package/dist/post-components/p-39a8df3c.entry.js +1 -0
- package/dist/post-components/p-3c7f6003.js +1 -0
- package/dist/post-components/p-474a41bc.entry.js +1 -0
- package/dist/post-components/p-64e3de38.js +1 -0
- package/dist/post-components/p-69bc8eaf.entry.js +1 -0
- package/dist/post-components/p-6b31a76a.js +1 -0
- package/dist/post-components/p-722ffaae.js +1 -0
- package/dist/post-components/p-72310bf0.entry.js +1 -0
- package/dist/post-components/p-7709c14a.js +1 -0
- package/dist/post-components/p-804b61b7.entry.js +1 -0
- package/dist/post-components/p-85fdc2d3.js +1 -0
- package/dist/post-components/p-89247caa.js +1 -0
- package/dist/post-components/p-89dc67c7.entry.js +1 -0
- package/dist/post-components/p-8db32dab.js +8 -0
- package/dist/post-components/p-8f7f5200.entry.js +1 -0
- package/dist/post-components/p-964f9581.js +1 -0
- package/dist/post-components/p-9b052461.js +1 -0
- package/dist/post-components/{p-c0ae9886.js → p-9e461613.js} +2 -2
- package/dist/post-components/p-a52b2d34.js +1 -0
- package/dist/post-components/p-ab566526.js +1 -0
- package/dist/post-components/p-b648e537.entry.js +1 -0
- package/dist/post-components/p-bc33a6d9.js +1 -0
- package/dist/post-components/p-bcfdbd0b.entry.js +1 -0
- package/dist/post-components/p-beb67979.js +1 -0
- package/dist/post-components/p-c41868b1.js +1 -0
- package/dist/post-components/p-c65f32b0.js +1 -0
- package/dist/post-components/p-c71700a7.js +1 -0
- package/dist/post-components/p-cb027003.js +1 -0
- package/dist/post-components/p-cc5b1437.js +1 -0
- package/dist/post-components/p-ceda889e.entry.js +1 -0
- package/dist/post-components/p-d45df336.js +1 -0
- package/dist/post-components/p-de4d4274.js +1 -0
- package/dist/post-components/p-deb9efcf.entry.js +1 -0
- package/dist/post-components/p-e585c6fe.js +1 -0
- package/dist/post-components/p-e9f1cc46.entry.js +1 -0
- package/dist/post-components/p-ee4e776d.entry.js +1 -0
- package/dist/post-components/p-ee7c3bcc.entry.js +1 -0
- package/dist/post-components/p-f56482fa.entry.js +1 -0
- package/dist/post-components/p-f8c652ce.entry.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/animations/collapse.d.ts +2 -2
- package/dist/types/animations/fade.d.ts +2 -2
- package/dist/types/animations/slide.d.ts +2 -2
- package/dist/types/components/post-accordion-item/post-accordion-item.d.ts +1 -1
- package/dist/types/components/post-avatar/post-avatar.d.ts +1 -1
- package/dist/types/components/post-back-to-top/post-back-to-top.d.ts +4 -2
- package/dist/types/components/post-banner/post-banner.d.ts +5 -5
- package/dist/types/components/post-breadcrumb-item/post-breadcrumb-item.d.ts +4 -0
- package/dist/types/components/{post-breadcrumb/post-breadcrumb.d.ts → post-breadcrumbs/post-breadcrumbs.d.ts} +4 -4
- package/dist/types/components/post-card-control/post-card-control.d.ts +3 -3
- package/dist/types/components/post-collapsible-trigger/post-collapsible-trigger.d.ts +9 -14
- package/dist/types/components/post-footer/post-footer.d.ts +2 -2
- package/dist/types/components/post-header/post-header.d.ts +38 -10
- package/dist/types/components/post-icon/post-icon.d.ts +11 -7
- package/dist/types/components/post-language-option/post-language-option.d.ts +9 -5
- package/dist/types/components/post-language-switch/post-language-switch.d.ts +16 -8
- package/dist/types/components/post-language-switch/switch-variants.d.ts +1 -1
- package/dist/types/components/post-linkarea/post-linkarea.d.ts +5 -0
- package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +36 -9
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +37 -13
- package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts +9 -1
- package/dist/types/components/post-menu/post-menu.d.ts +4 -3
- package/dist/types/components/post-menu-item/post-menu-item.d.ts +0 -1
- package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts +4 -3
- package/dist/types/components/post-popover/post-popover.d.ts +6 -4
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +40 -14
- package/dist/types/components/post-tab-header/post-tab-header.d.ts +1 -1
- package/dist/types/components/post-tabs/post-tabs.d.ts +1 -1
- package/dist/types/components/post-tag/post-tag.d.ts +1 -1
- package/dist/types/components/post-togglebutton/post-togglebutton.d.ts +1 -1
- package/dist/types/components/post-tooltip/post-tooltip.d.ts +21 -34
- package/dist/types/components/post-tooltip-trigger/post-tooltip-trigger.d.ts +46 -0
- package/dist/types/components.d.ts +181 -94
- package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/.config/bindings.angular.d.ts +2 -0
- package/dist/types/index.d.ts +5 -3
- package/dist/types/popover-fn.d.ts +11 -0
- package/dist/types/utils/attribute-observer.d.ts +1 -1
- package/dist/types/utils/breakpoints.d.ts +1 -0
- package/dist/types/utils/component-on-ready.d.ts +1 -1
- package/dist/types/utils/environment.d.ts +2 -0
- package/dist/types/utils/event-guard.d.ts +4 -0
- package/dist/types/utils/get-focusable-children.d.ts +1 -0
- package/dist/types/utils/get-root.d.ts +5 -1
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils/property-checkers/check-non-empty.d.ts +3 -1
- package/dist/types/utils/property-checkers/check-one-of.d.ts +3 -1
- package/dist/types/utils/property-checkers/check-pattern.d.ts +3 -1
- package/dist/types/utils/property-checkers/check-type.d.ts +3 -1
- package/dist/types/utils/property-checkers/check-url.d.ts +3 -1
- package/dist/types/utils/property-checkers/index.d.ts +12 -4
- package/dist/types/utils/sass-export.d.ts +5 -1
- package/loaders/breakpoints.js +56 -0
- package/loaders/check-non-empty.js +6 -2
- package/loaders/check-one-of.js +8 -3
- package/loaders/check-type.js +11 -6
- package/loaders/event-guard.js +45 -0
- package/loaders/fade.js +6 -2
- package/loaders/get-focusable-children.js +35 -0
- package/loaders/get-root.js +7 -1
- package/loaders/index.browser.js +14 -0
- package/loaders/index.d.ts +6 -2
- package/loaders/index.js +8 -5
- package/loaders/index2.js +25 -12
- package/loaders/long-press-event.js +264 -0
- package/loaders/package.js +1 -1
- package/loaders/post-accordion-item2.js +15 -14
- package/loaders/post-accordion.js +8 -9
- package/loaders/post-avatar.js +8 -11
- package/loaders/post-back-to-top.js +41 -20
- package/loaders/post-banner.js +16 -14
- package/loaders/post-breadcrumb-item2.js +9 -9
- package/loaders/post-breadcrumbs.d.ts +11 -0
- package/loaders/post-breadcrumbs.js +180 -0
- package/loaders/post-card-control.js +16 -19
- package/loaders/post-closebutton.js +7 -2
- package/loaders/post-collapsible-trigger2.js +46 -48
- package/loaders/post-collapsible2.js +14 -11
- package/loaders/post-footer.js +8 -54
- package/loaders/post-header.js +174 -51
- package/loaders/post-icon2.js +73 -30
- package/loaders/post-language-option.js +22 -13
- package/loaders/post-language-switch.js +45 -46
- package/loaders/{post-breadcrumb.d.ts → post-linkarea.d.ts} +4 -4
- package/loaders/post-linkarea.js +46 -0
- package/loaders/post-list-item.js +2 -1
- package/loaders/post-list.js +5 -4
- package/loaders/post-logo.js +4 -3
- package/loaders/post-mainnavigation.js +150 -15
- package/loaders/post-megadropdown-trigger.js +43 -13
- package/loaders/post-megadropdown.js +136 -39
- package/loaders/post-menu-item2.js +2 -8
- package/loaders/post-menu-trigger2.js +17 -10
- package/loaders/post-menu2.js +43 -54
- package/loaders/post-popover.js +46 -15
- package/loaders/post-popovercontainer2.js +921 -111
- package/loaders/post-rating.js +2 -2
- package/loaders/post-tab-header.js +8 -6
- package/loaders/post-tab-panel.js +4 -3
- package/loaders/post-tabs.js +10 -12
- package/loaders/post-tag.js +2 -2
- package/loaders/post-togglebutton.js +4 -3
- package/loaders/post-tooltip-trigger.d.ts +11 -0
- package/loaders/post-tooltip-trigger.js +4708 -0
- package/loaders/post-tooltip.js +34 -4960
- package/loaders/slide.js +9 -9
- package/package.json +41 -32
- package/dist/cjs/attribute-observer-10f08c04.js +0 -27
- package/dist/cjs/check-non-empty-eeaa8f77.js +0 -11
- package/dist/cjs/check-one-of-f4f5d0c0.js +0 -8
- package/dist/cjs/check-type-64af82a9.js +0 -16
- package/dist/cjs/check-url-3ffdd2fb.js +0 -14
- package/dist/cjs/debounce-1151afe3.js +0 -12
- package/dist/cjs/fade-35a3633a.js +0 -10
- package/dist/cjs/get-root-7a3498ef.js +0 -11
- package/dist/cjs/index-5d4e0aed.js +0 -29
- package/dist/cjs/post-accordion-item-ecc6749f.js +0 -63
- package/dist/cjs/post-back-to-top-60762f8e.js +0 -75
- package/dist/cjs/post-banner-9662f22c.js +0 -90
- package/dist/cjs/post-breadcrumb-b40732fc.js +0 -111
- package/dist/cjs/post-breadcrumb.cjs.entry.js +0 -13
- package/dist/cjs/post-card-control-039c9a4b.js +0 -272
- package/dist/cjs/post-popover-d0ce9dc6.js +0 -104
- package/dist/cjs/post-tab-header-4b6d8d54.js +0 -32
- package/dist/cjs/post-tag-ddaaaedc.js +0 -47
- package/dist/cjs/post-togglebutton-0984a694.js +0 -3239
- package/dist/collection/components/post-breadcrumb/post-breadcrumb.css +0 -3
- package/dist/collection/components/post-menu-item/post-menu-item.css +0 -1
- package/dist/components/attribute-observer.js +0 -25
- package/dist/components/debounce.js +0 -10
- package/dist/components/post-breadcrumb.js +0 -6
- package/dist/components/post-breadcrumb2.js +0 -168
- package/dist/esm/attribute-observer-37fa950a.js +0 -25
- package/dist/esm/check-non-empty-58bd6b17.js +0 -9
- package/dist/esm/check-one-of-6b3ef8eb.js +0 -6
- package/dist/esm/check-type-8828dbe4.js +0 -14
- package/dist/esm/check-url-a974431e.js +0 -12
- package/dist/esm/debounce-abe98cc2.js +0 -10
- package/dist/esm/fade-7fd71785.js +0 -7
- package/dist/esm/get-root-7af2e0d1.js +0 -9
- package/dist/esm/index-b49c9904.js +0 -24
- package/dist/esm/package-4d81f3c2.js +0 -3
- package/dist/esm/post-accordion-item-e10452dc.js +0 -61
- package/dist/esm/post-back-to-top-1d823c43.js +0 -73
- package/dist/esm/post-banner-78480475.js +0 -88
- package/dist/esm/post-breadcrumb-aaa77f74.js +0 -109
- package/dist/esm/post-breadcrumb.entry.js +0 -5
- package/dist/esm/post-card-control-862aa961.js +0 -270
- package/dist/esm/post-popover-2432bb3f.js +0 -102
- package/dist/esm/post-tab-header-dfea00ea.js +0 -30
- package/dist/esm/post-tag-a77e7af6.js +0 -45
- package/dist/esm/post-togglebutton-395bf3f0.js +0 -3223
- package/dist/post-components/p-0711f76d.entry.js +0 -1
- package/dist/post-components/p-095a06f6.entry.js +0 -1
- package/dist/post-components/p-0b5a5f32.js +0 -1
- package/dist/post-components/p-135fa60f.js +0 -1
- package/dist/post-components/p-18e38d8a.js +0 -1
- package/dist/post-components/p-2737eaf5.js +0 -1
- package/dist/post-components/p-2e1ec074.entry.js +0 -1
- package/dist/post-components/p-4202b433.entry.js +0 -1
- package/dist/post-components/p-45773f59.js +0 -1
- package/dist/post-components/p-4953de7e.js +0 -1
- package/dist/post-components/p-4a3f67ab.js +0 -1
- package/dist/post-components/p-4f67c5f5.entry.js +0 -1
- package/dist/post-components/p-5075c672.entry.js +0 -1
- package/dist/post-components/p-515e0f96.js +0 -1
- package/dist/post-components/p-5467b223.js +0 -1
- package/dist/post-components/p-611b3c41.js +0 -1
- package/dist/post-components/p-67036798.entry.js +0 -1
- package/dist/post-components/p-6adeaa6c.js +0 -1
- package/dist/post-components/p-6d953fb2.js +0 -1
- package/dist/post-components/p-6edb0ac5.js +0 -1
- package/dist/post-components/p-6f8f39ca.js +0 -1
- package/dist/post-components/p-7503a623.js +0 -1
- package/dist/post-components/p-761b24c7.entry.js +0 -1
- package/dist/post-components/p-77c4c1d2.js +0 -1
- package/dist/post-components/p-7cf0c2ad.js +0 -1
- package/dist/post-components/p-856c14d6.entry.js +0 -1
- package/dist/post-components/p-866bf50a.entry.js +0 -1
- package/dist/post-components/p-8d621781.js +0 -1
- package/dist/post-components/p-8fe2d72c.entry.js +0 -1
- package/dist/post-components/p-9ad5088f.entry.js +0 -1
- package/dist/post-components/p-a1d2b90e.js +0 -1
- package/dist/post-components/p-a521419d.entry.js +0 -1
- package/dist/post-components/p-aa538648.js +0 -1
- package/dist/post-components/p-afdbee2f.js +0 -1
- package/dist/post-components/p-b02817f2.entry.js +0 -1
- package/dist/post-components/p-b095519d.js +0 -1
- package/dist/post-components/p-b157dcba.entry.js +0 -1
- package/dist/post-components/p-b22656b1.js +0 -1
- package/dist/post-components/p-bdbd11cb.js +0 -1
- package/dist/post-components/p-c537e196.entry.js +0 -1
- package/dist/post-components/p-d4f93f2b.js +0 -1
- package/dist/post-components/p-dca4246a.entry.js +0 -1
- package/dist/post-components/p-f319b026.js +0 -1
- package/dist/post-components/p-f4b7b379.js +0 -1
- package/dist/post-components/p-fac66087.entry.js +0 -1
- package/dist/post-components/p-fc91cbc2.js +0 -1
- package/dist/types/utils/is-focusable.d.ts +0 -1
- package/loaders/attribute-observer.js +0 -25
- package/loaders/debounce.js +0 -10
- package/loaders/post-breadcrumb.js +0 -171
|
@@ -1,3239 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-010dc207.js');
|
|
4
|
-
const _package = require('./package-8e810a59.js');
|
|
5
|
-
const slide = require('./slide-5d51abe8.js');
|
|
6
|
-
const index$1 = require('./index-5d4e0aed.js');
|
|
7
|
-
const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
|
|
8
|
-
const checkType = require('./check-type-64af82a9.js');
|
|
9
|
-
const getRoot = require('./get-root-7a3498ef.js');
|
|
10
|
-
|
|
11
|
-
const PostClosebutton = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
return (index.h(index.Host, { key: 'cb5be35247053b1227c32f7949baca51ccc31081', "data-version": _package.version }, index.h("button", { key: 'b68dc109cc7a9a99b85fc995447bc7c0b0ddc3bf', class: "btn btn-icon-close" }, index.h("post-icon", { key: '9276c885e5b48092a0a24285ec6cd4301a4fc032', "aria-hidden": "true", name: "closex" }), index.h("span", { key: '3e04657ab677186830d80b8dabe769d70b6b8e8e', class: "visually-hidden" }, index.h("slot", { key: 'c2c9e8df9f62516a1b88b1dbc3949287fbaa3991' })))));
|
|
17
|
-
}
|
|
18
|
-
get host() { return index.getElement(this); }
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
/* eslint-disable no-undefined,no-param-reassign,no-shadow */
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Throttle execution of a function. Especially useful for rate limiting
|
|
25
|
-
* execution of handlers on events like resize and scroll.
|
|
26
|
-
*
|
|
27
|
-
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
|
|
28
|
-
* are most useful.
|
|
29
|
-
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
|
|
30
|
-
* as-is, to `callback` when the throttled-function is executed.
|
|
31
|
-
* @param {object} [options] - An object to configure options.
|
|
32
|
-
* @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
|
|
33
|
-
* while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
|
|
34
|
-
* one final time after the last throttled-function call. (After the throttled-function has not been called for
|
|
35
|
-
* `delay` milliseconds, the internal counter is reset).
|
|
36
|
-
* @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
|
|
37
|
-
* immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
|
|
38
|
-
* callback will never executed if both noLeading = true and noTrailing = true.
|
|
39
|
-
* @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
|
|
40
|
-
* false (at end), schedule `callback` to execute after `delay` ms.
|
|
41
|
-
*
|
|
42
|
-
* @returns {Function} A new, throttled, function.
|
|
43
|
-
*/
|
|
44
|
-
function throttle (delay, callback, options) {
|
|
45
|
-
var _ref = options || {},
|
|
46
|
-
_ref$noTrailing = _ref.noTrailing,
|
|
47
|
-
noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
|
|
48
|
-
_ref$noLeading = _ref.noLeading,
|
|
49
|
-
noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
|
|
50
|
-
_ref$debounceMode = _ref.debounceMode,
|
|
51
|
-
debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
|
|
52
|
-
/*
|
|
53
|
-
* After wrapper has stopped being called, this timeout ensures that
|
|
54
|
-
* `callback` is executed at the proper times in `throttle` and `end`
|
|
55
|
-
* debounce modes.
|
|
56
|
-
*/
|
|
57
|
-
var timeoutID;
|
|
58
|
-
var cancelled = false;
|
|
59
|
-
|
|
60
|
-
// Keep track of the last time `callback` was executed.
|
|
61
|
-
var lastExec = 0;
|
|
62
|
-
|
|
63
|
-
// Function to clear existing timeout
|
|
64
|
-
function clearExistingTimeout() {
|
|
65
|
-
if (timeoutID) {
|
|
66
|
-
clearTimeout(timeoutID);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Function to cancel next exec
|
|
71
|
-
function cancel(options) {
|
|
72
|
-
var _ref2 = options || {},
|
|
73
|
-
_ref2$upcomingOnly = _ref2.upcomingOnly,
|
|
74
|
-
upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
|
|
75
|
-
clearExistingTimeout();
|
|
76
|
-
cancelled = !upcomingOnly;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/*
|
|
80
|
-
* The `wrapper` function encapsulates all of the throttling / debouncing
|
|
81
|
-
* functionality and when executed will limit the rate at which `callback`
|
|
82
|
-
* is executed.
|
|
83
|
-
*/
|
|
84
|
-
function wrapper() {
|
|
85
|
-
for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
86
|
-
arguments_[_key] = arguments[_key];
|
|
87
|
-
}
|
|
88
|
-
var self = this;
|
|
89
|
-
var elapsed = Date.now() - lastExec;
|
|
90
|
-
if (cancelled) {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// Execute `callback` and update the `lastExec` timestamp.
|
|
95
|
-
function exec() {
|
|
96
|
-
lastExec = Date.now();
|
|
97
|
-
callback.apply(self, arguments_);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/*
|
|
101
|
-
* If `debounceMode` is true (at begin) this is used to clear the flag
|
|
102
|
-
* to allow future `callback` executions.
|
|
103
|
-
*/
|
|
104
|
-
function clear() {
|
|
105
|
-
timeoutID = undefined;
|
|
106
|
-
}
|
|
107
|
-
if (!noLeading && debounceMode && !timeoutID) {
|
|
108
|
-
/*
|
|
109
|
-
* Since `wrapper` is being called for the first time and
|
|
110
|
-
* `debounceMode` is true (at begin), execute `callback`
|
|
111
|
-
* and noLeading != true.
|
|
112
|
-
*/
|
|
113
|
-
exec();
|
|
114
|
-
}
|
|
115
|
-
clearExistingTimeout();
|
|
116
|
-
if (debounceMode === undefined && elapsed > delay) {
|
|
117
|
-
if (noLeading) {
|
|
118
|
-
/*
|
|
119
|
-
* In throttle mode with noLeading, if `delay` time has
|
|
120
|
-
* been exceeded, update `lastExec` and schedule `callback`
|
|
121
|
-
* to execute after `delay` ms.
|
|
122
|
-
*/
|
|
123
|
-
lastExec = Date.now();
|
|
124
|
-
if (!noTrailing) {
|
|
125
|
-
timeoutID = setTimeout(debounceMode ? clear : exec, delay);
|
|
126
|
-
}
|
|
127
|
-
} else {
|
|
128
|
-
/*
|
|
129
|
-
* In throttle mode without noLeading, if `delay` time has been exceeded, execute
|
|
130
|
-
* `callback`.
|
|
131
|
-
*/
|
|
132
|
-
exec();
|
|
133
|
-
}
|
|
134
|
-
} else if (noTrailing !== true) {
|
|
135
|
-
/*
|
|
136
|
-
* In trailing throttle mode, since `delay` time has not been
|
|
137
|
-
* exceeded, schedule `callback` to execute `delay` ms after most
|
|
138
|
-
* recent execution.
|
|
139
|
-
*
|
|
140
|
-
* If `debounceMode` is true (at begin), schedule `clear` to execute
|
|
141
|
-
* after `delay` ms.
|
|
142
|
-
*
|
|
143
|
-
* If `debounceMode` is false (at end), schedule `callback` to
|
|
144
|
-
* execute after `delay` ms.
|
|
145
|
-
*/
|
|
146
|
-
timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
wrapper.cancel = cancel;
|
|
150
|
-
|
|
151
|
-
// Return the wrapper function.
|
|
152
|
-
return wrapper;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--global-header-minimal-height:24px;--main-header-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (min-width: 1024px){:host{display:block;position:sticky;inset-inline:0;inset-block-start:calc(-1*(var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px;--main-header-height:48px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height);z-index:1}@media screen and (max-width: 1023.99px){.global-header{inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{padding-inline-end:var(--post-core-dimension-12);top:calc((var(--global-header-height) - var(--global-header-minimal-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24);height:var(--global-header-height)}.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-minimal-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;list-style:none;display:flex;padding-left:0;gap:1rem}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-4);height:var(--main-header-height);background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.title-header{padding:var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12)}}@media screen and (max-width: 1023.99px){.title-header{position:sticky;z-index:1;inset-block-start:var(--global-header-height);padding-inline:var(--post-core-dimension-8) var(--post-core-dimension-16)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.99px){::slotted(h1){font-size:var(--post-core-font-size-20) !important}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.navigation{position:sticky;z-index:1;inset-block-start:var(--global-header-minimal-height)}}@media screen and (max-width: 1023.99px){.navigation{position:fixed;inset-inline:0;inset-block-end:calc(100vh - var(--header-height));box-shadow:var(--post-core-elevation-3);min-height:var(--post-core-dimension-10);max-height:calc(100vh - var(--header-height));overflow:auto}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}";
|
|
156
|
-
const PostHeaderStyle0 = postHeaderCss;
|
|
157
|
-
|
|
158
|
-
const PostHeader = class {
|
|
159
|
-
constructor(hostRef) {
|
|
160
|
-
index.registerInstance(this, hostRef);
|
|
161
|
-
this.scrollParent = null;
|
|
162
|
-
this.throttledScroll = () => this.handleScrollEvent();
|
|
163
|
-
this.throttledResize = throttle(50, () => this.handleResize());
|
|
164
|
-
this.device = null;
|
|
165
|
-
this.mobileMenuExtended = false;
|
|
166
|
-
}
|
|
167
|
-
componentWillRender() {
|
|
168
|
-
this.scrollParent = this.getScrollParent(this.host);
|
|
169
|
-
this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
|
|
170
|
-
window.addEventListener('resize', this.throttledResize, { passive: true });
|
|
171
|
-
this.handleResize();
|
|
172
|
-
this.handleScrollEvent();
|
|
173
|
-
}
|
|
174
|
-
frozeBody(isMobileMenuExtended) {
|
|
175
|
-
document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* Toggles the mobile navigation.
|
|
179
|
-
*/
|
|
180
|
-
async toggleMobileMenu() {
|
|
181
|
-
if (this.device === 'desktop')
|
|
182
|
-
return;
|
|
183
|
-
this.mobileMenuAnimation = this.mobileMenuExtended
|
|
184
|
-
? slide.slideUp(this.mobileMenu)
|
|
185
|
-
: slide.slideDown(this.mobileMenu);
|
|
186
|
-
// Update the state of the toggle button
|
|
187
|
-
const menuButton = this.host.querySelector('post-togglebutton');
|
|
188
|
-
menuButton.toggled = !this.mobileMenuExtended;
|
|
189
|
-
// Toggle menu visibility before it slides down and after it slides back up
|
|
190
|
-
if (this.mobileMenuExtended)
|
|
191
|
-
await this.mobileMenuAnimation.finished;
|
|
192
|
-
this.mobileMenuExtended = !this.mobileMenuExtended;
|
|
193
|
-
if (!this.mobileMenuExtended)
|
|
194
|
-
await this.mobileMenuAnimation.finished;
|
|
195
|
-
}
|
|
196
|
-
handleScrollEvent() {
|
|
197
|
-
// Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
|
|
198
|
-
const st = Math.max(0, this.scrollParent instanceof Document
|
|
199
|
-
? this.scrollParent.documentElement.scrollTop
|
|
200
|
-
: this.scrollParent.scrollTop);
|
|
201
|
-
this.host.style.setProperty('--header-scroll-top', `${st}px`);
|
|
202
|
-
}
|
|
203
|
-
getScrollParent(node) {
|
|
204
|
-
let currentParent = node.parentElement;
|
|
205
|
-
while (currentParent) {
|
|
206
|
-
if (currentParent.nodeName === 'BODY') {
|
|
207
|
-
return document;
|
|
208
|
-
}
|
|
209
|
-
if (this.isScrollable(currentParent)) {
|
|
210
|
-
return currentParent;
|
|
211
|
-
}
|
|
212
|
-
currentParent = currentParent.parentElement;
|
|
213
|
-
}
|
|
214
|
-
return document;
|
|
215
|
-
}
|
|
216
|
-
isScrollable(node) {
|
|
217
|
-
if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
|
|
218
|
-
return false;
|
|
219
|
-
}
|
|
220
|
-
const style = getComputedStyle(node);
|
|
221
|
-
return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
|
|
222
|
-
const value = style.getPropertyValue(propertyName);
|
|
223
|
-
return value === 'auto' || value === 'scroll';
|
|
224
|
-
});
|
|
225
|
-
}
|
|
226
|
-
handleResize() {
|
|
227
|
-
const previousDevice = this.device;
|
|
228
|
-
let newDevice;
|
|
229
|
-
const width = window === null || window === void 0 ? void 0 : window.innerWidth;
|
|
230
|
-
if (width >= 1024) {
|
|
231
|
-
newDevice = 'desktop';
|
|
232
|
-
}
|
|
233
|
-
else if (width >= 600) {
|
|
234
|
-
newDevice = 'tablet';
|
|
235
|
-
}
|
|
236
|
-
else {
|
|
237
|
-
newDevice = 'mobile';
|
|
238
|
-
}
|
|
239
|
-
// Close any open mobile menu
|
|
240
|
-
if (newDevice === 'desktop' && this.mobileMenuExtended) {
|
|
241
|
-
this.toggleMobileMenu();
|
|
242
|
-
this.mobileMenuAnimation.finish(); // no animation
|
|
243
|
-
}
|
|
244
|
-
// Apply only on change for doing work only when necessary
|
|
245
|
-
if (newDevice !== previousDevice) {
|
|
246
|
-
this.device = newDevice;
|
|
247
|
-
window.requestAnimationFrame(() => {
|
|
248
|
-
this.switchLanguageSwitchMode();
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
switchLanguageSwitchMode() {
|
|
253
|
-
var _a;
|
|
254
|
-
const variant = this.device === 'desktop' ? 'dropdown' : 'list';
|
|
255
|
-
(_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
|
|
256
|
-
}
|
|
257
|
-
render() {
|
|
258
|
-
const navigationClasses = ['navigation'];
|
|
259
|
-
if (this.mobileMenuExtended) {
|
|
260
|
-
navigationClasses.push('extended');
|
|
261
|
-
}
|
|
262
|
-
return (index.h(index.Host, { key: 'd96b46b64946ef425059463d127fa1188c99ea58', version: _package.version }, index.h("div", { key: '831ebc53d0f598a99e72d46a1530c2c34c196948', class: "global-header" }, index.h("div", { key: '69f3b3bc47a61810eea3ae60d7b2423af1750416', class: "global-sub" }, index.h("div", { key: 'ad6d36c7e7f029edfdee223ab1df664a1b7002f8', class: "logo" }, index.h("slot", { key: '95adfc2ad9e63fde9eef3cc71b63247e140fba3d', name: "post-logo" }))), index.h("div", { key: '741e62693a4df8558213c85d7a837efb8b0cfa6d', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '992844b617955cb77079a175fcaaf54943a6eef2', name: "meta-navigation" }), index.h("slot", { key: '4384ae4c04d239bf1b1947ba6d1457ae6879a5cf', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: 'c5b33b6bfb8c00d44710ec997a80d56720aab760', name: "post-language-switch" }), index.h("div", { key: '25a629a419c94fc4789eb374b87cf7c159b746c6', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '3f3078832237abc5a6df79b4a57fe20fae926aa3', name: "post-togglebutton" })))), index.h("div", { key: 'e11ca83bc108d4677e849b7386ad7bd09d8c9331', class: "title-header d-flex space-between align-center" }, index.h("slot", { key: '87430ad15ab09f800b714be45be00a50e5b7dc0a', name: "title" }), index.h("div", { key: '494a198d3ee8185a26b16fce97a85bed01d6b3f7', class: "global-sub" }, index.h("slot", { key: '8a54e3d1366d39c11d64c0de90f35a4330836428', name: "local-controls" }), index.h("slot", { key: '63f841457e0f7b7722a3f8b1ea83ff0d78d9c08e' }))), index.h("div", { key: '90cf667c412d90f8e466e7e7925fa4a2f8223ad8', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, index.h("slot", { key: 'a046286cb6cc770bfb8fb4439cdacac7c351001b', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("div", { key: '6e0ad5841ef53daf0c0885b75efdf12d69f4a72d', class: "navigation-footer" }, index.h("slot", { key: '1eaebace0d5e37794867ae2a317a104726bb873a', name: "meta-navigation" }), index.h("slot", { key: '79217cd6fd16d4c6ef3e8aaa656e6dc0a8842b23', name: "post-language-switch" }))))));
|
|
263
|
-
}
|
|
264
|
-
get host() { return index.getElement(this); }
|
|
265
|
-
static get watchers() { return {
|
|
266
|
-
"mobileMenuExtended": ["frozeBody"]
|
|
267
|
-
}; }
|
|
268
|
-
};
|
|
269
|
-
PostHeader.style = PostHeaderStyle0;
|
|
270
|
-
|
|
271
|
-
const postIconCss = ":host{container-name:post-icon;container-type:inline-size;display:inline-block;width:1em;height:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color}@container post-icon (max-width: 23.98px){svg{--pis-16: block}}@container post-icon (min-width: 24px) and (max-width: 31.98px){svg{--pis-24: block}}@container post-icon (min-width: 32px) and (max-width: 39.98px){svg{--pis-32: block}}@container post-icon (min-width: 40px) and (max-width: 47.98px){svg{--pis-40: block}}@container post-icon (min-width: 48px) and (max-width: 63.98px){svg{--pis-48: block}}@container post-icon (min-width: 64px){svg{--pis-64: block}}: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)}}";
|
|
272
|
-
const PostIconStyle0 = postIconCss;
|
|
273
|
-
|
|
274
|
-
const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
|
|
275
|
-
const ANIMATION_NAMES = [
|
|
276
|
-
'cylon',
|
|
277
|
-
'cylon-vertical',
|
|
278
|
-
'spin',
|
|
279
|
-
'spin-reverse',
|
|
280
|
-
'fade',
|
|
281
|
-
'throb',
|
|
282
|
-
];
|
|
283
|
-
const ANIMATION_KEYS = [...ANIMATION_NAMES];
|
|
284
|
-
const PostIcon = class {
|
|
285
|
-
constructor(hostRef) {
|
|
286
|
-
index.registerInstance(this, hostRef);
|
|
287
|
-
this.animation = null;
|
|
288
|
-
this.base = null;
|
|
289
|
-
this.flipH = false;
|
|
290
|
-
this.flipV = false;
|
|
291
|
-
this.name = undefined;
|
|
292
|
-
this.rotate = null;
|
|
293
|
-
this.scale = null;
|
|
294
|
-
}
|
|
295
|
-
validateAnimation(newValue = this.animation) {
|
|
296
|
-
if (newValue !== undefined)
|
|
297
|
-
index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
|
|
298
|
-
}
|
|
299
|
-
validateBase(newValue = this.base) {
|
|
300
|
-
index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
|
|
301
|
-
}
|
|
302
|
-
validateFlipH(newValue = this.flipH) {
|
|
303
|
-
index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
|
|
304
|
-
}
|
|
305
|
-
validateFlipV(newValue = this.flipV) {
|
|
306
|
-
index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
|
|
307
|
-
}
|
|
308
|
-
validateName(newValue = this.name) {
|
|
309
|
-
checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
|
|
310
|
-
checkType.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
|
|
311
|
-
}
|
|
312
|
-
validateRotate(newValue = this.rotate) {
|
|
313
|
-
index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
|
|
314
|
-
}
|
|
315
|
-
validateScale(newValue = this.scale) {
|
|
316
|
-
index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
|
|
317
|
-
}
|
|
318
|
-
getPath() {
|
|
319
|
-
var _a, _b, _c, _d, _e, _f;
|
|
320
|
-
// Construct icon path from different possible sources
|
|
321
|
-
const metaBase = (_b = (_a = document.head
|
|
322
|
-
.querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
|
|
323
|
-
const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
|
|
324
|
-
const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
|
|
325
|
-
const fileName = `${this.name}.svg#i-${this.name}`;
|
|
326
|
-
const filePath = `${fileBase}${fileName}`;
|
|
327
|
-
return new URL(filePath, window.location.origin).toString();
|
|
328
|
-
}
|
|
329
|
-
getStyles() {
|
|
330
|
-
return Object.entries({
|
|
331
|
-
transform: (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
|
|
332
|
-
(this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
|
|
333
|
-
})
|
|
334
|
-
.filter(([_key, value]) => value !== null)
|
|
335
|
-
.reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
|
|
336
|
-
}
|
|
337
|
-
componentDidLoad() {
|
|
338
|
-
this.validateBase();
|
|
339
|
-
this.validateName();
|
|
340
|
-
this.validateFlipH();
|
|
341
|
-
this.validateFlipV();
|
|
342
|
-
this.validateScale();
|
|
343
|
-
this.validateRotate();
|
|
344
|
-
this.validateAnimation();
|
|
345
|
-
}
|
|
346
|
-
render() {
|
|
347
|
-
return (index.h(index.Host, { key: '7864661c5ba45508fa3902c49fd0da1d6c026795', "data-version": _package.version }, index.h("svg", { key: '588f70bd81afc4cc5a312388aa6225bc9c853b57', style: this.getStyles() }, index.h("use", { key: 'c4505cf12ddf083ad86b3b9304ffbf37ac3489d1', href: this.getPath() }))));
|
|
348
|
-
}
|
|
349
|
-
get host() { return index.getElement(this); }
|
|
350
|
-
static get watchers() { return {
|
|
351
|
-
"animation": ["validateAnimation"],
|
|
352
|
-
"base": ["validateBase"],
|
|
353
|
-
"flipH": ["validateFlipH"],
|
|
354
|
-
"flipV": ["validateFlipV"],
|
|
355
|
-
"name": ["validateName"],
|
|
356
|
-
"rotate": ["validateRotate"],
|
|
357
|
-
"scale": ["validateScale"]
|
|
358
|
-
}; }
|
|
359
|
-
};
|
|
360
|
-
PostIcon.style = PostIconStyle0;
|
|
361
|
-
|
|
362
|
-
const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}.post-language-option-list{border-radius:2px;width:40px;height:40px}.post-language-option-list{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-list: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-list:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-option-list: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-list:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-option-list[aria-current=true],.post-language-option-list[aria-current=page]{background-color:#050400;color:#fff}.post-language-option-dropdown{padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative}.post-language-option-dropdown[aria-current=true]::after,.post-language-option-dropdown[aria-current=page]::after{content:\"\";left:-2px;height:3px;background-color:#504f4b;width:calc(100% + 4px);display:block;position:absolute;bottom:3px}.post-language-option-dropdown[aria-current=true]:focus::after,.post-language-option-dropdown[aria-current=page]:focus::after{width:calc(100% - 5px);left:2px}";
|
|
363
|
-
const PostLanguageOptionStyle0 = postLanguageOptionCss;
|
|
364
|
-
|
|
365
|
-
const PostLanguageOption = class {
|
|
366
|
-
constructor(hostRef) {
|
|
367
|
-
index.registerInstance(this, hostRef);
|
|
368
|
-
this.postChange = index.createEvent(this, "postChange", 7);
|
|
369
|
-
this.code = undefined;
|
|
370
|
-
this.active = undefined;
|
|
371
|
-
this.variant = undefined;
|
|
372
|
-
this.name = undefined;
|
|
373
|
-
this.url = undefined;
|
|
374
|
-
}
|
|
375
|
-
validateCode(value = this.code) {
|
|
376
|
-
checkType.checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
|
|
377
|
-
}
|
|
378
|
-
validateActiveProp(value = this.active) {
|
|
379
|
-
index$1.checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
|
|
380
|
-
}
|
|
381
|
-
validateName(value = this.name) {
|
|
382
|
-
index$1.checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
|
|
383
|
-
}
|
|
384
|
-
validateUrl(value = this.url) {
|
|
385
|
-
index$1.checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
|
|
386
|
-
}
|
|
387
|
-
componentDidLoad() {
|
|
388
|
-
this.validateCode();
|
|
389
|
-
this.validateActiveProp();
|
|
390
|
-
this.validateName();
|
|
391
|
-
this.validateUrl();
|
|
392
|
-
if (!this.name && this.isNameRequired()) {
|
|
393
|
-
throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
/**
|
|
397
|
-
* Selects the language option programmatically.
|
|
398
|
-
*/
|
|
399
|
-
async select() {
|
|
400
|
-
this.active = true;
|
|
401
|
-
this.emitChange();
|
|
402
|
-
}
|
|
403
|
-
emitChange() {
|
|
404
|
-
this.postChange.emit(this.code);
|
|
405
|
-
}
|
|
406
|
-
isNameRequired() {
|
|
407
|
-
return this.host.textContent.toLowerCase() === this.code.toLowerCase();
|
|
408
|
-
}
|
|
409
|
-
render() {
|
|
410
|
-
const lang = this.code.toLowerCase();
|
|
411
|
-
return (index.h(index.Host, { key: '9a3f49ee993b69393ea8f81b671cd5482049ff1c', "data-version": _package.version, role: "listitem" }, this.url ? (index.h("a", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, index.h("slot", null))) : (index.h("button", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, index.h("slot", null)))));
|
|
412
|
-
}
|
|
413
|
-
get host() { return index.getElement(this); }
|
|
414
|
-
static get watchers() { return {
|
|
415
|
-
"code": ["validateCode"],
|
|
416
|
-
"active": ["validateActiveProp"],
|
|
417
|
-
"name": ["validateName"],
|
|
418
|
-
"url": ["validateUrl"]
|
|
419
|
-
}; }
|
|
420
|
-
};
|
|
421
|
-
PostLanguageOption.style = PostLanguageOptionStyle0;
|
|
422
|
-
|
|
423
|
-
const SWITCH_VARIANTS = ['list', 'dropdown'];
|
|
424
|
-
|
|
425
|
-
const urlAlphabet =
|
|
426
|
-
'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
|
|
427
|
-
|
|
428
|
-
let nanoid = (size = 21) => {
|
|
429
|
-
let id = '';
|
|
430
|
-
let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
|
|
431
|
-
while (size--) {
|
|
432
|
-
id += urlAlphabet[bytes[size] & 63];
|
|
433
|
-
}
|
|
434
|
-
return id
|
|
435
|
-
};
|
|
436
|
-
|
|
437
|
-
const postLanguageSwitchCss = ":host{display:block}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.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:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
|
|
438
|
-
const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
|
|
439
|
-
|
|
440
|
-
const PostLanguageSwitch = class {
|
|
441
|
-
constructor(hostRef) {
|
|
442
|
-
index.registerInstance(this, hostRef);
|
|
443
|
-
this.menuId = `p${nanoid(11)}`;
|
|
444
|
-
this.caption = undefined;
|
|
445
|
-
this.description = undefined;
|
|
446
|
-
this.variant = 'list';
|
|
447
|
-
this.activeLang = undefined;
|
|
448
|
-
}
|
|
449
|
-
validateCaption(value = this.caption) {
|
|
450
|
-
checkType.checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
|
|
451
|
-
}
|
|
452
|
-
validateDescription(value = this.description) {
|
|
453
|
-
checkType.checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
|
|
454
|
-
}
|
|
455
|
-
validateVariant(value = this.variant) {
|
|
456
|
-
index$1.checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be: ${SWITCH_VARIANTS.join(', ')}`);
|
|
457
|
-
}
|
|
458
|
-
connectedCallback() {
|
|
459
|
-
this.updateChildrenVariant();
|
|
460
|
-
// Get the active language based on children's active state
|
|
461
|
-
this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
|
|
462
|
-
.find(el => el.getAttribute('active') == 'true')
|
|
463
|
-
.getAttribute('code');
|
|
464
|
-
}
|
|
465
|
-
// Update post-language-option variant to have the correct style
|
|
466
|
-
updateChildrenVariant() {
|
|
467
|
-
this.host.querySelectorAll('post-language-option').forEach(el => {
|
|
468
|
-
el.setAttribute('variant', this.variant);
|
|
469
|
-
});
|
|
470
|
-
}
|
|
471
|
-
componentShouldUpdate() {
|
|
472
|
-
this.updateChildrenVariant();
|
|
473
|
-
}
|
|
474
|
-
componentDidLoad() {
|
|
475
|
-
this.validateCaption();
|
|
476
|
-
this.validateDescription();
|
|
477
|
-
this.validateVariant();
|
|
478
|
-
// Detects a change in the active language
|
|
479
|
-
this.host.addEventListener('postChange', (el) => {
|
|
480
|
-
this.activeLang = el.detail;
|
|
481
|
-
// Update the active state in the children post-language-option components
|
|
482
|
-
this.host.querySelectorAll('post-language-option').forEach(lang => {
|
|
483
|
-
if (lang.code && lang.code === this.activeLang) {
|
|
484
|
-
lang.setAttribute('active', 'true');
|
|
485
|
-
}
|
|
486
|
-
else {
|
|
487
|
-
lang.setAttribute('active', 'false');
|
|
488
|
-
}
|
|
489
|
-
});
|
|
490
|
-
// Hides the dropdown when an option has been clicked
|
|
491
|
-
if (this.variant === 'dropdown') {
|
|
492
|
-
const menu = this.host.shadowRoot.querySelector('post-menu');
|
|
493
|
-
menu.toggle(menu);
|
|
494
|
-
}
|
|
495
|
-
});
|
|
496
|
-
}
|
|
497
|
-
renderList() {
|
|
498
|
-
return (index.h(index.Host, { "data-version": _package.version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, index.h("slot", null)));
|
|
499
|
-
}
|
|
500
|
-
renderDropdown() {
|
|
501
|
-
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.caption}, ${this.description}` }, this.activeLang.toUpperCase(), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId }, index.h("div", { class: "post-language-switch-dropdown-container" }, index.h("slot", null)))));
|
|
502
|
-
}
|
|
503
|
-
render() {
|
|
504
|
-
return this.variant === 'list' ? this.renderList() : this.renderDropdown();
|
|
505
|
-
}
|
|
506
|
-
get host() { return index.getElement(this); }
|
|
507
|
-
static get watchers() { return {
|
|
508
|
-
"caption": ["validateCaption"],
|
|
509
|
-
"description": ["validateDescription"],
|
|
510
|
-
"variant": ["validateVariant"]
|
|
511
|
-
}; }
|
|
512
|
-
};
|
|
513
|
-
PostLanguageSwitch.style = PostLanguageSwitchStyle0;
|
|
514
|
-
|
|
515
|
-
const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
|
|
516
|
-
const PostListStyle0 = postListCss;
|
|
517
|
-
|
|
518
|
-
const PostList = class {
|
|
519
|
-
constructor(hostRef) {
|
|
520
|
-
index.registerInstance(this, hostRef);
|
|
521
|
-
this.titleId = undefined;
|
|
522
|
-
this.titleHidden = false;
|
|
523
|
-
this.horizontal = false;
|
|
524
|
-
}
|
|
525
|
-
componentWillLoad() {
|
|
526
|
-
/**
|
|
527
|
-
* Get the id set on the host element or use a random id by default
|
|
528
|
-
*/
|
|
529
|
-
this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
|
|
530
|
-
}
|
|
531
|
-
componentDidLoad() {
|
|
532
|
-
this.checkTitle();
|
|
533
|
-
}
|
|
534
|
-
checkTitle() {
|
|
535
|
-
if (!this.titleEl.textContent.trim()) {
|
|
536
|
-
throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
render() {
|
|
540
|
-
return (index.h(index.Host, { key: '4f982e717530514589c5528553b70463d678b676', "data-version": _package.version }, index.h("div", { key: 'cc65ed208f48e7a22482af96fd069d05363f2617', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '0f8bbeade50b59e53767ce2169dd57bb79644705' })), index.h("div", { key: '7fa5de37a169e6f76928c2088c46ee747427887e', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: '86b4d71b83671babb61dd12e842710d67350a09e', name: "post-list-item" }))));
|
|
541
|
-
}
|
|
542
|
-
get host() { return index.getElement(this); }
|
|
543
|
-
};
|
|
544
|
-
PostList.style = PostListStyle0;
|
|
545
|
-
|
|
546
|
-
const postListItemCss = ":host{display:flex}";
|
|
547
|
-
const PostListItemStyle0 = postListItemCss;
|
|
548
|
-
|
|
549
|
-
const PostListItem = class {
|
|
550
|
-
constructor(hostRef) {
|
|
551
|
-
index.registerInstance(this, hostRef);
|
|
552
|
-
}
|
|
553
|
-
connectedCallback() {
|
|
554
|
-
this.host.setAttribute('slot', 'post-list-item');
|
|
555
|
-
}
|
|
556
|
-
render() {
|
|
557
|
-
return (index.h(index.Host, { key: 'aa9a31c64e3e8ba5dcac1d03b54ab3c886149c1f', role: "listitem", slot: "post-list-item" }, index.h("slot", { key: '06353140f8917fc5373de6d56708467af2ef52b2' })));
|
|
558
|
-
}
|
|
559
|
-
get host() { return index.getElement(this); }
|
|
560
|
-
};
|
|
561
|
-
PostListItem.style = PostListItemStyle0;
|
|
562
|
-
|
|
563
|
-
const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
|
|
564
|
-
const PostLogoStyle0 = postLogoCss;
|
|
565
|
-
|
|
566
|
-
const PostLogo = class {
|
|
567
|
-
constructor(hostRef) {
|
|
568
|
-
index.registerInstance(this, hostRef);
|
|
569
|
-
this.url = undefined;
|
|
570
|
-
}
|
|
571
|
-
validateUrl() {
|
|
572
|
-
index$1.checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
|
|
573
|
-
}
|
|
574
|
-
componentDidLoad() {
|
|
575
|
-
this.validateUrl();
|
|
576
|
-
this.checkDescription();
|
|
577
|
-
}
|
|
578
|
-
checkDescription() {
|
|
579
|
-
if (!this.host.textContent) {
|
|
580
|
-
console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
|
|
581
|
-
}
|
|
582
|
-
}
|
|
583
|
-
render() {
|
|
584
|
-
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
585
|
-
const LogoTag = logoLink ? 'a' : 'span';
|
|
586
|
-
return (index.h(index.Host, { key: 'b8d47e2530eb39f7b05370b4cea0b728cb00a1fb', "data-version": _package.version, slot: "post-logo" }, index.h(LogoTag, Object.assign({ key: '47a4d88622aab30e652a08827e221dacda36cb48', class: "logo" }, (logoLink ? { href: logoLink } : {})), index.h("span", { key: '4eb6ad1bc6c165197b6bcce8fe1146eb9d48fb21', class: "description" }, index.h("slot", { key: 'c66a4385f19711daab6f4ba87d5f78f59ad8b263', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '824643e64a3fb0914082f8f78a11753d66c98842', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'e4f63d237c1fe1128005f29ea604c865f6b50943', id: "Logo" }, index.h("rect", { key: '34fec89177fb5461318d3e8fcc725f32dd97057a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '5600de7c21a8e363fffa35710a3f41e4295b76c7', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: '719be82825355704c4eac3c60fb461f6303734f7', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
|
|
587
|
-
}
|
|
588
|
-
get host() { return index.getElement(this); }
|
|
589
|
-
static get watchers() { return {
|
|
590
|
-
"url": ["validateUrl"]
|
|
591
|
-
}; }
|
|
592
|
-
};
|
|
593
|
-
PostLogo.style = PostLogoStyle0;
|
|
594
|
-
|
|
595
|
-
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: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>button,post-mainnavigation post-list-item post-megadropdown-trigger button{display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button: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>button:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:var(--post-core-dimension-4);z-index:1}@media screen and (min-width: 1024px){post-mainnavigation nav{position:relative;max-width:100vw;max-height:var(--post-core-dimension-56);user-select:none}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{padding-inline:var(--post-core-dimension-12);height:var(--post-core-dimension-56);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";-webkit-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\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.99px){post-mainnavigation post-list>[role=list]{transform:none !important}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;height:var(--post-core-dimension-48);padding-inline-end:var(--post-core-dimension-6);gap:var(--post-core-dimension-16);border-block:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-block-end-color:currentColor;font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button.selected{border-block-width:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-24);height:var(--post-core-dimension-24)}}";
|
|
596
|
-
const PostMainnavigationStyle0 = postMainnavigationCss;
|
|
597
|
-
|
|
598
|
-
const PostMainnavigation = class {
|
|
599
|
-
constructor(hostRef) {
|
|
600
|
-
index.registerInstance(this, hostRef);
|
|
601
|
-
this.postToggle = index.createEvent(this, "postToggle", 7);
|
|
602
|
-
}
|
|
603
|
-
/**
|
|
604
|
-
* Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
|
|
605
|
-
*/
|
|
606
|
-
connectedCallback() {
|
|
607
|
-
this.header = this.host.closest('post-header');
|
|
608
|
-
}
|
|
609
|
-
/**
|
|
610
|
-
* Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
|
|
611
|
-
*/
|
|
612
|
-
disconnectedCallback() {
|
|
613
|
-
this.header = null;
|
|
614
|
-
}
|
|
615
|
-
handleBackButtonClick() {
|
|
616
|
-
if (this.header)
|
|
617
|
-
this.header.toggleMobileMenu();
|
|
618
|
-
}
|
|
619
|
-
render() {
|
|
620
|
-
return (index.h(index.Host, { key: 'f21c438ac0bbcb08e08fd419589bf92b7d8b3a61', slot: "post-mainnavigation" }, index.h("div", { key: '1925f47932d7e842e8b9f059d7ade955c577fa50', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: 'fe18f6859a6d79c7ae701b65a31be1eab9c8b2ac', name: "back-button" })), index.h("nav", { key: 'ad2b0a52bc0bcf78a3c3340ba163ee6167be2c73' }, index.h("slot", { key: '8fc7b01cc0f3729cd2c12c4967ec87891fe0dcf5' }))));
|
|
621
|
-
}
|
|
622
|
-
get host() { return index.getElement(this); }
|
|
623
|
-
};
|
|
624
|
-
PostMainnavigation.style = PostMainnavigationStyle0;
|
|
625
|
-
|
|
626
|
-
const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{--post-global-header-height:72px;--post-main-header-height:56px;--post-header-height:calc(var(--post-global-header-height) + var(--post-main-header-height));background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{--post-global-header-height:64px;position:absolute;top:var(--post-header-height) !important;bottom:0;left:0;width:100%;height:auto}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}.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.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.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;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:20px}}.megadropdown a:hover{border-block-width:0}.megadropdown a:hover::after{content:unset}.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;border-bottom:1px solid #050400;padding:15px 12px 14px 0;display:block;font-weight:900}.megadropdown post-list .list-title h3 a{text-decoration:none;width:100%;font-size:inherit;display:inline-block;font-weight:inherit;height:unset;padding:0;border:0}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:16px;padding:12px 12px 11px 0}}.megadropdown post-list-item{border-bottom:1px solid #050400}.megadropdown post-list-item>a{padding:13px 12px 12px 0;display:block;text-decoration:none;width:100%;border-bottom:0;height:auto;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding:12px 12px 11px 0}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}.megadropdown .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}";
|
|
627
|
-
const PostMegadropdownStyle0 = postMegadropdownCss;
|
|
628
|
-
|
|
629
|
-
const PostMegadropdown = class {
|
|
630
|
-
constructor(hostRef) {
|
|
631
|
-
index.registerInstance(this, hostRef);
|
|
632
|
-
this.postToggleMegadropdown = index.createEvent(this, "postToggleMegadropdown", 7);
|
|
633
|
-
this.isVisible = false;
|
|
634
|
-
this.animationClass = null;
|
|
635
|
-
}
|
|
636
|
-
componentDidLoad() {
|
|
637
|
-
this.popoverRef.addEventListener('postToggle', (event) => {
|
|
638
|
-
this.isVisible = event.detail;
|
|
639
|
-
this.postToggleMegadropdown.emit(this.isVisible);
|
|
640
|
-
});
|
|
641
|
-
this.popoverRef.addEventListener('animationend', () => {
|
|
642
|
-
if (this.animationClass === 'slide-out') {
|
|
643
|
-
this.hide();
|
|
644
|
-
}
|
|
645
|
-
});
|
|
646
|
-
}
|
|
647
|
-
/**
|
|
648
|
-
* Toggles the dropdown visibility based on its current state.
|
|
649
|
-
*/
|
|
650
|
-
async toggle(target) {
|
|
651
|
-
this.isVisible ? this.hide() : await this.show(target);
|
|
652
|
-
}
|
|
653
|
-
/**
|
|
654
|
-
* Displays the popover dropdown
|
|
655
|
-
*
|
|
656
|
-
* @param target - The HTML element relative to which the popover dropdown should be displayed.
|
|
657
|
-
*/
|
|
658
|
-
async show(target) {
|
|
659
|
-
if (this.popoverRef) {
|
|
660
|
-
await this.popoverRef.show(target);
|
|
661
|
-
this.animationClass = 'slide-in';
|
|
662
|
-
}
|
|
663
|
-
else {
|
|
664
|
-
console.error('show: popoverRef is null or undefined');
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
/**
|
|
668
|
-
* Hides the popover dropdown
|
|
669
|
-
*/
|
|
670
|
-
hide() {
|
|
671
|
-
if (this.popoverRef) {
|
|
672
|
-
this.popoverRef.hide();
|
|
673
|
-
}
|
|
674
|
-
else {
|
|
675
|
-
console.error('hide: popoverRef is null or undefined');
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
handleBackButtonClick() {
|
|
679
|
-
this.animationClass = 'slide-out';
|
|
680
|
-
}
|
|
681
|
-
handleCloseButtonClick() {
|
|
682
|
-
this.popoverRef.hide();
|
|
683
|
-
}
|
|
684
|
-
render() {
|
|
685
|
-
return (index.h(index.Host, { key: 'cfd4e6c7bb87c50e471d304a4b4f086266e1c2fe' }, index.h("post-popovercontainer", { key: '31dc3a5e98a5c60a4db8d47375491a6f3957af0b', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, index.h("div", { key: '7001d0e108544a0244af088be0bde49f90a3dea3', class: "megadropdown" }, index.h("div", { key: '513b0710163e8f58677b6b50d2ba2d241cf9ff35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '5457c0b9bfff045f39f470e600b5aa31036c0807', name: "back-button" })), index.h("div", { key: 'c3314a4ae4f386224a2db7fe32203f72f6a1b284', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, index.h("slot", { key: '8feeec24fe5f2522ba1a54ab0b7c682d3a152086', name: "close-button" })), index.h("slot", { key: '6d9426756a809ed26045c9cd56cacf0f36aa9400', name: "megadropdown-title" }), index.h("div", { key: 'fd3b0ac7998eec76700ccc6668d8b2e3fcc4c63a', class: "megadropdown-content" }, index.h("slot", { key: '23638936fdffa224de9631bfd599c0872202a30d' }))))));
|
|
686
|
-
}
|
|
687
|
-
get host() { return index.getElement(this); }
|
|
688
|
-
};
|
|
689
|
-
PostMegadropdown.style = PostMegadropdownStyle0;
|
|
690
|
-
|
|
691
|
-
const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
|
|
692
|
-
const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
|
|
693
|
-
|
|
694
|
-
const PostMegadropdownTrigger = class {
|
|
695
|
-
constructor(hostRef) {
|
|
696
|
-
index.registerInstance(this, hostRef);
|
|
697
|
-
/**
|
|
698
|
-
* Reference to the slotted button within the trigger, if present.
|
|
699
|
-
* Used to manage click and key events for mega dropdown control.
|
|
700
|
-
*/
|
|
701
|
-
this.slottedButton = null;
|
|
702
|
-
this.for = undefined;
|
|
703
|
-
this.ariaExpanded = false;
|
|
704
|
-
}
|
|
705
|
-
/**
|
|
706
|
-
* Watch for changes to the `for` property to validate its type and ensure it is a string.
|
|
707
|
-
* @param forValue - The new value of the `for` property.
|
|
708
|
-
*/
|
|
709
|
-
validateControlFor(forValue = this.for) {
|
|
710
|
-
checkType.checkType(forValue, 'string', 'The "for" property is required and should be a string.');
|
|
711
|
-
}
|
|
712
|
-
get megadropdown() {
|
|
713
|
-
const ref = document.getElementById(this.for);
|
|
714
|
-
return ref && ref.localName === 'post-megadropdown'
|
|
715
|
-
? ref
|
|
716
|
-
: null;
|
|
717
|
-
}
|
|
718
|
-
handleToggle() {
|
|
719
|
-
if (this.megadropdown) {
|
|
720
|
-
this.megadropdown.toggle(this.host);
|
|
721
|
-
}
|
|
722
|
-
else {
|
|
723
|
-
console.warn(`No post-megadropdown found with ID: ${this.for}`);
|
|
724
|
-
}
|
|
725
|
-
}
|
|
726
|
-
componentDidLoad() {
|
|
727
|
-
this.validateControlFor();
|
|
728
|
-
// Check if the mega dropdown attached to the trigger is expanded or not
|
|
729
|
-
document.addEventListener('postToggleMegadropdown', (event) => {
|
|
730
|
-
if (event.target.id === this.for) {
|
|
731
|
-
this.ariaExpanded = event.detail;
|
|
732
|
-
if (this.slottedButton) {
|
|
733
|
-
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
734
|
-
}
|
|
735
|
-
}
|
|
736
|
-
});
|
|
737
|
-
this.slottedButton = this.host.querySelector('button');
|
|
738
|
-
if (this.slottedButton) {
|
|
739
|
-
this.slottedButton.setAttribute('aria-haspopup', 'menu');
|
|
740
|
-
this.slottedButton.addEventListener('click', () => {
|
|
741
|
-
this.handleToggle();
|
|
742
|
-
});
|
|
743
|
-
}
|
|
744
|
-
else {
|
|
745
|
-
console.warn('No button found within post-megadropdown-trigger');
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
render() {
|
|
749
|
-
return (index.h(index.Host, { key: '4ab919adeaa51fc12d45131fa540c76fb3ba73d9', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: 'e7dac321691cdb19a4874fd0b2097227d077af35' }, index.h("slot", { key: 'beffc38d2d35a67e74364c3b40b6d39896aa4de3' }))));
|
|
750
|
-
}
|
|
751
|
-
get host() { return index.getElement(this); }
|
|
752
|
-
static get watchers() { return {
|
|
753
|
-
"for": ["validateControlFor"]
|
|
754
|
-
}; }
|
|
755
|
-
};
|
|
756
|
-
PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
|
|
757
|
-
|
|
758
|
-
const focusableSelector = `:where(${[
|
|
759
|
-
'button',
|
|
760
|
-
'input:not([type="hidden"])',
|
|
761
|
-
'[tabindex]',
|
|
762
|
-
'select',
|
|
763
|
-
'textarea',
|
|
764
|
-
'[contenteditable]',
|
|
765
|
-
'a[href]',
|
|
766
|
-
'iframe',
|
|
767
|
-
'audio[controls]',
|
|
768
|
-
'video[controls]',
|
|
769
|
-
'area[href]',
|
|
770
|
-
'details > summary:first-of-type',
|
|
771
|
-
].join(',')})`;
|
|
772
|
-
const focusDisablingSelector = `:where(${[
|
|
773
|
-
'[inert]',
|
|
774
|
-
'[inert] *',
|
|
775
|
-
':disabled',
|
|
776
|
-
'dialog:not([open]) *',
|
|
777
|
-
'[popover]:not(:popover-open) *',
|
|
778
|
-
'details:not([open]) > *:not(details > summary:first-of-type)',
|
|
779
|
-
'details:not([open]) > *:not(details > summary:first-of-type) *',
|
|
780
|
-
].join(',')})`;
|
|
781
|
-
const isFocusable = (element) => {
|
|
782
|
-
return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(focusDisablingSelector));
|
|
783
|
-
};
|
|
784
|
-
|
|
785
|
-
const postMenuCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}";
|
|
786
|
-
const PostMenuStyle0 = postMenuCss;
|
|
787
|
-
|
|
788
|
-
const PostMenu = class {
|
|
789
|
-
constructor(hostRef) {
|
|
790
|
-
index.registerInstance(this, hostRef);
|
|
791
|
-
this.toggleMenu = index.createEvent(this, "toggleMenu", 7);
|
|
792
|
-
this.lastFocusedElement = null;
|
|
793
|
-
this.KEYCODES = {
|
|
794
|
-
SPACE: ' ',
|
|
795
|
-
ENTER: 'Enter',
|
|
796
|
-
UP: 'ArrowUp',
|
|
797
|
-
DOWN: 'ArrowDown',
|
|
798
|
-
TAB: 'Tab',
|
|
799
|
-
HOME: 'Home',
|
|
800
|
-
END: 'End',
|
|
801
|
-
ESCAPE: 'Escape',
|
|
802
|
-
};
|
|
803
|
-
this.handleKeyDown = (e) => {
|
|
804
|
-
e.stopPropagation();
|
|
805
|
-
if (e.key === this.KEYCODES.ESCAPE) {
|
|
806
|
-
this.toggle(this.host);
|
|
807
|
-
return;
|
|
808
|
-
}
|
|
809
|
-
if (Object.values(this.KEYCODES).includes(e.key)) {
|
|
810
|
-
this.controlKeyDownHandler(e);
|
|
811
|
-
}
|
|
812
|
-
};
|
|
813
|
-
this.handleClick = (e) => {
|
|
814
|
-
const target = e.target;
|
|
815
|
-
if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
|
|
816
|
-
this.toggle(this.host);
|
|
817
|
-
}
|
|
818
|
-
};
|
|
819
|
-
this.placement = 'bottom';
|
|
820
|
-
this.isVisible = false;
|
|
821
|
-
}
|
|
822
|
-
connectedCallback() {
|
|
823
|
-
this.root = getRoot.getRoot(this.host);
|
|
824
|
-
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
825
|
-
this.host.addEventListener('click', this.handleClick);
|
|
826
|
-
}
|
|
827
|
-
disconnectedCallback() {
|
|
828
|
-
this.host.removeEventListener('keydown', this.handleKeyDown);
|
|
829
|
-
this.host.removeEventListener('click', this.handleClick);
|
|
830
|
-
}
|
|
831
|
-
componentDidLoad() {
|
|
832
|
-
this.popoverRef.addEventListener('postToggle', (event) => {
|
|
833
|
-
this.isVisible = event.detail;
|
|
834
|
-
this.toggleMenu.emit(this.isVisible);
|
|
835
|
-
});
|
|
836
|
-
}
|
|
837
|
-
/**
|
|
838
|
-
* Toggles the menu visibility based on its current state.
|
|
839
|
-
*/
|
|
840
|
-
async toggle(target) {
|
|
841
|
-
this.isVisible ? await this.hide() : await this.show(target);
|
|
842
|
-
}
|
|
843
|
-
/**
|
|
844
|
-
* Displays the popover menu, focusing the first menu item.
|
|
845
|
-
*
|
|
846
|
-
* @param target - The HTML element relative to which the popover menu should be displayed.
|
|
847
|
-
*/
|
|
848
|
-
async show(target) {
|
|
849
|
-
if (this.popoverRef) {
|
|
850
|
-
await this.popoverRef.show(target);
|
|
851
|
-
this.lastFocusedElement = this.root.activeElement; // Use root's activeElement
|
|
852
|
-
const menuItems = this.getSlottedItems();
|
|
853
|
-
if (menuItems.length > 0) {
|
|
854
|
-
menuItems[0].focus();
|
|
855
|
-
}
|
|
856
|
-
}
|
|
857
|
-
else {
|
|
858
|
-
console.error('show: popoverRef is null or undefined');
|
|
859
|
-
}
|
|
860
|
-
}
|
|
861
|
-
/**
|
|
862
|
-
* Hides the popover menu and restores focus to the previously focused element.
|
|
863
|
-
*/
|
|
864
|
-
async hide() {
|
|
865
|
-
if (this.popoverRef) {
|
|
866
|
-
await this.popoverRef.hide();
|
|
867
|
-
if (this.lastFocusedElement) {
|
|
868
|
-
this.lastFocusedElement.focus();
|
|
869
|
-
}
|
|
870
|
-
}
|
|
871
|
-
else {
|
|
872
|
-
console.error('hide: popoverRef is null or undefined');
|
|
873
|
-
}
|
|
874
|
-
}
|
|
875
|
-
controlKeyDownHandler(e) {
|
|
876
|
-
const menuItems = this.getSlottedItems();
|
|
877
|
-
if (!menuItems.length) {
|
|
878
|
-
return;
|
|
879
|
-
}
|
|
880
|
-
const currentFocusedElement = this.root.activeElement; // Use root's activeElement
|
|
881
|
-
let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
|
|
882
|
-
switch (e.key) {
|
|
883
|
-
case this.KEYCODES.UP:
|
|
884
|
-
e.preventDefault();
|
|
885
|
-
currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
|
|
886
|
-
break;
|
|
887
|
-
case this.KEYCODES.DOWN:
|
|
888
|
-
e.preventDefault();
|
|
889
|
-
currentIndex = (currentIndex + 1) % menuItems.length;
|
|
890
|
-
break;
|
|
891
|
-
case this.KEYCODES.HOME:
|
|
892
|
-
currentIndex = 0;
|
|
893
|
-
break;
|
|
894
|
-
case this.KEYCODES.END:
|
|
895
|
-
currentIndex = menuItems.length - 1;
|
|
896
|
-
break;
|
|
897
|
-
case this.KEYCODES.SPACE:
|
|
898
|
-
case this.KEYCODES.ENTER:
|
|
899
|
-
this.toggle(this.host);
|
|
900
|
-
return;
|
|
901
|
-
case this.KEYCODES.TAB:
|
|
902
|
-
this.toggle(this.host);
|
|
903
|
-
break;
|
|
904
|
-
}
|
|
905
|
-
if (menuItems[currentIndex]) {
|
|
906
|
-
menuItems[currentIndex].focus();
|
|
907
|
-
}
|
|
908
|
-
}
|
|
909
|
-
getSlottedItems() {
|
|
910
|
-
const slot = this.host.shadowRoot.querySelector('slot');
|
|
911
|
-
const slottedElements = slot ? slot.assignedElements() : [];
|
|
912
|
-
const menuItems = slottedElements
|
|
913
|
-
.filter(el => el.tagName === 'POST-MENU-ITEM')
|
|
914
|
-
.map(el => {
|
|
915
|
-
const slot = el.shadowRoot.querySelector('slot');
|
|
916
|
-
const assignedElements = slot ? slot.assignedElements() : [];
|
|
917
|
-
return assignedElements.filter(isFocusable);
|
|
918
|
-
})
|
|
919
|
-
.flat();
|
|
920
|
-
return menuItems;
|
|
921
|
-
}
|
|
922
|
-
render() {
|
|
923
|
-
return (index.h(index.Host, { key: '48e04f36dc7a3d8ed81b9570d1a4c931ace3cadd', "data-version": _package.version }, index.h("post-popovercontainer", { key: '58532143bd7a8be7ea77cbd0a929fa74ee0ee890', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '967bf8aa936611ac6d533d9a8a1e176ee84b2a73', class: "popover-container", part: "popover-container" }, index.h("slot", { key: '4eb6b7fe34e8ea1df0d7cd8de31b57452442c3bb' })))));
|
|
924
|
-
}
|
|
925
|
-
get host() { return index.getElement(this); }
|
|
926
|
-
};
|
|
927
|
-
PostMenu.style = PostMenuStyle0;
|
|
928
|
-
|
|
929
|
-
const postMenuTriggerCss = ":host{display:inline-block}";
|
|
930
|
-
const PostMenuTriggerStyle0 = postMenuTriggerCss;
|
|
931
|
-
|
|
932
|
-
const PostMenuTrigger = class {
|
|
933
|
-
constructor(hostRef) {
|
|
934
|
-
index.registerInstance(this, hostRef);
|
|
935
|
-
/**
|
|
936
|
-
* Reference to the slotted button within the trigger, if present.
|
|
937
|
-
* Used to manage click and key events for menu control.
|
|
938
|
-
*/
|
|
939
|
-
this.slottedButton = null;
|
|
940
|
-
this.handleKeyDown = (e) => {
|
|
941
|
-
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
|
942
|
-
e.preventDefault();
|
|
943
|
-
this.handleToggle();
|
|
944
|
-
}
|
|
945
|
-
};
|
|
946
|
-
this.for = undefined;
|
|
947
|
-
this.ariaExpanded = false;
|
|
948
|
-
}
|
|
949
|
-
/**
|
|
950
|
-
* Watch for changes to the `for` property to validate its type and ensure it is a string.
|
|
951
|
-
* @param forValue - The new value of the `for` property.
|
|
952
|
-
*/
|
|
953
|
-
validateControlFor(forValue = this.for) {
|
|
954
|
-
checkType.checkType(forValue, 'string', 'The "for" property is required and should be a string.');
|
|
955
|
-
}
|
|
956
|
-
get menu() {
|
|
957
|
-
const ref = this.root.getElementById(this.for);
|
|
958
|
-
return ref && ref.localName === 'post-menu' ? ref : null;
|
|
959
|
-
}
|
|
960
|
-
handleToggle() {
|
|
961
|
-
const menu = this.menu;
|
|
962
|
-
if (menu && this.slottedButton) {
|
|
963
|
-
this.ariaExpanded = !this.ariaExpanded;
|
|
964
|
-
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
965
|
-
menu.toggle(this.host);
|
|
966
|
-
}
|
|
967
|
-
else {
|
|
968
|
-
console.warn(`No post-menu found with ID: ${this.for}`);
|
|
969
|
-
}
|
|
970
|
-
}
|
|
971
|
-
componentDidLoad() {
|
|
972
|
-
this.root = getRoot.getRoot(this.host);
|
|
973
|
-
this.validateControlFor();
|
|
974
|
-
this.slottedButton = this.host.querySelector('button');
|
|
975
|
-
// Check if the slottedButton is within a web component
|
|
976
|
-
if (!this.slottedButton) {
|
|
977
|
-
const webComponent = this.host.querySelector('.menu-trigger-webc');
|
|
978
|
-
if (webComponent.shadowRoot) {
|
|
979
|
-
const slottedButton = webComponent.shadowRoot.querySelector('button');
|
|
980
|
-
if (slottedButton) {
|
|
981
|
-
this.slottedButton = slottedButton;
|
|
982
|
-
}
|
|
983
|
-
}
|
|
984
|
-
}
|
|
985
|
-
if (this.slottedButton) {
|
|
986
|
-
this.slottedButton.setAttribute('aria-haspopup', 'menu');
|
|
987
|
-
this.slottedButton.addEventListener('click', () => {
|
|
988
|
-
this.handleToggle();
|
|
989
|
-
});
|
|
990
|
-
this.slottedButton.addEventListener('keydown', this.handleKeyDown);
|
|
991
|
-
}
|
|
992
|
-
else {
|
|
993
|
-
console.warn('No button found within post-menu-trigger');
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
render() {
|
|
997
|
-
return (index.h(index.Host, { key: '64e9e7e6448160c7b52fc732b5107e94e9776678', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: '711d641147cec0c26c7a3917f9302f1bbbee0d73' })));
|
|
998
|
-
}
|
|
999
|
-
get host() { return index.getElement(this); }
|
|
1000
|
-
static get watchers() { return {
|
|
1001
|
-
"for": ["validateControlFor"]
|
|
1002
|
-
}; }
|
|
1003
|
-
};
|
|
1004
|
-
PostMenuTrigger.style = PostMenuTriggerStyle0;
|
|
1005
|
-
|
|
1006
|
-
/**
|
|
1007
|
-
* Custom positioning reference element.
|
|
1008
|
-
* @see https://floating-ui.com/docs/virtual-elements
|
|
1009
|
-
*/
|
|
1010
|
-
|
|
1011
|
-
const sides = ['top', 'right', 'bottom', 'left'];
|
|
1012
|
-
const alignments = ['start', 'end'];
|
|
1013
|
-
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
1014
|
-
const min = Math.min;
|
|
1015
|
-
const max = Math.max;
|
|
1016
|
-
const round = Math.round;
|
|
1017
|
-
const floor = Math.floor;
|
|
1018
|
-
const createCoords = v => ({
|
|
1019
|
-
x: v,
|
|
1020
|
-
y: v
|
|
1021
|
-
});
|
|
1022
|
-
const oppositeSideMap = {
|
|
1023
|
-
left: 'right',
|
|
1024
|
-
right: 'left',
|
|
1025
|
-
bottom: 'top',
|
|
1026
|
-
top: 'bottom'
|
|
1027
|
-
};
|
|
1028
|
-
const oppositeAlignmentMap = {
|
|
1029
|
-
start: 'end',
|
|
1030
|
-
end: 'start'
|
|
1031
|
-
};
|
|
1032
|
-
function clamp(start, value, end) {
|
|
1033
|
-
return max(start, min(value, end));
|
|
1034
|
-
}
|
|
1035
|
-
function evaluate(value, param) {
|
|
1036
|
-
return typeof value === 'function' ? value(param) : value;
|
|
1037
|
-
}
|
|
1038
|
-
function getSide(placement) {
|
|
1039
|
-
return placement.split('-')[0];
|
|
1040
|
-
}
|
|
1041
|
-
function getAlignment(placement) {
|
|
1042
|
-
return placement.split('-')[1];
|
|
1043
|
-
}
|
|
1044
|
-
function getOppositeAxis(axis) {
|
|
1045
|
-
return axis === 'x' ? 'y' : 'x';
|
|
1046
|
-
}
|
|
1047
|
-
function getAxisLength(axis) {
|
|
1048
|
-
return axis === 'y' ? 'height' : 'width';
|
|
1049
|
-
}
|
|
1050
|
-
function getSideAxis(placement) {
|
|
1051
|
-
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
|
1052
|
-
}
|
|
1053
|
-
function getAlignmentAxis(placement) {
|
|
1054
|
-
return getOppositeAxis(getSideAxis(placement));
|
|
1055
|
-
}
|
|
1056
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
1057
|
-
if (rtl === void 0) {
|
|
1058
|
-
rtl = false;
|
|
1059
|
-
}
|
|
1060
|
-
const alignment = getAlignment(placement);
|
|
1061
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
1062
|
-
const length = getAxisLength(alignmentAxis);
|
|
1063
|
-
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
1064
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
1065
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
1066
|
-
}
|
|
1067
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
1068
|
-
}
|
|
1069
|
-
function getExpandedPlacements(placement) {
|
|
1070
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
1071
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
1072
|
-
}
|
|
1073
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
1074
|
-
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
1075
|
-
}
|
|
1076
|
-
function getSideList(side, isStart, rtl) {
|
|
1077
|
-
const lr = ['left', 'right'];
|
|
1078
|
-
const rl = ['right', 'left'];
|
|
1079
|
-
const tb = ['top', 'bottom'];
|
|
1080
|
-
const bt = ['bottom', 'top'];
|
|
1081
|
-
switch (side) {
|
|
1082
|
-
case 'top':
|
|
1083
|
-
case 'bottom':
|
|
1084
|
-
if (rtl) return isStart ? rl : lr;
|
|
1085
|
-
return isStart ? lr : rl;
|
|
1086
|
-
case 'left':
|
|
1087
|
-
case 'right':
|
|
1088
|
-
return isStart ? tb : bt;
|
|
1089
|
-
default:
|
|
1090
|
-
return [];
|
|
1091
|
-
}
|
|
1092
|
-
}
|
|
1093
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
1094
|
-
const alignment = getAlignment(placement);
|
|
1095
|
-
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
1096
|
-
if (alignment) {
|
|
1097
|
-
list = list.map(side => side + "-" + alignment);
|
|
1098
|
-
if (flipAlignment) {
|
|
1099
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
return list;
|
|
1103
|
-
}
|
|
1104
|
-
function getOppositePlacement(placement) {
|
|
1105
|
-
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
1106
|
-
}
|
|
1107
|
-
function expandPaddingObject(padding) {
|
|
1108
|
-
return {
|
|
1109
|
-
top: 0,
|
|
1110
|
-
right: 0,
|
|
1111
|
-
bottom: 0,
|
|
1112
|
-
left: 0,
|
|
1113
|
-
...padding
|
|
1114
|
-
};
|
|
1115
|
-
}
|
|
1116
|
-
function getPaddingObject(padding) {
|
|
1117
|
-
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
1118
|
-
top: padding,
|
|
1119
|
-
right: padding,
|
|
1120
|
-
bottom: padding,
|
|
1121
|
-
left: padding
|
|
1122
|
-
};
|
|
1123
|
-
}
|
|
1124
|
-
function rectToClientRect(rect) {
|
|
1125
|
-
const {
|
|
1126
|
-
x,
|
|
1127
|
-
y,
|
|
1128
|
-
width,
|
|
1129
|
-
height
|
|
1130
|
-
} = rect;
|
|
1131
|
-
return {
|
|
1132
|
-
width,
|
|
1133
|
-
height,
|
|
1134
|
-
top: y,
|
|
1135
|
-
left: x,
|
|
1136
|
-
right: x + width,
|
|
1137
|
-
bottom: y + height,
|
|
1138
|
-
x,
|
|
1139
|
-
y
|
|
1140
|
-
};
|
|
1141
|
-
}
|
|
1142
|
-
|
|
1143
|
-
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
1144
|
-
let {
|
|
1145
|
-
reference,
|
|
1146
|
-
floating
|
|
1147
|
-
} = _ref;
|
|
1148
|
-
const sideAxis = getSideAxis(placement);
|
|
1149
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
1150
|
-
const alignLength = getAxisLength(alignmentAxis);
|
|
1151
|
-
const side = getSide(placement);
|
|
1152
|
-
const isVertical = sideAxis === 'y';
|
|
1153
|
-
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
1154
|
-
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
1155
|
-
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
1156
|
-
let coords;
|
|
1157
|
-
switch (side) {
|
|
1158
|
-
case 'top':
|
|
1159
|
-
coords = {
|
|
1160
|
-
x: commonX,
|
|
1161
|
-
y: reference.y - floating.height
|
|
1162
|
-
};
|
|
1163
|
-
break;
|
|
1164
|
-
case 'bottom':
|
|
1165
|
-
coords = {
|
|
1166
|
-
x: commonX,
|
|
1167
|
-
y: reference.y + reference.height
|
|
1168
|
-
};
|
|
1169
|
-
break;
|
|
1170
|
-
case 'right':
|
|
1171
|
-
coords = {
|
|
1172
|
-
x: reference.x + reference.width,
|
|
1173
|
-
y: commonY
|
|
1174
|
-
};
|
|
1175
|
-
break;
|
|
1176
|
-
case 'left':
|
|
1177
|
-
coords = {
|
|
1178
|
-
x: reference.x - floating.width,
|
|
1179
|
-
y: commonY
|
|
1180
|
-
};
|
|
1181
|
-
break;
|
|
1182
|
-
default:
|
|
1183
|
-
coords = {
|
|
1184
|
-
x: reference.x,
|
|
1185
|
-
y: reference.y
|
|
1186
|
-
};
|
|
1187
|
-
}
|
|
1188
|
-
switch (getAlignment(placement)) {
|
|
1189
|
-
case 'start':
|
|
1190
|
-
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1191
|
-
break;
|
|
1192
|
-
case 'end':
|
|
1193
|
-
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1194
|
-
break;
|
|
1195
|
-
}
|
|
1196
|
-
return coords;
|
|
1197
|
-
}
|
|
1198
|
-
|
|
1199
|
-
/**
|
|
1200
|
-
* Computes the `x` and `y` coordinates that will place the floating element
|
|
1201
|
-
* next to a given reference element.
|
|
1202
|
-
*
|
|
1203
|
-
* This export does not have any `platform` interface logic. You will need to
|
|
1204
|
-
* write one for the platform you are using Floating UI with.
|
|
1205
|
-
*/
|
|
1206
|
-
const computePosition$1 = async (reference, floating, config) => {
|
|
1207
|
-
const {
|
|
1208
|
-
placement = 'bottom',
|
|
1209
|
-
strategy = 'absolute',
|
|
1210
|
-
middleware = [],
|
|
1211
|
-
platform
|
|
1212
|
-
} = config;
|
|
1213
|
-
const validMiddleware = middleware.filter(Boolean);
|
|
1214
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
1215
|
-
let rects = await platform.getElementRects({
|
|
1216
|
-
reference,
|
|
1217
|
-
floating,
|
|
1218
|
-
strategy
|
|
1219
|
-
});
|
|
1220
|
-
let {
|
|
1221
|
-
x,
|
|
1222
|
-
y
|
|
1223
|
-
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
1224
|
-
let statefulPlacement = placement;
|
|
1225
|
-
let middlewareData = {};
|
|
1226
|
-
let resetCount = 0;
|
|
1227
|
-
for (let i = 0; i < validMiddleware.length; i++) {
|
|
1228
|
-
const {
|
|
1229
|
-
name,
|
|
1230
|
-
fn
|
|
1231
|
-
} = validMiddleware[i];
|
|
1232
|
-
const {
|
|
1233
|
-
x: nextX,
|
|
1234
|
-
y: nextY,
|
|
1235
|
-
data,
|
|
1236
|
-
reset
|
|
1237
|
-
} = await fn({
|
|
1238
|
-
x,
|
|
1239
|
-
y,
|
|
1240
|
-
initialPlacement: placement,
|
|
1241
|
-
placement: statefulPlacement,
|
|
1242
|
-
strategy,
|
|
1243
|
-
middlewareData,
|
|
1244
|
-
rects,
|
|
1245
|
-
platform,
|
|
1246
|
-
elements: {
|
|
1247
|
-
reference,
|
|
1248
|
-
floating
|
|
1249
|
-
}
|
|
1250
|
-
});
|
|
1251
|
-
x = nextX != null ? nextX : x;
|
|
1252
|
-
y = nextY != null ? nextY : y;
|
|
1253
|
-
middlewareData = {
|
|
1254
|
-
...middlewareData,
|
|
1255
|
-
[name]: {
|
|
1256
|
-
...middlewareData[name],
|
|
1257
|
-
...data
|
|
1258
|
-
}
|
|
1259
|
-
};
|
|
1260
|
-
if (reset && resetCount <= 50) {
|
|
1261
|
-
resetCount++;
|
|
1262
|
-
if (typeof reset === 'object') {
|
|
1263
|
-
if (reset.placement) {
|
|
1264
|
-
statefulPlacement = reset.placement;
|
|
1265
|
-
}
|
|
1266
|
-
if (reset.rects) {
|
|
1267
|
-
rects = reset.rects === true ? await platform.getElementRects({
|
|
1268
|
-
reference,
|
|
1269
|
-
floating,
|
|
1270
|
-
strategy
|
|
1271
|
-
}) : reset.rects;
|
|
1272
|
-
}
|
|
1273
|
-
({
|
|
1274
|
-
x,
|
|
1275
|
-
y
|
|
1276
|
-
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
1277
|
-
}
|
|
1278
|
-
i = -1;
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
return {
|
|
1282
|
-
x,
|
|
1283
|
-
y,
|
|
1284
|
-
placement: statefulPlacement,
|
|
1285
|
-
strategy,
|
|
1286
|
-
middlewareData
|
|
1287
|
-
};
|
|
1288
|
-
};
|
|
1289
|
-
|
|
1290
|
-
/**
|
|
1291
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
1292
|
-
* element is overflowing a given clipping boundary on each side.
|
|
1293
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
1294
|
-
* - negative = how many pixels left before it will overflow
|
|
1295
|
-
* - 0 = lies flush with the boundary
|
|
1296
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
1297
|
-
*/
|
|
1298
|
-
async function detectOverflow(state, options) {
|
|
1299
|
-
var _await$platform$isEle;
|
|
1300
|
-
if (options === void 0) {
|
|
1301
|
-
options = {};
|
|
1302
|
-
}
|
|
1303
|
-
const {
|
|
1304
|
-
x,
|
|
1305
|
-
y,
|
|
1306
|
-
platform,
|
|
1307
|
-
rects,
|
|
1308
|
-
elements,
|
|
1309
|
-
strategy
|
|
1310
|
-
} = state;
|
|
1311
|
-
const {
|
|
1312
|
-
boundary = 'clippingAncestors',
|
|
1313
|
-
rootBoundary = 'viewport',
|
|
1314
|
-
elementContext = 'floating',
|
|
1315
|
-
altBoundary = false,
|
|
1316
|
-
padding = 0
|
|
1317
|
-
} = evaluate(options, state);
|
|
1318
|
-
const paddingObject = getPaddingObject(padding);
|
|
1319
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
1320
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
1321
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
1322
|
-
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
1323
|
-
boundary,
|
|
1324
|
-
rootBoundary,
|
|
1325
|
-
strategy
|
|
1326
|
-
}));
|
|
1327
|
-
const rect = elementContext === 'floating' ? {
|
|
1328
|
-
...rects.floating,
|
|
1329
|
-
x,
|
|
1330
|
-
y
|
|
1331
|
-
} : rects.reference;
|
|
1332
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
1333
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
1334
|
-
x: 1,
|
|
1335
|
-
y: 1
|
|
1336
|
-
} : {
|
|
1337
|
-
x: 1,
|
|
1338
|
-
y: 1
|
|
1339
|
-
};
|
|
1340
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1341
|
-
elements,
|
|
1342
|
-
rect,
|
|
1343
|
-
offsetParent,
|
|
1344
|
-
strategy
|
|
1345
|
-
}) : rect);
|
|
1346
|
-
return {
|
|
1347
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1348
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1349
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1350
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1351
|
-
};
|
|
1352
|
-
}
|
|
1353
|
-
|
|
1354
|
-
/**
|
|
1355
|
-
* Provides data to position an inner element of the floating element so that it
|
|
1356
|
-
* appears centered to the reference element.
|
|
1357
|
-
* @see https://floating-ui.com/docs/arrow
|
|
1358
|
-
*/
|
|
1359
|
-
const arrow$1 = options => ({
|
|
1360
|
-
name: 'arrow',
|
|
1361
|
-
options,
|
|
1362
|
-
async fn(state) {
|
|
1363
|
-
const {
|
|
1364
|
-
x,
|
|
1365
|
-
y,
|
|
1366
|
-
placement,
|
|
1367
|
-
rects,
|
|
1368
|
-
platform,
|
|
1369
|
-
elements,
|
|
1370
|
-
middlewareData
|
|
1371
|
-
} = state;
|
|
1372
|
-
// Since `element` is required, we don't Partial<> the type.
|
|
1373
|
-
const {
|
|
1374
|
-
element,
|
|
1375
|
-
padding = 0
|
|
1376
|
-
} = evaluate(options, state) || {};
|
|
1377
|
-
if (element == null) {
|
|
1378
|
-
return {};
|
|
1379
|
-
}
|
|
1380
|
-
const paddingObject = getPaddingObject(padding);
|
|
1381
|
-
const coords = {
|
|
1382
|
-
x,
|
|
1383
|
-
y
|
|
1384
|
-
};
|
|
1385
|
-
const axis = getAlignmentAxis(placement);
|
|
1386
|
-
const length = getAxisLength(axis);
|
|
1387
|
-
const arrowDimensions = await platform.getDimensions(element);
|
|
1388
|
-
const isYAxis = axis === 'y';
|
|
1389
|
-
const minProp = isYAxis ? 'top' : 'left';
|
|
1390
|
-
const maxProp = isYAxis ? 'bottom' : 'right';
|
|
1391
|
-
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
|
|
1392
|
-
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
1393
|
-
const startDiff = coords[axis] - rects.reference[axis];
|
|
1394
|
-
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
1395
|
-
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
|
|
1396
|
-
|
|
1397
|
-
// DOM platform can return `window` as the `offsetParent`.
|
|
1398
|
-
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
|
|
1399
|
-
clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
1400
|
-
}
|
|
1401
|
-
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
1402
|
-
|
|
1403
|
-
// If the padding is large enough that it causes the arrow to no longer be
|
|
1404
|
-
// centered, modify the padding so that it is centered.
|
|
1405
|
-
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
1406
|
-
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
|
|
1407
|
-
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
|
|
1408
|
-
|
|
1409
|
-
// Make sure the arrow doesn't overflow the floating element if the center
|
|
1410
|
-
// point is outside the floating element's bounds.
|
|
1411
|
-
const min$1 = minPadding;
|
|
1412
|
-
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
1413
|
-
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
1414
|
-
const offset = clamp(min$1, center, max);
|
|
1415
|
-
|
|
1416
|
-
// If the reference is small enough that the arrow's padding causes it to
|
|
1417
|
-
// to point to nothing for an aligned placement, adjust the offset of the
|
|
1418
|
-
// floating element itself. To ensure `shift()` continues to take action,
|
|
1419
|
-
// a single reset is performed when this is true.
|
|
1420
|
-
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
1421
|
-
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
|
|
1422
|
-
return {
|
|
1423
|
-
[axis]: coords[axis] + alignmentOffset,
|
|
1424
|
-
data: {
|
|
1425
|
-
[axis]: offset,
|
|
1426
|
-
centerOffset: center - offset - alignmentOffset,
|
|
1427
|
-
...(shouldAddOffset && {
|
|
1428
|
-
alignmentOffset
|
|
1429
|
-
})
|
|
1430
|
-
},
|
|
1431
|
-
reset: shouldAddOffset
|
|
1432
|
-
};
|
|
1433
|
-
}
|
|
1434
|
-
});
|
|
1435
|
-
|
|
1436
|
-
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
1437
|
-
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
1438
|
-
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
1439
|
-
if (alignment) {
|
|
1440
|
-
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
1441
|
-
}
|
|
1442
|
-
return true;
|
|
1443
|
-
});
|
|
1444
|
-
}
|
|
1445
|
-
/**
|
|
1446
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
1447
|
-
* that has the most space available automatically, without needing to specify a
|
|
1448
|
-
* preferred placement. Alternative to `flip`.
|
|
1449
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
1450
|
-
*/
|
|
1451
|
-
const autoPlacement = function (options) {
|
|
1452
|
-
if (options === void 0) {
|
|
1453
|
-
options = {};
|
|
1454
|
-
}
|
|
1455
|
-
return {
|
|
1456
|
-
name: 'autoPlacement',
|
|
1457
|
-
options,
|
|
1458
|
-
async fn(state) {
|
|
1459
|
-
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
1460
|
-
const {
|
|
1461
|
-
rects,
|
|
1462
|
-
middlewareData,
|
|
1463
|
-
placement,
|
|
1464
|
-
platform,
|
|
1465
|
-
elements
|
|
1466
|
-
} = state;
|
|
1467
|
-
const {
|
|
1468
|
-
crossAxis = false,
|
|
1469
|
-
alignment,
|
|
1470
|
-
allowedPlacements = placements,
|
|
1471
|
-
autoAlignment = true,
|
|
1472
|
-
...detectOverflowOptions
|
|
1473
|
-
} = evaluate(options, state);
|
|
1474
|
-
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
1475
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1476
|
-
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
1477
|
-
const currentPlacement = placements$1[currentIndex];
|
|
1478
|
-
if (currentPlacement == null) {
|
|
1479
|
-
return {};
|
|
1480
|
-
}
|
|
1481
|
-
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
1482
|
-
|
|
1483
|
-
// Make `computeCoords` start from the right place.
|
|
1484
|
-
if (placement !== currentPlacement) {
|
|
1485
|
-
return {
|
|
1486
|
-
reset: {
|
|
1487
|
-
placement: placements$1[0]
|
|
1488
|
-
}
|
|
1489
|
-
};
|
|
1490
|
-
}
|
|
1491
|
-
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
1492
|
-
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
1493
|
-
placement: currentPlacement,
|
|
1494
|
-
overflows: currentOverflows
|
|
1495
|
-
}];
|
|
1496
|
-
const nextPlacement = placements$1[currentIndex + 1];
|
|
1497
|
-
|
|
1498
|
-
// There are more placements to check.
|
|
1499
|
-
if (nextPlacement) {
|
|
1500
|
-
return {
|
|
1501
|
-
data: {
|
|
1502
|
-
index: currentIndex + 1,
|
|
1503
|
-
overflows: allOverflows
|
|
1504
|
-
},
|
|
1505
|
-
reset: {
|
|
1506
|
-
placement: nextPlacement
|
|
1507
|
-
}
|
|
1508
|
-
};
|
|
1509
|
-
}
|
|
1510
|
-
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
1511
|
-
const alignment = getAlignment(d.placement);
|
|
1512
|
-
return [d.placement, alignment && crossAxis ?
|
|
1513
|
-
// Check along the mainAxis and main crossAxis side.
|
|
1514
|
-
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
1515
|
-
// Check only the mainAxis.
|
|
1516
|
-
d.overflows[0], d.overflows];
|
|
1517
|
-
}).sort((a, b) => a[1] - b[1]);
|
|
1518
|
-
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
1519
|
-
// Aligned placements should not check their opposite crossAxis
|
|
1520
|
-
// side.
|
|
1521
|
-
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
1522
|
-
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
1523
|
-
if (resetPlacement !== placement) {
|
|
1524
|
-
return {
|
|
1525
|
-
data: {
|
|
1526
|
-
index: currentIndex + 1,
|
|
1527
|
-
overflows: allOverflows
|
|
1528
|
-
},
|
|
1529
|
-
reset: {
|
|
1530
|
-
placement: resetPlacement
|
|
1531
|
-
}
|
|
1532
|
-
};
|
|
1533
|
-
}
|
|
1534
|
-
return {};
|
|
1535
|
-
}
|
|
1536
|
-
};
|
|
1537
|
-
};
|
|
1538
|
-
|
|
1539
|
-
/**
|
|
1540
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
1541
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
1542
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
1543
|
-
* @see https://floating-ui.com/docs/flip
|
|
1544
|
-
*/
|
|
1545
|
-
const flip$1 = function (options) {
|
|
1546
|
-
if (options === void 0) {
|
|
1547
|
-
options = {};
|
|
1548
|
-
}
|
|
1549
|
-
return {
|
|
1550
|
-
name: 'flip',
|
|
1551
|
-
options,
|
|
1552
|
-
async fn(state) {
|
|
1553
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
1554
|
-
const {
|
|
1555
|
-
placement,
|
|
1556
|
-
middlewareData,
|
|
1557
|
-
rects,
|
|
1558
|
-
initialPlacement,
|
|
1559
|
-
platform,
|
|
1560
|
-
elements
|
|
1561
|
-
} = state;
|
|
1562
|
-
const {
|
|
1563
|
-
mainAxis: checkMainAxis = true,
|
|
1564
|
-
crossAxis: checkCrossAxis = true,
|
|
1565
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
1566
|
-
fallbackStrategy = 'bestFit',
|
|
1567
|
-
fallbackAxisSideDirection = 'none',
|
|
1568
|
-
flipAlignment = true,
|
|
1569
|
-
...detectOverflowOptions
|
|
1570
|
-
} = evaluate(options, state);
|
|
1571
|
-
|
|
1572
|
-
// If a reset by the arrow was caused due to an alignment offset being
|
|
1573
|
-
// added, we should skip any logic now since `flip()` has already done its
|
|
1574
|
-
// work.
|
|
1575
|
-
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
1576
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1577
|
-
return {};
|
|
1578
|
-
}
|
|
1579
|
-
const side = getSide(placement);
|
|
1580
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
1581
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1582
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
1583
|
-
if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
|
|
1584
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1585
|
-
}
|
|
1586
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1587
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1588
|
-
const overflows = [];
|
|
1589
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1590
|
-
if (checkMainAxis) {
|
|
1591
|
-
overflows.push(overflow[side]);
|
|
1592
|
-
}
|
|
1593
|
-
if (checkCrossAxis) {
|
|
1594
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
1595
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
1596
|
-
}
|
|
1597
|
-
overflowsData = [...overflowsData, {
|
|
1598
|
-
placement,
|
|
1599
|
-
overflows
|
|
1600
|
-
}];
|
|
1601
|
-
|
|
1602
|
-
// One or more sides is overflowing.
|
|
1603
|
-
if (!overflows.every(side => side <= 0)) {
|
|
1604
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
1605
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1606
|
-
const nextPlacement = placements[nextIndex];
|
|
1607
|
-
if (nextPlacement) {
|
|
1608
|
-
// Try next placement and re-run the lifecycle.
|
|
1609
|
-
return {
|
|
1610
|
-
data: {
|
|
1611
|
-
index: nextIndex,
|
|
1612
|
-
overflows: overflowsData
|
|
1613
|
-
},
|
|
1614
|
-
reset: {
|
|
1615
|
-
placement: nextPlacement
|
|
1616
|
-
}
|
|
1617
|
-
};
|
|
1618
|
-
}
|
|
1619
|
-
|
|
1620
|
-
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
1621
|
-
// then find the placement that fits the best on the main crossAxis side.
|
|
1622
|
-
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
1623
|
-
|
|
1624
|
-
// Otherwise fallback.
|
|
1625
|
-
if (!resetPlacement) {
|
|
1626
|
-
switch (fallbackStrategy) {
|
|
1627
|
-
case 'bestFit':
|
|
1628
|
-
{
|
|
1629
|
-
var _overflowsData$map$so;
|
|
1630
|
-
const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
|
|
1631
|
-
if (placement) {
|
|
1632
|
-
resetPlacement = placement;
|
|
1633
|
-
}
|
|
1634
|
-
break;
|
|
1635
|
-
}
|
|
1636
|
-
case 'initialPlacement':
|
|
1637
|
-
resetPlacement = initialPlacement;
|
|
1638
|
-
break;
|
|
1639
|
-
}
|
|
1640
|
-
}
|
|
1641
|
-
if (placement !== resetPlacement) {
|
|
1642
|
-
return {
|
|
1643
|
-
reset: {
|
|
1644
|
-
placement: resetPlacement
|
|
1645
|
-
}
|
|
1646
|
-
};
|
|
1647
|
-
}
|
|
1648
|
-
}
|
|
1649
|
-
return {};
|
|
1650
|
-
}
|
|
1651
|
-
};
|
|
1652
|
-
};
|
|
1653
|
-
|
|
1654
|
-
function getSideOffsets(overflow, rect) {
|
|
1655
|
-
return {
|
|
1656
|
-
top: overflow.top - rect.height,
|
|
1657
|
-
right: overflow.right - rect.width,
|
|
1658
|
-
bottom: overflow.bottom - rect.height,
|
|
1659
|
-
left: overflow.left - rect.width
|
|
1660
|
-
};
|
|
1661
|
-
}
|
|
1662
|
-
function isAnySideFullyClipped(overflow) {
|
|
1663
|
-
return sides.some(side => overflow[side] >= 0);
|
|
1664
|
-
}
|
|
1665
|
-
/**
|
|
1666
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
1667
|
-
* when it is not in the same clipping context as the reference element.
|
|
1668
|
-
* @see https://floating-ui.com/docs/hide
|
|
1669
|
-
*/
|
|
1670
|
-
const hide = function (options) {
|
|
1671
|
-
if (options === void 0) {
|
|
1672
|
-
options = {};
|
|
1673
|
-
}
|
|
1674
|
-
return {
|
|
1675
|
-
name: 'hide',
|
|
1676
|
-
options,
|
|
1677
|
-
async fn(state) {
|
|
1678
|
-
const {
|
|
1679
|
-
rects
|
|
1680
|
-
} = state;
|
|
1681
|
-
const {
|
|
1682
|
-
strategy = 'referenceHidden',
|
|
1683
|
-
...detectOverflowOptions
|
|
1684
|
-
} = evaluate(options, state);
|
|
1685
|
-
switch (strategy) {
|
|
1686
|
-
case 'referenceHidden':
|
|
1687
|
-
{
|
|
1688
|
-
const overflow = await detectOverflow(state, {
|
|
1689
|
-
...detectOverflowOptions,
|
|
1690
|
-
elementContext: 'reference'
|
|
1691
|
-
});
|
|
1692
|
-
const offsets = getSideOffsets(overflow, rects.reference);
|
|
1693
|
-
return {
|
|
1694
|
-
data: {
|
|
1695
|
-
referenceHiddenOffsets: offsets,
|
|
1696
|
-
referenceHidden: isAnySideFullyClipped(offsets)
|
|
1697
|
-
}
|
|
1698
|
-
};
|
|
1699
|
-
}
|
|
1700
|
-
case 'escaped':
|
|
1701
|
-
{
|
|
1702
|
-
const overflow = await detectOverflow(state, {
|
|
1703
|
-
...detectOverflowOptions,
|
|
1704
|
-
altBoundary: true
|
|
1705
|
-
});
|
|
1706
|
-
const offsets = getSideOffsets(overflow, rects.floating);
|
|
1707
|
-
return {
|
|
1708
|
-
data: {
|
|
1709
|
-
escapedOffsets: offsets,
|
|
1710
|
-
escaped: isAnySideFullyClipped(offsets)
|
|
1711
|
-
}
|
|
1712
|
-
};
|
|
1713
|
-
}
|
|
1714
|
-
default:
|
|
1715
|
-
{
|
|
1716
|
-
return {};
|
|
1717
|
-
}
|
|
1718
|
-
}
|
|
1719
|
-
}
|
|
1720
|
-
};
|
|
1721
|
-
};
|
|
1722
|
-
|
|
1723
|
-
function getBoundingRect(rects) {
|
|
1724
|
-
const minX = min(...rects.map(rect => rect.left));
|
|
1725
|
-
const minY = min(...rects.map(rect => rect.top));
|
|
1726
|
-
const maxX = max(...rects.map(rect => rect.right));
|
|
1727
|
-
const maxY = max(...rects.map(rect => rect.bottom));
|
|
1728
|
-
return {
|
|
1729
|
-
x: minX,
|
|
1730
|
-
y: minY,
|
|
1731
|
-
width: maxX - minX,
|
|
1732
|
-
height: maxY - minY
|
|
1733
|
-
};
|
|
1734
|
-
}
|
|
1735
|
-
function getRectsByLine(rects) {
|
|
1736
|
-
const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
|
|
1737
|
-
const groups = [];
|
|
1738
|
-
let prevRect = null;
|
|
1739
|
-
for (let i = 0; i < sortedRects.length; i++) {
|
|
1740
|
-
const rect = sortedRects[i];
|
|
1741
|
-
if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
|
|
1742
|
-
groups.push([rect]);
|
|
1743
|
-
} else {
|
|
1744
|
-
groups[groups.length - 1].push(rect);
|
|
1745
|
-
}
|
|
1746
|
-
prevRect = rect;
|
|
1747
|
-
}
|
|
1748
|
-
return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
|
|
1749
|
-
}
|
|
1750
|
-
/**
|
|
1751
|
-
* Provides improved positioning for inline reference elements that can span
|
|
1752
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
1753
|
-
* @see https://floating-ui.com/docs/inline
|
|
1754
|
-
*/
|
|
1755
|
-
const inline$1 = function (options) {
|
|
1756
|
-
if (options === void 0) {
|
|
1757
|
-
options = {};
|
|
1758
|
-
}
|
|
1759
|
-
return {
|
|
1760
|
-
name: 'inline',
|
|
1761
|
-
options,
|
|
1762
|
-
async fn(state) {
|
|
1763
|
-
const {
|
|
1764
|
-
placement,
|
|
1765
|
-
elements,
|
|
1766
|
-
rects,
|
|
1767
|
-
platform,
|
|
1768
|
-
strategy
|
|
1769
|
-
} = state;
|
|
1770
|
-
// A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
|
|
1771
|
-
// ClientRect's bounds, despite the event listener being triggered. A
|
|
1772
|
-
// padding of 2 seems to handle this issue.
|
|
1773
|
-
const {
|
|
1774
|
-
padding = 2,
|
|
1775
|
-
x,
|
|
1776
|
-
y
|
|
1777
|
-
} = evaluate(options, state);
|
|
1778
|
-
const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
|
|
1779
|
-
const clientRects = getRectsByLine(nativeClientRects);
|
|
1780
|
-
const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
|
|
1781
|
-
const paddingObject = getPaddingObject(padding);
|
|
1782
|
-
function getBoundingClientRect() {
|
|
1783
|
-
// There are two rects and they are disjoined.
|
|
1784
|
-
if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
|
|
1785
|
-
// Find the first rect in which the point is fully inside.
|
|
1786
|
-
return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
|
|
1787
|
-
}
|
|
1788
|
-
|
|
1789
|
-
// There are 2 or more connected rects.
|
|
1790
|
-
if (clientRects.length >= 2) {
|
|
1791
|
-
if (getSideAxis(placement) === 'y') {
|
|
1792
|
-
const firstRect = clientRects[0];
|
|
1793
|
-
const lastRect = clientRects[clientRects.length - 1];
|
|
1794
|
-
const isTop = getSide(placement) === 'top';
|
|
1795
|
-
const top = firstRect.top;
|
|
1796
|
-
const bottom = lastRect.bottom;
|
|
1797
|
-
const left = isTop ? firstRect.left : lastRect.left;
|
|
1798
|
-
const right = isTop ? firstRect.right : lastRect.right;
|
|
1799
|
-
const width = right - left;
|
|
1800
|
-
const height = bottom - top;
|
|
1801
|
-
return {
|
|
1802
|
-
top,
|
|
1803
|
-
bottom,
|
|
1804
|
-
left,
|
|
1805
|
-
right,
|
|
1806
|
-
width,
|
|
1807
|
-
height,
|
|
1808
|
-
x: left,
|
|
1809
|
-
y: top
|
|
1810
|
-
};
|
|
1811
|
-
}
|
|
1812
|
-
const isLeftSide = getSide(placement) === 'left';
|
|
1813
|
-
const maxRight = max(...clientRects.map(rect => rect.right));
|
|
1814
|
-
const minLeft = min(...clientRects.map(rect => rect.left));
|
|
1815
|
-
const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
|
|
1816
|
-
const top = measureRects[0].top;
|
|
1817
|
-
const bottom = measureRects[measureRects.length - 1].bottom;
|
|
1818
|
-
const left = minLeft;
|
|
1819
|
-
const right = maxRight;
|
|
1820
|
-
const width = right - left;
|
|
1821
|
-
const height = bottom - top;
|
|
1822
|
-
return {
|
|
1823
|
-
top,
|
|
1824
|
-
bottom,
|
|
1825
|
-
left,
|
|
1826
|
-
right,
|
|
1827
|
-
width,
|
|
1828
|
-
height,
|
|
1829
|
-
x: left,
|
|
1830
|
-
y: top
|
|
1831
|
-
};
|
|
1832
|
-
}
|
|
1833
|
-
return fallback;
|
|
1834
|
-
}
|
|
1835
|
-
const resetRects = await platform.getElementRects({
|
|
1836
|
-
reference: {
|
|
1837
|
-
getBoundingClientRect
|
|
1838
|
-
},
|
|
1839
|
-
floating: elements.floating,
|
|
1840
|
-
strategy
|
|
1841
|
-
});
|
|
1842
|
-
if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
|
|
1843
|
-
return {
|
|
1844
|
-
reset: {
|
|
1845
|
-
rects: resetRects
|
|
1846
|
-
}
|
|
1847
|
-
};
|
|
1848
|
-
}
|
|
1849
|
-
return {};
|
|
1850
|
-
}
|
|
1851
|
-
};
|
|
1852
|
-
};
|
|
1853
|
-
|
|
1854
|
-
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
1855
|
-
// Derivable.
|
|
1856
|
-
|
|
1857
|
-
async function convertValueToCoords(state, options) {
|
|
1858
|
-
const {
|
|
1859
|
-
placement,
|
|
1860
|
-
platform,
|
|
1861
|
-
elements
|
|
1862
|
-
} = state;
|
|
1863
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1864
|
-
const side = getSide(placement);
|
|
1865
|
-
const alignment = getAlignment(placement);
|
|
1866
|
-
const isVertical = getSideAxis(placement) === 'y';
|
|
1867
|
-
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
1868
|
-
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
1869
|
-
const rawValue = evaluate(options, state);
|
|
1870
|
-
let {
|
|
1871
|
-
mainAxis,
|
|
1872
|
-
crossAxis,
|
|
1873
|
-
alignmentAxis
|
|
1874
|
-
} = typeof rawValue === 'number' ? {
|
|
1875
|
-
mainAxis: rawValue,
|
|
1876
|
-
crossAxis: 0,
|
|
1877
|
-
alignmentAxis: null
|
|
1878
|
-
} : {
|
|
1879
|
-
mainAxis: 0,
|
|
1880
|
-
crossAxis: 0,
|
|
1881
|
-
alignmentAxis: null,
|
|
1882
|
-
...rawValue
|
|
1883
|
-
};
|
|
1884
|
-
if (alignment && typeof alignmentAxis === 'number') {
|
|
1885
|
-
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
1886
|
-
}
|
|
1887
|
-
return isVertical ? {
|
|
1888
|
-
x: crossAxis * crossAxisMulti,
|
|
1889
|
-
y: mainAxis * mainAxisMulti
|
|
1890
|
-
} : {
|
|
1891
|
-
x: mainAxis * mainAxisMulti,
|
|
1892
|
-
y: crossAxis * crossAxisMulti
|
|
1893
|
-
};
|
|
1894
|
-
}
|
|
1895
|
-
|
|
1896
|
-
/**
|
|
1897
|
-
* Modifies the placement by translating the floating element along the
|
|
1898
|
-
* specified axes.
|
|
1899
|
-
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
1900
|
-
* object may be passed.
|
|
1901
|
-
* @see https://floating-ui.com/docs/offset
|
|
1902
|
-
*/
|
|
1903
|
-
const offset$1 = function (options) {
|
|
1904
|
-
if (options === void 0) {
|
|
1905
|
-
options = 0;
|
|
1906
|
-
}
|
|
1907
|
-
return {
|
|
1908
|
-
name: 'offset',
|
|
1909
|
-
options,
|
|
1910
|
-
async fn(state) {
|
|
1911
|
-
var _middlewareData$offse, _middlewareData$arrow;
|
|
1912
|
-
const {
|
|
1913
|
-
x,
|
|
1914
|
-
y,
|
|
1915
|
-
placement,
|
|
1916
|
-
middlewareData
|
|
1917
|
-
} = state;
|
|
1918
|
-
const diffCoords = await convertValueToCoords(state, options);
|
|
1919
|
-
|
|
1920
|
-
// If the placement is the same and the arrow caused an alignment offset
|
|
1921
|
-
// then we don't need to change the positioning coordinates.
|
|
1922
|
-
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1923
|
-
return {};
|
|
1924
|
-
}
|
|
1925
|
-
return {
|
|
1926
|
-
x: x + diffCoords.x,
|
|
1927
|
-
y: y + diffCoords.y,
|
|
1928
|
-
data: {
|
|
1929
|
-
...diffCoords,
|
|
1930
|
-
placement
|
|
1931
|
-
}
|
|
1932
|
-
};
|
|
1933
|
-
}
|
|
1934
|
-
};
|
|
1935
|
-
};
|
|
1936
|
-
|
|
1937
|
-
/**
|
|
1938
|
-
* Optimizes the visibility of the floating element by shifting it in order to
|
|
1939
|
-
* keep it in view when it will overflow the clipping boundary.
|
|
1940
|
-
* @see https://floating-ui.com/docs/shift
|
|
1941
|
-
*/
|
|
1942
|
-
const shift$1 = function (options) {
|
|
1943
|
-
if (options === void 0) {
|
|
1944
|
-
options = {};
|
|
1945
|
-
}
|
|
1946
|
-
return {
|
|
1947
|
-
name: 'shift',
|
|
1948
|
-
options,
|
|
1949
|
-
async fn(state) {
|
|
1950
|
-
const {
|
|
1951
|
-
x,
|
|
1952
|
-
y,
|
|
1953
|
-
placement
|
|
1954
|
-
} = state;
|
|
1955
|
-
const {
|
|
1956
|
-
mainAxis: checkMainAxis = true,
|
|
1957
|
-
crossAxis: checkCrossAxis = false,
|
|
1958
|
-
limiter = {
|
|
1959
|
-
fn: _ref => {
|
|
1960
|
-
let {
|
|
1961
|
-
x,
|
|
1962
|
-
y
|
|
1963
|
-
} = _ref;
|
|
1964
|
-
return {
|
|
1965
|
-
x,
|
|
1966
|
-
y
|
|
1967
|
-
};
|
|
1968
|
-
}
|
|
1969
|
-
},
|
|
1970
|
-
...detectOverflowOptions
|
|
1971
|
-
} = evaluate(options, state);
|
|
1972
|
-
const coords = {
|
|
1973
|
-
x,
|
|
1974
|
-
y
|
|
1975
|
-
};
|
|
1976
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1977
|
-
const crossAxis = getSideAxis(getSide(placement));
|
|
1978
|
-
const mainAxis = getOppositeAxis(crossAxis);
|
|
1979
|
-
let mainAxisCoord = coords[mainAxis];
|
|
1980
|
-
let crossAxisCoord = coords[crossAxis];
|
|
1981
|
-
if (checkMainAxis) {
|
|
1982
|
-
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
1983
|
-
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
1984
|
-
const min = mainAxisCoord + overflow[minSide];
|
|
1985
|
-
const max = mainAxisCoord - overflow[maxSide];
|
|
1986
|
-
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
1987
|
-
}
|
|
1988
|
-
if (checkCrossAxis) {
|
|
1989
|
-
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
1990
|
-
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
1991
|
-
const min = crossAxisCoord + overflow[minSide];
|
|
1992
|
-
const max = crossAxisCoord - overflow[maxSide];
|
|
1993
|
-
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
1994
|
-
}
|
|
1995
|
-
const limitedCoords = limiter.fn({
|
|
1996
|
-
...state,
|
|
1997
|
-
[mainAxis]: mainAxisCoord,
|
|
1998
|
-
[crossAxis]: crossAxisCoord
|
|
1999
|
-
});
|
|
2000
|
-
return {
|
|
2001
|
-
...limitedCoords,
|
|
2002
|
-
data: {
|
|
2003
|
-
x: limitedCoords.x - x,
|
|
2004
|
-
y: limitedCoords.y - y
|
|
2005
|
-
}
|
|
2006
|
-
};
|
|
2007
|
-
}
|
|
2008
|
-
};
|
|
2009
|
-
};
|
|
2010
|
-
/**
|
|
2011
|
-
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
2012
|
-
*/
|
|
2013
|
-
const limitShift$1 = function (options) {
|
|
2014
|
-
if (options === void 0) {
|
|
2015
|
-
options = {};
|
|
2016
|
-
}
|
|
2017
|
-
return {
|
|
2018
|
-
options,
|
|
2019
|
-
fn(state) {
|
|
2020
|
-
const {
|
|
2021
|
-
x,
|
|
2022
|
-
y,
|
|
2023
|
-
placement,
|
|
2024
|
-
rects,
|
|
2025
|
-
middlewareData
|
|
2026
|
-
} = state;
|
|
2027
|
-
const {
|
|
2028
|
-
offset = 0,
|
|
2029
|
-
mainAxis: checkMainAxis = true,
|
|
2030
|
-
crossAxis: checkCrossAxis = true
|
|
2031
|
-
} = evaluate(options, state);
|
|
2032
|
-
const coords = {
|
|
2033
|
-
x,
|
|
2034
|
-
y
|
|
2035
|
-
};
|
|
2036
|
-
const crossAxis = getSideAxis(placement);
|
|
2037
|
-
const mainAxis = getOppositeAxis(crossAxis);
|
|
2038
|
-
let mainAxisCoord = coords[mainAxis];
|
|
2039
|
-
let crossAxisCoord = coords[crossAxis];
|
|
2040
|
-
const rawOffset = evaluate(offset, state);
|
|
2041
|
-
const computedOffset = typeof rawOffset === 'number' ? {
|
|
2042
|
-
mainAxis: rawOffset,
|
|
2043
|
-
crossAxis: 0
|
|
2044
|
-
} : {
|
|
2045
|
-
mainAxis: 0,
|
|
2046
|
-
crossAxis: 0,
|
|
2047
|
-
...rawOffset
|
|
2048
|
-
};
|
|
2049
|
-
if (checkMainAxis) {
|
|
2050
|
-
const len = mainAxis === 'y' ? 'height' : 'width';
|
|
2051
|
-
const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
|
|
2052
|
-
const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
|
|
2053
|
-
if (mainAxisCoord < limitMin) {
|
|
2054
|
-
mainAxisCoord = limitMin;
|
|
2055
|
-
} else if (mainAxisCoord > limitMax) {
|
|
2056
|
-
mainAxisCoord = limitMax;
|
|
2057
|
-
}
|
|
2058
|
-
}
|
|
2059
|
-
if (checkCrossAxis) {
|
|
2060
|
-
var _middlewareData$offse, _middlewareData$offse2;
|
|
2061
|
-
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
2062
|
-
const isOriginSide = ['top', 'left'].includes(getSide(placement));
|
|
2063
|
-
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
2064
|
-
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
2065
|
-
if (crossAxisCoord < limitMin) {
|
|
2066
|
-
crossAxisCoord = limitMin;
|
|
2067
|
-
} else if (crossAxisCoord > limitMax) {
|
|
2068
|
-
crossAxisCoord = limitMax;
|
|
2069
|
-
}
|
|
2070
|
-
}
|
|
2071
|
-
return {
|
|
2072
|
-
[mainAxis]: mainAxisCoord,
|
|
2073
|
-
[crossAxis]: crossAxisCoord
|
|
2074
|
-
};
|
|
2075
|
-
}
|
|
2076
|
-
};
|
|
2077
|
-
};
|
|
2078
|
-
|
|
2079
|
-
/**
|
|
2080
|
-
* Provides data that allows you to change the size of the floating element —
|
|
2081
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
2082
|
-
* width of the reference element.
|
|
2083
|
-
* @see https://floating-ui.com/docs/size
|
|
2084
|
-
*/
|
|
2085
|
-
const size$1 = function (options) {
|
|
2086
|
-
if (options === void 0) {
|
|
2087
|
-
options = {};
|
|
2088
|
-
}
|
|
2089
|
-
return {
|
|
2090
|
-
name: 'size',
|
|
2091
|
-
options,
|
|
2092
|
-
async fn(state) {
|
|
2093
|
-
const {
|
|
2094
|
-
placement,
|
|
2095
|
-
rects,
|
|
2096
|
-
platform,
|
|
2097
|
-
elements
|
|
2098
|
-
} = state;
|
|
2099
|
-
const {
|
|
2100
|
-
apply = () => {},
|
|
2101
|
-
...detectOverflowOptions
|
|
2102
|
-
} = evaluate(options, state);
|
|
2103
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
2104
|
-
const side = getSide(placement);
|
|
2105
|
-
const alignment = getAlignment(placement);
|
|
2106
|
-
const isYAxis = getSideAxis(placement) === 'y';
|
|
2107
|
-
const {
|
|
2108
|
-
width,
|
|
2109
|
-
height
|
|
2110
|
-
} = rects.floating;
|
|
2111
|
-
let heightSide;
|
|
2112
|
-
let widthSide;
|
|
2113
|
-
if (side === 'top' || side === 'bottom') {
|
|
2114
|
-
heightSide = side;
|
|
2115
|
-
widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
|
|
2116
|
-
} else {
|
|
2117
|
-
widthSide = side;
|
|
2118
|
-
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
2119
|
-
}
|
|
2120
|
-
const overflowAvailableHeight = height - overflow[heightSide];
|
|
2121
|
-
const overflowAvailableWidth = width - overflow[widthSide];
|
|
2122
|
-
const noShift = !state.middlewareData.shift;
|
|
2123
|
-
let availableHeight = overflowAvailableHeight;
|
|
2124
|
-
let availableWidth = overflowAvailableWidth;
|
|
2125
|
-
if (isYAxis) {
|
|
2126
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
2127
|
-
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
2128
|
-
} else {
|
|
2129
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
2130
|
-
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
2131
|
-
}
|
|
2132
|
-
if (noShift && !alignment) {
|
|
2133
|
-
const xMin = max(overflow.left, 0);
|
|
2134
|
-
const xMax = max(overflow.right, 0);
|
|
2135
|
-
const yMin = max(overflow.top, 0);
|
|
2136
|
-
const yMax = max(overflow.bottom, 0);
|
|
2137
|
-
if (isYAxis) {
|
|
2138
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
2139
|
-
} else {
|
|
2140
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
2141
|
-
}
|
|
2142
|
-
}
|
|
2143
|
-
await apply({
|
|
2144
|
-
...state,
|
|
2145
|
-
availableWidth,
|
|
2146
|
-
availableHeight
|
|
2147
|
-
});
|
|
2148
|
-
const nextDimensions = await platform.getDimensions(elements.floating);
|
|
2149
|
-
if (width !== nextDimensions.width || height !== nextDimensions.height) {
|
|
2150
|
-
return {
|
|
2151
|
-
reset: {
|
|
2152
|
-
rects: true
|
|
2153
|
-
}
|
|
2154
|
-
};
|
|
2155
|
-
}
|
|
2156
|
-
return {};
|
|
2157
|
-
}
|
|
2158
|
-
};
|
|
2159
|
-
};
|
|
2160
|
-
|
|
2161
|
-
function getNodeName(node) {
|
|
2162
|
-
if (isNode(node)) {
|
|
2163
|
-
return (node.nodeName || '').toLowerCase();
|
|
2164
|
-
}
|
|
2165
|
-
// Mocked nodes in testing environments may not be instances of Node. By
|
|
2166
|
-
// returning `#document` an infinite loop won't occur.
|
|
2167
|
-
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
2168
|
-
return '#document';
|
|
2169
|
-
}
|
|
2170
|
-
function getWindow(node) {
|
|
2171
|
-
var _node$ownerDocument;
|
|
2172
|
-
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
2173
|
-
}
|
|
2174
|
-
function getDocumentElement(node) {
|
|
2175
|
-
var _ref;
|
|
2176
|
-
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
2177
|
-
}
|
|
2178
|
-
function isNode(value) {
|
|
2179
|
-
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
2180
|
-
}
|
|
2181
|
-
function isElement(value) {
|
|
2182
|
-
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
2183
|
-
}
|
|
2184
|
-
function isHTMLElement(value) {
|
|
2185
|
-
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
2186
|
-
}
|
|
2187
|
-
function isShadowRoot(value) {
|
|
2188
|
-
// Browsers without `ShadowRoot` support.
|
|
2189
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
2190
|
-
return false;
|
|
2191
|
-
}
|
|
2192
|
-
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
2193
|
-
}
|
|
2194
|
-
function isOverflowElement(element) {
|
|
2195
|
-
const {
|
|
2196
|
-
overflow,
|
|
2197
|
-
overflowX,
|
|
2198
|
-
overflowY,
|
|
2199
|
-
display
|
|
2200
|
-
} = getComputedStyle$1(element);
|
|
2201
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
2202
|
-
}
|
|
2203
|
-
function isTableElement(element) {
|
|
2204
|
-
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
2205
|
-
}
|
|
2206
|
-
function isTopLayer(element) {
|
|
2207
|
-
return [':popover-open', ':modal'].some(selector => {
|
|
2208
|
-
try {
|
|
2209
|
-
return element.matches(selector);
|
|
2210
|
-
} catch (e) {
|
|
2211
|
-
return false;
|
|
2212
|
-
}
|
|
2213
|
-
});
|
|
2214
|
-
}
|
|
2215
|
-
function isContainingBlock(elementOrCss) {
|
|
2216
|
-
const webkit = isWebKit();
|
|
2217
|
-
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
2218
|
-
|
|
2219
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2220
|
-
return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
|
|
2221
|
-
}
|
|
2222
|
-
function getContainingBlock(element) {
|
|
2223
|
-
let currentNode = getParentNode(element);
|
|
2224
|
-
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
2225
|
-
if (isContainingBlock(currentNode)) {
|
|
2226
|
-
return currentNode;
|
|
2227
|
-
} else if (isTopLayer(currentNode)) {
|
|
2228
|
-
return null;
|
|
2229
|
-
}
|
|
2230
|
-
currentNode = getParentNode(currentNode);
|
|
2231
|
-
}
|
|
2232
|
-
return null;
|
|
2233
|
-
}
|
|
2234
|
-
function isWebKit() {
|
|
2235
|
-
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
2236
|
-
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
2237
|
-
}
|
|
2238
|
-
function isLastTraversableNode(node) {
|
|
2239
|
-
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
2240
|
-
}
|
|
2241
|
-
function getComputedStyle$1(element) {
|
|
2242
|
-
return getWindow(element).getComputedStyle(element);
|
|
2243
|
-
}
|
|
2244
|
-
function getNodeScroll(element) {
|
|
2245
|
-
if (isElement(element)) {
|
|
2246
|
-
return {
|
|
2247
|
-
scrollLeft: element.scrollLeft,
|
|
2248
|
-
scrollTop: element.scrollTop
|
|
2249
|
-
};
|
|
2250
|
-
}
|
|
2251
|
-
return {
|
|
2252
|
-
scrollLeft: element.scrollX,
|
|
2253
|
-
scrollTop: element.scrollY
|
|
2254
|
-
};
|
|
2255
|
-
}
|
|
2256
|
-
function getParentNode(node) {
|
|
2257
|
-
if (getNodeName(node) === 'html') {
|
|
2258
|
-
return node;
|
|
2259
|
-
}
|
|
2260
|
-
const result =
|
|
2261
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
2262
|
-
node.assignedSlot ||
|
|
2263
|
-
// DOM Element detected.
|
|
2264
|
-
node.parentNode ||
|
|
2265
|
-
// ShadowRoot detected.
|
|
2266
|
-
isShadowRoot(node) && node.host ||
|
|
2267
|
-
// Fallback.
|
|
2268
|
-
getDocumentElement(node);
|
|
2269
|
-
return isShadowRoot(result) ? result.host : result;
|
|
2270
|
-
}
|
|
2271
|
-
function getNearestOverflowAncestor(node) {
|
|
2272
|
-
const parentNode = getParentNode(node);
|
|
2273
|
-
if (isLastTraversableNode(parentNode)) {
|
|
2274
|
-
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
2275
|
-
}
|
|
2276
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
2277
|
-
return parentNode;
|
|
2278
|
-
}
|
|
2279
|
-
return getNearestOverflowAncestor(parentNode);
|
|
2280
|
-
}
|
|
2281
|
-
function getOverflowAncestors(node, list, traverseIframes) {
|
|
2282
|
-
var _node$ownerDocument2;
|
|
2283
|
-
if (list === void 0) {
|
|
2284
|
-
list = [];
|
|
2285
|
-
}
|
|
2286
|
-
if (traverseIframes === void 0) {
|
|
2287
|
-
traverseIframes = true;
|
|
2288
|
-
}
|
|
2289
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
2290
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
2291
|
-
const win = getWindow(scrollableAncestor);
|
|
2292
|
-
if (isBody) {
|
|
2293
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
|
|
2294
|
-
}
|
|
2295
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
2296
|
-
}
|
|
2297
|
-
|
|
2298
|
-
function getCssDimensions(element) {
|
|
2299
|
-
const css = getComputedStyle$1(element);
|
|
2300
|
-
// In testing environments, the `width` and `height` properties are empty
|
|
2301
|
-
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
2302
|
-
let width = parseFloat(css.width) || 0;
|
|
2303
|
-
let height = parseFloat(css.height) || 0;
|
|
2304
|
-
const hasOffset = isHTMLElement(element);
|
|
2305
|
-
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
2306
|
-
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
2307
|
-
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
2308
|
-
if (shouldFallback) {
|
|
2309
|
-
width = offsetWidth;
|
|
2310
|
-
height = offsetHeight;
|
|
2311
|
-
}
|
|
2312
|
-
return {
|
|
2313
|
-
width,
|
|
2314
|
-
height,
|
|
2315
|
-
$: shouldFallback
|
|
2316
|
-
};
|
|
2317
|
-
}
|
|
2318
|
-
|
|
2319
|
-
function unwrapElement(element) {
|
|
2320
|
-
return !isElement(element) ? element.contextElement : element;
|
|
2321
|
-
}
|
|
2322
|
-
|
|
2323
|
-
function getScale(element) {
|
|
2324
|
-
const domElement = unwrapElement(element);
|
|
2325
|
-
if (!isHTMLElement(domElement)) {
|
|
2326
|
-
return createCoords(1);
|
|
2327
|
-
}
|
|
2328
|
-
const rect = domElement.getBoundingClientRect();
|
|
2329
|
-
const {
|
|
2330
|
-
width,
|
|
2331
|
-
height,
|
|
2332
|
-
$
|
|
2333
|
-
} = getCssDimensions(domElement);
|
|
2334
|
-
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
2335
|
-
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
2336
|
-
|
|
2337
|
-
// 0, NaN, or Infinity should always fallback to 1.
|
|
2338
|
-
|
|
2339
|
-
if (!x || !Number.isFinite(x)) {
|
|
2340
|
-
x = 1;
|
|
2341
|
-
}
|
|
2342
|
-
if (!y || !Number.isFinite(y)) {
|
|
2343
|
-
y = 1;
|
|
2344
|
-
}
|
|
2345
|
-
return {
|
|
2346
|
-
x,
|
|
2347
|
-
y
|
|
2348
|
-
};
|
|
2349
|
-
}
|
|
2350
|
-
|
|
2351
|
-
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
2352
|
-
function getVisualOffsets(element) {
|
|
2353
|
-
const win = getWindow(element);
|
|
2354
|
-
if (!isWebKit() || !win.visualViewport) {
|
|
2355
|
-
return noOffsets;
|
|
2356
|
-
}
|
|
2357
|
-
return {
|
|
2358
|
-
x: win.visualViewport.offsetLeft,
|
|
2359
|
-
y: win.visualViewport.offsetTop
|
|
2360
|
-
};
|
|
2361
|
-
}
|
|
2362
|
-
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
2363
|
-
if (isFixed === void 0) {
|
|
2364
|
-
isFixed = false;
|
|
2365
|
-
}
|
|
2366
|
-
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
2367
|
-
return false;
|
|
2368
|
-
}
|
|
2369
|
-
return isFixed;
|
|
2370
|
-
}
|
|
2371
|
-
|
|
2372
|
-
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
2373
|
-
if (includeScale === void 0) {
|
|
2374
|
-
includeScale = false;
|
|
2375
|
-
}
|
|
2376
|
-
if (isFixedStrategy === void 0) {
|
|
2377
|
-
isFixedStrategy = false;
|
|
2378
|
-
}
|
|
2379
|
-
const clientRect = element.getBoundingClientRect();
|
|
2380
|
-
const domElement = unwrapElement(element);
|
|
2381
|
-
let scale = createCoords(1);
|
|
2382
|
-
if (includeScale) {
|
|
2383
|
-
if (offsetParent) {
|
|
2384
|
-
if (isElement(offsetParent)) {
|
|
2385
|
-
scale = getScale(offsetParent);
|
|
2386
|
-
}
|
|
2387
|
-
} else {
|
|
2388
|
-
scale = getScale(element);
|
|
2389
|
-
}
|
|
2390
|
-
}
|
|
2391
|
-
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
2392
|
-
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
2393
|
-
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
2394
|
-
let width = clientRect.width / scale.x;
|
|
2395
|
-
let height = clientRect.height / scale.y;
|
|
2396
|
-
if (domElement) {
|
|
2397
|
-
const win = getWindow(domElement);
|
|
2398
|
-
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
2399
|
-
let currentWin = win;
|
|
2400
|
-
let currentIFrame = currentWin.frameElement;
|
|
2401
|
-
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
2402
|
-
const iframeScale = getScale(currentIFrame);
|
|
2403
|
-
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
2404
|
-
const css = getComputedStyle$1(currentIFrame);
|
|
2405
|
-
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
2406
|
-
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
2407
|
-
x *= iframeScale.x;
|
|
2408
|
-
y *= iframeScale.y;
|
|
2409
|
-
width *= iframeScale.x;
|
|
2410
|
-
height *= iframeScale.y;
|
|
2411
|
-
x += left;
|
|
2412
|
-
y += top;
|
|
2413
|
-
currentWin = getWindow(currentIFrame);
|
|
2414
|
-
currentIFrame = currentWin.frameElement;
|
|
2415
|
-
}
|
|
2416
|
-
}
|
|
2417
|
-
return rectToClientRect({
|
|
2418
|
-
width,
|
|
2419
|
-
height,
|
|
2420
|
-
x,
|
|
2421
|
-
y
|
|
2422
|
-
});
|
|
2423
|
-
}
|
|
2424
|
-
|
|
2425
|
-
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
2426
|
-
let {
|
|
2427
|
-
elements,
|
|
2428
|
-
rect,
|
|
2429
|
-
offsetParent,
|
|
2430
|
-
strategy
|
|
2431
|
-
} = _ref;
|
|
2432
|
-
const isFixed = strategy === 'fixed';
|
|
2433
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
2434
|
-
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
2435
|
-
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
2436
|
-
return rect;
|
|
2437
|
-
}
|
|
2438
|
-
let scroll = {
|
|
2439
|
-
scrollLeft: 0,
|
|
2440
|
-
scrollTop: 0
|
|
2441
|
-
};
|
|
2442
|
-
let scale = createCoords(1);
|
|
2443
|
-
const offsets = createCoords(0);
|
|
2444
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2445
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2446
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2447
|
-
scroll = getNodeScroll(offsetParent);
|
|
2448
|
-
}
|
|
2449
|
-
if (isHTMLElement(offsetParent)) {
|
|
2450
|
-
const offsetRect = getBoundingClientRect(offsetParent);
|
|
2451
|
-
scale = getScale(offsetParent);
|
|
2452
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2453
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2454
|
-
}
|
|
2455
|
-
}
|
|
2456
|
-
return {
|
|
2457
|
-
width: rect.width * scale.x,
|
|
2458
|
-
height: rect.height * scale.y,
|
|
2459
|
-
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
|
|
2460
|
-
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
|
|
2461
|
-
};
|
|
2462
|
-
}
|
|
2463
|
-
|
|
2464
|
-
function getClientRects(element) {
|
|
2465
|
-
return Array.from(element.getClientRects());
|
|
2466
|
-
}
|
|
2467
|
-
|
|
2468
|
-
function getWindowScrollBarX(element) {
|
|
2469
|
-
// If <html> has a CSS width greater than the viewport, then this will be
|
|
2470
|
-
// incorrect for RTL.
|
|
2471
|
-
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
|
|
2472
|
-
}
|
|
2473
|
-
|
|
2474
|
-
// Gets the entire size of the scrollable document area, even extending outside
|
|
2475
|
-
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
2476
|
-
function getDocumentRect(element) {
|
|
2477
|
-
const html = getDocumentElement(element);
|
|
2478
|
-
const scroll = getNodeScroll(element);
|
|
2479
|
-
const body = element.ownerDocument.body;
|
|
2480
|
-
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
2481
|
-
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
2482
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
2483
|
-
const y = -scroll.scrollTop;
|
|
2484
|
-
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
2485
|
-
x += max(html.clientWidth, body.clientWidth) - width;
|
|
2486
|
-
}
|
|
2487
|
-
return {
|
|
2488
|
-
width,
|
|
2489
|
-
height,
|
|
2490
|
-
x,
|
|
2491
|
-
y
|
|
2492
|
-
};
|
|
2493
|
-
}
|
|
2494
|
-
|
|
2495
|
-
function getViewportRect(element, strategy) {
|
|
2496
|
-
const win = getWindow(element);
|
|
2497
|
-
const html = getDocumentElement(element);
|
|
2498
|
-
const visualViewport = win.visualViewport;
|
|
2499
|
-
let width = html.clientWidth;
|
|
2500
|
-
let height = html.clientHeight;
|
|
2501
|
-
let x = 0;
|
|
2502
|
-
let y = 0;
|
|
2503
|
-
if (visualViewport) {
|
|
2504
|
-
width = visualViewport.width;
|
|
2505
|
-
height = visualViewport.height;
|
|
2506
|
-
const visualViewportBased = isWebKit();
|
|
2507
|
-
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
2508
|
-
x = visualViewport.offsetLeft;
|
|
2509
|
-
y = visualViewport.offsetTop;
|
|
2510
|
-
}
|
|
2511
|
-
}
|
|
2512
|
-
return {
|
|
2513
|
-
width,
|
|
2514
|
-
height,
|
|
2515
|
-
x,
|
|
2516
|
-
y
|
|
2517
|
-
};
|
|
2518
|
-
}
|
|
2519
|
-
|
|
2520
|
-
// Returns the inner client rect, subtracting scrollbars if present.
|
|
2521
|
-
function getInnerBoundingClientRect(element, strategy) {
|
|
2522
|
-
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
2523
|
-
const top = clientRect.top + element.clientTop;
|
|
2524
|
-
const left = clientRect.left + element.clientLeft;
|
|
2525
|
-
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
2526
|
-
const width = element.clientWidth * scale.x;
|
|
2527
|
-
const height = element.clientHeight * scale.y;
|
|
2528
|
-
const x = left * scale.x;
|
|
2529
|
-
const y = top * scale.y;
|
|
2530
|
-
return {
|
|
2531
|
-
width,
|
|
2532
|
-
height,
|
|
2533
|
-
x,
|
|
2534
|
-
y
|
|
2535
|
-
};
|
|
2536
|
-
}
|
|
2537
|
-
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
2538
|
-
let rect;
|
|
2539
|
-
if (clippingAncestor === 'viewport') {
|
|
2540
|
-
rect = getViewportRect(element, strategy);
|
|
2541
|
-
} else if (clippingAncestor === 'document') {
|
|
2542
|
-
rect = getDocumentRect(getDocumentElement(element));
|
|
2543
|
-
} else if (isElement(clippingAncestor)) {
|
|
2544
|
-
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
2545
|
-
} else {
|
|
2546
|
-
const visualOffsets = getVisualOffsets(element);
|
|
2547
|
-
rect = {
|
|
2548
|
-
...clippingAncestor,
|
|
2549
|
-
x: clippingAncestor.x - visualOffsets.x,
|
|
2550
|
-
y: clippingAncestor.y - visualOffsets.y
|
|
2551
|
-
};
|
|
2552
|
-
}
|
|
2553
|
-
return rectToClientRect(rect);
|
|
2554
|
-
}
|
|
2555
|
-
function hasFixedPositionAncestor(element, stopNode) {
|
|
2556
|
-
const parentNode = getParentNode(element);
|
|
2557
|
-
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
2558
|
-
return false;
|
|
2559
|
-
}
|
|
2560
|
-
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
2561
|
-
}
|
|
2562
|
-
|
|
2563
|
-
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
2564
|
-
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
2565
|
-
// of the given element up the tree.
|
|
2566
|
-
function getClippingElementAncestors(element, cache) {
|
|
2567
|
-
const cachedResult = cache.get(element);
|
|
2568
|
-
if (cachedResult) {
|
|
2569
|
-
return cachedResult;
|
|
2570
|
-
}
|
|
2571
|
-
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
2572
|
-
let currentContainingBlockComputedStyle = null;
|
|
2573
|
-
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
2574
|
-
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
2575
|
-
|
|
2576
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
2577
|
-
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
2578
|
-
const computedStyle = getComputedStyle$1(currentNode);
|
|
2579
|
-
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
2580
|
-
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
2581
|
-
currentContainingBlockComputedStyle = null;
|
|
2582
|
-
}
|
|
2583
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
2584
|
-
if (shouldDropCurrentNode) {
|
|
2585
|
-
// Drop non-containing blocks.
|
|
2586
|
-
result = result.filter(ancestor => ancestor !== currentNode);
|
|
2587
|
-
} else {
|
|
2588
|
-
// Record last containing block for next iteration.
|
|
2589
|
-
currentContainingBlockComputedStyle = computedStyle;
|
|
2590
|
-
}
|
|
2591
|
-
currentNode = getParentNode(currentNode);
|
|
2592
|
-
}
|
|
2593
|
-
cache.set(element, result);
|
|
2594
|
-
return result;
|
|
2595
|
-
}
|
|
2596
|
-
|
|
2597
|
-
// Gets the maximum area that the element is visible in due to any number of
|
|
2598
|
-
// clipping ancestors.
|
|
2599
|
-
function getClippingRect(_ref) {
|
|
2600
|
-
let {
|
|
2601
|
-
element,
|
|
2602
|
-
boundary,
|
|
2603
|
-
rootBoundary,
|
|
2604
|
-
strategy
|
|
2605
|
-
} = _ref;
|
|
2606
|
-
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
2607
|
-
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
2608
|
-
const firstClippingAncestor = clippingAncestors[0];
|
|
2609
|
-
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
2610
|
-
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
2611
|
-
accRect.top = max(rect.top, accRect.top);
|
|
2612
|
-
accRect.right = min(rect.right, accRect.right);
|
|
2613
|
-
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
2614
|
-
accRect.left = max(rect.left, accRect.left);
|
|
2615
|
-
return accRect;
|
|
2616
|
-
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
2617
|
-
return {
|
|
2618
|
-
width: clippingRect.right - clippingRect.left,
|
|
2619
|
-
height: clippingRect.bottom - clippingRect.top,
|
|
2620
|
-
x: clippingRect.left,
|
|
2621
|
-
y: clippingRect.top
|
|
2622
|
-
};
|
|
2623
|
-
}
|
|
2624
|
-
|
|
2625
|
-
function getDimensions(element) {
|
|
2626
|
-
const {
|
|
2627
|
-
width,
|
|
2628
|
-
height
|
|
2629
|
-
} = getCssDimensions(element);
|
|
2630
|
-
return {
|
|
2631
|
-
width,
|
|
2632
|
-
height
|
|
2633
|
-
};
|
|
2634
|
-
}
|
|
2635
|
-
|
|
2636
|
-
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
2637
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2638
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
2639
|
-
const isFixed = strategy === 'fixed';
|
|
2640
|
-
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
2641
|
-
let scroll = {
|
|
2642
|
-
scrollLeft: 0,
|
|
2643
|
-
scrollTop: 0
|
|
2644
|
-
};
|
|
2645
|
-
const offsets = createCoords(0);
|
|
2646
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2647
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2648
|
-
scroll = getNodeScroll(offsetParent);
|
|
2649
|
-
}
|
|
2650
|
-
if (isOffsetParentAnElement) {
|
|
2651
|
-
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
2652
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2653
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2654
|
-
} else if (documentElement) {
|
|
2655
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
2656
|
-
}
|
|
2657
|
-
}
|
|
2658
|
-
const x = rect.left + scroll.scrollLeft - offsets.x;
|
|
2659
|
-
const y = rect.top + scroll.scrollTop - offsets.y;
|
|
2660
|
-
return {
|
|
2661
|
-
x,
|
|
2662
|
-
y,
|
|
2663
|
-
width: rect.width,
|
|
2664
|
-
height: rect.height
|
|
2665
|
-
};
|
|
2666
|
-
}
|
|
2667
|
-
|
|
2668
|
-
function isStaticPositioned(element) {
|
|
2669
|
-
return getComputedStyle$1(element).position === 'static';
|
|
2670
|
-
}
|
|
2671
|
-
|
|
2672
|
-
function getTrueOffsetParent(element, polyfill) {
|
|
2673
|
-
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
2674
|
-
return null;
|
|
2675
|
-
}
|
|
2676
|
-
if (polyfill) {
|
|
2677
|
-
return polyfill(element);
|
|
2678
|
-
}
|
|
2679
|
-
return element.offsetParent;
|
|
2680
|
-
}
|
|
2681
|
-
|
|
2682
|
-
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
2683
|
-
// such as table ancestors and cross browser bugs.
|
|
2684
|
-
function getOffsetParent(element, polyfill) {
|
|
2685
|
-
const win = getWindow(element);
|
|
2686
|
-
if (isTopLayer(element)) {
|
|
2687
|
-
return win;
|
|
2688
|
-
}
|
|
2689
|
-
if (!isHTMLElement(element)) {
|
|
2690
|
-
let svgOffsetParent = getParentNode(element);
|
|
2691
|
-
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
2692
|
-
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
2693
|
-
return svgOffsetParent;
|
|
2694
|
-
}
|
|
2695
|
-
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
2696
|
-
}
|
|
2697
|
-
return win;
|
|
2698
|
-
}
|
|
2699
|
-
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
2700
|
-
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
2701
|
-
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
2702
|
-
}
|
|
2703
|
-
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
2704
|
-
return win;
|
|
2705
|
-
}
|
|
2706
|
-
return offsetParent || getContainingBlock(element) || win;
|
|
2707
|
-
}
|
|
2708
|
-
|
|
2709
|
-
const getElementRects = async function (data) {
|
|
2710
|
-
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
2711
|
-
const getDimensionsFn = this.getDimensions;
|
|
2712
|
-
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
2713
|
-
return {
|
|
2714
|
-
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
2715
|
-
floating: {
|
|
2716
|
-
x: 0,
|
|
2717
|
-
y: 0,
|
|
2718
|
-
width: floatingDimensions.width,
|
|
2719
|
-
height: floatingDimensions.height
|
|
2720
|
-
}
|
|
2721
|
-
};
|
|
2722
|
-
};
|
|
2723
|
-
|
|
2724
|
-
function isRTL(element) {
|
|
2725
|
-
return getComputedStyle$1(element).direction === 'rtl';
|
|
2726
|
-
}
|
|
2727
|
-
|
|
2728
|
-
const platform = {
|
|
2729
|
-
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
2730
|
-
getDocumentElement,
|
|
2731
|
-
getClippingRect,
|
|
2732
|
-
getOffsetParent,
|
|
2733
|
-
getElementRects,
|
|
2734
|
-
getClientRects,
|
|
2735
|
-
getDimensions,
|
|
2736
|
-
getScale,
|
|
2737
|
-
isElement,
|
|
2738
|
-
isRTL
|
|
2739
|
-
};
|
|
2740
|
-
|
|
2741
|
-
// https://samthor.au/2021/observing-dom/
|
|
2742
|
-
function observeMove(element, onMove) {
|
|
2743
|
-
let io = null;
|
|
2744
|
-
let timeoutId;
|
|
2745
|
-
const root = getDocumentElement(element);
|
|
2746
|
-
function cleanup() {
|
|
2747
|
-
var _io;
|
|
2748
|
-
clearTimeout(timeoutId);
|
|
2749
|
-
(_io = io) == null || _io.disconnect();
|
|
2750
|
-
io = null;
|
|
2751
|
-
}
|
|
2752
|
-
function refresh(skip, threshold) {
|
|
2753
|
-
if (skip === void 0) {
|
|
2754
|
-
skip = false;
|
|
2755
|
-
}
|
|
2756
|
-
if (threshold === void 0) {
|
|
2757
|
-
threshold = 1;
|
|
2758
|
-
}
|
|
2759
|
-
cleanup();
|
|
2760
|
-
const {
|
|
2761
|
-
left,
|
|
2762
|
-
top,
|
|
2763
|
-
width,
|
|
2764
|
-
height
|
|
2765
|
-
} = element.getBoundingClientRect();
|
|
2766
|
-
if (!skip) {
|
|
2767
|
-
onMove();
|
|
2768
|
-
}
|
|
2769
|
-
if (!width || !height) {
|
|
2770
|
-
return;
|
|
2771
|
-
}
|
|
2772
|
-
const insetTop = floor(top);
|
|
2773
|
-
const insetRight = floor(root.clientWidth - (left + width));
|
|
2774
|
-
const insetBottom = floor(root.clientHeight - (top + height));
|
|
2775
|
-
const insetLeft = floor(left);
|
|
2776
|
-
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
2777
|
-
const options = {
|
|
2778
|
-
rootMargin,
|
|
2779
|
-
threshold: max(0, min(1, threshold)) || 1
|
|
2780
|
-
};
|
|
2781
|
-
let isFirstUpdate = true;
|
|
2782
|
-
function handleObserve(entries) {
|
|
2783
|
-
const ratio = entries[0].intersectionRatio;
|
|
2784
|
-
if (ratio !== threshold) {
|
|
2785
|
-
if (!isFirstUpdate) {
|
|
2786
|
-
return refresh();
|
|
2787
|
-
}
|
|
2788
|
-
if (!ratio) {
|
|
2789
|
-
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
2790
|
-
// to prevent an infinite loop of updates.
|
|
2791
|
-
timeoutId = setTimeout(() => {
|
|
2792
|
-
refresh(false, 1e-7);
|
|
2793
|
-
}, 1000);
|
|
2794
|
-
} else {
|
|
2795
|
-
refresh(false, ratio);
|
|
2796
|
-
}
|
|
2797
|
-
}
|
|
2798
|
-
isFirstUpdate = false;
|
|
2799
|
-
}
|
|
2800
|
-
|
|
2801
|
-
// Older browsers don't support a `document` as the root and will throw an
|
|
2802
|
-
// error.
|
|
2803
|
-
try {
|
|
2804
|
-
io = new IntersectionObserver(handleObserve, {
|
|
2805
|
-
...options,
|
|
2806
|
-
// Handle <iframe>s
|
|
2807
|
-
root: root.ownerDocument
|
|
2808
|
-
});
|
|
2809
|
-
} catch (e) {
|
|
2810
|
-
io = new IntersectionObserver(handleObserve, options);
|
|
2811
|
-
}
|
|
2812
|
-
io.observe(element);
|
|
2813
|
-
}
|
|
2814
|
-
refresh(true);
|
|
2815
|
-
return cleanup;
|
|
2816
|
-
}
|
|
2817
|
-
|
|
2818
|
-
/**
|
|
2819
|
-
* Automatically updates the position of the floating element when necessary.
|
|
2820
|
-
* Should only be called when the floating element is mounted on the DOM or
|
|
2821
|
-
* visible on the screen.
|
|
2822
|
-
* @returns cleanup function that should be invoked when the floating element is
|
|
2823
|
-
* removed from the DOM or hidden from the screen.
|
|
2824
|
-
* @see https://floating-ui.com/docs/autoUpdate
|
|
2825
|
-
*/
|
|
2826
|
-
function autoUpdate(reference, floating, update, options) {
|
|
2827
|
-
if (options === void 0) {
|
|
2828
|
-
options = {};
|
|
2829
|
-
}
|
|
2830
|
-
const {
|
|
2831
|
-
ancestorScroll = true,
|
|
2832
|
-
ancestorResize = true,
|
|
2833
|
-
elementResize = typeof ResizeObserver === 'function',
|
|
2834
|
-
layoutShift = typeof IntersectionObserver === 'function',
|
|
2835
|
-
animationFrame = false
|
|
2836
|
-
} = options;
|
|
2837
|
-
const referenceEl = unwrapElement(reference);
|
|
2838
|
-
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
2839
|
-
ancestors.forEach(ancestor => {
|
|
2840
|
-
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
2841
|
-
passive: true
|
|
2842
|
-
});
|
|
2843
|
-
ancestorResize && ancestor.addEventListener('resize', update);
|
|
2844
|
-
});
|
|
2845
|
-
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
2846
|
-
let reobserveFrame = -1;
|
|
2847
|
-
let resizeObserver = null;
|
|
2848
|
-
if (elementResize) {
|
|
2849
|
-
resizeObserver = new ResizeObserver(_ref => {
|
|
2850
|
-
let [firstEntry] = _ref;
|
|
2851
|
-
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
2852
|
-
// Prevent update loops when using the `size` middleware.
|
|
2853
|
-
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
2854
|
-
resizeObserver.unobserve(floating);
|
|
2855
|
-
cancelAnimationFrame(reobserveFrame);
|
|
2856
|
-
reobserveFrame = requestAnimationFrame(() => {
|
|
2857
|
-
var _resizeObserver;
|
|
2858
|
-
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
2859
|
-
});
|
|
2860
|
-
}
|
|
2861
|
-
update();
|
|
2862
|
-
});
|
|
2863
|
-
if (referenceEl && !animationFrame) {
|
|
2864
|
-
resizeObserver.observe(referenceEl);
|
|
2865
|
-
}
|
|
2866
|
-
resizeObserver.observe(floating);
|
|
2867
|
-
}
|
|
2868
|
-
let frameId;
|
|
2869
|
-
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
2870
|
-
if (animationFrame) {
|
|
2871
|
-
frameLoop();
|
|
2872
|
-
}
|
|
2873
|
-
function frameLoop() {
|
|
2874
|
-
const nextRefRect = getBoundingClientRect(reference);
|
|
2875
|
-
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
2876
|
-
update();
|
|
2877
|
-
}
|
|
2878
|
-
prevRefRect = nextRefRect;
|
|
2879
|
-
frameId = requestAnimationFrame(frameLoop);
|
|
2880
|
-
}
|
|
2881
|
-
update();
|
|
2882
|
-
return () => {
|
|
2883
|
-
var _resizeObserver2;
|
|
2884
|
-
ancestors.forEach(ancestor => {
|
|
2885
|
-
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
2886
|
-
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
2887
|
-
});
|
|
2888
|
-
cleanupIo == null || cleanupIo();
|
|
2889
|
-
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
2890
|
-
resizeObserver = null;
|
|
2891
|
-
if (animationFrame) {
|
|
2892
|
-
cancelAnimationFrame(frameId);
|
|
2893
|
-
}
|
|
2894
|
-
};
|
|
2895
|
-
}
|
|
2896
|
-
|
|
2897
|
-
/**
|
|
2898
|
-
* Modifies the placement by translating the floating element along the
|
|
2899
|
-
* specified axes.
|
|
2900
|
-
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
2901
|
-
* object may be passed.
|
|
2902
|
-
* @see https://floating-ui.com/docs/offset
|
|
2903
|
-
*/
|
|
2904
|
-
const offset = offset$1;
|
|
2905
|
-
|
|
2906
|
-
/**
|
|
2907
|
-
* Optimizes the visibility of the floating element by choosing the placement
|
|
2908
|
-
* that has the most space available automatically, without needing to specify a
|
|
2909
|
-
* preferred placement. Alternative to `flip`.
|
|
2910
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
2911
|
-
*/
|
|
2912
|
-
autoPlacement;
|
|
2913
|
-
|
|
2914
|
-
/**
|
|
2915
|
-
* Optimizes the visibility of the floating element by shifting it in order to
|
|
2916
|
-
* keep it in view when it will overflow the clipping boundary.
|
|
2917
|
-
* @see https://floating-ui.com/docs/shift
|
|
2918
|
-
*/
|
|
2919
|
-
const shift = shift$1;
|
|
2920
|
-
|
|
2921
|
-
/**
|
|
2922
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
2923
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
2924
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
2925
|
-
* @see https://floating-ui.com/docs/flip
|
|
2926
|
-
*/
|
|
2927
|
-
const flip = flip$1;
|
|
2928
|
-
|
|
2929
|
-
/**
|
|
2930
|
-
* Provides data that allows you to change the size of the floating element —
|
|
2931
|
-
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
2932
|
-
* width of the reference element.
|
|
2933
|
-
* @see https://floating-ui.com/docs/size
|
|
2934
|
-
*/
|
|
2935
|
-
const size = size$1;
|
|
2936
|
-
|
|
2937
|
-
/**
|
|
2938
|
-
* Provides data to hide the floating element in applicable situations, such as
|
|
2939
|
-
* when it is not in the same clipping context as the reference element.
|
|
2940
|
-
* @see https://floating-ui.com/docs/hide
|
|
2941
|
-
*/
|
|
2942
|
-
hide;
|
|
2943
|
-
|
|
2944
|
-
/**
|
|
2945
|
-
* Provides data to position an inner element of the floating element so that it
|
|
2946
|
-
* appears centered to the reference element.
|
|
2947
|
-
* @see https://floating-ui.com/docs/arrow
|
|
2948
|
-
*/
|
|
2949
|
-
const arrow = arrow$1;
|
|
2950
|
-
|
|
2951
|
-
/**
|
|
2952
|
-
* Provides improved positioning for inline reference elements that can span
|
|
2953
|
-
* over multiple lines, such as hyperlinks or range selections.
|
|
2954
|
-
* @see https://floating-ui.com/docs/inline
|
|
2955
|
-
*/
|
|
2956
|
-
const inline = inline$1;
|
|
2957
|
-
|
|
2958
|
-
/**
|
|
2959
|
-
* Built-in `limiter` that will stop `shift()` at a certain point.
|
|
2960
|
-
*/
|
|
2961
|
-
const limitShift = limitShift$1;
|
|
2962
|
-
|
|
2963
|
-
/**
|
|
2964
|
-
* Computes the `x` and `y` coordinates that will place the floating element
|
|
2965
|
-
* next to a given reference element.
|
|
2966
|
-
*/
|
|
2967
|
-
const computePosition = (reference, floating, options) => {
|
|
2968
|
-
// This caches the expensive `getClippingElementAncestors` function so that
|
|
2969
|
-
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
2970
|
-
// single call. If other functions become expensive, we can add them as well.
|
|
2971
|
-
const cache = new Map();
|
|
2972
|
-
const mergedOptions = {
|
|
2973
|
-
platform,
|
|
2974
|
-
...options
|
|
2975
|
-
};
|
|
2976
|
-
const platformWithCache = {
|
|
2977
|
-
...mergedOptions.platform,
|
|
2978
|
-
_c: cache
|
|
2979
|
-
};
|
|
2980
|
-
return computePosition$1(reference, floating, {
|
|
2981
|
-
...mergedOptions,
|
|
2982
|
-
platform: platformWithCache
|
|
2983
|
-
});
|
|
2984
|
-
};
|
|
2985
|
-
|
|
2986
|
-
(()=>{var c=class extends Event{oldState;newState;constructor(t,{oldState:o="",newState:r="",...i}={}){super(t,i),this.oldState=String(o||""),this.newState=String(r||"");}},R=new WeakMap;function A(e,t,o){R.set(e,setTimeout(()=>{R.has(e)&&e.dispatchEvent(new c("toggle",{cancelable:!1,oldState:t,newState:o}));},0));}var D=globalThis.ShadowRoot||function(){},z=globalThis.HTMLDialogElement||function(){},M=new WeakMap,p=new WeakMap,h=new WeakMap;function L(e){return h.get(e)||"hidden"}var b=new WeakMap;function O(e){let t=e.popoverTargetElement;if(!(t instanceof HTMLElement))return;let o=L(t);e.popoverTargetAction==="show"&&o==="showing"||e.popoverTargetAction==="hide"&&o==="hidden"||(o==="showing"?m(t,!0,!0):d(t,!1)&&(b.set(t,e),S(t)));}function d(e,t){return !(e.popover!=="auto"&&e.popover!=="manual"||!e.isConnected||t&&L(e)!=="showing"||!t&&L(e)!=="hidden"||e instanceof z&&e.hasAttribute("open")||document.fullscreenElement===e)}function N(e){return e?Array.from(p.get(e.ownerDocument)||[]).indexOf(e)+1:0}function V(e){let t=W(e),o=U(e);return N(t)>N(o)?t:o}function y(e){let t=p.get(e);for(let o of t||[])if(!o.isConnected)t.delete(o);else return o;return null}function v(e){return typeof e.getRootNode=="function"?e.getRootNode():e.parentNode?v(e.parentNode):e}function W(e){for(;e;){if(e instanceof HTMLElement&&e.popover==="auto"&&h.get(e)==="showing")return e;if(e=e.parentElement||v(e),e instanceof D&&(e=e.host),e instanceof Document)return}}function U(e){for(;e;){let t=e.popoverTargetElement;if(t instanceof HTMLElement)return t;if(e=e.parentElement||v(e),e instanceof D&&(e=e.host),e instanceof Document)return}}function G(e){let t=new Map,o=0,r=e.ownerDocument;for(let a of p.get(r)||[])t.set(a,o),o+=1;t.set(e,o),o+=1;let i=null;function l(a){let g=W(a);if(g===null)return null;let n=t.get(g);(i===null||t.get(i)<n)&&(i=g);}return l(e?.parentElement),i}function Q(e){return e.hidden||e instanceof D||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||e instanceof HTMLOptGroupElement||e instanceof HTMLOptionElement||e instanceof HTMLFieldSetElement)&&e.disabled||e instanceof HTMLInputElement&&e.type==="hidden"||e instanceof HTMLAnchorElement&&e.href===""?!1:typeof e.tabIndex=="number"&&e.tabIndex!==-1}function _(e){if(e.shadowRoot&&e.shadowRoot.delegatesFocus!==!0)return null;let t=e;t.shadowRoot&&(t=t.shadowRoot);let o=t.querySelector("[autofocus]");if(o)return o;{let l=t.querySelectorAll("slot");for(let a of l){let g=a.assignedElements({flatten:!0});for(let n of g){if(n.hasAttribute("autofocus"))return n;if(o=n.querySelector("[autofocus]"),o)return o}}}let r=e.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),i=r.currentNode;for(;i;){if(Q(i))return i;i=r.nextNode();}}function $(e){_(e)?.focus();}var H=new WeakMap;function S(e){if(!d(e,!1))return;let t=e.ownerDocument;if(!e.dispatchEvent(new c("beforetoggle",{cancelable:!0,oldState:"closed",newState:"open"}))||!d(e,!1))return;let o=!1;if(e.popover==="auto"){let i=e.getAttribute("popover"),l=G(e)||t;if(T(l,!1,!0),i!==e.getAttribute("popover")||!d(e,!1))return}y(t)||(o=!0),H.delete(e);let r=t.activeElement;e.classList.add(":popover-open"),h.set(e,"showing"),M.has(t)||M.set(t,new Set),M.get(t).add(e),$(e),e.popover==="auto"&&(p.has(t)||p.set(t,new Set),p.get(t).add(e),q(b.get(e),!0)),o&&r&&e.popover==="auto"&&H.set(e,r),A(e,"closed","open");}function m(e,t=!1,o=!1){if(!d(e,!0))return;let r=e.ownerDocument;if(e.popover==="auto"&&(T(e,t,o),!d(e,!0))||(q(b.get(e),!1),b.delete(e),o&&(e.dispatchEvent(new c("beforetoggle",{oldState:"open",newState:"closed"})),!d(e,!0))))return;M.get(r)?.delete(e),p.get(r)?.delete(e),e.classList.remove(":popover-open"),h.set(e,"hidden"),o&&A(e,"open","closed");let i=H.get(e);i&&(H.delete(e),t&&i.focus());}function F(e,t=!1,o=!1){let r=y(e);for(;r;)m(r,t,o),r=y(e);}function T(e,t,o){let r=e.ownerDocument||e;if(e instanceof Document)return F(r,t,o);let i=null,l=!1;for(let a of p.get(r)||[])if(a===e)l=!0;else if(l){i=a;break}if(!l)return F(r,t,o);for(;i&&L(i)==="showing"&&p.get(r)?.size;)m(i,t,o);}var P=new WeakMap;function x(e){if(!e.isTrusted)return;let t=e.composedPath()[0];if(!t)return;let o=t.ownerDocument;if(!y(o))return;let i=V(t);if(i&&e.type==="pointerdown")P.set(o,i);else if(e.type==="pointerup"){let l=P.get(o)===i;P.delete(o),l&&T(i||o,!1,!0);}}var k=new WeakMap;function q(e,t=!1){if(!e)return;k.has(e)||k.set(e,e.getAttribute("aria-expanded"));let o=e.popoverTargetElement;if(o instanceof HTMLElement&&o.popover==="auto")e.setAttribute("aria-expanded",String(t));else {let r=k.get(e);r?e.setAttribute("aria-expanded",r):e.removeAttribute("aria-expanded");}}var B=globalThis.ShadowRoot||function(){};function j(){return typeof HTMLElement<"u"&&typeof HTMLElement.prototype=="object"&&"popover"in HTMLElement.prototype}function f(e,t,o){let r=e[t];Object.defineProperty(e,t,{value(i){return r.call(this,o(i))}});}var J=/(^|[^\\]):popover-open\b/g,C=`
|
|
2987
|
-
:where([popover]) {
|
|
2988
|
-
position: fixed;
|
|
2989
|
-
z-index: 2147483647;
|
|
2990
|
-
inset: 0;
|
|
2991
|
-
padding: 0.25em;
|
|
2992
|
-
width: fit-content;
|
|
2993
|
-
height: fit-content;
|
|
2994
|
-
border-width: initial;
|
|
2995
|
-
border-color: initial;
|
|
2996
|
-
border-image: initial;
|
|
2997
|
-
border-style: solid;
|
|
2998
|
-
background-color: canvas;
|
|
2999
|
-
color: canvastext;
|
|
3000
|
-
overflow: auto;
|
|
3001
|
-
margin: auto;
|
|
3002
|
-
}
|
|
3003
|
-
|
|
3004
|
-
:where(dialog[popover][open]) {
|
|
3005
|
-
display: revert;
|
|
3006
|
-
}
|
|
3007
|
-
|
|
3008
|
-
:where([anchor].\\:popover-open) {
|
|
3009
|
-
inset: auto;
|
|
3010
|
-
}
|
|
3011
|
-
|
|
3012
|
-
:where([anchor]:popover-open) {
|
|
3013
|
-
inset: auto;
|
|
3014
|
-
}
|
|
3015
|
-
|
|
3016
|
-
@supports not (background-color: canvas) {
|
|
3017
|
-
:where([popover]) {
|
|
3018
|
-
background-color: white;
|
|
3019
|
-
color: black;
|
|
3020
|
-
}
|
|
3021
|
-
}
|
|
3022
|
-
|
|
3023
|
-
@supports (width: -moz-fit-content) {
|
|
3024
|
-
:where([popover]) {
|
|
3025
|
-
width: -moz-fit-content;
|
|
3026
|
-
height: -moz-fit-content;
|
|
3027
|
-
}
|
|
3028
|
-
}
|
|
3029
|
-
|
|
3030
|
-
@supports not (inset: 0) {
|
|
3031
|
-
:where([popover]) {
|
|
3032
|
-
top: 0;
|
|
3033
|
-
left: 0;
|
|
3034
|
-
right: 0;
|
|
3035
|
-
bottom: 0;
|
|
3036
|
-
}
|
|
3037
|
-
}
|
|
3038
|
-
|
|
3039
|
-
:where([popover]:not(.\\:popover-open)) {
|
|
3040
|
-
display: none;
|
|
3041
|
-
}
|
|
3042
|
-
`,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();})();
|
|
3043
|
-
|
|
3044
|
-
const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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) .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)}";
|
|
3045
|
-
const PostPopovercontainerStyle0 = postPopovercontainerCss;
|
|
3046
|
-
|
|
3047
|
-
const SIDE_MAP = {
|
|
3048
|
-
top: 'bottom',
|
|
3049
|
-
right: 'left',
|
|
3050
|
-
bottom: 'top',
|
|
3051
|
-
left: 'right',
|
|
3052
|
-
};
|
|
3053
|
-
const PostPopovercontainer = class {
|
|
3054
|
-
constructor(hostRef) {
|
|
3055
|
-
index.registerInstance(this, hostRef);
|
|
3056
|
-
this.postToggle = index.createEvent(this, "postToggle", 7);
|
|
3057
|
-
this.placement = 'top';
|
|
3058
|
-
this.edgeGap = 8;
|
|
3059
|
-
this.arrow = false;
|
|
3060
|
-
}
|
|
3061
|
-
componentDidLoad() {
|
|
3062
|
-
this.host.setAttribute('popover', '');
|
|
3063
|
-
this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
3064
|
-
}
|
|
3065
|
-
disconnectedCallback() {
|
|
3066
|
-
if (typeof this.clearAutoUpdate === 'function')
|
|
3067
|
-
this.clearAutoUpdate();
|
|
3068
|
-
}
|
|
3069
|
-
/**
|
|
3070
|
-
* Programmatically display the tooltip
|
|
3071
|
-
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
|
|
3072
|
-
*/
|
|
3073
|
-
async show(target) {
|
|
3074
|
-
if (!this.toggleTimeoutId) {
|
|
3075
|
-
this.eventTarget = target;
|
|
3076
|
-
this.calculatePosition();
|
|
3077
|
-
this.host.showPopover();
|
|
3078
|
-
}
|
|
3079
|
-
}
|
|
3080
|
-
/**
|
|
3081
|
-
* Programmatically hide this tooltip
|
|
3082
|
-
*/
|
|
3083
|
-
async hide() {
|
|
3084
|
-
if (!this.toggleTimeoutId) {
|
|
3085
|
-
this.eventTarget = null;
|
|
3086
|
-
this.host.hidePopover();
|
|
3087
|
-
}
|
|
3088
|
-
}
|
|
3089
|
-
/**
|
|
3090
|
-
* Toggle tooltip display
|
|
3091
|
-
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
|
|
3092
|
-
* @param force Pass true to always show or false to always hide
|
|
3093
|
-
*/
|
|
3094
|
-
async toggle(target, force) {
|
|
3095
|
-
// Prevent instant double toggle
|
|
3096
|
-
if (!this.toggleTimeoutId) {
|
|
3097
|
-
this.eventTarget = target;
|
|
3098
|
-
this.calculatePosition();
|
|
3099
|
-
this.host.togglePopover(force);
|
|
3100
|
-
this.toggleTimeoutId = null;
|
|
3101
|
-
}
|
|
3102
|
-
return this.host.matches(':where(:popover-open, .popover-open');
|
|
3103
|
-
}
|
|
3104
|
-
/**
|
|
3105
|
-
* Start or stop auto updates based on tooltip events.
|
|
3106
|
-
* Tooltips can be closed or opened with other methods than class members,
|
|
3107
|
-
* therefore listening to the toggle event is safer for cleaning up.
|
|
3108
|
-
* @param e ToggleEvent
|
|
3109
|
-
*/
|
|
3110
|
-
handleToggle(e) {
|
|
3111
|
-
this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
3112
|
-
const isOpen = e.newState === 'open';
|
|
3113
|
-
if (isOpen) {
|
|
3114
|
-
this.startAutoupdates();
|
|
3115
|
-
}
|
|
3116
|
-
else {
|
|
3117
|
-
if (typeof this.clearAutoUpdate === 'function')
|
|
3118
|
-
this.clearAutoUpdate();
|
|
3119
|
-
}
|
|
3120
|
-
this.postToggle.emit(isOpen);
|
|
3121
|
-
}
|
|
3122
|
-
/**
|
|
3123
|
-
* Start listening for DOM updates, scroll events etc. that have
|
|
3124
|
-
* an influence on tooltip positioning
|
|
3125
|
-
*/
|
|
3126
|
-
startAutoupdates() {
|
|
3127
|
-
this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
|
|
3128
|
-
}
|
|
3129
|
-
async calculatePosition() {
|
|
3130
|
-
const gap = this.edgeGap;
|
|
3131
|
-
const middleware = [
|
|
3132
|
-
flip(),
|
|
3133
|
-
inline(),
|
|
3134
|
-
shift({
|
|
3135
|
-
padding: gap,
|
|
3136
|
-
// Prevents shifting away from the anchor too far, while shifting as far as possible
|
|
3137
|
-
// https://floating-ui.com/docs/shift#limiter
|
|
3138
|
-
limiter: limitShift({
|
|
3139
|
-
offset: 32,
|
|
3140
|
-
}),
|
|
3141
|
-
}),
|
|
3142
|
-
size({
|
|
3143
|
-
apply({ availableWidth, elements }) {
|
|
3144
|
-
Object.assign(elements.floating.style, {
|
|
3145
|
-
maxWidth: `${availableWidth - gap * 2}px`,
|
|
3146
|
-
});
|
|
3147
|
-
},
|
|
3148
|
-
}),
|
|
3149
|
-
offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
|
|
3150
|
-
];
|
|
3151
|
-
if (this.arrow) {
|
|
3152
|
-
middleware.push(arrow({ element: this.arrowRef, padding: gap }));
|
|
3153
|
-
}
|
|
3154
|
-
const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
|
|
3155
|
-
placement: this.placement || 'top',
|
|
3156
|
-
strategy: 'fixed',
|
|
3157
|
-
middleware,
|
|
3158
|
-
});
|
|
3159
|
-
// Tooltip
|
|
3160
|
-
this.host.style.left = `${x}px`;
|
|
3161
|
-
this.host.style.top = `${y}px`;
|
|
3162
|
-
// Arrow
|
|
3163
|
-
if (this.arrow) {
|
|
3164
|
-
// Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
|
|
3165
|
-
const side = currentPlacement.split('-')[0];
|
|
3166
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
3167
|
-
const staticSide = SIDE_MAP[side];
|
|
3168
|
-
const offsetBorderLineJoin = 2;
|
|
3169
|
-
Object.assign(this.arrowRef.style, {
|
|
3170
|
-
top: arrowY ? `${arrowY}px` : '',
|
|
3171
|
-
left: arrowX ? `${arrowX}px` : '',
|
|
3172
|
-
[staticSide]: `${-this.arrowRef.offsetWidth / 2 - offsetBorderLineJoin}px`,
|
|
3173
|
-
});
|
|
3174
|
-
// Add position as a class to be able to style arrow for HCM
|
|
3175
|
-
this.arrowRef.classList.remove(...Object.values(SIDE_MAP));
|
|
3176
|
-
this.arrowRef.classList.add(staticSide);
|
|
3177
|
-
}
|
|
3178
|
-
}
|
|
3179
|
-
render() {
|
|
3180
|
-
return (index.h(index.Host, { key: '23e391236e263f7ae7c66c994b2847bcba269b37', "data-version": _package.version }, this.arrow && (index.h("span", { key: '6c6053b2fd315a5940a2c3493182249782b2492c', class: "arrow", ref: el => {
|
|
3181
|
-
this.arrowRef = el;
|
|
3182
|
-
} })), index.h("slot", { key: 'ff998f110f42a22e886eba398285c41d94718bab' })));
|
|
3183
|
-
}
|
|
3184
|
-
get host() { return index.getElement(this); }
|
|
3185
|
-
};
|
|
3186
|
-
PostPopovercontainer.style = PostPopovercontainerStyle0;
|
|
3187
|
-
|
|
3188
|
-
const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
|
|
3189
|
-
const PostTogglebuttonStyle0 = postTogglebuttonCss;
|
|
3190
|
-
|
|
3191
|
-
const PostTogglebutton = class {
|
|
3192
|
-
constructor(hostRef) {
|
|
3193
|
-
index.registerInstance(this, hostRef);
|
|
3194
|
-
this.handleClick = () => {
|
|
3195
|
-
this.toggled = !this.toggled;
|
|
3196
|
-
};
|
|
3197
|
-
this.handleKeydown = (event) => {
|
|
3198
|
-
// perform a click when enter or spaced are pressed to mimic the button behavior
|
|
3199
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
3200
|
-
event.preventDefault(); // prevents the page from scrolling when space is pressed
|
|
3201
|
-
this.host.click();
|
|
3202
|
-
}
|
|
3203
|
-
};
|
|
3204
|
-
this.toggled = false;
|
|
3205
|
-
}
|
|
3206
|
-
validateToggled(value = this.toggled) {
|
|
3207
|
-
checkType.checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
|
|
3208
|
-
}
|
|
3209
|
-
componentWillLoad() {
|
|
3210
|
-
this.validateToggled();
|
|
3211
|
-
// add event listener to not override listener that might be set on the host
|
|
3212
|
-
this.host.addEventListener('click', () => this.handleClick());
|
|
3213
|
-
this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
|
|
3214
|
-
}
|
|
3215
|
-
render() {
|
|
3216
|
-
return (index.h(index.Host, { key: 'f20b7e5f7cd14c1b0addf12600df27e7e5dab841', slot: "post-togglebutton", "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '526540ce9a66fa08f0142e674811fe88e3abcfa6' })));
|
|
3217
|
-
}
|
|
3218
|
-
get host() { return index.getElement(this); }
|
|
3219
|
-
static get watchers() { return {
|
|
3220
|
-
"toggled": ["validateToggled"]
|
|
3221
|
-
}; }
|
|
3222
|
-
};
|
|
3223
|
-
PostTogglebutton.style = PostTogglebuttonStyle0;
|
|
3224
|
-
|
|
3225
|
-
exports.PostClosebutton = PostClosebutton;
|
|
3226
|
-
exports.PostHeader = PostHeader;
|
|
3227
|
-
exports.PostIcon = PostIcon;
|
|
3228
|
-
exports.PostLanguageOption = PostLanguageOption;
|
|
3229
|
-
exports.PostLanguageSwitch = PostLanguageSwitch;
|
|
3230
|
-
exports.PostList = PostList;
|
|
3231
|
-
exports.PostListItem = PostListItem;
|
|
3232
|
-
exports.PostLogo = PostLogo;
|
|
3233
|
-
exports.PostMainnavigation = PostMainnavigation;
|
|
3234
|
-
exports.PostMegadropdown = PostMegadropdown;
|
|
3235
|
-
exports.PostMegadropdownTrigger = PostMegadropdownTrigger;
|
|
3236
|
-
exports.PostMenu = PostMenu;
|
|
3237
|
-
exports.PostMenuTrigger = PostMenuTrigger;
|
|
3238
|
-
exports.PostPopovercontainer = PostPopovercontainer;
|
|
3239
|
-
exports.PostTogglebutton = PostTogglebutton;
|