@swisspost/design-system-components 10.7.0 → 10.9.0
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/README.md +1 -1
- package/dist/cjs/{create-validator-decorator-D7nAb9KJ.js → create-validator-decorator-DVm_SDrR.js} +1 -1
- package/dist/cjs/{index-DWIlRT6N.js → index-DY4QxKNv.js} +5 -5
- package/dist/cjs/is-focus-visible-B3CqVQsX.js +19 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{one-of-B8RUgrZk.js → one-of-qu7_EPxf.js} +1 -1
- package/dist/cjs/{package-BtKYhTNj.js → package-kgRYEtTJ.js} +1 -1
- package/dist/cjs/{pattern-B6VoDk_m.js → pattern-EpwCKMyC.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +6 -6
- package/dist/cjs/post-autocomplete.cjs.entry.js +5 -5
- package/dist/cjs/post-avatar.cjs.entry.js +85 -61
- package/dist/cjs/post-back-to-top.cjs.entry.js +6 -6
- package/dist/cjs/post-banner.cjs.entry.js +5 -5
- package/dist/cjs/post-breadcrumb-item.cjs.entry.js +8 -8
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +7 -7
- package/dist/cjs/post-closebutton_14.cjs.entry.js +545 -607
- package/dist/cjs/post-collapsible_2.cjs.entry.js +13 -7
- package/dist/cjs/post-components.cjs.js +2 -2
- package/dist/cjs/post-date-picker.cjs.entry.js +24 -9
- package/dist/cjs/post-footer.cjs.entry.js +6 -6
- package/dist/cjs/post-linkarea.cjs.entry.js +3 -3
- package/dist/cjs/post-listbox-option.cjs.entry.js +4 -4
- package/dist/cjs/post-listbox.cjs.entry.js +4 -4
- package/dist/cjs/post-number-input.cjs.entry.js +5 -5
- package/dist/cjs/post-pagination.cjs.entry.js +6 -6
- package/dist/cjs/post-popover-trigger.cjs.entry.js +5 -5
- package/dist/cjs/post-popover.cjs.entry.js +9 -9
- package/dist/cjs/post-progressbar.cjs.entry.js +4 -4
- package/dist/cjs/post-rating.cjs.entry.js +6 -6
- package/dist/cjs/post-side-navigation-trigger.cjs.entry.js +6 -6
- package/dist/cjs/post-side-navigation.cjs.entry.js +14 -9
- package/dist/cjs/post-stepper-item.cjs.entry.js +3 -3
- package/dist/cjs/post-stepper.cjs.entry.js +7 -7
- package/dist/cjs/post-tab-item.cjs.entry.js +6 -6
- package/dist/cjs/post-tab-panel.cjs.entry.js +6 -6
- package/dist/cjs/post-tabs.cjs.entry.js +37 -9
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +6 -6
- package/dist/cjs/post-tooltip.cjs.entry.js +8 -6
- package/dist/cjs/{required-bXtlqqaA.js → required-Dgzo-rb5.js} +1 -1
- package/dist/cjs/{type-BqLE7Uui.js → type-DBRxpBZI.js} +1 -1
- package/dist/cjs/{url-CUy3C3sH.js → url-Dl1JABeP.js} +1 -1
- package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
- package/dist/collection/components/post-avatar/avatar-utils.js +1 -2
- package/dist/collection/components/post-avatar/post-avatar.js +77 -59
- package/dist/collection/components/post-back-to-top/post-back-to-top.css +1 -1
- package/dist/collection/components/post-banner/post-banner.css +1 -1
- package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.css +1 -1
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
- package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
- package/dist/collection/components/post-collapsible/post-collapsible.js +9 -3
- package/dist/collection/components/post-date-picker/post-date-picker.css +1 -1
- package/dist/collection/components/post-date-picker/post-date-picker.js +18 -3
- package/dist/collection/components/post-footer/post-footer.css +1 -1
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +100 -18
- package/dist/collection/components/post-icon/post-icon.css +1 -1
- package/dist/collection/components/post-icon/post-icon.js +1 -2
- package/dist/collection/components/post-language-menu/post-language-menu.css +1 -1
- package/dist/collection/components/post-language-menu/post-language-menu.js +2 -2
- package/dist/collection/components/post-linkarea/post-linkarea.js +1 -1
- package/dist/collection/components/post-listbox/post-listbox.css +1 -1
- package/dist/collection/components/post-listbox/post-listbox.js +1 -1
- package/dist/collection/components/post-listbox-option/post-listbox-option.js +2 -2
- package/dist/collection/components/post-logo/post-logo.css +1 -1
- package/dist/collection/components/post-logo/post-logo.js +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +34 -16
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css +1 -1
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +1 -1
- package/dist/collection/components/post-menu/post-menu.css +1 -1
- package/dist/collection/components/post-menu/post-menu.js +3 -14
- package/dist/collection/components/post-menu-item/post-menu-item.css +1 -1
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +1 -1
- package/dist/collection/components/post-number-input/post-number-input.css +2 -2
- package/dist/collection/components/post-number-input/post-number-input.js +2 -2
- package/dist/collection/components/post-pagination/post-pagination.css +1 -1
- package/dist/collection/components/post-popover/post-popover.css +1 -1
- package/dist/collection/components/post-popover/post-popover.js +2 -2
- package/dist/collection/components/post-popover-trigger/post-popover-trigger.js +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +211 -323
- package/dist/collection/components/post-progressbar/post-progressbar.js +1 -1
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-side-navigation/post-side-navigation.css +1 -1
- package/dist/collection/components/post-side-navigation/post-side-navigation.js +7 -3
- package/dist/collection/components/post-side-navigation-trigger/post-side-navigation-trigger.js +1 -1
- package/dist/collection/components/post-stepper/post-stepper.js +1 -1
- package/dist/collection/components/post-stepper-item/post-stepper-item.js +1 -1
- package/dist/collection/components/post-tab-item/post-tab-item.js +2 -2
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
- package/dist/collection/components/post-tabs/post-tabs.css +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +31 -3
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.css +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +3 -1
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
- package/dist/collection/test-setup.js +28 -0
- package/dist/collection/utils/floating-ui/middleware/flip.js +77 -0
- package/dist/collection/utils/floating-ui/middleware/safe-space.js +52 -0
- package/dist/collection/utils/floating-ui/util.js +10 -0
- package/dist/collection/utils/index.js +1 -0
- package/dist/collection/utils/is-focus-visible.js +15 -0
- package/dist/components/is-focus-visible.js +1 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-accordion-item2.js +1 -1
- package/dist/components/post-avatar.js +1 -1
- package/dist/components/post-back-to-top.js +1 -1
- package/dist/components/post-banner.js +1 -1
- package/dist/components/post-breadcrumb-item.js +1 -1
- package/dist/components/post-breadcrumbs.js +1 -1
- package/dist/components/post-closebutton2.js +1 -1
- package/dist/components/post-collapsible2.js +1 -1
- package/dist/components/post-date-picker.js +1 -1
- package/dist/components/post-footer.js +1 -1
- package/dist/components/post-header.js +1 -1
- package/dist/components/post-icon2.js +1 -1
- package/dist/components/post-language-menu.js +1 -1
- package/dist/components/post-linkarea.js +1 -1
- package/dist/components/post-listbox-option.js +1 -1
- package/dist/components/post-listbox.js +1 -1
- package/dist/components/post-logo.js +1 -1
- package/dist/components/post-mainnavigation.js +1 -1
- package/dist/components/post-megadropdown-trigger.js +1 -1
- package/dist/components/post-megadropdown.js +1 -1
- package/dist/components/post-menu-item2.js +1 -1
- package/dist/components/post-menu-trigger2.js +1 -1
- package/dist/components/post-menu2.js +1 -1
- package/dist/components/post-number-input.js +1 -1
- package/dist/components/post-pagination.js +1 -1
- package/dist/components/post-popover-trigger.js +1 -1
- package/dist/components/post-popover.js +1 -1
- package/dist/components/post-popovercontainer2.js +1 -1
- package/dist/components/post-progressbar.js +1 -1
- package/dist/components/post-rating.js +1 -1
- package/dist/components/post-side-navigation-trigger.js +1 -1
- package/dist/components/post-side-navigation.js +1 -1
- package/dist/components/post-stepper-item.js +1 -1
- package/dist/components/post-stepper.js +1 -1
- package/dist/components/post-tab-item.js +1 -1
- package/dist/components/post-tab-panel.js +1 -1
- package/dist/components/post-tabs.js +1 -1
- package/dist/components/post-togglebutton2.js +1 -1
- package/dist/components/post-tooltip-trigger.js +1 -1
- package/dist/components/post-tooltip.js +1 -1
- package/dist/components/react/index.js +1 -1
- package/dist/components/react/p-BWwWKRO5.js +1 -0
- package/dist/components/react/p-CAL337jJ.js +1 -0
- package/dist/components/react/p-CBVthgj-.js +1 -0
- package/dist/components/react/{p-DS46v3ju.js → p-CLkb55ud.js} +1 -1
- package/dist/components/react/{p-C8_zqgAP.js → p-CYBXVnUJ.js} +1 -1
- package/dist/components/react/p-Ci-TsJYj.js +1 -0
- package/dist/components/react/p-CtgMQs_Q.js +1 -0
- package/dist/components/react/p-D4LBzsbB.js +1 -0
- package/dist/components/react/p-D5lqOfVk.js +1 -0
- package/dist/components/react/p-DGpWjdFJ.js +1 -0
- package/dist/components/react/{p-BBv5JYsW.js → p-DSk0Nq8U.js} +1 -1
- package/dist/components/react/{p-1y1rv5Tw.js → p-Db3d6dKF.js} +1 -1
- package/dist/components/react/p-DkDIUTRi.js +1 -0
- package/dist/components/react/post-accordion-item.js +1 -1
- package/dist/components/react/post-accordion.js +1 -1
- package/dist/components/react/post-autocomplete.js +1 -1
- package/dist/components/react/post-avatar.js +1 -1
- package/dist/components/react/post-back-to-top.js +1 -1
- package/dist/components/react/post-banner.js +1 -1
- package/dist/components/react/post-breadcrumb-item.js +1 -1
- package/dist/components/react/post-breadcrumbs.js +1 -1
- package/dist/components/react/post-closebutton.js +1 -1
- package/dist/components/react/post-collapsible-trigger.js +1 -1
- package/dist/components/react/post-collapsible.js +1 -1
- package/dist/components/react/post-date-picker.js +1 -1
- package/dist/components/react/post-footer.js +1 -1
- package/dist/components/react/post-header.js +1 -1
- package/dist/components/react/post-icon.js +1 -1
- package/dist/components/react/post-language-menu-item.js +1 -1
- package/dist/components/react/post-language-menu.js +1 -1
- package/dist/components/react/post-linkarea.js +1 -1
- package/dist/components/react/post-listbox-option.js +1 -1
- package/dist/components/react/post-listbox.js +1 -1
- package/dist/components/react/post-logo.js +1 -1
- package/dist/components/react/post-mainnavigation.js +1 -1
- package/dist/components/react/post-megadropdown-trigger.js +1 -1
- package/dist/components/react/post-megadropdown.js +1 -1
- package/dist/components/react/post-menu-item.js +1 -1
- package/dist/components/react/post-menu-trigger.js +1 -1
- package/dist/components/react/post-menu.js +1 -1
- package/dist/components/react/post-number-input.js +1 -1
- package/dist/components/react/post-pagination.js +1 -1
- package/dist/components/react/post-popover-trigger.js +1 -1
- package/dist/components/react/post-popover.js +1 -1
- package/dist/components/react/post-popovercontainer.js +1 -1
- package/dist/components/react/post-progressbar.js +1 -1
- package/dist/components/react/post-rating.js +1 -1
- package/dist/components/react/post-side-navigation-trigger.js +1 -1
- package/dist/components/react/post-side-navigation.js +1 -1
- package/dist/components/react/post-stepper-item.js +1 -1
- package/dist/components/react/post-stepper.js +1 -1
- package/dist/components/react/post-tab-item.js +1 -1
- package/dist/components/react/post-tab-panel.js +1 -1
- package/dist/components/react/post-tabs.js +1 -1
- package/dist/components/react/post-togglebutton.js +1 -1
- package/dist/components/react/post-tooltip-trigger.js +1 -1
- package/dist/components/react/post-tooltip.js +1 -1
- package/dist/docs.json +67 -45
- package/dist/esm/{create-validator-decorator-DFpQtJzK.js → create-validator-decorator-Cp_NUmrr.js} +1 -1
- package/dist/esm/{index-Bs0zeM5Q.js → index-D0jX3Fts.js} +5 -5
- package/dist/esm/is-focus-visible-BWwWKRO5.js +17 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{one-of-DQCfaZpw.js → one-of-B9locHPx.js} +1 -1
- package/dist/esm/{package-BBz9PVf0.js → package-CAL337jJ.js} +1 -1
- package/dist/esm/{pattern-3lnaFlkk.js → pattern-BL3OBU8C.js} +1 -1
- package/dist/esm/post-accordion_2.entry.js +6 -6
- package/dist/esm/post-autocomplete.entry.js +5 -5
- package/dist/esm/post-avatar.entry.js +85 -61
- package/dist/esm/post-back-to-top.entry.js +6 -6
- package/dist/esm/post-banner.entry.js +5 -5
- package/dist/esm/post-breadcrumb-item.entry.js +8 -8
- package/dist/esm/post-breadcrumbs.entry.js +7 -7
- package/dist/esm/post-closebutton_14.entry.js +545 -607
- package/dist/esm/post-collapsible_2.entry.js +13 -7
- package/dist/esm/post-components.js +3 -3
- package/dist/esm/post-date-picker.entry.js +24 -9
- package/dist/esm/post-footer.entry.js +6 -6
- package/dist/esm/post-linkarea.entry.js +3 -3
- package/dist/esm/post-listbox-option.entry.js +4 -4
- package/dist/esm/post-listbox.entry.js +4 -4
- package/dist/esm/post-number-input.entry.js +5 -5
- package/dist/esm/post-pagination.entry.js +6 -6
- package/dist/esm/post-popover-trigger.entry.js +5 -5
- package/dist/esm/post-popover.entry.js +9 -9
- package/dist/esm/post-progressbar.entry.js +4 -4
- package/dist/esm/post-rating.entry.js +6 -6
- package/dist/esm/post-side-navigation-trigger.entry.js +6 -6
- package/dist/esm/post-side-navigation.entry.js +14 -9
- package/dist/esm/post-stepper-item.entry.js +3 -3
- package/dist/esm/post-stepper.entry.js +7 -7
- package/dist/esm/post-tab-item.entry.js +6 -6
- package/dist/esm/post-tab-panel.entry.js +6 -6
- package/dist/esm/post-tabs.entry.js +37 -9
- package/dist/esm/post-tooltip-trigger.entry.js +6 -6
- package/dist/esm/post-tooltip.entry.js +8 -6
- package/dist/esm/{required-NuzPg5jZ.js → required-CDaQB1gC.js} +1 -1
- package/dist/esm/{type-ChnksJ25.js → type-CQ7XuPCZ.js} +1 -1
- package/dist/esm/{url-BCk3ZU-x.js → url-B-86gtTK.js} +1 -1
- package/dist/post-components/{p-63e570c4.entry.js → p-077be898.entry.js} +1 -1
- package/dist/post-components/{p-6a2f47af.entry.js → p-184bd61c.entry.js} +1 -1
- package/dist/post-components/p-1933e4fa.entry.js +1 -0
- package/dist/post-components/p-21e6f82a.entry.js +1 -0
- package/dist/post-components/{p-c2de3702.entry.js → p-2220db4c.entry.js} +1 -1
- package/dist/post-components/p-2aff3873.entry.js +1 -0
- package/dist/post-components/p-2b475cd7.entry.js +1 -0
- package/dist/post-components/p-33a898ec.entry.js +1 -0
- package/dist/post-components/p-405c1fff.entry.js +1 -0
- package/dist/post-components/{p-bd128657.entry.js → p-5efaca25.entry.js} +1 -1
- package/dist/post-components/p-6a9661d9.entry.js +1 -0
- package/dist/post-components/{p-f275b872.entry.js → p-7dd192b3.entry.js} +1 -1
- package/dist/post-components/p-8e5052d5.entry.js +1 -0
- package/dist/post-components/p-9440738d.entry.js +1 -0
- package/dist/post-components/{p-31550a50.entry.js → p-965a02fb.entry.js} +1 -1
- package/dist/post-components/{p-61a45246.entry.js → p-9740719e.entry.js} +1 -1
- package/dist/post-components/p-9af8f5af.entry.js +1 -0
- package/dist/post-components/{p-DeUk3rcv.js → p-BCPv4bcY.js} +1 -1
- package/dist/post-components/p-BWwWKRO5.js +1 -0
- package/dist/post-components/p-CAL337jJ.js +1 -0
- package/dist/post-components/{p-D1s6tESz.js → p-CP3LjuFR.js} +1 -1
- package/dist/post-components/p-D0jX3Fts.js +2 -0
- package/dist/post-components/{p-Bl-_v3aT.js → p-D6mVqZLg.js} +1 -1
- package/dist/post-components/{p-BwhzbRIR.js → p-DSaWK_q-.js} +1 -1
- package/dist/post-components/p-VPHnF9fB.js +1 -0
- package/dist/post-components/p-a6971c1c.entry.js +1 -0
- package/dist/post-components/p-a7d8f328.entry.js +1 -0
- package/dist/post-components/{p-f784e149.entry.js → p-bb9a0e1e.entry.js} +1 -1
- package/dist/post-components/{p-e6a4146b.entry.js → p-bf8c7dca.entry.js} +1 -1
- package/dist/post-components/p-c3351def.entry.js +1 -0
- package/dist/post-components/{p-31a97aae.entry.js → p-c87f33f0.entry.js} +1 -1
- package/dist/post-components/{p-64480e3a.entry.js → p-e30b534d.entry.js} +1 -1
- package/dist/post-components/{p-43240818.entry.js → p-e73eabac.entry.js} +1 -1
- package/dist/post-components/{p-f566768e.entry.js → p-e84fe883.entry.js} +1 -1
- package/dist/post-components/{p-aa33141b.entry.js → p-eaa28736.entry.js} +1 -1
- package/dist/post-components/{p-451ec8ee.entry.js → p-f2cb8ed1.entry.js} +1 -1
- package/dist/post-components/{p-58b66607.entry.js → p-ffbf2375.entry.js} +1 -1
- package/dist/post-components/p-gv9b-Z15.js +1 -0
- package/dist/post-components/post-components.css +2 -2
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-avatar/avatar-utils.d.ts +0 -2
- package/dist/types/components/post-avatar/post-avatar.d.ts +11 -9
- package/dist/types/components/post-date-picker/post-date-picker.d.ts +2 -0
- package/dist/types/components/post-header/post-header.d.ts +14 -0
- package/dist/types/components/post-language-menu/post-language-menu.d.ts +3 -0
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +1 -1
- package/dist/types/components/post-menu/post-menu.d.ts +0 -1
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +74 -69
- package/dist/types/components/post-tabs/post-tabs.d.ts +4 -0
- package/dist/types/components.d.ts +39 -26
- package/dist/types/utils/floating-ui/middleware/flip.d.ts +14 -0
- package/dist/types/utils/floating-ui/middleware/safe-space.d.ts +10 -0
- package/dist/types/utils/floating-ui/util.d.ts +4 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/types/utils/is-focus-visible.d.ts +5 -0
- package/dist/vrt/helpers/header-test-config.js +2 -1
- package/hydrate/index.js +659 -634
- package/hydrate/index.mjs +659 -634
- package/package.json +22 -21
- package/dist/components/react/p-BBz9PVf0.js +0 -1
- package/dist/components/react/p-BgEY7xhT.js +0 -1
- package/dist/components/react/p-C3J7fIWx.js +0 -1
- package/dist/components/react/p-C5ibTdH5.js +0 -1
- package/dist/components/react/p-CUKzje9q.js +0 -1
- package/dist/components/react/p-DTBtJCjk.js +0 -1
- package/dist/components/react/p-XUkUhxaz.js +0 -1
- package/dist/components/react/p-ialuSSl2.js +0 -1
- package/dist/post-components/p-10e430c3.entry.js +0 -1
- package/dist/post-components/p-32e1e951.entry.js +0 -1
- package/dist/post-components/p-4f08b99b.entry.js +0 -1
- package/dist/post-components/p-54432b47.entry.js +0 -1
- package/dist/post-components/p-5d7de657.entry.js +0 -1
- package/dist/post-components/p-63dd9a76.entry.js +0 -1
- package/dist/post-components/p-96d07f2b.entry.js +0 -1
- package/dist/post-components/p-9a1e8b1d.entry.js +0 -1
- package/dist/post-components/p-BBz9PVf0.js +0 -1
- package/dist/post-components/p-Bs0zeM5Q.js +0 -2
- package/dist/post-components/p-DH-eJVHZ.js +0 -1
- package/dist/post-components/p-Dk-DtPZn.js +0 -1
- package/dist/post-components/p-aff180f5.entry.js +0 -1
- package/dist/post-components/p-d5327dd1.entry.js +0 -1
- package/dist/post-components/p-e1817744.entry.js +0 -1
- package/dist/post-components/p-f6da5e69.entry.js +0 -1
- package/dist/post-components/p-f917527c.entry.js +0 -1
- package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/vrt/helpers/header-variants.config.d.ts +0 -23
- package/dist/vrt/helpers/header-variants.config.js +0 -157
- /package/dist/collection/utils/{floating-ui.js → floating-ui/platform/safe-area.js} +0 -0
- /package/dist/types/utils/{floating-ui.d.ts → floating-ui/platform/safe-area.d.ts} +0 -0
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-D0jX3Fts.js';
|
|
2
2
|
import { b as breakpoint } from './breakpoints-I1j7a0bW.js';
|
|
3
3
|
import { f as findClosestAcrossShadow, E as EventFrom } from './event-from-BEcxHjuM.js';
|
|
4
|
-
import { v as version } from './package-
|
|
5
|
-
import { O as OneOf } from './one-of-
|
|
6
|
-
import { R as Required } from './required-
|
|
4
|
+
import { v as version } from './package-CAL337jJ.js';
|
|
5
|
+
import { O as OneOf } from './one-of-B9locHPx.js';
|
|
6
|
+
import { R as Required } from './required-CDaQB1gC.js';
|
|
7
7
|
import { f as fade } from './fade-DsgPYmAa.js';
|
|
8
8
|
import { g as getDeepFocusableChildren, a as getFocusableChildren } from './get-focusable-children-DxYnH2ye.js';
|
|
9
9
|
import { t as throttle } from './index-bR8vy6-s.js';
|
|
10
|
-
import { T as Type } from './type-
|
|
10
|
+
import { T as Type } from './type-CQ7XuPCZ.js';
|
|
11
11
|
import { n as nanoid } from './nanoid-8LXe8Zt_.js';
|
|
12
|
-
import { P as Pattern } from './pattern-
|
|
13
|
-
import { U as Url } from './url-
|
|
12
|
+
import { P as Pattern } from './pattern-BL3OBU8C.js';
|
|
13
|
+
import { U as Url } from './url-B-86gtTK.js';
|
|
14
14
|
import { r as resolveEasing } from './utils-CoDiS_Ik.js';
|
|
15
15
|
import { f as fadeSlide } from './fade-slide-CvOvauo9.js';
|
|
16
16
|
import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
|
|
17
17
|
import { g as getRoot } from './get-root-08F-DB-d.js';
|
|
18
|
-
import './
|
|
18
|
+
import { i as isFocusVisible } from './is-focus-visible-BWwWKRO5.js';
|
|
19
|
+
import './create-validator-decorator-Cp_NUmrr.js';
|
|
19
20
|
|
|
20
21
|
const CLOSABLE_TARGETS = [
|
|
21
22
|
{
|
|
@@ -59,7 +60,7 @@ const BUTTON_TYPES = ['button', 'reset'];
|
|
|
59
60
|
const PLACEMENT = ['manual', 'auto'];
|
|
60
61
|
const SIZE = ['default', 'small'];
|
|
61
62
|
|
|
62
|
-
const postClosebuttonCss = () => `.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{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}.btn: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){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn: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){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn{border-width:1px !important;transition:none}.btn:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:disabled,.btn-link.disabled{text-decoration:none}}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link{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}.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}:host .btn:not(:disabled):hover,:host .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}:host(:not([placement])),:host([placement=auto]){position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}:host([size=small]) .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}`;
|
|
63
|
+
const postClosebuttonCss = () => `.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty;text-align:center;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6);border-radius:calc(var(--post-device-sizing-interactive-button-height-1) / 2)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{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}.btn: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){.btn:focus-visible{outline-color:Highlight !important}}.pretend-focus.btn{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pretend-focus.btn{outline-color:Highlight !important}}.btn:has(: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){.btn:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn: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){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn{border-width:1px !important;transition:none}.btn:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4);flex-shrink:0}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:disabled,.btn-link.disabled{text-decoration:none}}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-radius:calc(var(--post-device-sizing-interactive-button-height-4) / 2)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);flex-shrink:0}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5);border-radius:calc(var(--post-device-sizing-interactive-button-height-2) / 2)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3);flex-shrink:0}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link{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}.btn-link:focus-visible{outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:focus-visible{outline-color:Highlight !important}}.btn-link.pretend-focus{outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link.pretend-focus{outline-color:Highlight !important}}.btn-link:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-link:disabled{color:var(--post-scheme-color-interactive-primary-disabled-fg1);text-decoration-style:var(--post-core-border-style-dash)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}:host .btn:not(:disabled):hover,:host .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}:host(:not([placement])),:host([placement=auto]){position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}:host([size=small]) .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}`;
|
|
63
64
|
|
|
64
65
|
var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
65
66
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -168,7 +169,7 @@ function slide(el, direction, options = {}) {
|
|
|
168
169
|
return animateSlide(el, keyframes, options);
|
|
169
170
|
}
|
|
170
171
|
|
|
171
|
-
const postHeaderCss = () => `:host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp( 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:8px}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:4px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:4px;--post-local-header-padding-block:12px;--post-burger-menu-padding-inline:40px;--post-burger-menu-body-gap:32px;--post-burger-menu-footer-gap:24px}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:16px}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:0px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:8px;--post-local-header-padding-inline-end:8px;--post-local-header-padding-block:8px;--post-burger-menu-padding-inline:16px;--post-burger-menu-body-gap:24px;--post-burger-menu-footer-gap:16px}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width:1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-global-header-reduced-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.section,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020;box-shadow:var(--post-device-elevation-300)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-bottom:1px solid}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header::before{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:100dvh;content:"";background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(20px - var(--post-header-gap));margin-inline-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}@media screen and (max-width: 1023.98px){.global-header slot:where([name=audience],[name=global-nav-secondary]){display:none}}.local-header{position:relative;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);display:var(--post-local-header-display, flex);align-items:var(--post-local-header-align-items, center)}.local-header .section{width:100%;padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}@media screen and (min-width: 1024px){.local-header .section{display:grid;grid-template:var(--post-local-header-grid-template)}}@media screen and (max-width: 1023.98px){.local-header .section{display:flex;align-self:center}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.local-header .section{justify-content:end}}.local-header:where(.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .local-nav{flex:0 0 auto}@media screen and (max-width: 1023.98px){.local-header slot[name=main-nav]{display:none}}.burger-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);display:var(--post-burger-button-display, flex)}.burger-button:not(:disabled):hover{text-decoration:none}.burger-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.burger-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}.burger-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){.burger-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.burger-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){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button{border-width:1px !important;transition:none}.burger-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.burger-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){.burger-button{padding:10px}.burger-button>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.burger-button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){.burger-button{display:none}}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.second-level-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:24px;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block-start:16px;padding-block-end:max(24px, env(safe-area-inset-bottom, 0px));gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:56px;display:flex;align-items:center;justify-content:flex-end;padding-inline:4px}`;
|
|
172
|
+
const postHeaderCss = () => `:host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp( 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:8px}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:4px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:4px;--post-local-header-padding-block:12px;--post-burger-menu-padding-inline:40px;--post-burger-menu-body-gap:32px;--post-burger-menu-footer-gap:24px}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:16px}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:0px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:8px;--post-local-header-padding-inline-end:8px;--post-local-header-padding-block:8px;--post-burger-menu-padding-inline:16px;--post-burger-menu-body-gap:24px;--post-burger-menu-footer-gap:16px}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width:1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-global-header-reduced-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.section,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020;box-shadow:var(--post-device-elevation-300)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-bottom:1px solid}}.scroll-max{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:var(--post-header-scroll-max, 0);block-size:0;visibility:hidden;pointer-events:none}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header::before{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:100dvh;content:"";background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(20px - var(--post-header-gap));margin-inline-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}@media screen and (max-width: 1023.98px){.global-header slot:where([name=audience],[name=global-nav-secondary]){display:none}}.local-header{position:relative;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);display:var(--post-local-header-display, flex);align-items:var(--post-local-header-align-items, center)}.local-header .section{width:100%;padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}@media screen and (min-width: 1024px){.local-header .section{display:grid;grid-template:var(--post-local-header-grid-template)}}@media screen and (max-width: 1023.98px){.local-header .section{display:flex;align-self:center}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.local-header .section{justify-content:end}}.local-header:where(.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .local-nav{flex:0 0 auto}@media screen and (max-width: 1023.98px){.local-header slot[name=main-nav]{display:none}}.burger-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);display:var(--post-burger-button-display, flex)}.burger-button:not(:disabled):hover{text-decoration:none}.burger-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.burger-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}.burger-button: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){.burger-button:focus-visible{outline-color:Highlight !important}}.burger-button.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){.burger-button.pretend-focus{outline-color:Highlight !important}}.burger-button:has(: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){.burger-button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.burger-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){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button{border-width:1px !important;transition:none}.burger-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.burger-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){.burger-button{padding:10px}.burger-button>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.burger-button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){.burger-button{display:none}}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.second-level-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:24px;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block-start:16px;padding-block-end:max(24px, env(safe-area-inset-bottom, 0px));gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:56px;display:flex;align-items:center;justify-content:flex-end;padding-inline:4px}`;
|
|
172
173
|
|
|
173
174
|
var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
174
175
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -182,7 +183,8 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
|
|
|
182
183
|
};
|
|
183
184
|
const PostHeader = class {
|
|
184
185
|
get hasBurgerMenu() {
|
|
185
|
-
return this.device !== 'desktop' &&
|
|
186
|
+
return (this.device !== 'desktop' &&
|
|
187
|
+
(this.hasMainNav || this.hasAudience || this.hasGlobalNavSecondary));
|
|
186
188
|
}
|
|
187
189
|
get scrollParent() {
|
|
188
190
|
const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
|
|
@@ -212,6 +214,8 @@ const PostHeader = class {
|
|
|
212
214
|
}
|
|
213
215
|
constructor(hostRef) {
|
|
214
216
|
registerInstance(this, hostRef);
|
|
217
|
+
this.scrollMax = Infinity;
|
|
218
|
+
this.scrollPosition = 0;
|
|
215
219
|
this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
|
|
216
220
|
this.animationOptions = {
|
|
217
221
|
duration: 350,
|
|
@@ -220,6 +224,8 @@ const PostHeader = class {
|
|
|
220
224
|
this.device = breakpoint.get('device');
|
|
221
225
|
this.hasTitle = true;
|
|
222
226
|
this.hasMainNav = true;
|
|
227
|
+
this.hasAudience = true;
|
|
228
|
+
this.hasGlobalNavSecondary = true;
|
|
223
229
|
this.hasLocalNav = true;
|
|
224
230
|
this.burgerMenuExtended = false;
|
|
225
231
|
this.megadropdownOpen = false;
|
|
@@ -241,9 +247,14 @@ const PostHeader = class {
|
|
|
241
247
|
this.closeBurgerMenu();
|
|
242
248
|
}
|
|
243
249
|
};
|
|
250
|
+
this.onScroll = () => {
|
|
251
|
+
this.handleScrollEvent();
|
|
252
|
+
this.collapseIfNotKeyboardFocused();
|
|
253
|
+
};
|
|
244
254
|
this.handleScrollEvent = this.handleScrollEvent.bind(this);
|
|
245
255
|
this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
|
|
246
256
|
this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
|
|
257
|
+
this.updateScrollMax = this.updateScrollMax.bind(this);
|
|
247
258
|
this.keyboardHandler = this.keyboardHandler.bind(this);
|
|
248
259
|
this.handleLinkClick = this.handleLinkClick.bind(this);
|
|
249
260
|
this.checkSlottedContent = this.checkSlottedContent.bind(this);
|
|
@@ -251,15 +262,16 @@ const PostHeader = class {
|
|
|
251
262
|
}
|
|
252
263
|
connectedCallback() {
|
|
253
264
|
globalThis.addEventListener('resize', this.throttledResize, { passive: true });
|
|
254
|
-
globalThis.addEventListener('scroll', this.
|
|
265
|
+
globalThis.addEventListener('scroll', this.onScroll, {
|
|
255
266
|
passive: true,
|
|
256
267
|
});
|
|
257
|
-
this.scrollParent.addEventListener('scroll', this.
|
|
268
|
+
this.scrollParent.addEventListener('scroll', this.onScroll, {
|
|
258
269
|
passive: true,
|
|
259
270
|
});
|
|
260
271
|
document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
261
272
|
globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
262
273
|
this.handleScrollParentResize();
|
|
274
|
+
this.handleScrollMaxResize();
|
|
263
275
|
this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
|
|
264
276
|
}
|
|
265
277
|
componentWillRender() {
|
|
@@ -270,6 +282,7 @@ const PostHeader = class {
|
|
|
270
282
|
componentDidRender() {
|
|
271
283
|
this.getFocusableElements();
|
|
272
284
|
this.handleLocalHeaderResize();
|
|
285
|
+
this.handleScrollMaxResize();
|
|
273
286
|
// When a megadropdown is open on desktop and the user resizes to mobile, we set
|
|
274
287
|
// burgerMenuExtended = true but burgerMenuButton doesn't exist yet — it only renders
|
|
275
288
|
// on mobile/tablet. Syncing here ensures it gets the correct toggled state on resize.
|
|
@@ -286,9 +299,9 @@ const PostHeader = class {
|
|
|
286
299
|
const scrollParent = this.scrollParent;
|
|
287
300
|
globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
|
|
288
301
|
globalThis.removeEventListener('resize', this.throttledResize);
|
|
289
|
-
globalThis.removeEventListener('scroll', this.
|
|
302
|
+
globalThis.removeEventListener('scroll', this.onScroll);
|
|
290
303
|
if (scrollParent)
|
|
291
|
-
scrollParent.removeEventListener('scroll', this.
|
|
304
|
+
scrollParent.removeEventListener('scroll', this.onScroll);
|
|
292
305
|
document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
293
306
|
this.host.removeEventListener('keydown', this.keyboardHandler);
|
|
294
307
|
if (this.host.shadowRoot) {
|
|
@@ -302,6 +315,11 @@ const PostHeader = class {
|
|
|
302
315
|
this.localHeaderResizeObserver.disconnect();
|
|
303
316
|
this.localHeaderResizeObserver = null;
|
|
304
317
|
}
|
|
318
|
+
if (this.scrollMaxResizeObserver) {
|
|
319
|
+
this.scrollMaxResizeObserver.disconnect();
|
|
320
|
+
this.scrollMaxResizeObserver = null;
|
|
321
|
+
}
|
|
322
|
+
this.lastScrollTop = undefined;
|
|
305
323
|
if (this.slottedContentObserver) {
|
|
306
324
|
this.slottedContentObserver.disconnect();
|
|
307
325
|
this.slottedContentObserver = null;
|
|
@@ -381,9 +399,46 @@ const PostHeader = class {
|
|
|
381
399
|
});
|
|
382
400
|
this.megadropdownOpen = false;
|
|
383
401
|
}
|
|
402
|
+
// The header only stays expanded to keep keyboard focus visible
|
|
403
|
+
// once focus is no longer keyboard focus (e.g. after a click), it can collapse on scroll
|
|
404
|
+
collapseIfNotKeyboardFocused() {
|
|
405
|
+
if (!('expanded' in this.host.dataset))
|
|
406
|
+
return;
|
|
407
|
+
if (this.getDeepActiveElement()?.matches(':focus-visible'))
|
|
408
|
+
return;
|
|
409
|
+
delete this.host.dataset.expanded;
|
|
410
|
+
}
|
|
411
|
+
getScrollPosition() {
|
|
412
|
+
const scrollParent = this.scrollParent;
|
|
413
|
+
return scrollParent === document.body ? globalThis.scrollY : scrollParent.scrollTop;
|
|
414
|
+
}
|
|
415
|
+
// Focusing a control of the collapsed header scrolls it into view before the focus events are dispatched
|
|
416
|
+
// the scroll event is not dispatched yet, so scrollPosition is still the position before the focus
|
|
417
|
+
// Never skip the scroll when the position is unchanged: an instant scroll cancels a pending smooth scroll
|
|
418
|
+
restoreScrollPosition() {
|
|
419
|
+
const scrollParent = this.scrollParent;
|
|
420
|
+
const scrollContainer = scrollParent === document.body ? globalThis : scrollParent;
|
|
421
|
+
scrollContainer.scrollTo({ top: this.scrollPosition, behavior: 'instant' });
|
|
422
|
+
}
|
|
384
423
|
handleScrollEvent() {
|
|
385
|
-
|
|
386
|
-
|
|
424
|
+
this.scrollPosition = this.getScrollPosition();
|
|
425
|
+
// Once the header is fully reduced, writing a new value would only trigger
|
|
426
|
+
// a style recalculation of the whole page without any visual change
|
|
427
|
+
const value = Math.min(Math.max(this.scrollPosition, 0), this.scrollMax);
|
|
428
|
+
if (value === this.lastScrollTop)
|
|
429
|
+
return;
|
|
430
|
+
this.lastScrollTop = value;
|
|
431
|
+
document.documentElement.style.setProperty('--post-header-scroll-top', `${value}px`);
|
|
432
|
+
}
|
|
433
|
+
updateScrollMax() {
|
|
434
|
+
if (!this.scrollMaxElement)
|
|
435
|
+
return;
|
|
436
|
+
// Never limit the scroll value when the header styles are not loaded
|
|
437
|
+
const isScrollMaxDefined = getComputedStyle(this.host).getPropertyValue('--post-header-scroll-max').trim() !== '';
|
|
438
|
+
this.scrollMax = isScrollMaxDefined
|
|
439
|
+
? Math.ceil(this.scrollMaxElement.getBoundingClientRect().width)
|
|
440
|
+
: Infinity;
|
|
441
|
+
this.handleScrollEvent();
|
|
387
442
|
}
|
|
388
443
|
updateLocalHeaderHeight() {
|
|
389
444
|
const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
|
|
@@ -424,16 +479,34 @@ const PostHeader = class {
|
|
|
424
479
|
this.localHeaderResizeObserver.observe(localHeader);
|
|
425
480
|
}
|
|
426
481
|
}
|
|
482
|
+
handleScrollMaxResize() {
|
|
483
|
+
if (!this.scrollMaxElement || this.scrollMaxResizeObserver)
|
|
484
|
+
return;
|
|
485
|
+
// The ResizeObserver is not called for an initial size of 0px (e.g. on mobile)
|
|
486
|
+
this.updateScrollMax();
|
|
487
|
+
this.scrollMaxResizeObserver = new ResizeObserver(this.updateScrollMax);
|
|
488
|
+
this.scrollMaxResizeObserver.observe(this.scrollMaxElement);
|
|
489
|
+
}
|
|
427
490
|
handleSlottedContentChanges() {
|
|
428
491
|
if (!this.slottedContentObserver) {
|
|
429
492
|
this.checkSlottedContent();
|
|
430
493
|
this.slottedContentObserver = new MutationObserver(this.checkSlottedContent);
|
|
431
|
-
this.slottedContentObserver.observe(this.host, {
|
|
494
|
+
this.slottedContentObserver.observe(this.host, {
|
|
495
|
+
childList: true,
|
|
496
|
+
subtree: true,
|
|
497
|
+
attributes: true,
|
|
498
|
+
attributeFilter: ['slot'],
|
|
499
|
+
});
|
|
432
500
|
}
|
|
433
501
|
}
|
|
502
|
+
slotHasNavigationItems(slotName, selector) {
|
|
503
|
+
return Array.from(this.host.querySelectorAll(`:scope > [slot="${slotName}"]`)).some(element => element.matches(selector) || !!element.querySelector(selector));
|
|
504
|
+
}
|
|
434
505
|
checkSlottedContent() {
|
|
435
506
|
this.hasTitle = !!this.host.querySelector('[slot="title"]');
|
|
436
|
-
this.hasMainNav =
|
|
507
|
+
this.hasMainNav = this.slotHasNavigationItems('main-nav', 'a:not(post-megadropdown *), post-megadropdown-trigger');
|
|
508
|
+
this.hasAudience = this.slotHasNavigationItems('audience', 'a, button');
|
|
509
|
+
this.hasGlobalNavSecondary = this.slotHasNavigationItems('global-nav-secondary', 'a, button');
|
|
437
510
|
this.hasLocalNav = !!this.host.querySelector('[slot="local-nav"]');
|
|
438
511
|
}
|
|
439
512
|
switchLanguageSwitchMode() {
|
|
@@ -443,16 +516,25 @@ const PostHeader = class {
|
|
|
443
516
|
});
|
|
444
517
|
}
|
|
445
518
|
onFocusChange(event) {
|
|
446
|
-
|
|
447
|
-
|
|
519
|
+
if (event.type === 'focusout') {
|
|
520
|
+
// Ignore focus moving between elements of the header (e.g. into the language menu flyout)
|
|
521
|
+
if (this.isWithinHeader(event.relatedTarget))
|
|
522
|
+
return;
|
|
523
|
+
delete this.host.dataset.expanded;
|
|
448
524
|
return;
|
|
525
|
+
}
|
|
526
|
+
// Mouse focus never changes the state
|
|
527
|
+
// collapsing here would move the controls away from the pointer before the click completes
|
|
449
528
|
const isFocusVisible = this.getDeepActiveElement()?.matches(':focus-visible');
|
|
450
|
-
|
|
451
|
-
|
|
529
|
+
if (!isFocusVisible)
|
|
530
|
+
return;
|
|
531
|
+
// Keyboard focus: expanded only while focus is in the part that collapses on scroll
|
|
452
532
|
const collapsiblePart = this.device === 'desktop' ? this.globalHeader : this.localHeader;
|
|
453
533
|
const isInCollapsiblePart = event.composedPath().includes(collapsiblePart);
|
|
454
|
-
|
|
455
|
-
|
|
534
|
+
this.host.toggleAttribute('data-expanded', isInCollapsiblePart);
|
|
535
|
+
// The header is now expanded, so the focused control stays visible at the previous position
|
|
536
|
+
if (isInCollapsiblePart)
|
|
537
|
+
this.restoreScrollPosition();
|
|
456
538
|
}
|
|
457
539
|
isWithinHeader(target) {
|
|
458
540
|
return target instanceof Node && (target === this.host || this.host.contains(target));
|
|
@@ -475,11 +557,10 @@ const PostHeader = class {
|
|
|
475
557
|
}
|
|
476
558
|
render() {
|
|
477
559
|
const onDesktop = this.device === 'desktop';
|
|
478
|
-
|
|
479
|
-
return (h(Host, { key: 'b56ff059c4b6b855a4b05012822d29b59893db1e', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: 'f8b6e0fc7f56e4b07e2efa518a83cbac1ca99aa1' }, h("div", { key: '46a213668dafe872c97ecc1eba14aa26f43e9d7b', ref: el => (this.globalHeader = el), class: "global-header" }, h("div", { key: '4b2e823d1b3029dec5fbe00bdc85cdac2d9620b7', class: "section" }, h("div", { key: 'd82d6fe19a4bb0fa5803e34f203e23bf0e50a54c', class: "logo" }, h("slot", { key: 'b7658b72eb94cd41f616c035b5bbdc5c74f54553', name: "post-logo" })), h("div", { key: '7e85473a77094a2636c33536dd97e8a1cbaef808', class: "sliding-controls" }, onDesktop && (h("div", { key: 'c517e32382d0d79152f41ba0027466a9d4248a31', class: "audience" }, h("slot", { key: '35904084eae6c4ac4181b3b60ce884413195c8f0', name: "audience" }))), h("slot", { key: '1de9359402c52f416c44607282f5a3f47af246b8', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
|
|
560
|
+
return (h(Host, { key: '54f311b0483a77983c8a260a730e12b10f936f2d', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("span", { key: '464d6e58d8e3beec6ae8a306510e669cb2e2fec9', class: "scroll-max", "aria-hidden": "true", ref: el => (this.scrollMaxElement = el) }), h("header", { key: '1819b5300843eb4c66141a97c46832cd1ca54466' }, h("div", { key: 'e1fd6075137cb64ef6d0835d1317659da19a17f6', ref: el => (this.globalHeader = el), class: "global-header" }, h("div", { key: 'd1833a01d27a59ef9ef3203734e14f8bfe4a1541', class: "section" }, h("div", { key: '299fcbb952c0402f239a721459a2ea48a5959131', class: "logo" }, h("slot", { key: 'cb0b192d7d12dd4ba7a5bcdfea2a9f51232ebc45', name: "post-logo" })), h("div", { key: '69a54116557786db7a1c6401c9fdff4808b64ee2', class: "sliding-controls" }, onDesktop && (h("div", { key: '3e81349af69790454a0ff80d058cc1d1d34d27a2', class: "audience" }, h("slot", { key: '37a1d787da40f9bd3188aa5b640262b802a27310', name: "audience" }))), h("slot", { key: '6af478e6aa380ead70df3b6202b1b8de0573f786', name: "global-nav-primary" }), (onDesktop || !this.hasBurgerMenu) && [
|
|
480
561
|
h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
|
|
481
562
|
h("slot", { key: "language-menu", name: "language-menu" }),
|
|
482
|
-
], h("slot", { key: '
|
|
563
|
+
], h("slot", { key: '9f1afec759f7c0ec8448077eb81164e5f2f2a86e', name: "post-login" }), (this.hasBurgerMenu) && (h("post-togglebutton", { key: '746afc808afffe295478d5ae8effdad99f551f44', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '4ea61aa1d259b38254914b8f78b4edbd5dbaab2a' }, this.textMenu), h("post-icon", { key: '711fd906af8578dc7ecdb90d2d238828e7f184e6', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '9797c5b101b734f47f35572fb63def04fd63c349', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '8e202c4085f060843bbb0e99c1b7af190fdb7c1d', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '18035a103958aadc9187d33a938be44a8e13a2d6', class: "section" }, h("slot", { key: '77cb8436bea9bfae7a5ab2bcd5594dc92dc6a3ab', name: "side-nav" }), h("slot", { key: '4875e26bc0cc181e7b19771aafe56d27dd451844', name: "title" }), this.hasTitle && h("slot", { key: 'c3d1d22045c19a4ed860ae88e9ebb3d6279341af', name: "local-nav" }), onDesktop && h("slot", { key: '8e65de4132f2b7905b126849e2703da3e9b0a1a0', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '76b439a83965fe0669de37c1f2a29993abdbad30', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
|
|
483
564
|
}
|
|
484
565
|
get host() { return getElement(this); }
|
|
485
566
|
static get watchers() { return {
|
|
@@ -513,7 +594,7 @@ const ANIMATION_KEYS = [
|
|
|
513
594
|
'throb',
|
|
514
595
|
];
|
|
515
596
|
|
|
516
|
-
const postIconCss = () => `:host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor
|
|
597
|
+
const postIconCss = () => `:host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;mask-position:center center;mask-repeat:no-repeat;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}`;
|
|
517
598
|
|
|
518
599
|
var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
519
600
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -600,7 +681,6 @@ const PostIcon = class {
|
|
|
600
681
|
getStyles() {
|
|
601
682
|
const url = this.getUrl();
|
|
602
683
|
return Object.fromEntries(Object.entries({
|
|
603
|
-
'-webkit-mask-image': `url(${url})`,
|
|
604
684
|
'mask-image': `url('${url}')`,
|
|
605
685
|
'transform': (this.scale && !Number.isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
|
|
606
686
|
(this.rotate && !Number.isNaN(Number(this.rotate))
|
|
@@ -609,7 +689,7 @@ const PostIcon = class {
|
|
|
609
689
|
}).filter(([_key, value]) => value !== null));
|
|
610
690
|
}
|
|
611
691
|
render() {
|
|
612
|
-
return (h(Host, { key: '
|
|
692
|
+
return (h(Host, { key: '2d49a76d0f02832caf330d3419aea80f0aefb4d1', "data-version": version }, h("span", { key: 'bf5ee6b7fc3e7acf2b23d7787928f59b49ce73d5', style: this.getStyles() })));
|
|
613
693
|
}
|
|
614
694
|
get host() { return getElement(this); }
|
|
615
695
|
};
|
|
@@ -633,7 +713,7 @@ PostIcon.style = postIconCss();
|
|
|
633
713
|
|
|
634
714
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
635
715
|
|
|
636
|
-
const postLanguageMenuCss = () => `:host{display:flex}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-menu-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);text-transform:uppercase;line-height:inherit;cursor:pointer}.post-language-menu-trigger:not(:disabled):hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.post-language-menu-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-menu-trigger:
|
|
716
|
+
const postLanguageMenuCss = () => `:host{display:flex}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-menu-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);text-transform:uppercase;line-height:inherit;cursor:pointer}.post-language-menu-trigger:not(:disabled):hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.post-language-menu-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-menu-trigger: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){.post-language-menu-trigger:focus-visible{outline-color:Highlight !important}}.post-language-menu-trigger.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-menu-trigger.pretend-focus{outline-color:Highlight !important}}.post-language-menu-trigger:has(: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){.post-language-menu-trigger:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-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-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger{border-width:1px !important;transition:none}.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.post-language-menu-trigger:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.post-language-menu-trigger post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}.post-language-menu-list{display:flex;gap:8px;margin-top:16px}`;
|
|
637
717
|
|
|
638
718
|
var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
639
719
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -815,7 +895,7 @@ __decorate$7([
|
|
|
815
895
|
], PostLanguageMenuItem.prototype, "url", void 0);
|
|
816
896
|
PostLanguageMenuItem.style = postLanguageMenuItemCss();
|
|
817
897
|
|
|
818
|
-
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}.logo-link{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}.logo-link:
|
|
898
|
+
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}.logo-link{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}.logo-link: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){.logo-link:focus-visible{outline-color:Highlight !important}}.logo-link.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){.logo-link.pretend-focus{outline-color:Highlight !important}}.logo-link:has(: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){.logo-link:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:var(--post-device-spacing-padding-28) !important}.logo-link:focus,.logo-link:focus-visible{border-radius:var(--post-device-border-radius-focus)}`;
|
|
819
899
|
|
|
820
900
|
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
821
901
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -842,7 +922,7 @@ const PostLogo = class {
|
|
|
842
922
|
render() {
|
|
843
923
|
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
844
924
|
const LogoTag = logoLink ? 'a' : 'span';
|
|
845
|
-
return (h(Host, { key: '
|
|
925
|
+
return (h(Host, { key: '84ece8e71d7dec66aa634d9a8a37d6bf3197c1b6', "data-version": version }, h(LogoTag, { key: '1531c6e8f32d42e63f5482d2983f18e4c9a23b1a', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'd45d33329e30de0de9de56f2d588995a7f97d01e', class: "description" }, h("slot", { key: 'e8665c8d739dc2a2968bf1193c26ba1d1e731b38', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'bb3f534952e29e2e43816c5a5dd55541d05bee26', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '9ca05c263f6c9f41cc5406ccfd030a713ffe0254', id: "Logo" }, h("rect", { key: '30a59adc0eec11af2d90180da1f5a95b03175d21', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'b1cbe7c575d36cf26a1cc41c9124625c2d1e5ef1', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '398027f23c8c9a4cf2bc7f8d7c8aa4ec0466f0be', 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" }))))));
|
|
846
926
|
}
|
|
847
927
|
get host() { return getElement(this); }
|
|
848
928
|
};
|
|
@@ -851,7 +931,7 @@ __decorate$6([
|
|
|
851
931
|
], PostLogo.prototype, "url", void 0);
|
|
852
932
|
PostLogo.style = postLogoCss();
|
|
853
933
|
|
|
854
|
-
const postMainnavigationCss = () => `:host{display:flex;user-select:none;max-width:var(--post-header-content-max-width)}@media screen and (min-width: 1024px){:host{width:fit-content;margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end));overflow:hidden}}nav{flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control.scroll-left{margin-inline-end:-48px}.scroll-control.scroll-right{margin-inline-start:-48px}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:16px}`;
|
|
934
|
+
const postMainnavigationCss = () => `:host{display:flex;user-select:none;max-width:var(--post-header-content-max-width)}@media screen and (min-width: 1024px){:host{width:fit-content;margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end));overflow:hidden}}nav{flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.scroll-control.scroll-left{margin-inline-end:-48px}.scroll-control.scroll-right{margin-inline-start:-48px}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:16px}`;
|
|
855
935
|
|
|
856
936
|
var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
857
937
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -982,7 +1062,7 @@ const PostMainnavigation = class {
|
|
|
982
1062
|
}, NAVBAR_DISABLE_DURATION);
|
|
983
1063
|
}
|
|
984
1064
|
render() {
|
|
985
|
-
return (h(Host, { key: '
|
|
1065
|
+
return (h(Host, { key: '2e9f2361426298f620411b1d064e166992ba326e', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '10103d153e37fd591c2ce062ef7455228adbf5b9', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '8bb9b82626d05c1fe8f4fd1bb9f8e6d6be59ad8a', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '6905afe8c2dfcf0f2411b45237b52d63f187d2c9', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '2db905e52b1604d9c6097734d055100a58625f09' })), h("div", { key: 'f8ec4f906f1c99fec2198bb350ac1735c2de8469', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'afed8c1778691ca5b849d78ee20d51a4b8c02fe6', "aria-hidden": "true", name: "chevronright" }))));
|
|
986
1066
|
}
|
|
987
1067
|
get host() { return getElement(this); }
|
|
988
1068
|
};
|
|
@@ -992,7 +1072,7 @@ __decorate$5([
|
|
|
992
1072
|
], PostMainnavigation.prototype, "textMain", void 0);
|
|
993
1073
|
PostMainnavigation.style = postMainnavigationCss();
|
|
994
1074
|
|
|
995
|
-
const postMegadropdownCss = () => `*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 48px);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:48px 40px 40px}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block-start:24px}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{padding-block-end:max(24px, env(safe-area-inset-bottom, 0px))}}.megadropdown-title{margin-block:0 16px;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-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}.back-button:
|
|
1075
|
+
const postMegadropdownCss = () => `*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 48px);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:48px 40px 40px}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block-start:24px}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{padding-block-end:max(24px, env(safe-area-inset-bottom, 0px))}}.megadropdown-title{margin-block:0 16px;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-radius:calc(var(--post-device-sizing-interactive-button-height-4) / 2);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-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}.back-button: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){.back-button:focus-visible{outline-color:Highlight !important}}.back-button.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){.back-button.pretend-focus{outline-color:Highlight !important}}.back-button:has(: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){.back-button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-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){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button{border-width:1px !important;transition:none}.back-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);flex-shrink:0}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:32px}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:24px}}.close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}@media screen and (max-width: 1023.98px){.close-button{display:none}}`;
|
|
996
1076
|
|
|
997
1077
|
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
998
1078
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1015,7 +1095,7 @@ const PostMegadropdown = class {
|
|
|
1015
1095
|
registerInstance(this, hostRef);
|
|
1016
1096
|
this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown");
|
|
1017
1097
|
this.currentAnimation = null;
|
|
1018
|
-
this.
|
|
1098
|
+
this.animationDirection = null;
|
|
1019
1099
|
this.fsAnimationOptions = {
|
|
1020
1100
|
translate: -10,
|
|
1021
1101
|
duration: 350,
|
|
@@ -1043,7 +1123,7 @@ const PostMegadropdown = class {
|
|
|
1043
1123
|
return;
|
|
1044
1124
|
}
|
|
1045
1125
|
// Ignore clicks on the trigger or its contents to prevent running hide() twice
|
|
1046
|
-
if (this.megadropdownTrigger
|
|
1126
|
+
if (this.megadropdownTrigger?.contains(target)) {
|
|
1047
1127
|
return;
|
|
1048
1128
|
}
|
|
1049
1129
|
if (target instanceof HTMLElement) {
|
|
@@ -1085,9 +1165,9 @@ const PostMegadropdown = class {
|
|
|
1085
1165
|
* Toggles the dropdown visibility based on its current state.
|
|
1086
1166
|
*/
|
|
1087
1167
|
async toggle() {
|
|
1088
|
-
if (this.
|
|
1168
|
+
if (this.animationDirection) {
|
|
1089
1169
|
// If this is already animating towards a future state -> reverse intent
|
|
1090
|
-
return this.
|
|
1170
|
+
return this.animationDirection === 'in' ? this.hide() : this.show();
|
|
1091
1171
|
}
|
|
1092
1172
|
return this.isVisible ? this.hide() : this.show();
|
|
1093
1173
|
}
|
|
@@ -1143,6 +1223,9 @@ const PostMegadropdown = class {
|
|
|
1143
1223
|
this.forceClose();
|
|
1144
1224
|
return;
|
|
1145
1225
|
}
|
|
1226
|
+
// Already closed or already closing
|
|
1227
|
+
if (!this.isVisible || this.animationDirection === 'out')
|
|
1228
|
+
return;
|
|
1146
1229
|
// Update trigger state
|
|
1147
1230
|
this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
|
|
1148
1231
|
try {
|
|
@@ -1179,23 +1262,34 @@ const PostMegadropdown = class {
|
|
|
1179
1262
|
}
|
|
1180
1263
|
// Run the respective animation
|
|
1181
1264
|
createAnimation(direction) {
|
|
1265
|
+
// Keep the last frame of the closing animation until the container is hidden,
|
|
1266
|
+
// otherwise it snaps back to full opacity for a frame before display: none is applied
|
|
1267
|
+
const fill = direction === 'out' ? 'forwards' : 'none';
|
|
1182
1268
|
if (this.device === 'desktop') {
|
|
1183
|
-
return fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
|
|
1269
|
+
return fadeSlide(this.animatedContainer, direction, { ...this.fsAnimationOptions, fill });
|
|
1184
1270
|
}
|
|
1185
1271
|
return slide(this.animatedContainer, direction, {
|
|
1186
1272
|
translate: 100,
|
|
1187
1273
|
duration: 350,
|
|
1188
1274
|
easing: direction === 'in' ? 'ease-in' : 'ease-out',
|
|
1275
|
+
fill,
|
|
1189
1276
|
});
|
|
1190
1277
|
}
|
|
1191
1278
|
async animate(direction) {
|
|
1192
1279
|
this.cancelAnimation();
|
|
1193
1280
|
this.currentAnimation = this.createAnimation(direction);
|
|
1194
|
-
//
|
|
1195
|
-
this.
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1281
|
+
// Used to avoid toggle() de-sync and double hide() calls
|
|
1282
|
+
this.animationDirection = direction;
|
|
1283
|
+
try {
|
|
1284
|
+
await this.currentAnimation.finished;
|
|
1285
|
+
}
|
|
1286
|
+
finally {
|
|
1287
|
+
if (this.animationDirection === direction)
|
|
1288
|
+
this.animationDirection = null;
|
|
1289
|
+
}
|
|
1290
|
+
// The closing animation is kept (fill: forwards) and cancelled by the next animate() call
|
|
1291
|
+
if (direction === 'in')
|
|
1292
|
+
this.currentAnimation = null;
|
|
1199
1293
|
}
|
|
1200
1294
|
cancelAnimation() {
|
|
1201
1295
|
this.currentAnimation?.cancel();
|
|
@@ -1236,11 +1330,15 @@ const PostMegadropdown = class {
|
|
|
1236
1330
|
}
|
|
1237
1331
|
}
|
|
1238
1332
|
handleTabOutside(e) {
|
|
1239
|
-
if (e.key
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1333
|
+
if (e.key !== 'Tab' || this.device !== 'desktop' || !this.isVisible)
|
|
1334
|
+
return;
|
|
1335
|
+
const target = e.target;
|
|
1336
|
+
if (this.host.contains(target))
|
|
1337
|
+
return;
|
|
1338
|
+
// Focus on the own trigger keeps it open, Enter / Space on the trigger closes it
|
|
1339
|
+
if (this.megadropdownTrigger?.contains(target))
|
|
1340
|
+
return;
|
|
1341
|
+
this.hide(false);
|
|
1244
1342
|
}
|
|
1245
1343
|
/**
|
|
1246
1344
|
* Sets up a MutationObserver on the host to watch for changes
|
|
@@ -1288,7 +1386,7 @@ const PostMegadropdown = class {
|
|
|
1288
1386
|
}
|
|
1289
1387
|
render() {
|
|
1290
1388
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1291
|
-
return (h(Host, { key: '
|
|
1389
|
+
return (h(Host, { key: '9be9668e8fa4599cdbd8299d6e317d7207254558', version: version }, h("div", { key: '1e655c82f2bdfb5f796c77e25e553869b0afd5f6', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '9da73fb287424b30cafe0d8c899407dc752391b4', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '86b94b9b304b490ad5a688ef9be2707b857c43a8', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'c49520cc0027cc62d6a5fce2bd8eda32989cdfef', class: "megadropdown-content" }, h("slot", { key: '1f7169574e12f8395f6b5eacfc03f1171238c5e9' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
|
|
1292
1390
|
}
|
|
1293
1391
|
get host() { return getElement(this); }
|
|
1294
1392
|
};
|
|
@@ -1302,7 +1400,7 @@ __decorate$4([
|
|
|
1302
1400
|
], PostMegadropdown.prototype, "textBack", void 0);
|
|
1303
1401
|
PostMegadropdown.style = postMegadropdownCss();
|
|
1304
1402
|
|
|
1305
|
-
const postMegadropdownTriggerCss = () => `button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}button:not(:disabled):hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}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}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){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){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){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button{border-width:1px !important;transition:none}button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}button{--post-nav-item-border-width:1px;width:100%;justify-content:start;position:relative;padding:12px 12px calc(12px - var(--post-nav-item-border-width)) 8px;gap:16px;border-radius:0;line-height:1.5;outline-color:currentColor !important;border-bottom:var(--post-nav-item-border-width) solid currentColor;height:100%}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);border-bottom-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}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}button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:focus-within,.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:focus-within,.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:focus-within,.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:9.5px 12px calc(9.5px - var(--post-nav-item-border-width)) 8px;gap:8px;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:16px 12px;gap:8px;border-bottom:0}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span[aria-hidden]:where(span:empty+*){visibility:visible}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}button[aria-expanded=true]{background-color:#f0efed;color:#050400;z-index:2}button[aria-expanded=true]:hover{box-shadow:inset 0 -0.7px 0 0 #f0efed}button[aria-expanded=true]{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}button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@media screen and (min-width: 1024px){@supports not selector(:has(:focus-visible)){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}`;
|
|
1403
|
+
const postMegadropdownTriggerCss = () => `button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}button:not(:disabled):hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}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}button: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){button:focus-visible{outline-color:Highlight !important}}button.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){button.pretend-focus{outline-color:Highlight !important}}button:has(: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){button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){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){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button{border-width:1px !important;transition:none}button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}button{--post-nav-item-border-width:1px;width:100%;justify-content:start;position:relative;padding:12px 12px calc(12px - var(--post-nav-item-border-width)) 8px;gap:16px;border-radius:0;line-height:1.5;outline-color:currentColor !important;border-bottom:var(--post-nav-item-border-width) solid currentColor;height:100%}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);border-bottom-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}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}button:focus-visible{outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:focus-visible::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:focus-visible:hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:focus-visible:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:focus-visible{outline-color:Highlight !important}}button.pretend-focus{outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button.pretend-focus::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button.pretend-focus:hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button.pretend-focus:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button.pretend-focus{outline-color:Highlight !important}}button:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:has(:focus-visible)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:has(:focus-visible):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:has(:focus-visible):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:focus-within,.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:focus-within,.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:focus-within,.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:9.5px 12px calc(9.5px - var(--post-nav-item-border-width)) 8px;gap:8px;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:16px 12px;gap:8px;border-bottom:0}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span[aria-hidden]:where(span:empty+*){visibility:visible}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}button[aria-expanded=true]{background-color:#f0efed;color:#050400;z-index:2}button[aria-expanded=true]:hover{box-shadow:inset 0 -0.7px 0 0 #f0efed}button[aria-expanded=true]{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}button[aria-expanded=true]:focus-visible{outline-style:var(--post-core-border-style-solid) !important;outline-style:none !important}button[aria-expanded=true]:focus-visible::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:focus-visible{outline-color:Highlight !important}}@media screen and (min-width: 1024px){button[aria-expanded=true].pretend-focus{outline-style:var(--post-core-border-style-solid) !important;outline-style:none !important}button[aria-expanded=true].pretend-focus::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true].pretend-focus{outline-color:Highlight !important}}@media screen and (min-width: 1024px){button[aria-expanded=true]:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important;outline-style:none !important}button[aria-expanded=true]:has(:focus-visible)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:has(:focus-visible){outline-color:Highlight !important}}@media screen and (min-width: 1024px){@supports not selector(:has(:focus-visible)){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-style:none !important}button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}`;
|
|
1306
1404
|
|
|
1307
1405
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1308
1406
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1373,7 +1471,7 @@ const PostMegadropdownTrigger = class {
|
|
|
1373
1471
|
this.megadropdown.toggle();
|
|
1374
1472
|
}
|
|
1375
1473
|
render() {
|
|
1376
|
-
return (h(Host, { key: '
|
|
1474
|
+
return (h(Host, { key: '40d8afcb6b0ec482c0a13f7b78493a66243e03a5', "data-version": version }, h("button", { key: '6c1362cd4e1af22d26cf9ae74af4092cd083360c', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: '6bd7d94da2055c1c6fb933402f2478a3cee12cc7' }, h("span", { key: '8109bdcc23c4a0f8c0861b774a974dde75b464f3', innerHTML: this.slottedContent }), h("span", { key: 'edd54adde0d7af4eb9cf7796183d01705d217500', "aria-hidden": "true" }, h("slot", { key: 'dbcc08bb882273f1074dd8963a4b86f67deb0c0a' }))), h("post-icon", { key: '7437573a492181cc3e5ddd59ac3695dc94d43e09', name: "chevrondown" }))));
|
|
1377
1475
|
}
|
|
1378
1476
|
get host() { return getElement(this); }
|
|
1379
1477
|
};
|
|
@@ -1386,7 +1484,7 @@ __decorate$3([
|
|
|
1386
1484
|
], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);
|
|
1387
1485
|
PostMegadropdownTrigger.style = postMegadropdownTriggerCss();
|
|
1388
1486
|
|
|
1389
|
-
const postMenuCss = () => `:host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:8px}::slotted([slot=header]){margin-top:-8px;padding:16px;display:flex;align-items:center;gap:8px;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:12px 16px}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:8px 16px}}post-popovercontainer::part(post-popovercontainer-content){background-color:#fff}`;
|
|
1487
|
+
const postMenuCss = () => `:host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:8px;overflow-y:auto;overscroll-behavior:contain}::slotted([slot=header]){margin-top:-8px;padding:16px;display:flex;align-items:center;gap:8px;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:12px 16px}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:8px 16px}}post-popovercontainer::part(post-popovercontainer-content){background-color:#fff}`;
|
|
1390
1488
|
|
|
1391
1489
|
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1392
1490
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1506,7 +1604,7 @@ const PostMenu = class {
|
|
|
1506
1604
|
this.lastFocusedElement = this.root?.activeElement;
|
|
1507
1605
|
// Only focus the first item if the trigger was keyboard-focus-visible
|
|
1508
1606
|
// that's the browser's own signal for a keyboard-driven interaction.
|
|
1509
|
-
if (
|
|
1607
|
+
if (isFocusVisible(this.lastFocusedElement)) {
|
|
1510
1608
|
requestAnimationFrame(() => {
|
|
1511
1609
|
const menuItems = this.getSlottedItems();
|
|
1512
1610
|
if (menuItems.length > 0) {
|
|
@@ -1519,17 +1617,6 @@ const PostMenu = class {
|
|
|
1519
1617
|
this.lastFocusedElement.focus();
|
|
1520
1618
|
}
|
|
1521
1619
|
}
|
|
1522
|
-
wasFocusVisible(element) {
|
|
1523
|
-
if (!element)
|
|
1524
|
-
return false;
|
|
1525
|
-
try {
|
|
1526
|
-
return element.matches(':focus-visible');
|
|
1527
|
-
}
|
|
1528
|
-
catch {
|
|
1529
|
-
// Not supported, fall back to always focusing
|
|
1530
|
-
return true;
|
|
1531
|
-
}
|
|
1532
|
-
}
|
|
1533
1620
|
controlKeyDownHandler(e) {
|
|
1534
1621
|
const menuItems = this.getSlottedItems();
|
|
1535
1622
|
if (menuItems.length === 0) {
|
|
@@ -1581,7 +1668,7 @@ const PostMenu = class {
|
|
|
1581
1668
|
]));
|
|
1582
1669
|
}
|
|
1583
1670
|
render() {
|
|
1584
|
-
return (h(Host, { key: '
|
|
1671
|
+
return (h(Host, { key: '424d6a6b439f05d8fecca4814f2aeba53e7333b9', "data-version": version }, h("post-popovercontainer", { key: '0dce87ba2c4731ac458105a10a80514c2db07b52', autoHide: true, autoResize: true, onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '693bbd1e352d8c52f76dae4fba41558ef1ad4308', part: "post-menu" }, h("slot", { key: '7e3a24f00f99c99120ca75bf8a0b34aad27cbac3', name: "header" }), h("slot", { key: '1d9d360db4880ebc6e35cf2ac6cbdd738289f102' })))));
|
|
1585
1672
|
}
|
|
1586
1673
|
get host() { return getElement(this); }
|
|
1587
1674
|
};
|
|
@@ -1600,7 +1687,7 @@ __decorate$2([
|
|
|
1600
1687
|
], PostMenu.prototype, "handlePostBeforeToggle", null);
|
|
1601
1688
|
PostMenu.style = postMenuCss();
|
|
1602
1689
|
|
|
1603
|
-
const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-
|
|
1690
|
+
const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline:none !important}post-menu-item button.pretend-focus,post-menu-item a.pretend-focus{outline:none !important}post-menu-item button:has(:focus-visible),post-menu-item a:has(:focus-visible){outline:none !important}@supports not selector(:has(:focus-visible)){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus),post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus){outline:none !important}}post-menu-item button::after,post-menu-item a::after{content:"";position:absolute;inset:0;width:100%;height:100%;border-radius:calc(var(--post-device-border-radius-focus) - var(--post-device-spacing-padding-44))}post-menu-item button::after,post-menu-item a::after{outline-offset:var(--post-device-spacing-padding-44) !important;outline:#050400 none var(--post-device-border-width-focus) !important}post-menu-item button:focus-visible::after,post-menu-item a:focus-visible::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:focus-visible::after,post-menu-item a:focus-visible::after{outline-color:Highlight !important}}post-menu-item button.pretend-focus::after,post-menu-item a.pretend-focus::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button.pretend-focus::after,post-menu-item a.pretend-focus::after{outline-color:Highlight !important}}post-menu-item button:has(:focus-visible)::after,post-menu-item a:has(:focus-visible)::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:has(:focus-visible)::after,post-menu-item a:has(:focus-visible)::after{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-color:Highlight !important}}}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}post-menu-item button:hover:focus-visible::after,post-menu-item a:hover:focus-visible::after{outline-color:#fff !important}post-menu-item button:hover.pretend-focus::after,post-menu-item a:hover.pretend-focus::after{outline-color:#fff !important}post-menu-item button:hover:has(:focus-visible)::after,post-menu-item a:hover:has(:focus-visible)::after{outline-color:#fff !important}@supports not selector(:has(:focus-visible)){post-menu-item button:hover:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:hover:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-color:#fff !important}}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}`;
|
|
1604
1691
|
|
|
1605
1692
|
const PostMenuItem = class {
|
|
1606
1693
|
constructor(hostRef) {
|
|
@@ -1680,7 +1767,7 @@ const PostMenuTrigger = class {
|
|
|
1680
1767
|
return null;
|
|
1681
1768
|
}
|
|
1682
1769
|
render() {
|
|
1683
|
-
return (h(Host, { key: '
|
|
1770
|
+
return (h(Host, { key: '8f43fe80dd56550141481f157a06caf559494291', "data-version": version }, h("slot", { key: '1b5d220cff9894918aedc54b0585df75095dcb0e' })));
|
|
1684
1771
|
}
|
|
1685
1772
|
get host() { return getElement(this); }
|
|
1686
1773
|
};
|
|
@@ -1690,6 +1777,21 @@ __decorate$1([
|
|
|
1690
1777
|
], PostMenuTrigger.prototype, "for", void 0);
|
|
1691
1778
|
PostMenuTrigger.style = postMenuTriggerCss();
|
|
1692
1779
|
|
|
1780
|
+
const duration = 250;
|
|
1781
|
+
const easing = 'ease-out';
|
|
1782
|
+
function popIn(el) {
|
|
1783
|
+
if (!el)
|
|
1784
|
+
return;
|
|
1785
|
+
return el.animate([
|
|
1786
|
+
{ transform: 'scale(0.9)', opacity: 0 },
|
|
1787
|
+
{ transform: 'scale(1)', opacity: 1 },
|
|
1788
|
+
], {
|
|
1789
|
+
duration,
|
|
1790
|
+
easing,
|
|
1791
|
+
fill: 'forwards',
|
|
1792
|
+
});
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1693
1795
|
/**
|
|
1694
1796
|
* Custom positioning reference element.
|
|
1695
1797
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
@@ -1735,23 +1837,6 @@ function getSideAxis(placement) {
|
|
|
1735
1837
|
function getAlignmentAxis(placement) {
|
|
1736
1838
|
return getOppositeAxis(getSideAxis(placement));
|
|
1737
1839
|
}
|
|
1738
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
1739
|
-
if (rtl === void 0) {
|
|
1740
|
-
rtl = false;
|
|
1741
|
-
}
|
|
1742
|
-
const alignment = getAlignment(placement);
|
|
1743
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
1744
|
-
const length = getAxisLength(alignmentAxis);
|
|
1745
|
-
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
1746
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
1747
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
1748
|
-
}
|
|
1749
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
1750
|
-
}
|
|
1751
|
-
function getExpandedPlacements(placement) {
|
|
1752
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
1753
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
1754
|
-
}
|
|
1755
1840
|
function getOppositeAlignmentPlacement(placement) {
|
|
1756
1841
|
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
1757
1842
|
}
|
|
@@ -1777,7 +1862,7 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
|
1777
1862
|
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
1778
1863
|
if (alignment) {
|
|
1779
1864
|
list = list.map(side => side + "-" + alignment);
|
|
1780
|
-
|
|
1865
|
+
{
|
|
1781
1866
|
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
1782
1867
|
}
|
|
1783
1868
|
}
|
|
@@ -1883,7 +1968,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
1883
1968
|
* - 0 = lies flush with the boundary
|
|
1884
1969
|
* @see https://floating-ui.com/docs/detectOverflow
|
|
1885
1970
|
*/
|
|
1886
|
-
async function detectOverflow(state, options) {
|
|
1971
|
+
async function detectOverflow$1(state, options) {
|
|
1887
1972
|
var _await$platform$isEle;
|
|
1888
1973
|
if (options === void 0) {
|
|
1889
1974
|
options = {};
|
|
@@ -1956,7 +2041,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
1956
2041
|
} = config;
|
|
1957
2042
|
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
1958
2043
|
...platform,
|
|
1959
|
-
detectOverflow
|
|
2044
|
+
detectOverflow: detectOverflow$1
|
|
1960
2045
|
};
|
|
1961
2046
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
1962
2047
|
let rects = await platform.getElementRects({
|
|
@@ -2116,138 +2201,6 @@ const arrow$1 = options => ({
|
|
|
2116
2201
|
}
|
|
2117
2202
|
});
|
|
2118
2203
|
|
|
2119
|
-
/**
|
|
2120
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
2121
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
2122
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
2123
|
-
* @see https://floating-ui.com/docs/flip
|
|
2124
|
-
*/
|
|
2125
|
-
const flip$1 = function (options) {
|
|
2126
|
-
if (options === void 0) {
|
|
2127
|
-
options = {};
|
|
2128
|
-
}
|
|
2129
|
-
return {
|
|
2130
|
-
name: 'flip',
|
|
2131
|
-
options,
|
|
2132
|
-
async fn(state) {
|
|
2133
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
2134
|
-
const {
|
|
2135
|
-
placement,
|
|
2136
|
-
middlewareData,
|
|
2137
|
-
rects,
|
|
2138
|
-
initialPlacement,
|
|
2139
|
-
platform,
|
|
2140
|
-
elements
|
|
2141
|
-
} = state;
|
|
2142
|
-
const {
|
|
2143
|
-
mainAxis: checkMainAxis = true,
|
|
2144
|
-
crossAxis: checkCrossAxis = true,
|
|
2145
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
2146
|
-
fallbackStrategy = 'bestFit',
|
|
2147
|
-
fallbackAxisSideDirection = 'none',
|
|
2148
|
-
flipAlignment = true,
|
|
2149
|
-
...detectOverflowOptions
|
|
2150
|
-
} = evaluate(options, state);
|
|
2151
|
-
|
|
2152
|
-
// If a reset by the arrow was caused due to an alignment offset being
|
|
2153
|
-
// added, we should skip any logic now since `flip()` has already done its
|
|
2154
|
-
// work.
|
|
2155
|
-
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
2156
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
2157
|
-
return {};
|
|
2158
|
-
}
|
|
2159
|
-
const side = getSide(placement);
|
|
2160
|
-
const initialSideAxis = getSideAxis(initialPlacement);
|
|
2161
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
2162
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
2163
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
2164
|
-
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
2165
|
-
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
2166
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
2167
|
-
}
|
|
2168
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
2169
|
-
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
2170
|
-
const overflows = [];
|
|
2171
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
2172
|
-
if (checkMainAxis) {
|
|
2173
|
-
overflows.push(overflow[side]);
|
|
2174
|
-
}
|
|
2175
|
-
if (checkCrossAxis) {
|
|
2176
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
2177
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
2178
|
-
}
|
|
2179
|
-
overflowsData = [...overflowsData, {
|
|
2180
|
-
placement,
|
|
2181
|
-
overflows
|
|
2182
|
-
}];
|
|
2183
|
-
|
|
2184
|
-
// One or more sides is overflowing.
|
|
2185
|
-
if (!overflows.every(side => side <= 0)) {
|
|
2186
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
2187
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
2188
|
-
const nextPlacement = placements[nextIndex];
|
|
2189
|
-
if (nextPlacement) {
|
|
2190
|
-
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
2191
|
-
if (!ignoreCrossAxisOverflow ||
|
|
2192
|
-
// We leave the current main axis only if every placement on that axis
|
|
2193
|
-
// overflows the main axis.
|
|
2194
|
-
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
2195
|
-
// Try next placement and re-run the lifecycle.
|
|
2196
|
-
return {
|
|
2197
|
-
data: {
|
|
2198
|
-
index: nextIndex,
|
|
2199
|
-
overflows: overflowsData
|
|
2200
|
-
},
|
|
2201
|
-
reset: {
|
|
2202
|
-
placement: nextPlacement
|
|
2203
|
-
}
|
|
2204
|
-
};
|
|
2205
|
-
}
|
|
2206
|
-
}
|
|
2207
|
-
|
|
2208
|
-
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
2209
|
-
// then find the placement that fits the best on the main crossAxis side.
|
|
2210
|
-
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;
|
|
2211
|
-
|
|
2212
|
-
// Otherwise fallback.
|
|
2213
|
-
if (!resetPlacement) {
|
|
2214
|
-
switch (fallbackStrategy) {
|
|
2215
|
-
case 'bestFit':
|
|
2216
|
-
{
|
|
2217
|
-
var _overflowsData$filter2;
|
|
2218
|
-
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
2219
|
-
if (hasFallbackAxisSideDirection) {
|
|
2220
|
-
const currentSideAxis = getSideAxis(d.placement);
|
|
2221
|
-
return currentSideAxis === initialSideAxis ||
|
|
2222
|
-
// Create a bias to the `y` side axis due to horizontal
|
|
2223
|
-
// reading directions favoring greater width.
|
|
2224
|
-
currentSideAxis === 'y';
|
|
2225
|
-
}
|
|
2226
|
-
return true;
|
|
2227
|
-
}).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$filter2[0];
|
|
2228
|
-
if (placement) {
|
|
2229
|
-
resetPlacement = placement;
|
|
2230
|
-
}
|
|
2231
|
-
break;
|
|
2232
|
-
}
|
|
2233
|
-
case 'initialPlacement':
|
|
2234
|
-
resetPlacement = initialPlacement;
|
|
2235
|
-
break;
|
|
2236
|
-
}
|
|
2237
|
-
}
|
|
2238
|
-
if (placement !== resetPlacement) {
|
|
2239
|
-
return {
|
|
2240
|
-
reset: {
|
|
2241
|
-
placement: resetPlacement
|
|
2242
|
-
}
|
|
2243
|
-
};
|
|
2244
|
-
}
|
|
2245
|
-
}
|
|
2246
|
-
return {};
|
|
2247
|
-
}
|
|
2248
|
-
};
|
|
2249
|
-
};
|
|
2250
|
-
|
|
2251
2204
|
function getSideOffsets(overflow, rect) {
|
|
2252
2205
|
return {
|
|
2253
2206
|
top: overflow.top - rect.height,
|
|
@@ -3130,7 +3083,7 @@ function getDocumentRect(html) {
|
|
|
3130
3083
|
// calculation is affected by unusual styles.
|
|
3131
3084
|
// Most scrollbars leave 15-18px of space.
|
|
3132
3085
|
const SCROLLBAR_MAX = 25;
|
|
3133
|
-
function getViewportRect(element, strategy, rootBoundary) {
|
|
3086
|
+
function getViewportRect$1(element, strategy, rootBoundary) {
|
|
3134
3087
|
if (rootBoundary === void 0) {
|
|
3135
3088
|
rootBoundary = 'viewport';
|
|
3136
3089
|
}
|
|
@@ -3208,7 +3161,7 @@ function getInnerBoundingClientRect(element, strategy) {
|
|
|
3208
3161
|
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
3209
3162
|
let rect;
|
|
3210
3163
|
if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
|
|
3211
|
-
rect = getViewportRect(element, strategy, clippingAncestor);
|
|
3164
|
+
rect = getViewportRect$1(element, strategy, clippingAncestor);
|
|
3212
3165
|
} else if (clippingAncestor === 'document') {
|
|
3213
3166
|
rect = getDocumentRect(getDocumentElement(element));
|
|
3214
3167
|
} else if (isElement(clippingAncestor)) {
|
|
@@ -3604,6 +3557,16 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
3604
3557
|
};
|
|
3605
3558
|
}
|
|
3606
3559
|
|
|
3560
|
+
/**
|
|
3561
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
3562
|
+
* element is overflowing a given clipping boundary on each side.
|
|
3563
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
3564
|
+
* - negative = how many pixels left before it will overflow
|
|
3565
|
+
* - 0 = lies flush with the boundary
|
|
3566
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
3567
|
+
*/
|
|
3568
|
+
const detectOverflow = detectOverflow$1;
|
|
3569
|
+
|
|
3607
3570
|
/**
|
|
3608
3571
|
* Modifies the placement by translating the floating element along the
|
|
3609
3572
|
* specified axes.
|
|
@@ -3620,14 +3583,6 @@ const offset = offset$1;
|
|
|
3620
3583
|
*/
|
|
3621
3584
|
const shift = shift$1;
|
|
3622
3585
|
|
|
3623
|
-
/**
|
|
3624
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
3625
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
3626
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
3627
|
-
* @see https://floating-ui.com/docs/flip
|
|
3628
|
-
*/
|
|
3629
|
-
const flip = flip$1;
|
|
3630
|
-
|
|
3631
3586
|
/**
|
|
3632
3587
|
* Provides data that allows you to change the size of the floating element —
|
|
3633
3588
|
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
@@ -3683,19 +3638,211 @@ const computePosition = (reference, floating, options) => {
|
|
|
3683
3638
|
});
|
|
3684
3639
|
};
|
|
3685
3640
|
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3641
|
+
/**
|
|
3642
|
+
* Returns the nth side in clockwise direction relative to the given side.
|
|
3643
|
+
*/
|
|
3644
|
+
function getRelativeSide(side, n) {
|
|
3645
|
+
return sides[(sides.indexOf(side) + n) % 4];
|
|
3646
|
+
}
|
|
3647
|
+
const getNextSide = (side) => getRelativeSide(side, 1);
|
|
3648
|
+
const getOppositeSide = (side) => getRelativeSide(side, 2);
|
|
3649
|
+
const getPreviousSide = (side) => getRelativeSide(side, 3);
|
|
3650
|
+
|
|
3651
|
+
const FLIP_MIDDLEWARE = 'post-flip';
|
|
3652
|
+
/**
|
|
3653
|
+
* Changes the placement of the floating element to keep it in view.
|
|
3654
|
+
*
|
|
3655
|
+
* Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
|
|
3656
|
+
* against the current size of the floating element, and the placement with the smallest deficit is
|
|
3657
|
+
* used when none of them fits.
|
|
3658
|
+
*/
|
|
3659
|
+
function flip(options = {}) {
|
|
3660
|
+
return {
|
|
3661
|
+
name: FLIP_MIDDLEWARE,
|
|
3662
|
+
options,
|
|
3663
|
+
async fn(state) {
|
|
3664
|
+
const { middlewareData, placement } = state;
|
|
3665
|
+
// see https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
3666
|
+
if (middlewareData.arrow?.alignmentOffset)
|
|
3667
|
+
return {};
|
|
3668
|
+
const { minSize = {}, ...detectOverflowOptions } = evaluate(options, state);
|
|
3669
|
+
const gap = Math.abs(middlewareData.offset?.[getSideAxis(placement)] ?? 0);
|
|
3670
|
+
const side = getSide(placement);
|
|
3671
|
+
const referenceOverflow = await detectOverflow(state, {
|
|
3672
|
+
...detectOverflowOptions,
|
|
3673
|
+
elementContext: 'reference',
|
|
3674
|
+
});
|
|
3675
|
+
const floatingOverflow = await detectOverflow(state, {
|
|
3676
|
+
...detectOverflowOptions,
|
|
3677
|
+
elementContext: 'floating',
|
|
3678
|
+
});
|
|
3679
|
+
// The floating element fits at its current placement, there is nothing left to do.
|
|
3680
|
+
if (Math.max(referenceOverflow[side], floatingOverflow[side]) <= 0)
|
|
3681
|
+
return {};
|
|
3682
|
+
const previous = middlewareData[FLIP_MIDDLEWARE];
|
|
3683
|
+
const measurement = { overflow: referenceOverflow, minSize, gap };
|
|
3684
|
+
let deficits = previous?.deficits ?? [];
|
|
3685
|
+
const placements = previous?.placements ?? (await getPlacements(state, measurement));
|
|
3686
|
+
if (deficits.length < placements.length) {
|
|
3687
|
+
deficits = [...deficits, getDeficit(side, measurement)];
|
|
3688
|
+
}
|
|
3689
|
+
const data = { placements, deficits };
|
|
3690
|
+
// If there are still placements to try, move on to the next one.
|
|
3691
|
+
if (deficits.length < placements.length) {
|
|
3692
|
+
return { data, reset: { placement: placements[deficits.length] } };
|
|
3693
|
+
}
|
|
3694
|
+
// If none of the placements fit, fall back to the one that loses the least space.
|
|
3695
|
+
const fallback = data.placements[data.deficits.indexOf(Math.min(...data.deficits))];
|
|
3696
|
+
return fallback === placement ? { data } : { data, reset: { placement: fallback } };
|
|
3697
|
+
},
|
|
3698
|
+
};
|
|
3699
|
+
}
|
|
3700
|
+
/**
|
|
3701
|
+
* Returns the placements to try, ordered from most to least promising.
|
|
3702
|
+
*/
|
|
3703
|
+
async function getPlacements(state, measurement) {
|
|
3704
|
+
const { placement, platform, elements } = state;
|
|
3705
|
+
const { overflow } = measurement;
|
|
3706
|
+
const side = getSide(placement);
|
|
3707
|
+
const placements = [placement, getOppositePlacement(placement)];
|
|
3708
|
+
const mainAxisDeficit = Math.min(getDeficit(side, measurement), getDeficit(getOppositeSide(side), measurement));
|
|
3709
|
+
if (mainAxisDeficit <= 0)
|
|
3710
|
+
return placements;
|
|
3711
|
+
const rtl = (await platform.isRTL?.(elements.floating)) ?? false;
|
|
3712
|
+
const crossAxisPlacements = getOppositeAxisPlacements(placement, true, 'start', rtl);
|
|
3713
|
+
// Try the side with the most available space first.
|
|
3714
|
+
crossAxisPlacements.sort((a, b) => overflow[getSide(a)] - overflow[getSide(b)]);
|
|
3715
|
+
return [...placements, ...crossAxisPlacements];
|
|
3716
|
+
}
|
|
3717
|
+
/**
|
|
3718
|
+
* Returns the amount of space required to display the floating element at its minimum size on the
|
|
3719
|
+
* given side of the reference element.
|
|
3720
|
+
*/
|
|
3721
|
+
function getDeficit(side, { minSize, overflow, gap }) {
|
|
3722
|
+
const minLength = minSize[getAxisLength(getSideAxis(side))] ?? 0;
|
|
3723
|
+
return gap + minLength + overflow[side];
|
|
3724
|
+
}
|
|
3725
|
+
|
|
3726
|
+
/**
|
|
3727
|
+
* This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
|
|
3728
|
+
*/
|
|
3729
|
+
const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
|
|
3730
|
+
/**
|
|
3731
|
+
* A custom floating UI platform that restricts clipping rectangles to the safe area.
|
|
3732
|
+
*/
|
|
3733
|
+
const safeAreaPlatform = { ...platform, getClippingRect };
|
|
3734
|
+
/**
|
|
3735
|
+
* Computes the clipping rectangle of an element while accounting for the safe area.
|
|
3736
|
+
*/
|
|
3737
|
+
async function getClippingRect(...args) {
|
|
3738
|
+
const element = args[0].element;
|
|
3739
|
+
// Check whether the clipping rectangle of the given element has already been computed during
|
|
3740
|
+
// this pass.
|
|
3741
|
+
const hit = this[CLIPPING_RECT_CACHE].get(element);
|
|
3742
|
+
if (hit)
|
|
3743
|
+
return hit;
|
|
3744
|
+
// Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
|
|
3745
|
+
// area.
|
|
3746
|
+
const clippingRect = await platform.getClippingRect.apply(this, args);
|
|
3747
|
+
applySafeArea(clippingRect, element);
|
|
3748
|
+
this[CLIPPING_RECT_CACHE].set(element, clippingRect);
|
|
3749
|
+
return clippingRect;
|
|
3750
|
+
}
|
|
3751
|
+
/**
|
|
3752
|
+
* Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
|
|
3753
|
+
*
|
|
3754
|
+
* The safe area only applies to elements that the header can actually cover, which excludes
|
|
3755
|
+
* elements without a header on their page, elements on a top layer and elements within the header.
|
|
3756
|
+
*/
|
|
3757
|
+
function applySafeArea(clippingRect, element) {
|
|
3758
|
+
const headerElement = element.ownerDocument.querySelector('post-header');
|
|
3759
|
+
if (headerElement === null)
|
|
3690
3760
|
return;
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3761
|
+
let parent = element;
|
|
3762
|
+
while (!isLastTraversableNode(parent)) {
|
|
3763
|
+
parent = getParentNode(parent);
|
|
3764
|
+
if (!isHTMLElement(parent))
|
|
3765
|
+
continue;
|
|
3766
|
+
// Do not apply the safe area of the header to
|
|
3767
|
+
// - elements that are on a top layer, such as a dialog.
|
|
3768
|
+
// - elements that are located within the header itself.
|
|
3769
|
+
if (isTopLayer(parent) || parent === headerElement)
|
|
3770
|
+
return;
|
|
3771
|
+
}
|
|
3772
|
+
const headerRect = headerElement.getBoundingClientRect();
|
|
3773
|
+
const top = Math.max(clippingRect.y, headerRect.bottom);
|
|
3774
|
+
clippingRect.height -= top - clippingRect.y;
|
|
3775
|
+
clippingRect.y = top;
|
|
3776
|
+
}
|
|
3777
|
+
/**
|
|
3778
|
+
* Computes the coordinates that will position the `floating` element next to a given `reference`
|
|
3779
|
+
* element while accounting for the safe area.
|
|
3780
|
+
*
|
|
3781
|
+
* The safe area is the part of the viewport that the header does not cover. Restricting the
|
|
3782
|
+
* clipping rectangles to it makes floating elements behave as if they were clipped by the header.
|
|
3783
|
+
*/
|
|
3784
|
+
const computePositionWithSafeArea = (reference, floating, options) => {
|
|
3785
|
+
// Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
|
|
3786
|
+
options ??= {};
|
|
3787
|
+
return computePosition(reference, floating, {
|
|
3788
|
+
...options,
|
|
3789
|
+
platform: {
|
|
3790
|
+
...safeAreaPlatform,
|
|
3791
|
+
...options.platform,
|
|
3792
|
+
[CLIPPING_RECT_CACHE]: new Map(),
|
|
3793
|
+
},
|
|
3794
|
+
});
|
|
3795
|
+
};
|
|
3796
|
+
|
|
3797
|
+
const SAFE_SPACE_MIDDLEWARE = 'post-safe-space';
|
|
3798
|
+
/**
|
|
3799
|
+
* Computes the safe space, the area the pointer can travel through to get from the reference to
|
|
3800
|
+
* the floating element.
|
|
3801
|
+
*/
|
|
3802
|
+
function safeSpace() {
|
|
3803
|
+
return {
|
|
3804
|
+
name: SAFE_SPACE_MIDDLEWARE,
|
|
3805
|
+
async fn(state) {
|
|
3806
|
+
const { placement, rects, x, y } = state;
|
|
3807
|
+
const side = getSide(placement);
|
|
3808
|
+
const reference = await getViewportRect(state, rects.reference);
|
|
3809
|
+
const floating = await getViewportRect(state, { ...rects.floating, x, y });
|
|
3810
|
+
const path = [
|
|
3811
|
+
...getPathAlongSide(floating, getOppositeSide(side)),
|
|
3812
|
+
...getPathAlongSide(reference, side),
|
|
3813
|
+
];
|
|
3814
|
+
const points = [];
|
|
3815
|
+
for (let i = 0; i < path.length; i += 2) {
|
|
3816
|
+
points.push(`${path[i]}px ${path[i + 1]}px`);
|
|
3817
|
+
}
|
|
3818
|
+
const data = { polygon: `polygon(${points.join(', ')})` };
|
|
3819
|
+
return { data };
|
|
3820
|
+
},
|
|
3821
|
+
};
|
|
3822
|
+
}
|
|
3823
|
+
/**
|
|
3824
|
+
* Converts a rectangle from the floating element's offset parent's coordinate system to viewport
|
|
3825
|
+
* coordinates.
|
|
3826
|
+
*/
|
|
3827
|
+
async function getViewportRect({ elements, platform, strategy }, rect) {
|
|
3828
|
+
const viewportRect = await platform.convertOffsetParentRelativeRectToViewportRelativeRect?.({
|
|
3829
|
+
offsetParent: await platform.getOffsetParent?.(elements.floating),
|
|
3830
|
+
rect,
|
|
3831
|
+
elements,
|
|
3832
|
+
strategy,
|
|
3698
3833
|
});
|
|
3834
|
+
return rectToClientRect(viewportRect ?? rect);
|
|
3835
|
+
}
|
|
3836
|
+
/**
|
|
3837
|
+
* Returns the path along the specified side of the given rectangle.
|
|
3838
|
+
*
|
|
3839
|
+
* The path is a list of coordinates in the form of [x₁, y₁, x₂, y₂] and is given in clockwise order.
|
|
3840
|
+
*/
|
|
3841
|
+
function getPathAlongSide(rect, side) {
|
|
3842
|
+
const self = rect[side];
|
|
3843
|
+
const prev = rect[getPreviousSide(side)];
|
|
3844
|
+
const next = rect[getNextSide(side)];
|
|
3845
|
+
return getSideAxis(side) === 'x' ? [self, prev, self, next] : [prev, self, next, self];
|
|
3699
3846
|
}
|
|
3700
3847
|
|
|
3701
3848
|
// src/events.ts
|
|
@@ -4490,78 +4637,7 @@ function apply() {
|
|
|
4490
4637
|
injectStyles(document);
|
|
4491
4638
|
}
|
|
4492
4639
|
|
|
4493
|
-
|
|
4494
|
-
* This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
|
|
4495
|
-
*/
|
|
4496
|
-
const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
|
|
4497
|
-
/**
|
|
4498
|
-
* A custom floating UI platform that restricts clipping rectangles to the safe area.
|
|
4499
|
-
*/
|
|
4500
|
-
const safeAreaPlatform = { ...platform, getClippingRect };
|
|
4501
|
-
/**
|
|
4502
|
-
* Computes the clipping rectangle of an element while accounting for the safe area.
|
|
4503
|
-
*/
|
|
4504
|
-
async function getClippingRect(...args) {
|
|
4505
|
-
const element = args[0].element;
|
|
4506
|
-
// Check whether the clipping rectangle of the given element has already been computed during
|
|
4507
|
-
// this pass.
|
|
4508
|
-
const hit = this[CLIPPING_RECT_CACHE].get(element);
|
|
4509
|
-
if (hit)
|
|
4510
|
-
return hit;
|
|
4511
|
-
// Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
|
|
4512
|
-
// area.
|
|
4513
|
-
const clippingRect = await platform.getClippingRect.apply(this, args);
|
|
4514
|
-
applySafeArea(clippingRect, element);
|
|
4515
|
-
this[CLIPPING_RECT_CACHE].set(element, clippingRect);
|
|
4516
|
-
return clippingRect;
|
|
4517
|
-
}
|
|
4518
|
-
/**
|
|
4519
|
-
* Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
|
|
4520
|
-
*
|
|
4521
|
-
* The safe area only applies to elements that the header can actually cover, which excludes
|
|
4522
|
-
* elements without a header on their page, elements on a top layer and elements within the header.
|
|
4523
|
-
*/
|
|
4524
|
-
function applySafeArea(clippingRect, element) {
|
|
4525
|
-
const headerElement = element.ownerDocument.querySelector('post-header');
|
|
4526
|
-
if (headerElement === null)
|
|
4527
|
-
return;
|
|
4528
|
-
let parent = element;
|
|
4529
|
-
while (!isLastTraversableNode(parent)) {
|
|
4530
|
-
parent = getParentNode(parent);
|
|
4531
|
-
if (!isHTMLElement(parent))
|
|
4532
|
-
continue;
|
|
4533
|
-
// Do not apply the safe area of the header to
|
|
4534
|
-
// - elements that are on a top layer, such as a dialog.
|
|
4535
|
-
// - elements that are located within the header itself.
|
|
4536
|
-
if (isTopLayer(parent) || parent === headerElement)
|
|
4537
|
-
return;
|
|
4538
|
-
}
|
|
4539
|
-
const headerRect = headerElement.getBoundingClientRect();
|
|
4540
|
-
const top = Math.max(clippingRect.y, headerRect.bottom);
|
|
4541
|
-
clippingRect.height -= top - clippingRect.y;
|
|
4542
|
-
clippingRect.y = top;
|
|
4543
|
-
}
|
|
4544
|
-
/**
|
|
4545
|
-
* Computes the coordinates that will position the `floating` element next to a given `reference`
|
|
4546
|
-
* element while accounting for the safe area.
|
|
4547
|
-
*
|
|
4548
|
-
* The safe area is the part of the viewport that the header does not cover. Restricting the
|
|
4549
|
-
* clipping rectangles to it makes floating elements behave as if they were clipped by the header.
|
|
4550
|
-
*/
|
|
4551
|
-
const computePositionWithSafeArea = (reference, floating, options) => {
|
|
4552
|
-
// Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
|
|
4553
|
-
options ??= {};
|
|
4554
|
-
return computePosition(reference, floating, {
|
|
4555
|
-
...options,
|
|
4556
|
-
platform: {
|
|
4557
|
-
...safeAreaPlatform,
|
|
4558
|
-
...options.platform,
|
|
4559
|
-
[CLIPPING_RECT_CACHE]: new Map(),
|
|
4560
|
-
},
|
|
4561
|
-
});
|
|
4562
|
-
};
|
|
4563
|
-
|
|
4564
|
-
const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
|
|
4640
|
+
const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host [part=post-popovercontainer-content]{box-sizing:border-box;box-shadow:var(--post-device-elevation-300);width:max-content;max-width:var(--post-popovercontainer-available-width);max-height:var(--post-popovercontainer-available-height);color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative;display:flex}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host [part=post-popovercontainer-content]{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[data-side=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[data-side=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[data-side=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[data-side=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[data-side=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto;clip-path:var(--post-popovercontainer-safe-space, polygon(0 0, 0 0, 0 0))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
|
|
4565
4641
|
|
|
4566
4642
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
4567
4643
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -4573,34 +4649,10 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|
|
4573
4649
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
4574
4650
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
4575
4651
|
};
|
|
4576
|
-
const
|
|
4577
|
-
|
|
4578
|
-
|
|
4652
|
+
const AVAILABLE_WIDTH_PROPERTY = '--post-popovercontainer-available-width';
|
|
4653
|
+
const AVAILABLE_HEIGHT_PROPERTY = '--post-popovercontainer-available-height';
|
|
4654
|
+
const SAFE_SPACE_PROPERTY = '--post-popovercontainer-safe-space';
|
|
4579
4655
|
const PostPopovercontainer = class {
|
|
4580
|
-
static {
|
|
4581
|
-
this.STATIC_SIDES = {
|
|
4582
|
-
top: 'bottom',
|
|
4583
|
-
right: 'left',
|
|
4584
|
-
bottom: 'top',
|
|
4585
|
-
left: 'right',
|
|
4586
|
-
};
|
|
4587
|
-
}
|
|
4588
|
-
static {
|
|
4589
|
-
this.PROPERTIES_TO_CLEAR = [
|
|
4590
|
-
'--post-safe-space-popover-x',
|
|
4591
|
-
'--post-safe-space-popover-y',
|
|
4592
|
-
'--post-safe-space-popover-x-start',
|
|
4593
|
-
'--post-safe-space-popover-x-end',
|
|
4594
|
-
'--post-safe-space-popover-y-start',
|
|
4595
|
-
'--post-safe-space-popover-y-end',
|
|
4596
|
-
'--post-safe-space-trigger-x',
|
|
4597
|
-
'--post-safe-space-trigger-y',
|
|
4598
|
-
'--post-safe-space-trigger-x-start',
|
|
4599
|
-
'--post-safe-space-trigger-x-end',
|
|
4600
|
-
'--post-safe-space-trigger-y-start',
|
|
4601
|
-
'--post-safe-space-trigger-y-end',
|
|
4602
|
-
];
|
|
4603
|
-
}
|
|
4604
4656
|
constructor(hostRef) {
|
|
4605
4657
|
registerInstance(this, hostRef);
|
|
4606
4658
|
this.postBeforeShow = createEvent(this, "postBeforeShow");
|
|
@@ -4608,37 +4660,25 @@ const PostPopovercontainer = class {
|
|
|
4608
4660
|
this.postHide = createEvent(this, "postHide");
|
|
4609
4661
|
this.postBeforeToggle = createEvent(this, "postBeforeToggle");
|
|
4610
4662
|
this.postToggle = createEvent(this, "postToggle");
|
|
4663
|
+
/** The element the popover is anchored to */
|
|
4664
|
+
this.anchorRef = null;
|
|
4665
|
+
this.arrowRef = null;
|
|
4666
|
+
this.hasBeenOpened = false;
|
|
4611
4667
|
this.toggleTimeoutId = null;
|
|
4612
|
-
this.
|
|
4668
|
+
this.runningAnimation = null;
|
|
4669
|
+
this.stopAutoUpdate = null;
|
|
4613
4670
|
/**
|
|
4614
|
-
*
|
|
4615
|
-
* Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
|
|
4616
|
-
* towards the viewport if they would overlap edge boundaries.
|
|
4671
|
+
* Placement of the popover according to the floating-ui options.
|
|
4617
4672
|
*/
|
|
4618
4673
|
this.placement = 'top';
|
|
4619
4674
|
/**
|
|
4620
|
-
* Gap between the edge of the
|
|
4675
|
+
* Gap between the edge of the viewport and the popover.
|
|
4621
4676
|
*/
|
|
4622
4677
|
this.edgeGap = 8;
|
|
4623
4678
|
/**
|
|
4624
|
-
*
|
|
4679
|
+
* Show a little indicator arrow
|
|
4625
4680
|
*/
|
|
4626
4681
|
this.arrow = false;
|
|
4627
|
-
/**
|
|
4628
|
-
* Animation style
|
|
4629
|
-
*/
|
|
4630
|
-
this.animation = 'pop-in';
|
|
4631
|
-
this.currentAnimation = null;
|
|
4632
|
-
this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
|
|
4633
|
-
}
|
|
4634
|
-
/**
|
|
4635
|
-
* Updates cursor position for safe space feature when popover is open.
|
|
4636
|
-
* Sets CSS custom properties for dynamic styling of safe area.
|
|
4637
|
-
* @param event MouseEvent with cursor position
|
|
4638
|
-
*/
|
|
4639
|
-
mouseTrackingHandler(event) {
|
|
4640
|
-
this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
|
|
4641
|
-
this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
|
|
4642
4682
|
}
|
|
4643
4683
|
connectedCallback() {
|
|
4644
4684
|
if (!isSupported()) {
|
|
@@ -4649,296 +4689,197 @@ const PostPopovercontainer = class {
|
|
|
4649
4689
|
this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
4650
4690
|
}
|
|
4651
4691
|
disconnectedCallback() {
|
|
4652
|
-
|
|
4653
|
-
this.clearAutoUpdate();
|
|
4654
|
-
}
|
|
4692
|
+
this.cleanup();
|
|
4655
4693
|
this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
4656
4694
|
}
|
|
4695
|
+
cleanup() {
|
|
4696
|
+
this.stopAutoUpdate?.();
|
|
4697
|
+
if (this.runningAnimation) {
|
|
4698
|
+
this.runningAnimation.cancel();
|
|
4699
|
+
this.runningAnimation = null;
|
|
4700
|
+
}
|
|
4701
|
+
}
|
|
4702
|
+
isOpen() {
|
|
4703
|
+
return this.host?.matches(':where(:popover-open, .popover-open)');
|
|
4704
|
+
}
|
|
4705
|
+
getContent() {
|
|
4706
|
+
return this.host?.shadowRoot.querySelector('[part="post-popovercontainer-content"]');
|
|
4707
|
+
}
|
|
4708
|
+
getContentMinSize() {
|
|
4709
|
+
const content = this.getContent();
|
|
4710
|
+
if (!content)
|
|
4711
|
+
return {};
|
|
4712
|
+
const { minWidth, minHeight } = getComputedStyle(content);
|
|
4713
|
+
return {
|
|
4714
|
+
width: Number.parseFloat(minWidth) || 0,
|
|
4715
|
+
height: Number.parseFloat(minHeight) || 0,
|
|
4716
|
+
};
|
|
4717
|
+
}
|
|
4657
4718
|
/**
|
|
4658
|
-
*
|
|
4659
|
-
* @param
|
|
4719
|
+
* Shows the popover.
|
|
4720
|
+
* @param anchor the element that the popover is visually anchored to.
|
|
4660
4721
|
*/
|
|
4661
|
-
async show(
|
|
4662
|
-
if (this.toggleTimeoutId || !
|
|
4722
|
+
async show(anchor) {
|
|
4723
|
+
if (this.toggleTimeoutId || !anchor || this.isOpen())
|
|
4663
4724
|
return;
|
|
4664
|
-
this.
|
|
4665
|
-
this.updatePosition();
|
|
4725
|
+
this.anchorRef = anchor;
|
|
4666
4726
|
this.host.showPopover();
|
|
4667
4727
|
}
|
|
4668
4728
|
/**
|
|
4669
|
-
*
|
|
4729
|
+
* Hides the popover.
|
|
4670
4730
|
*/
|
|
4671
4731
|
async hide() {
|
|
4672
|
-
if (!this.
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4732
|
+
if (this.toggleTimeoutId || !this.isOpen())
|
|
4733
|
+
return;
|
|
4734
|
+
this.anchorRef = null;
|
|
4735
|
+
this.host.hidePopover();
|
|
4736
|
+
this.postHide.emit();
|
|
4677
4737
|
}
|
|
4678
4738
|
/**
|
|
4679
|
-
*
|
|
4680
|
-
*
|
|
4681
|
-
*
|
|
4739
|
+
* Toggles the popover's state from hidden to showing and vice versa.
|
|
4740
|
+
*
|
|
4741
|
+
* If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
|
|
4742
|
+
* if it is set to `false`.
|
|
4743
|
+
*
|
|
4744
|
+
* @param anchor the element that the popover is visually anchored to.
|
|
4745
|
+
* @param force the next state of the popover.
|
|
4746
|
+
* @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
|
|
4682
4747
|
*/
|
|
4683
|
-
async toggle(
|
|
4684
|
-
const isOpen = this.
|
|
4685
|
-
|
|
4686
|
-
if (willOpen && !target)
|
|
4748
|
+
async toggle(anchor, force) {
|
|
4749
|
+
const isOpen = this.isOpen();
|
|
4750
|
+
if (!this.host || this.toggleTimeoutId)
|
|
4687
4751
|
return isOpen;
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
return this.host.matches(':where(:popover-open, .popover-open)');
|
|
4752
|
+
const shouldOpen = force === true || (force === undefined && !isOpen);
|
|
4753
|
+
if (isOpen === shouldOpen || (shouldOpen && !anchor))
|
|
4754
|
+
return isOpen;
|
|
4755
|
+
this.anchorRef = shouldOpen ? anchor : null;
|
|
4756
|
+
this.host.togglePopover(force);
|
|
4757
|
+
this.toggleTimeoutId = null;
|
|
4758
|
+
return this.isOpen();
|
|
4696
4759
|
}
|
|
4697
4760
|
/**
|
|
4698
|
-
* Handles the popover
|
|
4761
|
+
* Handles the popover's state transition from hidden to showing and vice versa.
|
|
4699
4762
|
*/
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
if (typeof animationFn === 'function') {
|
|
4707
|
-
this.runOpenAnimation(animationFn, content);
|
|
4708
|
-
}
|
|
4709
|
-
else {
|
|
4710
|
-
// No animation case
|
|
4711
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4712
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4713
|
-
this.postToggle.emit({ isOpen: true });
|
|
4714
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4715
|
-
if (this.hasOpenedOnce)
|
|
4716
|
-
this.hasOpenedOnce = false;
|
|
4717
|
-
}
|
|
4718
|
-
}
|
|
4719
|
-
if (this.safeSpace) {
|
|
4720
|
-
globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
|
|
4721
|
-
}
|
|
4763
|
+
async handleToggle(event) {
|
|
4764
|
+
this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
4765
|
+
if (event.newState === 'open')
|
|
4766
|
+
await this.handleOpen();
|
|
4767
|
+
else
|
|
4768
|
+
await this.handleClose();
|
|
4722
4769
|
}
|
|
4723
4770
|
/**
|
|
4724
|
-
* Handles the popover
|
|
4771
|
+
* Handles the popover's state transition from hidden to showing, emitting related events.
|
|
4725
4772
|
*/
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4773
|
+
async handleOpen() {
|
|
4774
|
+
this.postBeforeToggle.emit({ willOpen: true });
|
|
4775
|
+
this.postBeforeShow.emit({ first: !this.hasBeenOpened });
|
|
4776
|
+
await this.updatePosition(true);
|
|
4777
|
+
this.startAutoUpdate();
|
|
4778
|
+
try {
|
|
4779
|
+
await this.runOpenAnimation();
|
|
4732
4780
|
}
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
this.currentAnimation.cancel();
|
|
4736
|
-
this.currentAnimation = null;
|
|
4781
|
+
catch {
|
|
4782
|
+
return;
|
|
4737
4783
|
}
|
|
4738
|
-
this.
|
|
4739
|
-
this.
|
|
4740
|
-
this.
|
|
4784
|
+
this.postToggle.emit({ isOpen: true });
|
|
4785
|
+
this.postShow.emit({ first: !this.hasBeenOpened });
|
|
4786
|
+
this.hasBeenOpened = true;
|
|
4741
4787
|
}
|
|
4742
4788
|
/**
|
|
4743
|
-
*
|
|
4789
|
+
* Run the open animation for the popover.
|
|
4744
4790
|
*/
|
|
4745
|
-
async runOpenAnimation(
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4752
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4753
|
-
this.postToggle.emit({ isOpen: true });
|
|
4754
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4755
|
-
return;
|
|
4756
|
-
}
|
|
4757
|
-
this.currentAnimation = animation;
|
|
4758
|
-
if (animation.playState === 'running') {
|
|
4759
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4760
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4761
|
-
}
|
|
4762
|
-
await animation.finished;
|
|
4763
|
-
this.postToggle.emit({ isOpen: true });
|
|
4764
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4765
|
-
this.hasOpenedOnce = true;
|
|
4766
|
-
}
|
|
4767
|
-
catch (err) {
|
|
4768
|
-
console.warn('Animation failed or was interrupted:', err);
|
|
4769
|
-
// Reset all states to closing
|
|
4770
|
-
this.postBeforeToggle.emit({ willOpen: false });
|
|
4771
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4772
|
-
this.postToggle.emit({ isOpen: false });
|
|
4773
|
-
}
|
|
4774
|
-
finally {
|
|
4775
|
-
if (this.currentAnimation === animation) {
|
|
4776
|
-
this.currentAnimation = null;
|
|
4777
|
-
}
|
|
4778
|
-
}
|
|
4791
|
+
async runOpenAnimation() {
|
|
4792
|
+
const content = this.getContent();
|
|
4793
|
+
if (!content)
|
|
4794
|
+
return;
|
|
4795
|
+
this.runningAnimation = popIn(content);
|
|
4796
|
+
await this.runningAnimation.finished;
|
|
4779
4797
|
}
|
|
4780
4798
|
/**
|
|
4781
|
-
*
|
|
4782
|
-
* Popovercontainers can be closed or opened with other methods than class members,
|
|
4783
|
-
* therefore listening to the toggle event is safer for cleaning up.
|
|
4784
|
-
* @param e ToggleEvent
|
|
4799
|
+
* Handles the popover's state transition from showing to hidden, emitting related events.
|
|
4785
4800
|
*/
|
|
4786
|
-
|
|
4787
|
-
this.
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
}
|
|
4801
|
+
async handleClose() {
|
|
4802
|
+
this.postBeforeToggle.emit({ willOpen: false });
|
|
4803
|
+
this.cleanup();
|
|
4804
|
+
this.host.style.removeProperty(AVAILABLE_WIDTH_PROPERTY);
|
|
4805
|
+
this.host.style.removeProperty(AVAILABLE_HEIGHT_PROPERTY);
|
|
4806
|
+
this.host.style.removeProperty(SAFE_SPACE_PROPERTY);
|
|
4807
|
+
this.postToggle.emit({ isOpen: false });
|
|
4808
|
+
this.postHide.emit();
|
|
4795
4809
|
}
|
|
4796
4810
|
/**
|
|
4797
|
-
*
|
|
4798
|
-
* an influence on popovercontainer positioning
|
|
4811
|
+
* Listen for changes that affect the popover's position and update it accordingly.
|
|
4799
4812
|
*/
|
|
4800
|
-
|
|
4801
|
-
if (!this.
|
|
4813
|
+
startAutoUpdate() {
|
|
4814
|
+
if (!this.host || !this.anchorRef)
|
|
4802
4815
|
return;
|
|
4803
|
-
this.
|
|
4816
|
+
this.stopAutoUpdate = autoUpdate(this.anchorRef, this.host, () => this.updatePosition(this.autoResize));
|
|
4804
4817
|
}
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4818
|
+
/**
|
|
4819
|
+
* Updates the position of the popover based on the anchor's position and the specified placement.
|
|
4820
|
+
* @param withSize whether to resize the popover based on the available space.
|
|
4821
|
+
*/
|
|
4822
|
+
async updatePosition(withSize = false) {
|
|
4823
|
+
const { x, y, middlewareData, placement } = await this.computePosition(withSize);
|
|
4824
|
+
// Hide the popover if the anchor is outside the scrollport.
|
|
4808
4825
|
if (middlewareData.hide?.referenceHidden) {
|
|
4809
4826
|
this.host.hidePopover();
|
|
4827
|
+
return;
|
|
4810
4828
|
}
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
// Position popover
|
|
4829
|
+
this.side = getSide(placement);
|
|
4830
|
+
// Position the popover.
|
|
4814
4831
|
this.host.style.left = `${x}px`;
|
|
4815
4832
|
this.host.style.top = `${y}px`;
|
|
4816
|
-
// Position
|
|
4817
|
-
if (
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
const halfSide = -0.5 * arrowSizePx;
|
|
4822
|
-
if (staticSide) {
|
|
4823
|
-
Object.assign(this.arrowRef.style, {
|
|
4824
|
-
left: arrowX ? `${arrowX}px` : '',
|
|
4825
|
-
top: arrowY ? `${arrowY}px` : '',
|
|
4826
|
-
[staticSide]: `${halfSide}px`,
|
|
4827
|
-
});
|
|
4828
|
-
}
|
|
4833
|
+
// Position the indicator arrow.
|
|
4834
|
+
if (middlewareData.arrow) {
|
|
4835
|
+
this.arrowRef.style.left = middlewareData.arrow.x ? `${middlewareData.arrow.x}px` : '';
|
|
4836
|
+
this.arrowRef.style.top = middlewareData.arrow.y ? `${middlewareData.arrow.y}px` : '';
|
|
4837
|
+
this.arrowRef.style[getOppositeSide(this.side)] = `-${this.arrowRef.offsetWidth / 2}px`;
|
|
4829
4838
|
}
|
|
4830
|
-
//
|
|
4831
|
-
if (
|
|
4832
|
-
|
|
4839
|
+
// Set the safe space polygon.
|
|
4840
|
+
if (middlewareData[SAFE_SPACE_MIDDLEWARE]) {
|
|
4841
|
+
this.host.style.setProperty(SAFE_SPACE_PROPERTY, middlewareData[SAFE_SPACE_MIDDLEWARE].polygon);
|
|
4833
4842
|
}
|
|
4834
4843
|
}
|
|
4835
|
-
async
|
|
4836
|
-
const
|
|
4837
|
-
const isAligned = (this.placement || 'top').includes('-');
|
|
4838
|
-
const flipMiddleware = [
|
|
4839
|
-
// Flip the popover if the target moves outside the viewport
|
|
4840
|
-
flip({ elementContext: 'reference', crossAxis: false }),
|
|
4841
|
-
// Flip the popover if the popover itself moves outside the viewport
|
|
4842
|
-
flip({ elementContext: 'floating', crossAxis: false }),
|
|
4843
|
-
];
|
|
4844
|
-
const shiftMiddleware = shift({
|
|
4845
|
-
padding: gap,
|
|
4846
|
-
limiter: limitShift({
|
|
4847
|
-
offset: 32,
|
|
4848
|
-
}),
|
|
4849
|
-
});
|
|
4844
|
+
async computePosition(withSize) {
|
|
4845
|
+
const padding = this.edgeGap ?? 0;
|
|
4850
4846
|
const middleware = [
|
|
4851
|
-
offset(this.offset ?? (this.arrow ?
|
|
4847
|
+
offset(this.offset ?? (this.arrow ? padding + 4 : padding)),
|
|
4852
4848
|
inline(),
|
|
4853
|
-
// Per floating-ui docs: for aligned placements (e.g. bottom-end),
|
|
4854
|
-
// flip should come before shift. For non-aligned, shift before flip.
|
|
4855
|
-
...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
|
|
4856
|
-
size({
|
|
4857
|
-
apply({ availableWidth, elements }) {
|
|
4858
|
-
Object.assign(elements.floating.style, {
|
|
4859
|
-
maxWidth: `${availableWidth - gap * 2}px`,
|
|
4860
|
-
});
|
|
4861
|
-
},
|
|
4862
|
-
}),
|
|
4863
4849
|
];
|
|
4864
|
-
|
|
4865
|
-
|
|
4850
|
+
const flipMiddleware = flip({ padding, minSize: this.getContentMinSize() });
|
|
4851
|
+
const shiftMiddleware = shift({ limiter: limitShift({ offset: 32 }), padding });
|
|
4852
|
+
// `flip` should come before `shift` for edge-aligned placements
|
|
4853
|
+
// (see https://floating-ui.com/docs/flip#combining-with-shift).
|
|
4854
|
+
if (this.placement?.includes('-'))
|
|
4855
|
+
middleware.push(flipMiddleware, shiftMiddleware);
|
|
4856
|
+
else
|
|
4857
|
+
middleware.push(shiftMiddleware, flipMiddleware);
|
|
4858
|
+
if (withSize) {
|
|
4859
|
+
middleware.push(size({
|
|
4860
|
+
padding,
|
|
4861
|
+
apply({ availableWidth, availableHeight, elements }) {
|
|
4862
|
+
elements.floating.style.setProperty(AVAILABLE_WIDTH_PROPERTY, `${Math.max(0, availableWidth)}px`);
|
|
4863
|
+
elements.floating.style.setProperty(AVAILABLE_HEIGHT_PROPERTY, `${Math.max(0, availableHeight)}px`);
|
|
4864
|
+
},
|
|
4865
|
+
}));
|
|
4866
4866
|
}
|
|
4867
|
-
|
|
4868
|
-
|
|
4869
|
-
|
|
4867
|
+
if (this.arrow)
|
|
4868
|
+
middleware.push(arrow({ element: this.arrowRef, padding }));
|
|
4869
|
+
if (this.safeSpace)
|
|
4870
|
+
middleware.push(safeSpace());
|
|
4871
|
+
// `hide` should generally be placed at the end of the middleware chain
|
|
4872
|
+
// (see https://floating-ui.com/docs/hide#order).
|
|
4873
|
+
if (this.autoHide)
|
|
4870
4874
|
middleware.push(hide({ strategy: 'referenceHidden' }));
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
placement: this.placement || 'top',
|
|
4875
|
+
return computePositionWithSafeArea(this.anchorRef, this.host, {
|
|
4876
|
+
placement: this.placement ?? 'top',
|
|
4874
4877
|
strategy: 'fixed',
|
|
4875
4878
|
middleware,
|
|
4876
4879
|
});
|
|
4877
4880
|
}
|
|
4878
|
-
async updateSafeSpaceBoundaries(currentPlacement) {
|
|
4879
|
-
const targetRect = this.eventTarget.getBoundingClientRect();
|
|
4880
|
-
const popoverRect = this.host.getBoundingClientRect();
|
|
4881
|
-
const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
|
|
4882
|
-
// Helper function to get positioning data based on placement
|
|
4883
|
-
const getPositioningData = (placement, popoverRect, targetRect) => {
|
|
4884
|
-
if (placement === 'top' || placement === 'bottom') {
|
|
4885
|
-
return {
|
|
4886
|
-
popover: {
|
|
4887
|
-
y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
|
|
4888
|
-
xStart: popoverRect.left,
|
|
4889
|
-
xEnd: popoverRect.right,
|
|
4890
|
-
},
|
|
4891
|
-
trigger: {
|
|
4892
|
-
y: placement === 'top' ? targetRect.top : targetRect.bottom,
|
|
4893
|
-
xStart: targetRect.left,
|
|
4894
|
-
xEnd: targetRect.right,
|
|
4895
|
-
},
|
|
4896
|
-
};
|
|
4897
|
-
}
|
|
4898
|
-
else {
|
|
4899
|
-
// left or right
|
|
4900
|
-
return {
|
|
4901
|
-
popover: {
|
|
4902
|
-
x: placement === 'left' ? popoverRect.right : popoverRect.left,
|
|
4903
|
-
yStart: popoverRect.top,
|
|
4904
|
-
yEnd: popoverRect.bottom,
|
|
4905
|
-
},
|
|
4906
|
-
trigger: {
|
|
4907
|
-
x: placement === 'left' ? targetRect.left : targetRect.right,
|
|
4908
|
-
yStart: targetRect.top,
|
|
4909
|
-
yEnd: targetRect.bottom,
|
|
4910
|
-
},
|
|
4911
|
-
};
|
|
4912
|
-
}
|
|
4913
|
-
};
|
|
4914
|
-
const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
|
|
4915
|
-
// Clear previous values
|
|
4916
|
-
PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
|
|
4917
|
-
this.host.style.removeProperty(prop);
|
|
4918
|
-
});
|
|
4919
|
-
if (isVertical) {
|
|
4920
|
-
// For top/bottom placement
|
|
4921
|
-
this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
|
|
4922
|
-
this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
|
|
4923
|
-
this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
|
|
4924
|
-
this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
|
|
4925
|
-
this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
|
|
4926
|
-
this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
|
|
4927
|
-
}
|
|
4928
|
-
else {
|
|
4929
|
-
// For left/right placement
|
|
4930
|
-
this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
|
|
4931
|
-
this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
|
|
4932
|
-
this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
|
|
4933
|
-
this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
|
|
4934
|
-
this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
|
|
4935
|
-
this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
|
|
4936
|
-
}
|
|
4937
|
-
}
|
|
4938
4881
|
render() {
|
|
4939
|
-
return (h(Host, { key: '
|
|
4940
|
-
this.arrowRef = el;
|
|
4941
|
-
} })), h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
|
|
4882
|
+
return (h(Host, { key: '2240dfd6d585287ad6c50d7582053c2187dc924d', "data-version": version, popover: "auto" }, h("div", { key: '2793bd5f9dd3e72f5a6bc8344eab48262e6cea71', part: "post-popovercontainer-content" }, this.arrow && (h("span", { key: '3d0913954cead346a850f7d8ed1aaa97cbfa2d83', "data-side": this.side, class: "arrow", ref: el => (this.arrowRef = el) })), h("span", { key: 'c21d5332cfc0c0a7b7a8403f492bb4ba28b509f4', part: "post-popovercontainer-border-mask" }), h("slot", { key: 'eb6112e8dfa783304e286f65386e6e0741c2a571' }))));
|
|
4942
4883
|
}
|
|
4943
4884
|
get host() { return getElement(this); }
|
|
4944
4885
|
};
|
|
@@ -4948,9 +4889,6 @@ __decorate([
|
|
|
4948
4889
|
__decorate([
|
|
4949
4890
|
Type('number')
|
|
4950
4891
|
], PostPopovercontainer.prototype, "edgeGap", void 0);
|
|
4951
|
-
__decorate([
|
|
4952
|
-
OneOf(['triangle', 'trapezoid'])
|
|
4953
|
-
], PostPopovercontainer.prototype, "safeSpace", void 0);
|
|
4954
4892
|
PostPopovercontainer.style = postPopovercontainerCss();
|
|
4955
4893
|
|
|
4956
4894
|
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}`;
|
|
@@ -4982,7 +4920,7 @@ const PostTogglebutton = class {
|
|
|
4982
4920
|
});
|
|
4983
4921
|
}
|
|
4984
4922
|
render() {
|
|
4985
|
-
return (h(Host, { key: '
|
|
4923
|
+
return (h(Host, { key: '6f61a07946f3e67bace0a883b73c424893c4043d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'fd9b93e45da499dbb790ad675f3db36e248c1960' })));
|
|
4986
4924
|
}
|
|
4987
4925
|
get host() { return getElement(this); }
|
|
4988
4926
|
};
|