@swisspost/design-system-components 10.7.0 → 10.8.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/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-DAEQGHsE.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 +470 -592
- 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 +22 -8
- package/dist/cjs/post-footer.cjs.entry.js +5 -5
- package/dist/cjs/post-linkarea.cjs.entry.js +2 -2
- package/dist/cjs/post-listbox-option.cjs.entry.js +2 -2
- package/dist/cjs/post-listbox.cjs.entry.js +2 -2
- package/dist/cjs/post-number-input.cjs.entry.js +3 -3
- package/dist/cjs/post-pagination.cjs.entry.js +6 -6
- package/dist/cjs/post-popover-trigger.cjs.entry.js +4 -4
- package/dist/cjs/post-popover.cjs.entry.js +9 -9
- package/dist/cjs/post-progressbar.cjs.entry.js +3 -3
- package/dist/cjs/post-rating.cjs.entry.js +5 -5
- package/dist/cjs/post-side-navigation-trigger.cjs.entry.js +5 -5
- package/dist/cjs/post-side-navigation.cjs.entry.js +14 -9
- package/dist/cjs/post-stepper-item.cjs.entry.js +2 -2
- package/dist/cjs/post-stepper.cjs.entry.js +6 -6
- package/dist/cjs/post-tab-item.cjs.entry.js +5 -5
- package/dist/cjs/post-tab-panel.cjs.entry.js +5 -5
- package/dist/cjs/post-tabs.cjs.entry.js +8 -8
- 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 +16 -2
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +31 -12
- package/dist/collection/components/post-language-menu/post-language-menu.css +1 -1
- package/dist/collection/components/post-language-menu/post-language-menu.js +1 -1
- package/dist/collection/components/post-logo/post-logo.css +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-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-number-input/post-number-input.css +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-popovercontainer/post-popovercontainer.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +211 -323
- 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-tabs/post-tabs.css +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +2 -2
- 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/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-header.js +1 -1
- package/dist/components/post-language-menu.js +1 -1
- package/dist/components/post-logo.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-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.js +1 -1
- package/dist/components/post-popovercontainer2.js +1 -1
- package/dist/components/post-side-navigation.js +1 -1
- package/dist/components/post-tabs.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-5kW0ZF_f.js +1 -0
- package/dist/components/react/p-BMCit4BU.js +1 -0
- package/dist/components/react/p-BWwWKRO5.js +1 -0
- package/dist/components/react/p-BdiQsTQm.js +1 -0
- package/dist/components/react/p-BeRGbt65.js +1 -0
- package/dist/components/react/{p-DS46v3ju.js → p-C8i672qm.js} +1 -1
- package/dist/components/react/{p-BBv5JYsW.js → p-C_JY6ipN.js} +1 -1
- package/dist/components/react/p-DRJ9K8sv.js +1 -0
- package/dist/components/react/{p-1y1rv5Tw.js → p-DygUkCKz.js} +1 -1
- package/dist/components/react/p-DzYMQFK2.js +1 -0
- package/dist/components/react/{p-BgEY7xhT.js → p-E-8qAn1z.js} +1 -1
- package/dist/components/react/p-Q5LQWL2X.js +1 -0
- package/dist/components/react/{p-C8_zqgAP.js → p-UXyZDQt4.js} +1 -1
- 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-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-BdiQsTQm.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 +470 -592
- 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 +22 -8
- package/dist/esm/post-footer.entry.js +5 -5
- package/dist/esm/post-linkarea.entry.js +2 -2
- package/dist/esm/post-listbox-option.entry.js +2 -2
- package/dist/esm/post-listbox.entry.js +2 -2
- package/dist/esm/post-number-input.entry.js +3 -3
- package/dist/esm/post-pagination.entry.js +6 -6
- package/dist/esm/post-popover-trigger.entry.js +4 -4
- package/dist/esm/post-popover.entry.js +9 -9
- package/dist/esm/post-progressbar.entry.js +3 -3
- package/dist/esm/post-rating.entry.js +5 -5
- package/dist/esm/post-side-navigation-trigger.entry.js +5 -5
- package/dist/esm/post-side-navigation.entry.js +14 -9
- package/dist/esm/post-stepper-item.entry.js +2 -2
- package/dist/esm/post-stepper.entry.js +6 -6
- package/dist/esm/post-tab-item.entry.js +5 -5
- package/dist/esm/post-tab-panel.entry.js +5 -5
- package/dist/esm/post-tabs.entry.js +8 -8
- 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-0688d296.entry.js +1 -0
- package/dist/post-components/p-0b0b2f02.entry.js +1 -0
- package/dist/post-components/{p-31550a50.entry.js → p-0d25c033.entry.js} +1 -1
- package/dist/post-components/{p-aa33141b.entry.js → p-229d324e.entry.js} +1 -1
- package/dist/post-components/{p-f275b872.entry.js → p-2a5312a7.entry.js} +1 -1
- package/dist/post-components/{p-43240818.entry.js → p-330fd6cd.entry.js} +1 -1
- package/dist/post-components/{p-6a2f47af.entry.js → p-3712133b.entry.js} +1 -1
- package/dist/post-components/{p-bd128657.entry.js → p-379780a3.entry.js} +1 -1
- package/dist/post-components/{p-aff180f5.entry.js → p-3fdb8ebc.entry.js} +1 -1
- package/dist/post-components/{p-64480e3a.entry.js → p-456b0786.entry.js} +1 -1
- package/dist/post-components/{p-96d07f2b.entry.js → p-4d30c65d.entry.js} +1 -1
- package/dist/post-components/{p-c2de3702.entry.js → p-534ca27e.entry.js} +1 -1
- package/dist/post-components/p-5369b9c2.entry.js +1 -0
- package/dist/post-components/p-6833be12.entry.js +1 -0
- package/dist/post-components/p-6ad44691.entry.js +1 -0
- package/dist/post-components/{p-e6a4146b.entry.js → p-82c62e90.entry.js} +1 -1
- package/dist/post-components/{p-451ec8ee.entry.js → p-91a2ef3c.entry.js} +1 -1
- package/dist/post-components/p-95f5d5ea.entry.js +1 -0
- package/dist/post-components/p-9dd286bf.entry.js +1 -0
- package/dist/post-components/p-9fedcfba.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-BdiQsTQm.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-63e570c4.entry.js → p-ab0500b7.entry.js} +1 -1
- package/dist/post-components/p-c123ecde.entry.js +1 -0
- package/dist/post-components/{p-61a45246.entry.js → p-d2de31b7.entry.js} +1 -1
- package/dist/post-components/p-dffeb751.entry.js +1 -0
- package/dist/post-components/{p-f784e149.entry.js → p-e11ccdbe.entry.js} +1 -1
- package/dist/post-components/{p-31a97aae.entry.js → p-e560767b.entry.js} +1 -1
- package/dist/post-components/p-ee7fade4.entry.js +1 -0
- package/dist/post-components/{p-f566768e.entry.js → p-f2629077.entry.js} +1 -1
- package/dist/post-components/{p-58b66607.entry.js → p-f2b24bbd.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 +2 -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.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 +537 -602
- package/hydrate/index.mjs +537 -602
- package/package.json +11 -10
- package/dist/components/react/p-BBz9PVf0.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-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-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,23 +1,24 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DY4QxKNv.js');
|
|
4
4
|
var breakpoints = require('./breakpoints-Kruvy8Dm.js');
|
|
5
5
|
var eventFrom = require('./event-from-CTcQxB9-.js');
|
|
6
|
-
var _package = require('./package-
|
|
7
|
-
var oneOf = require('./one-of-
|
|
8
|
-
var required = require('./required-
|
|
6
|
+
var _package = require('./package-DAEQGHsE.js');
|
|
7
|
+
var oneOf = require('./one-of-qu7_EPxf.js');
|
|
8
|
+
var required = require('./required-Dgzo-rb5.js');
|
|
9
9
|
var fade = require('./fade-CPQhl1fP.js');
|
|
10
10
|
var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
|
|
11
11
|
var index$1 = require('./index-CggFmZ8n.js');
|
|
12
|
-
var type = require('./type-
|
|
12
|
+
var type = require('./type-DBRxpBZI.js');
|
|
13
13
|
var nanoid = require('./nanoid-CmjyF1Cm.js');
|
|
14
|
-
var pattern = require('./pattern-
|
|
15
|
-
var url = require('./url-
|
|
14
|
+
var pattern = require('./pattern-EpwCKMyC.js');
|
|
15
|
+
var url = require('./url-Dl1JABeP.js');
|
|
16
16
|
var utils = require('./utils-s05L2ulk.js');
|
|
17
17
|
var fadeSlide = require('./fade-slide-dPhQa-I1.js');
|
|
18
18
|
var placement = require('./placement-qEFR9hmI.js');
|
|
19
19
|
var getRoot = require('./get-root-B1FnQ50K.js');
|
|
20
|
-
require('./
|
|
20
|
+
var isFocusVisible = require('./is-focus-visible-B3CqVQsX.js');
|
|
21
|
+
require('./create-validator-decorator-DVm_SDrR.js');
|
|
21
22
|
|
|
22
23
|
const CLOSABLE_TARGETS = [
|
|
23
24
|
{
|
|
@@ -61,7 +62,7 @@ const BUTTON_TYPES = ['button', 'reset'];
|
|
|
61
62
|
const PLACEMENT = ['manual', 'auto'];
|
|
62
63
|
const SIZE = ['default', 'small'];
|
|
63
64
|
|
|
64
|
-
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)}`;
|
|
65
|
+
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)}`;
|
|
65
66
|
|
|
66
67
|
var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
67
68
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -170,7 +171,7 @@ function slide(el, direction, options = {}) {
|
|
|
170
171
|
return animateSlide(el, keyframes, options);
|
|
171
172
|
}
|
|
172
173
|
|
|
173
|
-
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}`;
|
|
174
|
+
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: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}`;
|
|
174
175
|
|
|
175
176
|
var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
176
177
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -243,6 +244,10 @@ const PostHeader = class {
|
|
|
243
244
|
this.closeBurgerMenu();
|
|
244
245
|
}
|
|
245
246
|
};
|
|
247
|
+
this.onScroll = () => {
|
|
248
|
+
this.handleScrollEvent();
|
|
249
|
+
this.collapseIfNotKeyboardFocused();
|
|
250
|
+
};
|
|
246
251
|
this.handleScrollEvent = this.handleScrollEvent.bind(this);
|
|
247
252
|
this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
|
|
248
253
|
this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
|
|
@@ -253,10 +258,10 @@ const PostHeader = class {
|
|
|
253
258
|
}
|
|
254
259
|
connectedCallback() {
|
|
255
260
|
globalThis.addEventListener('resize', this.throttledResize, { passive: true });
|
|
256
|
-
globalThis.addEventListener('scroll', this.
|
|
261
|
+
globalThis.addEventListener('scroll', this.onScroll, {
|
|
257
262
|
passive: true,
|
|
258
263
|
});
|
|
259
|
-
this.scrollParent.addEventListener('scroll', this.
|
|
264
|
+
this.scrollParent.addEventListener('scroll', this.onScroll, {
|
|
260
265
|
passive: true,
|
|
261
266
|
});
|
|
262
267
|
document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
@@ -288,9 +293,9 @@ const PostHeader = class {
|
|
|
288
293
|
const scrollParent = this.scrollParent;
|
|
289
294
|
globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
|
|
290
295
|
globalThis.removeEventListener('resize', this.throttledResize);
|
|
291
|
-
globalThis.removeEventListener('scroll', this.
|
|
296
|
+
globalThis.removeEventListener('scroll', this.onScroll);
|
|
292
297
|
if (scrollParent)
|
|
293
|
-
scrollParent.removeEventListener('scroll', this.
|
|
298
|
+
scrollParent.removeEventListener('scroll', this.onScroll);
|
|
294
299
|
document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
295
300
|
this.host.removeEventListener('keydown', this.keyboardHandler);
|
|
296
301
|
if (this.host.shadowRoot) {
|
|
@@ -383,6 +388,15 @@ const PostHeader = class {
|
|
|
383
388
|
});
|
|
384
389
|
this.megadropdownOpen = false;
|
|
385
390
|
}
|
|
391
|
+
// The header only stays expanded to keep keyboard focus visible
|
|
392
|
+
// once focus is no longer keyboard focus (e.g. after a click), it can collapse on scroll
|
|
393
|
+
collapseIfNotKeyboardFocused() {
|
|
394
|
+
if (!('expanded' in this.host.dataset))
|
|
395
|
+
return;
|
|
396
|
+
if (this.getDeepActiveElement()?.matches(':focus-visible'))
|
|
397
|
+
return;
|
|
398
|
+
delete this.host.dataset.expanded;
|
|
399
|
+
}
|
|
386
400
|
handleScrollEvent() {
|
|
387
401
|
const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
|
|
388
402
|
document.documentElement.style.setProperty('--post-header-scroll-top', `${Math.max(scrollTop, 0)}px`);
|
|
@@ -445,16 +459,22 @@ const PostHeader = class {
|
|
|
445
459
|
});
|
|
446
460
|
}
|
|
447
461
|
onFocusChange(event) {
|
|
448
|
-
|
|
449
|
-
|
|
462
|
+
if (event.type === 'focusout') {
|
|
463
|
+
// Ignore focus moving between elements of the header (e.g. into the language menu flyout)
|
|
464
|
+
if (this.isWithinHeader(event.relatedTarget))
|
|
465
|
+
return;
|
|
466
|
+
delete this.host.dataset.expanded;
|
|
450
467
|
return;
|
|
468
|
+
}
|
|
469
|
+
// Mouse focus never changes the state
|
|
470
|
+
// collapsing here would move the controls away from the pointer before the click completes
|
|
451
471
|
const isFocusVisible = this.getDeepActiveElement()?.matches(':focus-visible');
|
|
452
|
-
|
|
453
|
-
|
|
472
|
+
if (!isFocusVisible)
|
|
473
|
+
return;
|
|
474
|
+
// Keyboard focus: expanded only while focus is in the part that collapses on scroll
|
|
454
475
|
const collapsiblePart = this.device === 'desktop' ? this.globalHeader : this.localHeader;
|
|
455
476
|
const isInCollapsiblePart = event.composedPath().includes(collapsiblePart);
|
|
456
|
-
|
|
457
|
-
this.host.toggleAttribute('data-expanded', isHeaderExpanded);
|
|
477
|
+
this.host.toggleAttribute('data-expanded', isInCollapsiblePart);
|
|
458
478
|
}
|
|
459
479
|
isWithinHeader(target) {
|
|
460
480
|
return target instanceof Node && (target === this.host || this.host.contains(target));
|
|
@@ -478,10 +498,10 @@ const PostHeader = class {
|
|
|
478
498
|
render() {
|
|
479
499
|
const onDesktop = this.device === 'desktop';
|
|
480
500
|
const onTabletAndMobile = this.device !== 'desktop';
|
|
481
|
-
return (index.h(index.Host, { key: '
|
|
501
|
+
return (index.h(index.Host, { key: '4c74840c9613cb23844f18754a25acfc0d16f128', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: '711ff06b1294ab7cca504cbb1b18ea132f2e2a29' }, index.h("div", { key: '91f37765845ec6df6f878a5750acb2f9d3a9a3ef', ref: el => (this.globalHeader = el), class: "global-header" }, index.h("div", { key: '9ce59aeb02b710ebf435dd71a44daef5729784cb', class: "section" }, index.h("div", { key: '9ae9b8a9d4d53eb18cee84167b6fd0900ca968bf', class: "logo" }, index.h("slot", { key: 'a0970fc3b536710b746d62013da387a03ac02ae6', name: "post-logo" })), index.h("div", { key: '685cf65541a21d8911705317b62ac7a5f900141a', class: "sliding-controls" }, onDesktop && (index.h("div", { key: '540854418db78414095ef58d376401955e05458b', class: "audience" }, index.h("slot", { key: '57f1a927cffb3baea05d7ea54d78fd57349dd81f', name: "audience" }))), index.h("slot", { key: '1f473accb45b6da9ca0225ed1ee1c075a89cc5a4', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
|
|
482
502
|
index.h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
|
|
483
503
|
index.h("slot", { key: "language-menu", name: "language-menu" }),
|
|
484
|
-
], index.h("slot", { key: '
|
|
504
|
+
], index.h("slot", { key: '2f22dad30f8b4482b86aa44f4806844a0543826e', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: 'd9440ab691459ee505bd3fee43df08eab4fd7d6e', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: 'c8e750756d635d4d145393db597e7e6c0aab0bf3' }, this.textMenu), index.h("post-icon", { key: 'ff251d5dd1815caccc2c1099dafbda2719e39531', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: '1a607d5b4bf397b17aeeaa392b2444d480740e26', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: 'bdbd60cf795b45ff66c1078defaf388eaa9711a6', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: '3b065f633b1dbf16595ae2665c425448c08e01a5', class: "section" }, index.h("slot", { key: '8d2a3f4491a348b16dbd71f439ed0e57b8856642', name: "side-nav" }), index.h("slot", { key: '2b169e02026daaa253e6c607d29b4c51373b30c5', name: "title" }), this.hasTitle && index.h("slot", { key: 'e4afc5c638c62533387cb35eb121e6736afc957d', name: "local-nav" }), onDesktop && index.h("slot", { key: '2dedbbec1b4af4b5f22aaf555b0c1adc2260eca3', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: 'db0bf934df1bd189cbecb74ebc2cdc9b753c56f4', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
|
|
485
505
|
}
|
|
486
506
|
get host() { return index.getElement(this); }
|
|
487
507
|
static get watchers() { return {
|
|
@@ -635,7 +655,7 @@ PostIcon.style = postIconCss();
|
|
|
635
655
|
|
|
636
656
|
const SWITCH_VARIANTS = ['list', 'menu'];
|
|
637
657
|
|
|
638
|
-
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:
|
|
658
|
+
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}`;
|
|
639
659
|
|
|
640
660
|
var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
641
661
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -817,7 +837,7 @@ __decorate$7([
|
|
|
817
837
|
], PostLanguageMenuItem.prototype, "url", void 0);
|
|
818
838
|
PostLanguageMenuItem.style = postLanguageMenuItemCss();
|
|
819
839
|
|
|
820
|
-
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:
|
|
840
|
+
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)}`;
|
|
821
841
|
|
|
822
842
|
var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
823
843
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -994,7 +1014,7 @@ __decorate$5([
|
|
|
994
1014
|
], PostMainnavigation.prototype, "textMain", void 0);
|
|
995
1015
|
PostMainnavigation.style = postMainnavigationCss();
|
|
996
1016
|
|
|
997
|
-
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:
|
|
1017
|
+
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}}`;
|
|
998
1018
|
|
|
999
1019
|
var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1000
1020
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1017,7 +1037,7 @@ const PostMegadropdown = class {
|
|
|
1017
1037
|
index.registerInstance(this, hostRef);
|
|
1018
1038
|
this.postToggleMegadropdown = index.createEvent(this, "postToggleMegadropdown");
|
|
1019
1039
|
this.currentAnimation = null;
|
|
1020
|
-
this.
|
|
1040
|
+
this.animationDirection = null;
|
|
1021
1041
|
this.fsAnimationOptions = {
|
|
1022
1042
|
translate: -10,
|
|
1023
1043
|
duration: 350,
|
|
@@ -1045,7 +1065,7 @@ const PostMegadropdown = class {
|
|
|
1045
1065
|
return;
|
|
1046
1066
|
}
|
|
1047
1067
|
// Ignore clicks on the trigger or its contents to prevent running hide() twice
|
|
1048
|
-
if (this.megadropdownTrigger
|
|
1068
|
+
if (this.megadropdownTrigger?.contains(target)) {
|
|
1049
1069
|
return;
|
|
1050
1070
|
}
|
|
1051
1071
|
if (target instanceof HTMLElement) {
|
|
@@ -1087,9 +1107,9 @@ const PostMegadropdown = class {
|
|
|
1087
1107
|
* Toggles the dropdown visibility based on its current state.
|
|
1088
1108
|
*/
|
|
1089
1109
|
async toggle() {
|
|
1090
|
-
if (this.
|
|
1110
|
+
if (this.animationDirection) {
|
|
1091
1111
|
// If this is already animating towards a future state -> reverse intent
|
|
1092
|
-
return this.
|
|
1112
|
+
return this.animationDirection === 'in' ? this.hide() : this.show();
|
|
1093
1113
|
}
|
|
1094
1114
|
return this.isVisible ? this.hide() : this.show();
|
|
1095
1115
|
}
|
|
@@ -1145,6 +1165,9 @@ const PostMegadropdown = class {
|
|
|
1145
1165
|
this.forceClose();
|
|
1146
1166
|
return;
|
|
1147
1167
|
}
|
|
1168
|
+
// Already closed or already closing
|
|
1169
|
+
if (!this.isVisible || this.animationDirection === 'out')
|
|
1170
|
+
return;
|
|
1148
1171
|
// Update trigger state
|
|
1149
1172
|
this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
|
|
1150
1173
|
try {
|
|
@@ -1181,23 +1204,34 @@ const PostMegadropdown = class {
|
|
|
1181
1204
|
}
|
|
1182
1205
|
// Run the respective animation
|
|
1183
1206
|
createAnimation(direction) {
|
|
1207
|
+
// Keep the last frame of the closing animation until the container is hidden,
|
|
1208
|
+
// otherwise it snaps back to full opacity for a frame before display: none is applied
|
|
1209
|
+
const fill = direction === 'out' ? 'forwards' : 'none';
|
|
1184
1210
|
if (this.device === 'desktop') {
|
|
1185
|
-
return fadeSlide.fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
|
|
1211
|
+
return fadeSlide.fadeSlide(this.animatedContainer, direction, { ...this.fsAnimationOptions, fill });
|
|
1186
1212
|
}
|
|
1187
1213
|
return slide(this.animatedContainer, direction, {
|
|
1188
1214
|
translate: 100,
|
|
1189
1215
|
duration: 350,
|
|
1190
1216
|
easing: direction === 'in' ? 'ease-in' : 'ease-out',
|
|
1217
|
+
fill,
|
|
1191
1218
|
});
|
|
1192
1219
|
}
|
|
1193
1220
|
async animate(direction) {
|
|
1194
1221
|
this.cancelAnimation();
|
|
1195
1222
|
this.currentAnimation = this.createAnimation(direction);
|
|
1196
|
-
//
|
|
1197
|
-
this.
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1223
|
+
// Used to avoid toggle() de-sync and double hide() calls
|
|
1224
|
+
this.animationDirection = direction;
|
|
1225
|
+
try {
|
|
1226
|
+
await this.currentAnimation.finished;
|
|
1227
|
+
}
|
|
1228
|
+
finally {
|
|
1229
|
+
if (this.animationDirection === direction)
|
|
1230
|
+
this.animationDirection = null;
|
|
1231
|
+
}
|
|
1232
|
+
// The closing animation is kept (fill: forwards) and cancelled by the next animate() call
|
|
1233
|
+
if (direction === 'in')
|
|
1234
|
+
this.currentAnimation = null;
|
|
1201
1235
|
}
|
|
1202
1236
|
cancelAnimation() {
|
|
1203
1237
|
this.currentAnimation?.cancel();
|
|
@@ -1238,11 +1272,15 @@ const PostMegadropdown = class {
|
|
|
1238
1272
|
}
|
|
1239
1273
|
}
|
|
1240
1274
|
handleTabOutside(e) {
|
|
1241
|
-
if (e.key
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1275
|
+
if (e.key !== 'Tab' || this.device !== 'desktop' || !this.isVisible)
|
|
1276
|
+
return;
|
|
1277
|
+
const target = e.target;
|
|
1278
|
+
if (this.host.contains(target))
|
|
1279
|
+
return;
|
|
1280
|
+
// Focus on the own trigger keeps it open, Enter / Space on the trigger closes it
|
|
1281
|
+
if (this.megadropdownTrigger?.contains(target))
|
|
1282
|
+
return;
|
|
1283
|
+
this.hide(false);
|
|
1246
1284
|
}
|
|
1247
1285
|
/**
|
|
1248
1286
|
* Sets up a MutationObserver on the host to watch for changes
|
|
@@ -1290,7 +1328,7 @@ const PostMegadropdown = class {
|
|
|
1290
1328
|
}
|
|
1291
1329
|
render() {
|
|
1292
1330
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
1293
|
-
return (index.h(index.Host, { key: '
|
|
1331
|
+
return (index.h(index.Host, { key: '8b9fe023f42390243b55d4efcf58e57d7bae8982', version: _package.version }, index.h("div", { key: '5840742453a8d44dd16f09f368958ac0f734ece7', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: '76332b6f916948ab11411b3dfd5fe97ca6522847', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '3e7cf05cbd7a134ebb417fd5e83f2052874f6c38', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: '76f902df0e84fb68556ffc6735e5188b1c1babf8', class: "megadropdown-content" }, index.h("slot", { key: '6b69815d2b418395b246dc2681a0597c47f59034' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
|
|
1294
1332
|
}
|
|
1295
1333
|
get host() { return index.getElement(this); }
|
|
1296
1334
|
};
|
|
@@ -1304,7 +1342,7 @@ __decorate$4([
|
|
|
1304
1342
|
], PostMegadropdown.prototype, "textBack", void 0);
|
|
1305
1343
|
PostMegadropdown.style = postMegadropdownCss();
|
|
1306
1344
|
|
|
1307
|
-
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}}`;
|
|
1345
|
+
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}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}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}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}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}}`;
|
|
1308
1346
|
|
|
1309
1347
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1310
1348
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1388,7 +1426,7 @@ __decorate$3([
|
|
|
1388
1426
|
], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);
|
|
1389
1427
|
PostMegadropdownTrigger.style = postMegadropdownTriggerCss();
|
|
1390
1428
|
|
|
1391
|
-
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}`;
|
|
1429
|
+
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}`;
|
|
1392
1430
|
|
|
1393
1431
|
var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1394
1432
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1508,7 +1546,7 @@ const PostMenu = class {
|
|
|
1508
1546
|
this.lastFocusedElement = this.root?.activeElement;
|
|
1509
1547
|
// Only focus the first item if the trigger was keyboard-focus-visible
|
|
1510
1548
|
// that's the browser's own signal for a keyboard-driven interaction.
|
|
1511
|
-
if (
|
|
1549
|
+
if (isFocusVisible.isFocusVisible(this.lastFocusedElement)) {
|
|
1512
1550
|
requestAnimationFrame(() => {
|
|
1513
1551
|
const menuItems = this.getSlottedItems();
|
|
1514
1552
|
if (menuItems.length > 0) {
|
|
@@ -1521,17 +1559,6 @@ const PostMenu = class {
|
|
|
1521
1559
|
this.lastFocusedElement.focus();
|
|
1522
1560
|
}
|
|
1523
1561
|
}
|
|
1524
|
-
wasFocusVisible(element) {
|
|
1525
|
-
if (!element)
|
|
1526
|
-
return false;
|
|
1527
|
-
try {
|
|
1528
|
-
return element.matches(':focus-visible');
|
|
1529
|
-
}
|
|
1530
|
-
catch {
|
|
1531
|
-
// Not supported, fall back to always focusing
|
|
1532
|
-
return true;
|
|
1533
|
-
}
|
|
1534
|
-
}
|
|
1535
1562
|
controlKeyDownHandler(e) {
|
|
1536
1563
|
const menuItems = this.getSlottedItems();
|
|
1537
1564
|
if (menuItems.length === 0) {
|
|
@@ -1583,7 +1610,7 @@ const PostMenu = class {
|
|
|
1583
1610
|
]));
|
|
1584
1611
|
}
|
|
1585
1612
|
render() {
|
|
1586
|
-
return (index.h(index.Host, { key: '
|
|
1613
|
+
return (index.h(index.Host, { key: '988b77e3589a499e23e95eb6eff985edbadd4d2e', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'fd0ee4d4234fe1f222757c00d778ebb2a2c5ac13', autoHide: true, autoResize: true, onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '8b46a79db5944854c97c862608bd5a8d9113398e', part: "post-menu" }, index.h("slot", { key: 'a024a0ade2a865b12d1a452c6c33f9afde1f34e0', name: "header" }), index.h("slot", { key: '1465a5d8d9463e6557a2a8c32aa119429a4783b3' })))));
|
|
1587
1614
|
}
|
|
1588
1615
|
get host() { return index.getElement(this); }
|
|
1589
1616
|
};
|
|
@@ -1602,7 +1629,7 @@ __decorate$2([
|
|
|
1602
1629
|
], PostMenu.prototype, "handlePostBeforeToggle", null);
|
|
1603
1630
|
PostMenu.style = postMenuCss();
|
|
1604
1631
|
|
|
1605
|
-
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-
|
|
1632
|
+
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}}`;
|
|
1606
1633
|
|
|
1607
1634
|
const PostMenuItem = class {
|
|
1608
1635
|
constructor(hostRef) {
|
|
@@ -1692,6 +1719,21 @@ __decorate$1([
|
|
|
1692
1719
|
], PostMenuTrigger.prototype, "for", void 0);
|
|
1693
1720
|
PostMenuTrigger.style = postMenuTriggerCss();
|
|
1694
1721
|
|
|
1722
|
+
const duration = 250;
|
|
1723
|
+
const easing = 'ease-out';
|
|
1724
|
+
function popIn(el) {
|
|
1725
|
+
if (!el)
|
|
1726
|
+
return;
|
|
1727
|
+
return el.animate([
|
|
1728
|
+
{ transform: 'scale(0.9)', opacity: 0 },
|
|
1729
|
+
{ transform: 'scale(1)', opacity: 1 },
|
|
1730
|
+
], {
|
|
1731
|
+
duration,
|
|
1732
|
+
easing,
|
|
1733
|
+
fill: 'forwards',
|
|
1734
|
+
});
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1695
1737
|
/**
|
|
1696
1738
|
* Custom positioning reference element.
|
|
1697
1739
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
@@ -1737,23 +1779,6 @@ function getSideAxis(placement) {
|
|
|
1737
1779
|
function getAlignmentAxis(placement) {
|
|
1738
1780
|
return getOppositeAxis(getSideAxis(placement));
|
|
1739
1781
|
}
|
|
1740
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
1741
|
-
if (rtl === void 0) {
|
|
1742
|
-
rtl = false;
|
|
1743
|
-
}
|
|
1744
|
-
const alignment = getAlignment(placement);
|
|
1745
|
-
const alignmentAxis = getAlignmentAxis(placement);
|
|
1746
|
-
const length = getAxisLength(alignmentAxis);
|
|
1747
|
-
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
1748
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
1749
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
1750
|
-
}
|
|
1751
|
-
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
1752
|
-
}
|
|
1753
|
-
function getExpandedPlacements(placement) {
|
|
1754
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
1755
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
1756
|
-
}
|
|
1757
1782
|
function getOppositeAlignmentPlacement(placement) {
|
|
1758
1783
|
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
1759
1784
|
}
|
|
@@ -1779,7 +1804,7 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
|
1779
1804
|
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
1780
1805
|
if (alignment) {
|
|
1781
1806
|
list = list.map(side => side + "-" + alignment);
|
|
1782
|
-
|
|
1807
|
+
{
|
|
1783
1808
|
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
1784
1809
|
}
|
|
1785
1810
|
}
|
|
@@ -1885,7 +1910,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
1885
1910
|
* - 0 = lies flush with the boundary
|
|
1886
1911
|
* @see https://floating-ui.com/docs/detectOverflow
|
|
1887
1912
|
*/
|
|
1888
|
-
async function detectOverflow(state, options) {
|
|
1913
|
+
async function detectOverflow$1(state, options) {
|
|
1889
1914
|
var _await$platform$isEle;
|
|
1890
1915
|
if (options === void 0) {
|
|
1891
1916
|
options = {};
|
|
@@ -1958,7 +1983,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
1958
1983
|
} = config;
|
|
1959
1984
|
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
1960
1985
|
...platform,
|
|
1961
|
-
detectOverflow
|
|
1986
|
+
detectOverflow: detectOverflow$1
|
|
1962
1987
|
};
|
|
1963
1988
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
1964
1989
|
let rects = await platform.getElementRects({
|
|
@@ -2118,138 +2143,6 @@ const arrow$1 = options => ({
|
|
|
2118
2143
|
}
|
|
2119
2144
|
});
|
|
2120
2145
|
|
|
2121
|
-
/**
|
|
2122
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
2123
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
2124
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
2125
|
-
* @see https://floating-ui.com/docs/flip
|
|
2126
|
-
*/
|
|
2127
|
-
const flip$1 = function (options) {
|
|
2128
|
-
if (options === void 0) {
|
|
2129
|
-
options = {};
|
|
2130
|
-
}
|
|
2131
|
-
return {
|
|
2132
|
-
name: 'flip',
|
|
2133
|
-
options,
|
|
2134
|
-
async fn(state) {
|
|
2135
|
-
var _middlewareData$arrow, _middlewareData$flip;
|
|
2136
|
-
const {
|
|
2137
|
-
placement,
|
|
2138
|
-
middlewareData,
|
|
2139
|
-
rects,
|
|
2140
|
-
initialPlacement,
|
|
2141
|
-
platform,
|
|
2142
|
-
elements
|
|
2143
|
-
} = state;
|
|
2144
|
-
const {
|
|
2145
|
-
mainAxis: checkMainAxis = true,
|
|
2146
|
-
crossAxis: checkCrossAxis = true,
|
|
2147
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
2148
|
-
fallbackStrategy = 'bestFit',
|
|
2149
|
-
fallbackAxisSideDirection = 'none',
|
|
2150
|
-
flipAlignment = true,
|
|
2151
|
-
...detectOverflowOptions
|
|
2152
|
-
} = evaluate(options, state);
|
|
2153
|
-
|
|
2154
|
-
// If a reset by the arrow was caused due to an alignment offset being
|
|
2155
|
-
// added, we should skip any logic now since `flip()` has already done its
|
|
2156
|
-
// work.
|
|
2157
|
-
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
2158
|
-
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
2159
|
-
return {};
|
|
2160
|
-
}
|
|
2161
|
-
const side = getSide(placement);
|
|
2162
|
-
const initialSideAxis = getSideAxis(initialPlacement);
|
|
2163
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
2164
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
2165
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
2166
|
-
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
2167
|
-
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
2168
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
2169
|
-
}
|
|
2170
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
2171
|
-
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
2172
|
-
const overflows = [];
|
|
2173
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
2174
|
-
if (checkMainAxis) {
|
|
2175
|
-
overflows.push(overflow[side]);
|
|
2176
|
-
}
|
|
2177
|
-
if (checkCrossAxis) {
|
|
2178
|
-
const sides = getAlignmentSides(placement, rects, rtl);
|
|
2179
|
-
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
2180
|
-
}
|
|
2181
|
-
overflowsData = [...overflowsData, {
|
|
2182
|
-
placement,
|
|
2183
|
-
overflows
|
|
2184
|
-
}];
|
|
2185
|
-
|
|
2186
|
-
// One or more sides is overflowing.
|
|
2187
|
-
if (!overflows.every(side => side <= 0)) {
|
|
2188
|
-
var _middlewareData$flip2, _overflowsData$filter;
|
|
2189
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
2190
|
-
const nextPlacement = placements[nextIndex];
|
|
2191
|
-
if (nextPlacement) {
|
|
2192
|
-
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
2193
|
-
if (!ignoreCrossAxisOverflow ||
|
|
2194
|
-
// We leave the current main axis only if every placement on that axis
|
|
2195
|
-
// overflows the main axis.
|
|
2196
|
-
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
2197
|
-
// Try next placement and re-run the lifecycle.
|
|
2198
|
-
return {
|
|
2199
|
-
data: {
|
|
2200
|
-
index: nextIndex,
|
|
2201
|
-
overflows: overflowsData
|
|
2202
|
-
},
|
|
2203
|
-
reset: {
|
|
2204
|
-
placement: nextPlacement
|
|
2205
|
-
}
|
|
2206
|
-
};
|
|
2207
|
-
}
|
|
2208
|
-
}
|
|
2209
|
-
|
|
2210
|
-
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
2211
|
-
// then find the placement that fits the best on the main crossAxis side.
|
|
2212
|
-
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;
|
|
2213
|
-
|
|
2214
|
-
// Otherwise fallback.
|
|
2215
|
-
if (!resetPlacement) {
|
|
2216
|
-
switch (fallbackStrategy) {
|
|
2217
|
-
case 'bestFit':
|
|
2218
|
-
{
|
|
2219
|
-
var _overflowsData$filter2;
|
|
2220
|
-
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
2221
|
-
if (hasFallbackAxisSideDirection) {
|
|
2222
|
-
const currentSideAxis = getSideAxis(d.placement);
|
|
2223
|
-
return currentSideAxis === initialSideAxis ||
|
|
2224
|
-
// Create a bias to the `y` side axis due to horizontal
|
|
2225
|
-
// reading directions favoring greater width.
|
|
2226
|
-
currentSideAxis === 'y';
|
|
2227
|
-
}
|
|
2228
|
-
return true;
|
|
2229
|
-
}).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];
|
|
2230
|
-
if (placement) {
|
|
2231
|
-
resetPlacement = placement;
|
|
2232
|
-
}
|
|
2233
|
-
break;
|
|
2234
|
-
}
|
|
2235
|
-
case 'initialPlacement':
|
|
2236
|
-
resetPlacement = initialPlacement;
|
|
2237
|
-
break;
|
|
2238
|
-
}
|
|
2239
|
-
}
|
|
2240
|
-
if (placement !== resetPlacement) {
|
|
2241
|
-
return {
|
|
2242
|
-
reset: {
|
|
2243
|
-
placement: resetPlacement
|
|
2244
|
-
}
|
|
2245
|
-
};
|
|
2246
|
-
}
|
|
2247
|
-
}
|
|
2248
|
-
return {};
|
|
2249
|
-
}
|
|
2250
|
-
};
|
|
2251
|
-
};
|
|
2252
|
-
|
|
2253
2146
|
function getSideOffsets(overflow, rect) {
|
|
2254
2147
|
return {
|
|
2255
2148
|
top: overflow.top - rect.height,
|
|
@@ -3132,7 +3025,7 @@ function getDocumentRect(html) {
|
|
|
3132
3025
|
// calculation is affected by unusual styles.
|
|
3133
3026
|
// Most scrollbars leave 15-18px of space.
|
|
3134
3027
|
const SCROLLBAR_MAX = 25;
|
|
3135
|
-
function getViewportRect(element, strategy, rootBoundary) {
|
|
3028
|
+
function getViewportRect$1(element, strategy, rootBoundary) {
|
|
3136
3029
|
if (rootBoundary === void 0) {
|
|
3137
3030
|
rootBoundary = 'viewport';
|
|
3138
3031
|
}
|
|
@@ -3210,7 +3103,7 @@ function getInnerBoundingClientRect(element, strategy) {
|
|
|
3210
3103
|
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
3211
3104
|
let rect;
|
|
3212
3105
|
if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
|
|
3213
|
-
rect = getViewportRect(element, strategy, clippingAncestor);
|
|
3106
|
+
rect = getViewportRect$1(element, strategy, clippingAncestor);
|
|
3214
3107
|
} else if (clippingAncestor === 'document') {
|
|
3215
3108
|
rect = getDocumentRect(getDocumentElement(element));
|
|
3216
3109
|
} else if (isElement(clippingAncestor)) {
|
|
@@ -3606,6 +3499,16 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
3606
3499
|
};
|
|
3607
3500
|
}
|
|
3608
3501
|
|
|
3502
|
+
/**
|
|
3503
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
3504
|
+
* element is overflowing a given clipping boundary on each side.
|
|
3505
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
3506
|
+
* - negative = how many pixels left before it will overflow
|
|
3507
|
+
* - 0 = lies flush with the boundary
|
|
3508
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
3509
|
+
*/
|
|
3510
|
+
const detectOverflow = detectOverflow$1;
|
|
3511
|
+
|
|
3609
3512
|
/**
|
|
3610
3513
|
* Modifies the placement by translating the floating element along the
|
|
3611
3514
|
* specified axes.
|
|
@@ -3622,14 +3525,6 @@ const offset = offset$1;
|
|
|
3622
3525
|
*/
|
|
3623
3526
|
const shift = shift$1;
|
|
3624
3527
|
|
|
3625
|
-
/**
|
|
3626
|
-
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
3627
|
-
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
3628
|
-
* clipping boundary. Alternative to `autoPlacement`.
|
|
3629
|
-
* @see https://floating-ui.com/docs/flip
|
|
3630
|
-
*/
|
|
3631
|
-
const flip = flip$1;
|
|
3632
|
-
|
|
3633
3528
|
/**
|
|
3634
3529
|
* Provides data that allows you to change the size of the floating element —
|
|
3635
3530
|
* for instance, prevent it from overflowing the clipping boundary or match the
|
|
@@ -3685,19 +3580,211 @@ const computePosition = (reference, floating, options) => {
|
|
|
3685
3580
|
});
|
|
3686
3581
|
};
|
|
3687
3582
|
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3583
|
+
/**
|
|
3584
|
+
* Returns the nth side in clockwise direction relative to the given side.
|
|
3585
|
+
*/
|
|
3586
|
+
function getRelativeSide(side, n) {
|
|
3587
|
+
return sides[(sides.indexOf(side) + n) % 4];
|
|
3588
|
+
}
|
|
3589
|
+
const getNextSide = (side) => getRelativeSide(side, 1);
|
|
3590
|
+
const getOppositeSide = (side) => getRelativeSide(side, 2);
|
|
3591
|
+
const getPreviousSide = (side) => getRelativeSide(side, 3);
|
|
3592
|
+
|
|
3593
|
+
const FLIP_MIDDLEWARE = 'post-flip';
|
|
3594
|
+
/**
|
|
3595
|
+
* Changes the placement of the floating element to keep it in view.
|
|
3596
|
+
*
|
|
3597
|
+
* Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
|
|
3598
|
+
* against the current size of the floating element, and the placement with the smallest deficit is
|
|
3599
|
+
* used when none of them fits.
|
|
3600
|
+
*/
|
|
3601
|
+
function flip(options = {}) {
|
|
3602
|
+
return {
|
|
3603
|
+
name: FLIP_MIDDLEWARE,
|
|
3604
|
+
options,
|
|
3605
|
+
async fn(state) {
|
|
3606
|
+
const { middlewareData, placement } = state;
|
|
3607
|
+
// see https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
3608
|
+
if (middlewareData.arrow?.alignmentOffset)
|
|
3609
|
+
return {};
|
|
3610
|
+
const { minSize = {}, ...detectOverflowOptions } = evaluate(options, state);
|
|
3611
|
+
const gap = Math.abs(middlewareData.offset?.[getSideAxis(placement)] ?? 0);
|
|
3612
|
+
const side = getSide(placement);
|
|
3613
|
+
const referenceOverflow = await detectOverflow(state, {
|
|
3614
|
+
...detectOverflowOptions,
|
|
3615
|
+
elementContext: 'reference',
|
|
3616
|
+
});
|
|
3617
|
+
const floatingOverflow = await detectOverflow(state, {
|
|
3618
|
+
...detectOverflowOptions,
|
|
3619
|
+
elementContext: 'floating',
|
|
3620
|
+
});
|
|
3621
|
+
// The floating element fits at its current placement, there is nothing left to do.
|
|
3622
|
+
if (Math.max(referenceOverflow[side], floatingOverflow[side]) <= 0)
|
|
3623
|
+
return {};
|
|
3624
|
+
const previous = middlewareData[FLIP_MIDDLEWARE];
|
|
3625
|
+
const measurement = { overflow: referenceOverflow, minSize, gap };
|
|
3626
|
+
let deficits = previous?.deficits ?? [];
|
|
3627
|
+
const placements = previous?.placements ?? (await getPlacements(state, measurement));
|
|
3628
|
+
if (deficits.length < placements.length) {
|
|
3629
|
+
deficits = [...deficits, getDeficit(side, measurement)];
|
|
3630
|
+
}
|
|
3631
|
+
const data = { placements, deficits };
|
|
3632
|
+
// If there are still placements to try, move on to the next one.
|
|
3633
|
+
if (deficits.length < placements.length) {
|
|
3634
|
+
return { data, reset: { placement: placements[deficits.length] } };
|
|
3635
|
+
}
|
|
3636
|
+
// If none of the placements fit, fall back to the one that loses the least space.
|
|
3637
|
+
const fallback = data.placements[data.deficits.indexOf(Math.min(...data.deficits))];
|
|
3638
|
+
return fallback === placement ? { data } : { data, reset: { placement: fallback } };
|
|
3639
|
+
},
|
|
3640
|
+
};
|
|
3641
|
+
}
|
|
3642
|
+
/**
|
|
3643
|
+
* Returns the placements to try, ordered from most to least promising.
|
|
3644
|
+
*/
|
|
3645
|
+
async function getPlacements(state, measurement) {
|
|
3646
|
+
const { placement, platform, elements } = state;
|
|
3647
|
+
const { overflow } = measurement;
|
|
3648
|
+
const side = getSide(placement);
|
|
3649
|
+
const placements = [placement, getOppositePlacement(placement)];
|
|
3650
|
+
const mainAxisDeficit = Math.min(getDeficit(side, measurement), getDeficit(getOppositeSide(side), measurement));
|
|
3651
|
+
if (mainAxisDeficit <= 0)
|
|
3652
|
+
return placements;
|
|
3653
|
+
const rtl = (await platform.isRTL?.(elements.floating)) ?? false;
|
|
3654
|
+
const crossAxisPlacements = getOppositeAxisPlacements(placement, true, 'start', rtl);
|
|
3655
|
+
// Try the side with the most available space first.
|
|
3656
|
+
crossAxisPlacements.sort((a, b) => overflow[getSide(a)] - overflow[getSide(b)]);
|
|
3657
|
+
return [...placements, ...crossAxisPlacements];
|
|
3658
|
+
}
|
|
3659
|
+
/**
|
|
3660
|
+
* Returns the amount of space required to display the floating element at its minimum size on the
|
|
3661
|
+
* given side of the reference element.
|
|
3662
|
+
*/
|
|
3663
|
+
function getDeficit(side, { minSize, overflow, gap }) {
|
|
3664
|
+
const minLength = minSize[getAxisLength(getSideAxis(side))] ?? 0;
|
|
3665
|
+
return gap + minLength + overflow[side];
|
|
3666
|
+
}
|
|
3667
|
+
|
|
3668
|
+
/**
|
|
3669
|
+
* This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
|
|
3670
|
+
*/
|
|
3671
|
+
const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
|
|
3672
|
+
/**
|
|
3673
|
+
* A custom floating UI platform that restricts clipping rectangles to the safe area.
|
|
3674
|
+
*/
|
|
3675
|
+
const safeAreaPlatform = { ...platform, getClippingRect };
|
|
3676
|
+
/**
|
|
3677
|
+
* Computes the clipping rectangle of an element while accounting for the safe area.
|
|
3678
|
+
*/
|
|
3679
|
+
async function getClippingRect(...args) {
|
|
3680
|
+
const element = args[0].element;
|
|
3681
|
+
// Check whether the clipping rectangle of the given element has already been computed during
|
|
3682
|
+
// this pass.
|
|
3683
|
+
const hit = this[CLIPPING_RECT_CACHE].get(element);
|
|
3684
|
+
if (hit)
|
|
3685
|
+
return hit;
|
|
3686
|
+
// Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
|
|
3687
|
+
// area.
|
|
3688
|
+
const clippingRect = await platform.getClippingRect.apply(this, args);
|
|
3689
|
+
applySafeArea(clippingRect, element);
|
|
3690
|
+
this[CLIPPING_RECT_CACHE].set(element, clippingRect);
|
|
3691
|
+
return clippingRect;
|
|
3692
|
+
}
|
|
3693
|
+
/**
|
|
3694
|
+
* Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
|
|
3695
|
+
*
|
|
3696
|
+
* The safe area only applies to elements that the header can actually cover, which excludes
|
|
3697
|
+
* elements without a header on their page, elements on a top layer and elements within the header.
|
|
3698
|
+
*/
|
|
3699
|
+
function applySafeArea(clippingRect, element) {
|
|
3700
|
+
const headerElement = element.ownerDocument.querySelector('post-header');
|
|
3701
|
+
if (headerElement === null)
|
|
3692
3702
|
return;
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3703
|
+
let parent = element;
|
|
3704
|
+
while (!isLastTraversableNode(parent)) {
|
|
3705
|
+
parent = getParentNode(parent);
|
|
3706
|
+
if (!isHTMLElement(parent))
|
|
3707
|
+
continue;
|
|
3708
|
+
// Do not apply the safe area of the header to
|
|
3709
|
+
// - elements that are on a top layer, such as a dialog.
|
|
3710
|
+
// - elements that are located within the header itself.
|
|
3711
|
+
if (isTopLayer(parent) || parent === headerElement)
|
|
3712
|
+
return;
|
|
3713
|
+
}
|
|
3714
|
+
const headerRect = headerElement.getBoundingClientRect();
|
|
3715
|
+
const top = Math.max(clippingRect.y, headerRect.bottom);
|
|
3716
|
+
clippingRect.height -= top - clippingRect.y;
|
|
3717
|
+
clippingRect.y = top;
|
|
3718
|
+
}
|
|
3719
|
+
/**
|
|
3720
|
+
* Computes the coordinates that will position the `floating` element next to a given `reference`
|
|
3721
|
+
* element while accounting for the safe area.
|
|
3722
|
+
*
|
|
3723
|
+
* The safe area is the part of the viewport that the header does not cover. Restricting the
|
|
3724
|
+
* clipping rectangles to it makes floating elements behave as if they were clipped by the header.
|
|
3725
|
+
*/
|
|
3726
|
+
const computePositionWithSafeArea = (reference, floating, options) => {
|
|
3727
|
+
// Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
|
|
3728
|
+
options ??= {};
|
|
3729
|
+
return computePosition(reference, floating, {
|
|
3730
|
+
...options,
|
|
3731
|
+
platform: {
|
|
3732
|
+
...safeAreaPlatform,
|
|
3733
|
+
...options.platform,
|
|
3734
|
+
[CLIPPING_RECT_CACHE]: new Map(),
|
|
3735
|
+
},
|
|
3736
|
+
});
|
|
3737
|
+
};
|
|
3738
|
+
|
|
3739
|
+
const SAFE_SPACE_MIDDLEWARE = 'post-safe-space';
|
|
3740
|
+
/**
|
|
3741
|
+
* Computes the safe space, the area the pointer can travel through to get from the reference to
|
|
3742
|
+
* the floating element.
|
|
3743
|
+
*/
|
|
3744
|
+
function safeSpace() {
|
|
3745
|
+
return {
|
|
3746
|
+
name: SAFE_SPACE_MIDDLEWARE,
|
|
3747
|
+
async fn(state) {
|
|
3748
|
+
const { placement, rects, x, y } = state;
|
|
3749
|
+
const side = getSide(placement);
|
|
3750
|
+
const reference = await getViewportRect(state, rects.reference);
|
|
3751
|
+
const floating = await getViewportRect(state, { ...rects.floating, x, y });
|
|
3752
|
+
const path = [
|
|
3753
|
+
...getPathAlongSide(floating, getOppositeSide(side)),
|
|
3754
|
+
...getPathAlongSide(reference, side),
|
|
3755
|
+
];
|
|
3756
|
+
const points = [];
|
|
3757
|
+
for (let i = 0; i < path.length; i += 2) {
|
|
3758
|
+
points.push(`${path[i]}px ${path[i + 1]}px`);
|
|
3759
|
+
}
|
|
3760
|
+
const data = { polygon: `polygon(${points.join(', ')})` };
|
|
3761
|
+
return { data };
|
|
3762
|
+
},
|
|
3763
|
+
};
|
|
3764
|
+
}
|
|
3765
|
+
/**
|
|
3766
|
+
* Converts a rectangle from the floating element's offset parent's coordinate system to viewport
|
|
3767
|
+
* coordinates.
|
|
3768
|
+
*/
|
|
3769
|
+
async function getViewportRect({ elements, platform, strategy }, rect) {
|
|
3770
|
+
const viewportRect = await platform.convertOffsetParentRelativeRectToViewportRelativeRect?.({
|
|
3771
|
+
offsetParent: await platform.getOffsetParent?.(elements.floating),
|
|
3772
|
+
rect,
|
|
3773
|
+
elements,
|
|
3774
|
+
strategy,
|
|
3700
3775
|
});
|
|
3776
|
+
return rectToClientRect(viewportRect ?? rect);
|
|
3777
|
+
}
|
|
3778
|
+
/**
|
|
3779
|
+
* Returns the path along the specified side of the given rectangle.
|
|
3780
|
+
*
|
|
3781
|
+
* The path is a list of coordinates in the form of [x₁, y₁, x₂, y₂] and is given in clockwise order.
|
|
3782
|
+
*/
|
|
3783
|
+
function getPathAlongSide(rect, side) {
|
|
3784
|
+
const self = rect[side];
|
|
3785
|
+
const prev = rect[getPreviousSide(side)];
|
|
3786
|
+
const next = rect[getNextSide(side)];
|
|
3787
|
+
return getSideAxis(side) === 'x' ? [self, prev, self, next] : [prev, self, next, self];
|
|
3701
3788
|
}
|
|
3702
3789
|
|
|
3703
3790
|
// src/events.ts
|
|
@@ -4492,78 +4579,7 @@ function apply() {
|
|
|
4492
4579
|
injectStyles(document);
|
|
4493
4580
|
}
|
|
4494
4581
|
|
|
4495
|
-
|
|
4496
|
-
* This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
|
|
4497
|
-
*/
|
|
4498
|
-
const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
|
|
4499
|
-
/**
|
|
4500
|
-
* A custom floating UI platform that restricts clipping rectangles to the safe area.
|
|
4501
|
-
*/
|
|
4502
|
-
const safeAreaPlatform = { ...platform, getClippingRect };
|
|
4503
|
-
/**
|
|
4504
|
-
* Computes the clipping rectangle of an element while accounting for the safe area.
|
|
4505
|
-
*/
|
|
4506
|
-
async function getClippingRect(...args) {
|
|
4507
|
-
const element = args[0].element;
|
|
4508
|
-
// Check whether the clipping rectangle of the given element has already been computed during
|
|
4509
|
-
// this pass.
|
|
4510
|
-
const hit = this[CLIPPING_RECT_CACHE].get(element);
|
|
4511
|
-
if (hit)
|
|
4512
|
-
return hit;
|
|
4513
|
-
// Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
|
|
4514
|
-
// area.
|
|
4515
|
-
const clippingRect = await platform.getClippingRect.apply(this, args);
|
|
4516
|
-
applySafeArea(clippingRect, element);
|
|
4517
|
-
this[CLIPPING_RECT_CACHE].set(element, clippingRect);
|
|
4518
|
-
return clippingRect;
|
|
4519
|
-
}
|
|
4520
|
-
/**
|
|
4521
|
-
* Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
|
|
4522
|
-
*
|
|
4523
|
-
* The safe area only applies to elements that the header can actually cover, which excludes
|
|
4524
|
-
* elements without a header on their page, elements on a top layer and elements within the header.
|
|
4525
|
-
*/
|
|
4526
|
-
function applySafeArea(clippingRect, element) {
|
|
4527
|
-
const headerElement = element.ownerDocument.querySelector('post-header');
|
|
4528
|
-
if (headerElement === null)
|
|
4529
|
-
return;
|
|
4530
|
-
let parent = element;
|
|
4531
|
-
while (!isLastTraversableNode(parent)) {
|
|
4532
|
-
parent = getParentNode(parent);
|
|
4533
|
-
if (!isHTMLElement(parent))
|
|
4534
|
-
continue;
|
|
4535
|
-
// Do not apply the safe area of the header to
|
|
4536
|
-
// - elements that are on a top layer, such as a dialog.
|
|
4537
|
-
// - elements that are located within the header itself.
|
|
4538
|
-
if (isTopLayer(parent) || parent === headerElement)
|
|
4539
|
-
return;
|
|
4540
|
-
}
|
|
4541
|
-
const headerRect = headerElement.getBoundingClientRect();
|
|
4542
|
-
const top = Math.max(clippingRect.y, headerRect.bottom);
|
|
4543
|
-
clippingRect.height -= top - clippingRect.y;
|
|
4544
|
-
clippingRect.y = top;
|
|
4545
|
-
}
|
|
4546
|
-
/**
|
|
4547
|
-
* Computes the coordinates that will position the `floating` element next to a given `reference`
|
|
4548
|
-
* element while accounting for the safe area.
|
|
4549
|
-
*
|
|
4550
|
-
* The safe area is the part of the viewport that the header does not cover. Restricting the
|
|
4551
|
-
* clipping rectangles to it makes floating elements behave as if they were clipped by the header.
|
|
4552
|
-
*/
|
|
4553
|
-
const computePositionWithSafeArea = (reference, floating, options) => {
|
|
4554
|
-
// Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
|
|
4555
|
-
options ??= {};
|
|
4556
|
-
return computePosition(reference, floating, {
|
|
4557
|
-
...options,
|
|
4558
|
-
platform: {
|
|
4559
|
-
...safeAreaPlatform,
|
|
4560
|
-
...options.platform,
|
|
4561
|
-
[CLIPPING_RECT_CACHE]: new Map(),
|
|
4562
|
-
},
|
|
4563
|
-
});
|
|
4564
|
-
};
|
|
4565
|
-
|
|
4566
|
-
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))}`;
|
|
4582
|
+
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))}`;
|
|
4567
4583
|
|
|
4568
4584
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
4569
4585
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -4575,34 +4591,10 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|
|
4575
4591
|
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
4576
4592
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
4577
4593
|
};
|
|
4578
|
-
const
|
|
4579
|
-
|
|
4580
|
-
|
|
4594
|
+
const AVAILABLE_WIDTH_PROPERTY = '--post-popovercontainer-available-width';
|
|
4595
|
+
const AVAILABLE_HEIGHT_PROPERTY = '--post-popovercontainer-available-height';
|
|
4596
|
+
const SAFE_SPACE_PROPERTY = '--post-popovercontainer-safe-space';
|
|
4581
4597
|
const PostPopovercontainer = class {
|
|
4582
|
-
static {
|
|
4583
|
-
this.STATIC_SIDES = {
|
|
4584
|
-
top: 'bottom',
|
|
4585
|
-
right: 'left',
|
|
4586
|
-
bottom: 'top',
|
|
4587
|
-
left: 'right',
|
|
4588
|
-
};
|
|
4589
|
-
}
|
|
4590
|
-
static {
|
|
4591
|
-
this.PROPERTIES_TO_CLEAR = [
|
|
4592
|
-
'--post-safe-space-popover-x',
|
|
4593
|
-
'--post-safe-space-popover-y',
|
|
4594
|
-
'--post-safe-space-popover-x-start',
|
|
4595
|
-
'--post-safe-space-popover-x-end',
|
|
4596
|
-
'--post-safe-space-popover-y-start',
|
|
4597
|
-
'--post-safe-space-popover-y-end',
|
|
4598
|
-
'--post-safe-space-trigger-x',
|
|
4599
|
-
'--post-safe-space-trigger-y',
|
|
4600
|
-
'--post-safe-space-trigger-x-start',
|
|
4601
|
-
'--post-safe-space-trigger-x-end',
|
|
4602
|
-
'--post-safe-space-trigger-y-start',
|
|
4603
|
-
'--post-safe-space-trigger-y-end',
|
|
4604
|
-
];
|
|
4605
|
-
}
|
|
4606
4598
|
constructor(hostRef) {
|
|
4607
4599
|
index.registerInstance(this, hostRef);
|
|
4608
4600
|
this.postBeforeShow = index.createEvent(this, "postBeforeShow");
|
|
@@ -4610,37 +4602,25 @@ const PostPopovercontainer = class {
|
|
|
4610
4602
|
this.postHide = index.createEvent(this, "postHide");
|
|
4611
4603
|
this.postBeforeToggle = index.createEvent(this, "postBeforeToggle");
|
|
4612
4604
|
this.postToggle = index.createEvent(this, "postToggle");
|
|
4605
|
+
/** The element the popover is anchored to */
|
|
4606
|
+
this.anchorRef = null;
|
|
4607
|
+
this.arrowRef = null;
|
|
4608
|
+
this.hasBeenOpened = false;
|
|
4613
4609
|
this.toggleTimeoutId = null;
|
|
4614
|
-
this.
|
|
4610
|
+
this.runningAnimation = null;
|
|
4611
|
+
this.stopAutoUpdate = null;
|
|
4615
4612
|
/**
|
|
4616
|
-
*
|
|
4617
|
-
* Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
|
|
4618
|
-
* towards the viewport if they would overlap edge boundaries.
|
|
4613
|
+
* Placement of the popover according to the floating-ui options.
|
|
4619
4614
|
*/
|
|
4620
4615
|
this.placement = 'top';
|
|
4621
4616
|
/**
|
|
4622
|
-
* Gap between the edge of the
|
|
4617
|
+
* Gap between the edge of the viewport and the popover.
|
|
4623
4618
|
*/
|
|
4624
4619
|
this.edgeGap = 8;
|
|
4625
4620
|
/**
|
|
4626
|
-
*
|
|
4621
|
+
* Show a little indicator arrow
|
|
4627
4622
|
*/
|
|
4628
4623
|
this.arrow = false;
|
|
4629
|
-
/**
|
|
4630
|
-
* Animation style
|
|
4631
|
-
*/
|
|
4632
|
-
this.animation = 'pop-in';
|
|
4633
|
-
this.currentAnimation = null;
|
|
4634
|
-
this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
|
|
4635
|
-
}
|
|
4636
|
-
/**
|
|
4637
|
-
* Updates cursor position for safe space feature when popover is open.
|
|
4638
|
-
* Sets CSS custom properties for dynamic styling of safe area.
|
|
4639
|
-
* @param event MouseEvent with cursor position
|
|
4640
|
-
*/
|
|
4641
|
-
mouseTrackingHandler(event) {
|
|
4642
|
-
this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
|
|
4643
|
-
this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
|
|
4644
4624
|
}
|
|
4645
4625
|
connectedCallback() {
|
|
4646
4626
|
if (!isSupported()) {
|
|
@@ -4651,296 +4631,197 @@ const PostPopovercontainer = class {
|
|
|
4651
4631
|
this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
4652
4632
|
}
|
|
4653
4633
|
disconnectedCallback() {
|
|
4654
|
-
|
|
4655
|
-
this.clearAutoUpdate();
|
|
4656
|
-
}
|
|
4634
|
+
this.cleanup();
|
|
4657
4635
|
this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
|
|
4658
4636
|
}
|
|
4637
|
+
cleanup() {
|
|
4638
|
+
this.stopAutoUpdate?.();
|
|
4639
|
+
if (this.runningAnimation) {
|
|
4640
|
+
this.runningAnimation.cancel();
|
|
4641
|
+
this.runningAnimation = null;
|
|
4642
|
+
}
|
|
4643
|
+
}
|
|
4644
|
+
isOpen() {
|
|
4645
|
+
return this.host?.matches(':where(:popover-open, .popover-open)');
|
|
4646
|
+
}
|
|
4647
|
+
getContent() {
|
|
4648
|
+
return this.host?.shadowRoot.querySelector('[part="post-popovercontainer-content"]');
|
|
4649
|
+
}
|
|
4650
|
+
getContentMinSize() {
|
|
4651
|
+
const content = this.getContent();
|
|
4652
|
+
if (!content)
|
|
4653
|
+
return {};
|
|
4654
|
+
const { minWidth, minHeight } = getComputedStyle(content);
|
|
4655
|
+
return {
|
|
4656
|
+
width: Number.parseFloat(minWidth) || 0,
|
|
4657
|
+
height: Number.parseFloat(minHeight) || 0,
|
|
4658
|
+
};
|
|
4659
|
+
}
|
|
4659
4660
|
/**
|
|
4660
|
-
*
|
|
4661
|
-
* @param
|
|
4661
|
+
* Shows the popover.
|
|
4662
|
+
* @param anchor the element that the popover is visually anchored to.
|
|
4662
4663
|
*/
|
|
4663
|
-
async show(
|
|
4664
|
-
if (this.toggleTimeoutId || !
|
|
4664
|
+
async show(anchor) {
|
|
4665
|
+
if (this.toggleTimeoutId || !anchor || this.isOpen())
|
|
4665
4666
|
return;
|
|
4666
|
-
this.
|
|
4667
|
-
this.updatePosition();
|
|
4667
|
+
this.anchorRef = anchor;
|
|
4668
4668
|
this.host.showPopover();
|
|
4669
4669
|
}
|
|
4670
4670
|
/**
|
|
4671
|
-
*
|
|
4671
|
+
* Hides the popover.
|
|
4672
4672
|
*/
|
|
4673
4673
|
async hide() {
|
|
4674
|
-
if (!this.
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4674
|
+
if (this.toggleTimeoutId || !this.isOpen())
|
|
4675
|
+
return;
|
|
4676
|
+
this.anchorRef = null;
|
|
4677
|
+
this.host.hidePopover();
|
|
4678
|
+
this.postHide.emit();
|
|
4679
4679
|
}
|
|
4680
4680
|
/**
|
|
4681
|
-
*
|
|
4682
|
-
*
|
|
4683
|
-
*
|
|
4681
|
+
* Toggles the popover's state from hidden to showing and vice versa.
|
|
4682
|
+
*
|
|
4683
|
+
* If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
|
|
4684
|
+
* if it is set to `false`.
|
|
4685
|
+
*
|
|
4686
|
+
* @param anchor the element that the popover is visually anchored to.
|
|
4687
|
+
* @param force the next state of the popover.
|
|
4688
|
+
* @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
|
|
4684
4689
|
*/
|
|
4685
|
-
async toggle(
|
|
4686
|
-
const isOpen = this.
|
|
4687
|
-
|
|
4688
|
-
if (willOpen && !target)
|
|
4690
|
+
async toggle(anchor, force) {
|
|
4691
|
+
const isOpen = this.isOpen();
|
|
4692
|
+
if (!this.host || this.toggleTimeoutId)
|
|
4689
4693
|
return isOpen;
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
return this.host.matches(':where(:popover-open, .popover-open)');
|
|
4694
|
+
const shouldOpen = force === true || (force === undefined && !isOpen);
|
|
4695
|
+
if (isOpen === shouldOpen || (shouldOpen && !anchor))
|
|
4696
|
+
return isOpen;
|
|
4697
|
+
this.anchorRef = shouldOpen ? anchor : null;
|
|
4698
|
+
this.host.togglePopover(force);
|
|
4699
|
+
this.toggleTimeoutId = null;
|
|
4700
|
+
return this.isOpen();
|
|
4698
4701
|
}
|
|
4699
4702
|
/**
|
|
4700
|
-
* Handles the popover
|
|
4703
|
+
* Handles the popover's state transition from hidden to showing and vice versa.
|
|
4701
4704
|
*/
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
if (typeof animationFn === 'function') {
|
|
4709
|
-
this.runOpenAnimation(animationFn, content);
|
|
4710
|
-
}
|
|
4711
|
-
else {
|
|
4712
|
-
// No animation case
|
|
4713
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4714
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4715
|
-
this.postToggle.emit({ isOpen: true });
|
|
4716
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4717
|
-
if (this.hasOpenedOnce)
|
|
4718
|
-
this.hasOpenedOnce = false;
|
|
4719
|
-
}
|
|
4720
|
-
}
|
|
4721
|
-
if (this.safeSpace) {
|
|
4722
|
-
globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
|
|
4723
|
-
}
|
|
4705
|
+
async handleToggle(event) {
|
|
4706
|
+
this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
|
|
4707
|
+
if (event.newState === 'open')
|
|
4708
|
+
await this.handleOpen();
|
|
4709
|
+
else
|
|
4710
|
+
await this.handleClose();
|
|
4724
4711
|
}
|
|
4725
4712
|
/**
|
|
4726
|
-
* Handles the popover
|
|
4713
|
+
* Handles the popover's state transition from hidden to showing, emitting related events.
|
|
4727
4714
|
*/
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4715
|
+
async handleOpen() {
|
|
4716
|
+
this.postBeforeToggle.emit({ willOpen: true });
|
|
4717
|
+
this.postBeforeShow.emit({ first: !this.hasBeenOpened });
|
|
4718
|
+
await this.updatePosition(true);
|
|
4719
|
+
this.startAutoUpdate();
|
|
4720
|
+
try {
|
|
4721
|
+
await this.runOpenAnimation();
|
|
4734
4722
|
}
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
this.currentAnimation.cancel();
|
|
4738
|
-
this.currentAnimation = null;
|
|
4723
|
+
catch {
|
|
4724
|
+
return;
|
|
4739
4725
|
}
|
|
4740
|
-
this.
|
|
4741
|
-
this.
|
|
4742
|
-
this.
|
|
4726
|
+
this.postToggle.emit({ isOpen: true });
|
|
4727
|
+
this.postShow.emit({ first: !this.hasBeenOpened });
|
|
4728
|
+
this.hasBeenOpened = true;
|
|
4743
4729
|
}
|
|
4744
4730
|
/**
|
|
4745
|
-
*
|
|
4731
|
+
* Run the open animation for the popover.
|
|
4746
4732
|
*/
|
|
4747
|
-
async runOpenAnimation(
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
|
|
4752
|
-
|
|
4753
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4754
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4755
|
-
this.postToggle.emit({ isOpen: true });
|
|
4756
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4757
|
-
return;
|
|
4758
|
-
}
|
|
4759
|
-
this.currentAnimation = animation;
|
|
4760
|
-
if (animation.playState === 'running') {
|
|
4761
|
-
this.postBeforeToggle.emit({ willOpen: true });
|
|
4762
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4763
|
-
}
|
|
4764
|
-
await animation.finished;
|
|
4765
|
-
this.postToggle.emit({ isOpen: true });
|
|
4766
|
-
this.postShow.emit({ first: this.hasOpenedOnce });
|
|
4767
|
-
this.hasOpenedOnce = true;
|
|
4768
|
-
}
|
|
4769
|
-
catch (err) {
|
|
4770
|
-
console.warn('Animation failed or was interrupted:', err);
|
|
4771
|
-
// Reset all states to closing
|
|
4772
|
-
this.postBeforeToggle.emit({ willOpen: false });
|
|
4773
|
-
this.postBeforeShow.emit({ first: this.hasOpenedOnce });
|
|
4774
|
-
this.postToggle.emit({ isOpen: false });
|
|
4775
|
-
}
|
|
4776
|
-
finally {
|
|
4777
|
-
if (this.currentAnimation === animation) {
|
|
4778
|
-
this.currentAnimation = null;
|
|
4779
|
-
}
|
|
4780
|
-
}
|
|
4733
|
+
async runOpenAnimation() {
|
|
4734
|
+
const content = this.getContent();
|
|
4735
|
+
if (!content)
|
|
4736
|
+
return;
|
|
4737
|
+
this.runningAnimation = popIn(content);
|
|
4738
|
+
await this.runningAnimation.finished;
|
|
4781
4739
|
}
|
|
4782
4740
|
/**
|
|
4783
|
-
*
|
|
4784
|
-
* Popovercontainers can be closed or opened with other methods than class members,
|
|
4785
|
-
* therefore listening to the toggle event is safer for cleaning up.
|
|
4786
|
-
* @param e ToggleEvent
|
|
4741
|
+
* Handles the popover's state transition from showing to hidden, emitting related events.
|
|
4787
4742
|
*/
|
|
4788
|
-
|
|
4789
|
-
this.
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
}
|
|
4743
|
+
async handleClose() {
|
|
4744
|
+
this.postBeforeToggle.emit({ willOpen: false });
|
|
4745
|
+
this.cleanup();
|
|
4746
|
+
this.host.style.removeProperty(AVAILABLE_WIDTH_PROPERTY);
|
|
4747
|
+
this.host.style.removeProperty(AVAILABLE_HEIGHT_PROPERTY);
|
|
4748
|
+
this.host.style.removeProperty(SAFE_SPACE_PROPERTY);
|
|
4749
|
+
this.postToggle.emit({ isOpen: false });
|
|
4750
|
+
this.postHide.emit();
|
|
4797
4751
|
}
|
|
4798
4752
|
/**
|
|
4799
|
-
*
|
|
4800
|
-
* an influence on popovercontainer positioning
|
|
4753
|
+
* Listen for changes that affect the popover's position and update it accordingly.
|
|
4801
4754
|
*/
|
|
4802
|
-
|
|
4803
|
-
if (!this.
|
|
4755
|
+
startAutoUpdate() {
|
|
4756
|
+
if (!this.host || !this.anchorRef)
|
|
4804
4757
|
return;
|
|
4805
|
-
this.
|
|
4758
|
+
this.stopAutoUpdate = autoUpdate(this.anchorRef, this.host, () => this.updatePosition(this.autoResize));
|
|
4806
4759
|
}
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4760
|
+
/**
|
|
4761
|
+
* Updates the position of the popover based on the anchor's position and the specified placement.
|
|
4762
|
+
* @param withSize whether to resize the popover based on the available space.
|
|
4763
|
+
*/
|
|
4764
|
+
async updatePosition(withSize = false) {
|
|
4765
|
+
const { x, y, middlewareData, placement } = await this.computePosition(withSize);
|
|
4766
|
+
// Hide the popover if the anchor is outside the scrollport.
|
|
4810
4767
|
if (middlewareData.hide?.referenceHidden) {
|
|
4811
4768
|
this.host.hidePopover();
|
|
4769
|
+
return;
|
|
4812
4770
|
}
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
// Position popover
|
|
4771
|
+
this.side = getSide(placement);
|
|
4772
|
+
// Position the popover.
|
|
4816
4773
|
this.host.style.left = `${x}px`;
|
|
4817
4774
|
this.host.style.top = `${y}px`;
|
|
4818
|
-
// Position
|
|
4819
|
-
if (
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
const halfSide = -0.5 * arrowSizePx;
|
|
4824
|
-
if (staticSide) {
|
|
4825
|
-
Object.assign(this.arrowRef.style, {
|
|
4826
|
-
left: arrowX ? `${arrowX}px` : '',
|
|
4827
|
-
top: arrowY ? `${arrowY}px` : '',
|
|
4828
|
-
[staticSide]: `${halfSide}px`,
|
|
4829
|
-
});
|
|
4830
|
-
}
|
|
4775
|
+
// Position the indicator arrow.
|
|
4776
|
+
if (middlewareData.arrow) {
|
|
4777
|
+
this.arrowRef.style.left = middlewareData.arrow.x ? `${middlewareData.arrow.x}px` : '';
|
|
4778
|
+
this.arrowRef.style.top = middlewareData.arrow.y ? `${middlewareData.arrow.y}px` : '';
|
|
4779
|
+
this.arrowRef.style[getOppositeSide(this.side)] = `-${this.arrowRef.offsetWidth / 2}px`;
|
|
4831
4780
|
}
|
|
4832
|
-
//
|
|
4833
|
-
if (
|
|
4834
|
-
|
|
4781
|
+
// Set the safe space polygon.
|
|
4782
|
+
if (middlewareData[SAFE_SPACE_MIDDLEWARE]) {
|
|
4783
|
+
this.host.style.setProperty(SAFE_SPACE_PROPERTY, middlewareData[SAFE_SPACE_MIDDLEWARE].polygon);
|
|
4835
4784
|
}
|
|
4836
4785
|
}
|
|
4837
|
-
async
|
|
4838
|
-
const
|
|
4839
|
-
const isAligned = (this.placement || 'top').includes('-');
|
|
4840
|
-
const flipMiddleware = [
|
|
4841
|
-
// Flip the popover if the target moves outside the viewport
|
|
4842
|
-
flip({ elementContext: 'reference', crossAxis: false }),
|
|
4843
|
-
// Flip the popover if the popover itself moves outside the viewport
|
|
4844
|
-
flip({ elementContext: 'floating', crossAxis: false }),
|
|
4845
|
-
];
|
|
4846
|
-
const shiftMiddleware = shift({
|
|
4847
|
-
padding: gap,
|
|
4848
|
-
limiter: limitShift({
|
|
4849
|
-
offset: 32,
|
|
4850
|
-
}),
|
|
4851
|
-
});
|
|
4786
|
+
async computePosition(withSize) {
|
|
4787
|
+
const padding = this.edgeGap ?? 0;
|
|
4852
4788
|
const middleware = [
|
|
4853
|
-
offset(this.offset ?? (this.arrow ?
|
|
4789
|
+
offset(this.offset ?? (this.arrow ? padding + 4 : padding)),
|
|
4854
4790
|
inline(),
|
|
4855
|
-
// Per floating-ui docs: for aligned placements (e.g. bottom-end),
|
|
4856
|
-
// flip should come before shift. For non-aligned, shift before flip.
|
|
4857
|
-
...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
|
|
4858
|
-
size({
|
|
4859
|
-
apply({ availableWidth, elements }) {
|
|
4860
|
-
Object.assign(elements.floating.style, {
|
|
4861
|
-
maxWidth: `${availableWidth - gap * 2}px`,
|
|
4862
|
-
});
|
|
4863
|
-
},
|
|
4864
|
-
}),
|
|
4865
4791
|
];
|
|
4866
|
-
|
|
4867
|
-
|
|
4792
|
+
const flipMiddleware = flip({ padding, minSize: this.getContentMinSize() });
|
|
4793
|
+
const shiftMiddleware = shift({ limiter: limitShift({ offset: 32 }), padding });
|
|
4794
|
+
// `flip` should come before `shift` for edge-aligned placements
|
|
4795
|
+
// (see https://floating-ui.com/docs/flip#combining-with-shift).
|
|
4796
|
+
if (this.placement?.includes('-'))
|
|
4797
|
+
middleware.push(flipMiddleware, shiftMiddleware);
|
|
4798
|
+
else
|
|
4799
|
+
middleware.push(shiftMiddleware, flipMiddleware);
|
|
4800
|
+
if (withSize) {
|
|
4801
|
+
middleware.push(size({
|
|
4802
|
+
padding,
|
|
4803
|
+
apply({ availableWidth, availableHeight, elements }) {
|
|
4804
|
+
elements.floating.style.setProperty(AVAILABLE_WIDTH_PROPERTY, `${Math.max(0, availableWidth)}px`);
|
|
4805
|
+
elements.floating.style.setProperty(AVAILABLE_HEIGHT_PROPERTY, `${Math.max(0, availableHeight)}px`);
|
|
4806
|
+
},
|
|
4807
|
+
}));
|
|
4868
4808
|
}
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4809
|
+
if (this.arrow)
|
|
4810
|
+
middleware.push(arrow({ element: this.arrowRef, padding }));
|
|
4811
|
+
if (this.safeSpace)
|
|
4812
|
+
middleware.push(safeSpace());
|
|
4813
|
+
// `hide` should generally be placed at the end of the middleware chain
|
|
4814
|
+
// (see https://floating-ui.com/docs/hide#order).
|
|
4815
|
+
if (this.autoHide)
|
|
4872
4816
|
middleware.push(hide({ strategy: 'referenceHidden' }));
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
placement: this.placement || 'top',
|
|
4817
|
+
return computePositionWithSafeArea(this.anchorRef, this.host, {
|
|
4818
|
+
placement: this.placement ?? 'top',
|
|
4876
4819
|
strategy: 'fixed',
|
|
4877
4820
|
middleware,
|
|
4878
4821
|
});
|
|
4879
4822
|
}
|
|
4880
|
-
async updateSafeSpaceBoundaries(currentPlacement) {
|
|
4881
|
-
const targetRect = this.eventTarget.getBoundingClientRect();
|
|
4882
|
-
const popoverRect = this.host.getBoundingClientRect();
|
|
4883
|
-
const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
|
|
4884
|
-
// Helper function to get positioning data based on placement
|
|
4885
|
-
const getPositioningData = (placement, popoverRect, targetRect) => {
|
|
4886
|
-
if (placement === 'top' || placement === 'bottom') {
|
|
4887
|
-
return {
|
|
4888
|
-
popover: {
|
|
4889
|
-
y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
|
|
4890
|
-
xStart: popoverRect.left,
|
|
4891
|
-
xEnd: popoverRect.right,
|
|
4892
|
-
},
|
|
4893
|
-
trigger: {
|
|
4894
|
-
y: placement === 'top' ? targetRect.top : targetRect.bottom,
|
|
4895
|
-
xStart: targetRect.left,
|
|
4896
|
-
xEnd: targetRect.right,
|
|
4897
|
-
},
|
|
4898
|
-
};
|
|
4899
|
-
}
|
|
4900
|
-
else {
|
|
4901
|
-
// left or right
|
|
4902
|
-
return {
|
|
4903
|
-
popover: {
|
|
4904
|
-
x: placement === 'left' ? popoverRect.right : popoverRect.left,
|
|
4905
|
-
yStart: popoverRect.top,
|
|
4906
|
-
yEnd: popoverRect.bottom,
|
|
4907
|
-
},
|
|
4908
|
-
trigger: {
|
|
4909
|
-
x: placement === 'left' ? targetRect.left : targetRect.right,
|
|
4910
|
-
yStart: targetRect.top,
|
|
4911
|
-
yEnd: targetRect.bottom,
|
|
4912
|
-
},
|
|
4913
|
-
};
|
|
4914
|
-
}
|
|
4915
|
-
};
|
|
4916
|
-
const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
|
|
4917
|
-
// Clear previous values
|
|
4918
|
-
PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
|
|
4919
|
-
this.host.style.removeProperty(prop);
|
|
4920
|
-
});
|
|
4921
|
-
if (isVertical) {
|
|
4922
|
-
// For top/bottom placement
|
|
4923
|
-
this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
|
|
4924
|
-
this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
|
|
4925
|
-
this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
|
|
4926
|
-
this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
|
|
4927
|
-
this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
|
|
4928
|
-
this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
|
|
4929
|
-
}
|
|
4930
|
-
else {
|
|
4931
|
-
// For left/right placement
|
|
4932
|
-
this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
|
|
4933
|
-
this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
|
|
4934
|
-
this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
|
|
4935
|
-
this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
|
|
4936
|
-
this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
|
|
4937
|
-
this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
|
|
4938
|
-
}
|
|
4939
|
-
}
|
|
4940
4823
|
render() {
|
|
4941
|
-
return (index.h(index.Host, { key: '
|
|
4942
|
-
this.arrowRef = el;
|
|
4943
|
-
} })), index.h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
|
|
4824
|
+
return (index.h(index.Host, { key: 'd48b21174f74b790f8a72b4294e9f741c3b64d14', "data-version": _package.version, popover: "auto" }, index.h("div", { key: '455e84294ecb36e25cc62582eb6c41058f24f6bc', part: "post-popovercontainer-content" }, this.arrow && (index.h("span", { key: '9d11f2596443876123eeaf5a02430d049c1c8b25', "data-side": this.side, class: "arrow", ref: el => (this.arrowRef = el) })), index.h("span", { key: 'a562460cdfa5539e7d9c23f1d044a2c045df5b9f', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: '5aa546bbdf6c70e2a0afabf818d421581060f8a7' }))));
|
|
4944
4825
|
}
|
|
4945
4826
|
get host() { return index.getElement(this); }
|
|
4946
4827
|
};
|
|
@@ -4950,9 +4831,6 @@ __decorate([
|
|
|
4950
4831
|
__decorate([
|
|
4951
4832
|
type.Type('number')
|
|
4952
4833
|
], PostPopovercontainer.prototype, "edgeGap", void 0);
|
|
4953
|
-
__decorate([
|
|
4954
|
-
oneOf.OneOf(['triangle', 'trapezoid'])
|
|
4955
|
-
], PostPopovercontainer.prototype, "safeSpace", void 0);
|
|
4956
4834
|
PostPopovercontainer.style = postPopovercontainerCss();
|
|
4957
4835
|
|
|
4958
4836
|
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}`;
|