@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.49
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/{event-from-AKK8RQrn.js → event-from-C6kpQwhw.js} +2 -2
- package/dist/cjs/index-CpDyH7Ww.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-wsZ6ig4j.js → package-CR0YynRY.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +6 -6
- package/dist/cjs/post-avatar.cjs.entry.js +107 -80
- package/dist/cjs/post-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/post-banner.cjs.entry.js +3 -3
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +3 -3
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +4 -4
- package/dist/cjs/post-card-control.cjs.entry.js +4 -4
- package/dist/cjs/post-closebutton_15.cjs.entry.js +133 -74
- package/dist/cjs/post-collapsible_2.cjs.entry.js +4 -4
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +3 -3
- package/dist/cjs/post-linkarea.cjs.entry.js +19 -8
- package/dist/cjs/post-popover.cjs.entry.js +3 -3
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-header.cjs.entry.js +3 -3
- package/dist/cjs/post-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/post-tabs.cjs.entry.js +2 -2
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +2 -2
- package/dist/cjs/post-tooltip.cjs.entry.js +3 -3
- package/dist/collection/animations/pop-in.js +14 -0
- package/dist/collection/components/post-accordion/post-accordion.css +1 -1
- package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
- package/dist/collection/components/post-accordion-item/post-accordion-item.js +5 -5
- package/dist/collection/components/post-avatar/avatar-utils.js +16 -0
- package/dist/collection/components/post-avatar/post-avatar.css +1 -1
- package/dist/collection/components/post-avatar/post-avatar.js +119 -82
- package/dist/collection/components/post-back-to-top/post-back-to-top.js +1 -1
- package/dist/collection/components/post-banner/post-banner.js +2 -2
- package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +1 -1
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
- package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js +2 -2
- package/dist/collection/components/post-card-control/post-card-control.css +1 -1
- package/dist/collection/components/post-card-control/post-card-control.js +2 -2
- package/dist/collection/components/post-closebutton/post-closebutton.js +1 -19
- package/dist/collection/components/post-collapsible/post-collapsible.js +1 -1
- package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +1 -1
- package/dist/collection/components/post-footer/post-footer.css +1 -1
- package/dist/collection/components/post-footer/post-footer.js +1 -1
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +11 -2
- package/dist/collection/components/post-icon/post-icon.js +39 -33
- package/dist/collection/components/post-language-option/post-language-option.css +1 -1
- package/dist/collection/components/post-language-option/post-language-option.js +1 -2
- package/dist/collection/components/post-language-switch/post-language-switch.js +1 -2
- package/dist/collection/components/post-linkarea/post-linkarea.css +1 -1
- package/dist/collection/components/post-linkarea/post-linkarea.js +24 -6
- package/dist/collection/components/post-list/post-list.css +1 -1
- package/dist/collection/components/post-list/post-list.js +1 -1
- package/dist/collection/components/post-list-item/post-list-item.js +1 -1
- package/dist/collection/components/post-logo/post-logo.js +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +12 -2
- package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +1 -1
- package/dist/collection/components/post-menu/post-menu.css +1 -1
- package/dist/collection/components/post-menu/post-menu.js +41 -5
- package/dist/collection/components/post-menu-item/post-menu-item.js +1 -1
- package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +1 -1
- package/dist/collection/components/post-popover/post-popover.css +1 -1
- package/dist/collection/components/post-popover/post-popover.js +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +18 -7
- package/dist/collection/components/post-rating/post-rating.css +1 -1
- package/dist/collection/components/post-rating/post-rating.js +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.css +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.js +1 -1
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +3 -3
- package/dist/collection/components/post-togglebutton/post-togglebutton.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +2 -2
- package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
- package/dist/collection/utils/event-from.js +2 -2
- package/dist/component-names.json +39 -0
- package/dist/{esm/event-from-8U5GFtQP.js → components/event-from.js} +2 -2
- package/dist/components/get-root.js +15 -0
- package/dist/components/index.d.ts +73 -0
- package/dist/components/index.js +36 -2315
- package/dist/components/package.js +3 -0
- package/dist/components/post-accordion-item.js +1 -1
- package/dist/components/post-accordion-item2.js +113 -0
- package/dist/components/post-accordion.js +1 -1
- package/dist/components/post-accordion2.js +138 -0
- package/dist/components/post-avatar.js +117 -88
- package/dist/components/post-back-to-top.js +7 -8
- package/dist/components/post-banner.js +10 -11
- package/dist/components/post-breadcrumb-item.js +1 -1
- package/dist/components/post-breadcrumb-item2.js +79 -0
- package/dist/components/post-breadcrumbs.js +16 -17
- package/dist/components/post-card-control.js +11 -12
- package/dist/components/post-closebutton.js +5 -7
- package/dist/components/post-collapsible-trigger.js +1 -1
- package/dist/components/post-collapsible-trigger2.js +135 -0
- package/dist/components/post-collapsible.js +1 -1
- package/dist/components/post-collapsible2.js +110 -0
- package/dist/components/post-footer.js +12 -13
- package/dist/components/post-header.js +18 -10
- package/dist/components/post-icon.js +1 -1
- package/dist/components/post-icon2.js +159 -0
- package/dist/components/post-language-option.js +10 -12
- package/dist/components/post-language-switch.js +13 -15
- package/dist/components/post-linkarea.js +24 -12
- package/dist/components/post-list-item.js +4 -5
- package/dist/components/post-list.js +6 -7
- package/dist/components/post-logo.js +6 -7
- package/dist/components/post-mainnavigation.js +6 -7
- package/dist/components/post-megadropdown-trigger.js +7 -8
- package/dist/components/post-megadropdown.js +20 -11
- package/dist/components/post-menu-item.js +1 -1
- package/dist/components/post-menu-item2.js +30 -0
- package/dist/components/post-menu-trigger.js +1 -1
- package/dist/components/post-menu-trigger2.js +110 -0
- package/dist/components/post-menu.js +1 -1
- package/dist/components/post-menu2.js +237 -0
- package/dist/components/post-popover.js +8 -9
- package/dist/components/post-popovercontainer.js +1 -1
- package/dist/components/post-popovercontainer2.js +3043 -0
- package/dist/components/post-rating.js +10 -11
- package/dist/components/post-tab-header.js +8 -9
- package/dist/components/post-tab-panel.js +7 -8
- package/dist/components/post-tabs.js +7 -8
- package/dist/components/post-togglebutton.js +4 -5
- package/dist/components/post-tooltip-trigger.js +7 -8
- package/dist/components/post-tooltip.js +8 -9
- package/dist/components/react/index.d.ts +33 -0
- package/dist/components/react/index.js +2315 -0
- package/dist/components/{p-Cxrx7SXz.js → react/p-Amg0f2Yo.js} +40 -34
- package/dist/components/{p-C0H2ohSv.js → react/p-B6vPT8S3.js} +3 -3
- package/dist/components/{p-336Lbkey.js → react/p-BDs0pvkX.js} +2 -2
- package/dist/components/react/p-BLchVpF6.js +14 -0
- package/dist/components/{p-BM8mtEfS.js → react/p-BMdFdJWl.js} +2 -2
- package/dist/components/{p-DP5pj8mq.js → react/p-BS0ZqwA-.js} +31 -6
- package/dist/components/react/p-C35MCWIp.js +35 -0
- package/dist/components/react/p-CJ80BZ06.js +178 -0
- package/dist/{esm/index-BWC0gtGU.js → components/react/p-CV7fm1rW.js} +1 -1
- package/dist/components/react/p-C_2k3G1c.js +264 -0
- package/dist/components/{p-DVGX_JCp.js → react/p-D1oOccKr.js} +3 -3
- package/dist/components/{p-pHxypsHK.js → react/p-D50E7y6E.js} +24 -9
- package/dist/components/react/p-DO48NanC.js +3 -0
- package/dist/components/{p-i0-mizzM.js → react/p-DOo9tmN-.js} +2 -2
- package/dist/components/{p-DEi5TIMq.js → react/p-Do9awHW7.js} +3 -3
- package/dist/components/react/p-SbIC4aZX.js +11 -0
- package/dist/components/{p-8U5GFtQP.js → react/p-kraHE1r3.js} +2 -2
- package/dist/components/react/p-r4txK0AC.js +3 -0
- package/dist/components/{p-BSvy4uym.js → react/p-xelWyg_P.js} +8 -8
- package/dist/components/react/post-accordion-item.d.ts +11 -0
- package/dist/components/react/post-accordion-item.js +6 -0
- package/dist/components/react/post-accordion.d.ts +11 -0
- package/dist/components/react/post-accordion.js +6 -0
- package/dist/components/react/post-avatar.d.ts +11 -0
- package/dist/components/react/post-avatar.js +218 -0
- package/dist/components/react/post-back-to-top.d.ts +11 -0
- package/dist/components/react/post-back-to-top.js +145 -0
- package/dist/components/react/post-banner.d.ts +11 -0
- package/dist/components/react/post-banner.js +99 -0
- package/dist/components/react/post-breadcrumb-item.d.ts +11 -0
- package/dist/components/react/post-breadcrumb-item.js +6 -0
- package/dist/components/react/post-breadcrumbs.d.ts +11 -0
- package/dist/components/react/post-breadcrumbs.js +187 -0
- package/dist/components/react/post-card-control.d.ts +11 -0
- package/dist/components/react/post-card-control.js +327 -0
- package/dist/components/react/post-closebutton.d.ts +11 -0
- package/dist/components/react/post-closebutton.js +50 -0
- package/dist/components/react/post-collapsible-trigger.d.ts +11 -0
- package/dist/components/react/post-collapsible-trigger.js +6 -0
- package/dist/components/react/post-collapsible.d.ts +11 -0
- package/dist/components/react/post-collapsible.js +6 -0
- package/dist/components/react/post-footer.d.ts +11 -0
- package/dist/components/react/post-footer.js +117 -0
- package/dist/components/react/post-header.d.ts +11 -0
- package/dist/components/react/post-header.js +342 -0
- package/dist/components/react/post-icon.d.ts +11 -0
- package/dist/components/react/post-icon.js +6 -0
- package/dist/components/react/post-language-option.d.ts +11 -0
- package/dist/components/react/post-language-option.js +100 -0
- package/dist/components/react/post-language-switch.d.ts +11 -0
- package/dist/components/react/post-language-switch.js +158 -0
- package/dist/components/react/post-linkarea.d.ts +11 -0
- package/dist/components/react/post-linkarea.js +59 -0
- package/dist/components/react/post-list-item.d.ts +11 -0
- package/dist/components/react/post-list-item.js +39 -0
- package/dist/components/react/post-list.d.ts +11 -0
- package/dist/components/react/post-list.js +62 -0
- package/dist/components/react/post-logo.d.ts +11 -0
- package/dist/components/react/post-logo.js +59 -0
- package/dist/components/react/post-mainnavigation.d.ts +11 -0
- package/dist/components/react/post-mainnavigation.js +181 -0
- package/dist/components/react/post-megadropdown-trigger.d.ts +11 -0
- package/dist/components/react/post-megadropdown-trigger.js +137 -0
- package/dist/components/react/post-megadropdown.d.ts +11 -0
- package/dist/components/react/post-megadropdown.js +207 -0
- package/dist/components/react/post-menu-item.d.ts +11 -0
- package/dist/components/react/post-menu-item.js +6 -0
- package/dist/components/react/post-menu-trigger.d.ts +11 -0
- package/dist/components/react/post-menu-trigger.js +6 -0
- package/dist/components/react/post-menu.d.ts +11 -0
- package/dist/components/react/post-menu.js +6 -0
- package/dist/components/react/post-popover.d.ts +11 -0
- package/dist/components/react/post-popover.js +189 -0
- package/dist/components/react/post-popovercontainer.d.ts +11 -0
- package/dist/components/react/post-popovercontainer.js +6 -0
- package/dist/components/react/post-rating.d.ts +11 -0
- package/dist/components/react/post-rating.js +153 -0
- package/dist/components/react/post-tab-header.d.ts +11 -0
- package/dist/components/react/post-tab-header.js +53 -0
- package/dist/components/react/post-tab-panel.d.ts +11 -0
- package/dist/components/react/post-tab-panel.js +55 -0
- package/dist/components/react/post-tabs.d.ts +11 -0
- package/dist/components/react/post-tabs.js +197 -0
- package/dist/components/react/post-togglebutton.d.ts +11 -0
- package/dist/components/react/post-togglebutton.js +57 -0
- package/dist/components/react/post-tooltip-trigger.d.ts +11 -0
- package/dist/components/react/post-tooltip-trigger.js +5223 -0
- package/dist/components/react/post-tooltip.d.ts +11 -0
- package/dist/components/react/post-tooltip.js +115 -0
- package/dist/components/switch-variants.js +3 -0
- package/dist/docs.json +71 -35
- package/dist/esm/event-from-kraHE1r3.js +105 -0
- package/dist/esm/index-C8a0ddDa.js +4 -4
- package/dist/esm/index-VmK3ABCB.js +88 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-DO48NanC.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +7 -7
- package/dist/esm/post-avatar.entry.js +108 -81
- package/dist/esm/post-back-to-top.entry.js +3 -3
- package/dist/esm/post-banner.entry.js +4 -4
- package/dist/esm/post-breadcrumb-item_2.entry.js +4 -4
- package/dist/esm/post-breadcrumbs.entry.js +5 -5
- package/dist/esm/post-card-control.entry.js +5 -5
- package/dist/esm/post-closebutton_15.entry.js +135 -76
- package/dist/esm/post-collapsible_2.entry.js +5 -5
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +4 -4
- package/dist/esm/post-linkarea.entry.js +19 -8
- package/dist/esm/post-popover.entry.js +4 -4
- package/dist/esm/post-rating.entry.js +4 -4
- package/dist/esm/post-tab-header.entry.js +4 -4
- package/dist/esm/post-tab-panel.entry.js +3 -3
- package/dist/esm/post-tabs.entry.js +2 -2
- package/dist/esm/post-tooltip-trigger.entry.js +3 -3
- package/dist/esm/post-tooltip.entry.js +4 -4
- package/dist/loader/cdn.js +1 -0
- package/dist/loader/index.cjs.js +1 -0
- package/{loader → dist/loader}/index.d.ts +1 -1
- package/dist/loader/index.es2017.js +1 -0
- package/{loader → dist/loader}/index.js +1 -1
- package/dist/post-components/p-01bc39c2.entry.js +1 -0
- package/dist/post-components/p-0dc1e940.entry.js +1 -0
- package/dist/post-components/p-16da91bc.entry.js +1 -0
- package/dist/post-components/p-26a04741.entry.js +1 -0
- package/dist/post-components/p-2f2f9b22.entry.js +1 -0
- package/dist/post-components/{p-45007aac.entry.js → p-33008981.entry.js} +1 -1
- package/dist/post-components/p-36358cd4.entry.js +1 -0
- package/dist/post-components/p-71c48d48.entry.js +1 -0
- package/dist/post-components/{p-e9802b56.entry.js → p-84395e1d.entry.js} +1 -1
- package/dist/post-components/p-848c10ac.entry.js +1 -0
- package/dist/post-components/{p-ab8017bb.entry.js → p-8d2e5814.entry.js} +1 -1
- package/dist/post-components/{p-a2fa5ce4.entry.js → p-9dbe6595.entry.js} +1 -1
- package/dist/post-components/p-DO48NanC.js +1 -0
- package/dist/post-components/{p-BWC0gtGU.js → p-VmK3ABCB.js} +1 -1
- package/dist/post-components/p-a982458f.entry.js +1 -0
- package/dist/post-components/{p-f67b616a.entry.js → p-b0aaa058.entry.js} +1 -1
- package/dist/post-components/{p-bbe02ba3.entry.js → p-bdeef760.entry.js} +1 -1
- package/dist/post-components/{p-2f698af4.entry.js → p-d221395c.entry.js} +1 -1
- package/dist/post-components/{p-57703aee.entry.js → p-e49aa78e.entry.js} +1 -1
- package/dist/post-components/p-eb405167.entry.js +1 -0
- package/dist/post-components/p-kraHE1r3.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/animations/pop-in.d.ts +1 -0
- package/dist/types/components/post-accordion-item/post-accordion-item.d.ts +3 -3
- package/dist/types/components/post-avatar/avatar-utils.d.ts +3 -0
- package/dist/types/components/post-avatar/post-avatar.d.ts +17 -13
- package/dist/types/components/post-closebutton/post-closebutton.d.ts +0 -6
- package/dist/types/components/post-header/post-header.d.ts +2 -0
- package/dist/types/components/post-icon/post-icon.d.ts +11 -0
- package/dist/types/components/post-linkarea/post-linkarea.d.ts +6 -0
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +2 -1
- package/dist/types/components/post-menu/post-menu.d.ts +7 -0
- package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +6 -2
- package/dist/types/components/post-tabs/post-tabs.d.ts +2 -2
- package/dist/types/components.d.ts +19 -22
- package/dist/types/utils/component-on-ready.d.ts +2 -2
- package/hydrate/index.js +308 -201
- package/hydrate/index.mjs +308 -201
- package/package.json +24 -12
- package/dist/components/p-Z01QMrov.js +0 -3
- package/dist/esm/package-Z01QMrov.js +0 -3
- package/dist/post-components/p-031f7489.entry.js +0 -1
- package/dist/post-components/p-1e6a068a.entry.js +0 -1
- package/dist/post-components/p-2ca196d6.entry.js +0 -1
- package/dist/post-components/p-3adbdda7.entry.js +0 -1
- package/dist/post-components/p-7b8ab026.entry.js +0 -1
- package/dist/post-components/p-8U5GFtQP.js +0 -1
- package/dist/post-components/p-9428231b.entry.js +0 -1
- package/dist/post-components/p-Z01QMrov.js +0 -1
- package/dist/post-components/p-ac73ab00.entry.js +0 -1
- package/dist/post-components/p-c1cf39cb.entry.js +0 -1
- package/dist/post-components/p-d0d92071.entry.js +0 -1
- package/dist/post-components/p-e96239c4.entry.js +0 -1
- package/dist/prebuild.js +0 -26
- package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/prebuild.d.ts +0 -1
- package/loader/cdn.js +0 -1
- package/loader/index.cjs.js +0 -1
- package/loader/index.es2017.js +0 -1
- /package/dist/components/{p-CJ80BZ06.js → breakpoints.js} +0 -0
- /package/dist/components/{p-SbIC4aZX.js → fade.js} +0 -0
- /package/dist/components/{p-C35MCWIp.js → get-focusable-children.js} +0 -0
- /package/dist/components/{p-r4txK0AC.js → heading-levels.js} +0 -0
- /package/dist/components/{p-BLchVpF6.js → index.browser.js} +0 -0
- /package/dist/components/{p-CV7fm1rW.js → index2.js} +0 -0
- /package/dist/components/{p-C_2k3G1c.js → long-press-event.js} +0 -0
- /package/dist/components/{p-CBFgkSgY.js → react/p-CBFgkSgY.js} +0 -0
- /package/dist/components/{p-DjIHLduJ.js → react/p-DjIHLduJ.js} +0 -0
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { v as version } from './package.js';
|
|
3
|
+
import { c as checkRequiredAndType } from './index2.js';
|
|
4
|
+
import './breakpoints.js';
|
|
5
|
+
import { g as getRoot } from './get-root.js';
|
|
6
|
+
|
|
7
|
+
const postMenuTriggerCss = ":host{display:inline-block}";
|
|
8
|
+
|
|
9
|
+
const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger extends HTMLElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super();
|
|
12
|
+
this.__registerHost();
|
|
13
|
+
/**
|
|
14
|
+
* Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
|
|
15
|
+
*/
|
|
16
|
+
this.ariaExpanded = false;
|
|
17
|
+
/**
|
|
18
|
+
* Reference to the slotted button within the trigger, if present.
|
|
19
|
+
* Used to manage click and key events for menu control.
|
|
20
|
+
*/
|
|
21
|
+
this.slottedButton = null;
|
|
22
|
+
this.handleKeyDown = (e) => {
|
|
23
|
+
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
this.handleToggle();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Watch for changes to the `for` property to validate its type and ensure it is a string.
|
|
31
|
+
* @param forValue - The new value of the `for` property.
|
|
32
|
+
*/
|
|
33
|
+
validateControlFor() {
|
|
34
|
+
checkRequiredAndType(this, 'for', 'string');
|
|
35
|
+
}
|
|
36
|
+
get menu() {
|
|
37
|
+
const ref = this.root.getElementById(this.for);
|
|
38
|
+
return ref && ref.localName === 'post-menu' ? ref : null;
|
|
39
|
+
}
|
|
40
|
+
handleToggle() {
|
|
41
|
+
if (this.menu) {
|
|
42
|
+
this.menu.toggle(this.host);
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
console.warn(`No post-menu found with ID: ${this.for}`);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
connectedCallback() {
|
|
49
|
+
this.root = getRoot(this.host);
|
|
50
|
+
}
|
|
51
|
+
componentDidLoad() {
|
|
52
|
+
this.validateControlFor();
|
|
53
|
+
this.slottedButton = this.host.querySelector('button');
|
|
54
|
+
// Check if the slottedButton is within a web component
|
|
55
|
+
if (!this.slottedButton) {
|
|
56
|
+
const webComponent = this.host.querySelector('.menu-trigger-webc');
|
|
57
|
+
if (webComponent?.shadowRoot) {
|
|
58
|
+
const slottedButton = webComponent.shadowRoot.querySelector('button');
|
|
59
|
+
if (slottedButton) {
|
|
60
|
+
this.slottedButton = slottedButton;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (this.slottedButton) {
|
|
65
|
+
this.slottedButton.setAttribute('aria-haspopup', 'menu');
|
|
66
|
+
// Listen to the `toggleMenu` event emitted by the `post-menu` component
|
|
67
|
+
if (this.menu && this.slottedButton) {
|
|
68
|
+
this.menu.addEventListener('toggleMenu', (event) => {
|
|
69
|
+
this.ariaExpanded = event.detail;
|
|
70
|
+
this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
this.slottedButton.addEventListener('click', () => {
|
|
74
|
+
this.handleToggle();
|
|
75
|
+
});
|
|
76
|
+
this.slottedButton.addEventListener('keydown', this.handleKeyDown);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
console.warn('No button found within post-menu-trigger');
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
render() {
|
|
83
|
+
return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
|
|
84
|
+
}
|
|
85
|
+
get host() { return this; }
|
|
86
|
+
static get watchers() { return {
|
|
87
|
+
"for": ["validateControlFor"]
|
|
88
|
+
}; }
|
|
89
|
+
static get style() { return postMenuTriggerCss; }
|
|
90
|
+
}, [4, "post-menu-trigger", {
|
|
91
|
+
"for": [513],
|
|
92
|
+
"ariaExpanded": [32]
|
|
93
|
+
}, undefined, {
|
|
94
|
+
"for": ["validateControlFor"]
|
|
95
|
+
}]);
|
|
96
|
+
function defineCustomElement() {
|
|
97
|
+
if (typeof customElements === "undefined") {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
const components = ["post-menu-trigger"];
|
|
101
|
+
components.forEach(tagName => { switch (tagName) {
|
|
102
|
+
case "post-menu-trigger":
|
|
103
|
+
if (!customElements.get(tagName)) {
|
|
104
|
+
customElements.define(tagName, PostMenuTrigger);
|
|
105
|
+
}
|
|
106
|
+
break;
|
|
107
|
+
} });
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export { PostMenuTrigger as P, defineCustomElement as d };
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './post-popovercontainer2.js';
|
|
3
|
+
import { v as version } from './package.js';
|
|
4
|
+
import { g as getFocusableChildren } from './get-focusable-children.js';
|
|
5
|
+
import { d as checkEmptyOrOneOf } from './index2.js';
|
|
6
|
+
import './breakpoints.js';
|
|
7
|
+
import { E as EventFrom } from './event-from.js';
|
|
8
|
+
import { g as getRoot } from './get-root.js';
|
|
9
|
+
|
|
10
|
+
const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}";
|
|
11
|
+
|
|
12
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
13
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
14
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
15
|
+
r = Reflect.decorate(decorators, target, key, desc);
|
|
16
|
+
else
|
|
17
|
+
for (var i = decorators.length - 1; i >= 0; i--)
|
|
18
|
+
if (d = decorators[i])
|
|
19
|
+
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
20
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
21
|
+
};
|
|
22
|
+
const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLElement {
|
|
23
|
+
constructor() {
|
|
24
|
+
super();
|
|
25
|
+
this.__registerHost();
|
|
26
|
+
this.__attachShadow();
|
|
27
|
+
this.toggleMenu = createEvent(this, "toggleMenu", 7);
|
|
28
|
+
this.lastFocusedElement = null;
|
|
29
|
+
this.KEYCODES = {
|
|
30
|
+
SPACE: ' ',
|
|
31
|
+
ENTER: 'Enter',
|
|
32
|
+
UP: 'ArrowUp',
|
|
33
|
+
DOWN: 'ArrowDown',
|
|
34
|
+
TAB: 'Tab',
|
|
35
|
+
HOME: 'Home',
|
|
36
|
+
END: 'End',
|
|
37
|
+
ESCAPE: 'Escape',
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Defines the position of the menu relative to its trigger.
|
|
41
|
+
* Menus are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
|
|
42
|
+
* For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
|
|
43
|
+
*/
|
|
44
|
+
this.placement = 'bottom';
|
|
45
|
+
/**
|
|
46
|
+
* Holds the current visibility state of the menu.
|
|
47
|
+
* This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
|
|
48
|
+
* and updates automatically when the menu is toggled.
|
|
49
|
+
*/
|
|
50
|
+
this.isVisible = false;
|
|
51
|
+
this.handleKeyDown = (e) => {
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
if (e.key === this.KEYCODES.ESCAPE) {
|
|
54
|
+
this.toggle(this.host);
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (Object.values(this.KEYCODES).includes(e.key)) {
|
|
58
|
+
this.controlKeyDownHandler(e);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
this.handlePostToggle = (event) => {
|
|
62
|
+
this.isVisible = event.detail.isOpen;
|
|
63
|
+
this.toggleMenu.emit(this.isVisible);
|
|
64
|
+
requestAnimationFrame(() => {
|
|
65
|
+
if (this.isVisible) {
|
|
66
|
+
this.lastFocusedElement = this.root?.activeElement;
|
|
67
|
+
const menuItems = this.getSlottedItems();
|
|
68
|
+
if (event.detail.first) {
|
|
69
|
+
if (menuItems.length > 0) {
|
|
70
|
+
// Add role="menu" to the popovercontainer
|
|
71
|
+
this.host.setAttribute('role', 'menu');
|
|
72
|
+
// Add role="menuitem" to the focusable elements
|
|
73
|
+
menuItems.forEach(item => {
|
|
74
|
+
item.setAttribute('role', 'menuitem');
|
|
75
|
+
});
|
|
76
|
+
// Add aria-label to the menu
|
|
77
|
+
if (this.label)
|
|
78
|
+
this.host.setAttribute('aria-label', this.label);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
menuItems[0].focus();
|
|
82
|
+
}
|
|
83
|
+
else if (this.lastFocusedElement) {
|
|
84
|
+
setTimeout(() => {
|
|
85
|
+
// This timeout is added for NVDA to announce the menu as collapsed
|
|
86
|
+
this.lastFocusedElement.focus();
|
|
87
|
+
}, 0);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
this.handleClick = (e) => {
|
|
92
|
+
const target = e.target;
|
|
93
|
+
if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
|
|
94
|
+
this.toggle(this.host);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
validatePlacement() {
|
|
99
|
+
checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
|
|
100
|
+
}
|
|
101
|
+
connectedCallback() {
|
|
102
|
+
this.root = getRoot(this.host);
|
|
103
|
+
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
104
|
+
this.host.addEventListener('click', this.handleClick);
|
|
105
|
+
}
|
|
106
|
+
disconnectedCallback() {
|
|
107
|
+
this.host.removeEventListener('keydown', this.handleKeyDown);
|
|
108
|
+
this.host.removeEventListener('click', this.handleClick);
|
|
109
|
+
this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
|
|
110
|
+
}
|
|
111
|
+
componentDidLoad() {
|
|
112
|
+
this.validatePlacement();
|
|
113
|
+
if (this.popoverRef) {
|
|
114
|
+
this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Toggles the menu visibility based on its current state.
|
|
119
|
+
*/
|
|
120
|
+
async toggle(target) {
|
|
121
|
+
if (this.popoverRef) {
|
|
122
|
+
await this.popoverRef.toggle(target);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
console.error('toggle: popoverRef is null or undefined');
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Displays the popover menu, focusing the first menu item.
|
|
130
|
+
*
|
|
131
|
+
* @param target - The HTML element relative to which the popover menu should be displayed.
|
|
132
|
+
*/
|
|
133
|
+
async show(target) {
|
|
134
|
+
if (this.popoverRef) {
|
|
135
|
+
await this.popoverRef.show(target);
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
console.error('show: popoverRef is null or undefined');
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Hides the popover menu and restores focus to the previously focused element.
|
|
143
|
+
*/
|
|
144
|
+
async hide() {
|
|
145
|
+
if (this.popoverRef) {
|
|
146
|
+
await this.popoverRef.hide();
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
console.error('hide: popoverRef is null or undefined');
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
controlKeyDownHandler(e) {
|
|
153
|
+
const menuItems = this.getSlottedItems();
|
|
154
|
+
if (!menuItems.length) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
let currentIndex = menuItems.findIndex(el => {
|
|
158
|
+
// Check if the item is currently focused within its rendered scope (document or shadow root)
|
|
159
|
+
return el === getRoot(el).activeElement;
|
|
160
|
+
});
|
|
161
|
+
switch (e.key) {
|
|
162
|
+
case this.KEYCODES.UP:
|
|
163
|
+
e.preventDefault();
|
|
164
|
+
currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
|
|
165
|
+
break;
|
|
166
|
+
case this.KEYCODES.DOWN:
|
|
167
|
+
e.preventDefault();
|
|
168
|
+
currentIndex = (currentIndex + 1) % menuItems.length;
|
|
169
|
+
break;
|
|
170
|
+
case this.KEYCODES.HOME:
|
|
171
|
+
currentIndex = 0;
|
|
172
|
+
break;
|
|
173
|
+
case this.KEYCODES.END:
|
|
174
|
+
e.preventDefault();
|
|
175
|
+
currentIndex = menuItems.length - 1;
|
|
176
|
+
break;
|
|
177
|
+
case this.KEYCODES.SPACE:
|
|
178
|
+
this.toggle(this.host);
|
|
179
|
+
return;
|
|
180
|
+
case this.KEYCODES.TAB:
|
|
181
|
+
this.toggle(this.host);
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
if (menuItems[currentIndex]) {
|
|
185
|
+
menuItems[currentIndex].focus();
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
getSlottedItems() {
|
|
189
|
+
const slot = this.host.shadowRoot.querySelector('slot');
|
|
190
|
+
const slottedElements = slot ? slot.assignedElements() : [];
|
|
191
|
+
return (slottedElements
|
|
192
|
+
// If the element is a slot, get the assigned elements
|
|
193
|
+
.flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
|
|
194
|
+
// For each menu item, get any focusable children (e.g., buttons, links)
|
|
195
|
+
.flatMap(el => Array.from(getFocusableChildren(el))));
|
|
196
|
+
}
|
|
197
|
+
render() {
|
|
198
|
+
return (h(Host, { key: '7b7fe6fccd27d3ff12eae3094b1a55b9b9778eb1', "data-version": version }, h("post-popovercontainer", { key: '6dae2883febd1e96ae1b34518dd2e9c634fafecb', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e19c107831b020aa0039ea7a18465e4bb72380c4', part: "menu" }, h("slot", { key: '9d9862e73dd222435d196e67c540bf8266952d94' })))));
|
|
199
|
+
}
|
|
200
|
+
get host() { return this; }
|
|
201
|
+
static get watchers() { return {
|
|
202
|
+
"placement": ["validatePlacement"]
|
|
203
|
+
}; }
|
|
204
|
+
static get style() { return postMenuCss; }
|
|
205
|
+
}, [1, "post-menu", {
|
|
206
|
+
"placement": [1],
|
|
207
|
+
"label": [1],
|
|
208
|
+
"isVisible": [32],
|
|
209
|
+
"toggle": [64],
|
|
210
|
+
"show": [64],
|
|
211
|
+
"hide": [64]
|
|
212
|
+
}, undefined, {
|
|
213
|
+
"placement": ["validatePlacement"]
|
|
214
|
+
}]);
|
|
215
|
+
__decorate([
|
|
216
|
+
EventFrom('post-popovercontainer')
|
|
217
|
+
], PostMenu.prototype, "handlePostToggle", void 0);
|
|
218
|
+
function defineCustomElement() {
|
|
219
|
+
if (typeof customElements === "undefined") {
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
const components = ["post-menu", "post-popovercontainer"];
|
|
223
|
+
components.forEach(tagName => { switch (tagName) {
|
|
224
|
+
case "post-menu":
|
|
225
|
+
if (!customElements.get(tagName)) {
|
|
226
|
+
customElements.define(tagName, PostMenu);
|
|
227
|
+
}
|
|
228
|
+
break;
|
|
229
|
+
case "post-popovercontainer":
|
|
230
|
+
if (!customElements.get(tagName)) {
|
|
231
|
+
defineCustomElement$1();
|
|
232
|
+
}
|
|
233
|
+
break;
|
|
234
|
+
} });
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
export { PostMenu as P, defineCustomElement as d };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { v as version } from './
|
|
4
|
-
import { I as IS_BROWSER } from './
|
|
5
|
-
import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
|
|
3
|
+
import { v as version } from './package.js';
|
|
4
|
+
import { I as IS_BROWSER } from './breakpoints.js';
|
|
5
|
+
import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
|
|
6
6
|
|
|
7
7
|
function getAttributeObserver(attribute, handler) {
|
|
8
8
|
/**
|
|
@@ -28,7 +28,7 @@ function getAttributeObserver(attribute, handler) {
|
|
|
28
28
|
return IS_BROWSER ? new MutationObserver(observerHandler) : null;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
const postPopoverCss = "
|
|
31
|
+
const postPopoverCss = ".btn-close{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;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{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-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-current-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
|
|
32
32
|
|
|
33
33
|
/**
|
|
34
34
|
* @slot default - Slot for placing content inside the popover.
|
|
@@ -49,7 +49,7 @@ const globalToggleHandler = (e) => {
|
|
|
49
49
|
const popover = document.getElementById(popoverTarget);
|
|
50
50
|
popover?.toggle(currentElement);
|
|
51
51
|
};
|
|
52
|
-
const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
|
|
52
|
+
const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
|
|
53
53
|
validatePlacement() {
|
|
54
54
|
checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
|
|
55
55
|
}
|
|
@@ -144,7 +144,7 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
|
|
|
144
144
|
trigger.setAttribute('aria-expanded', force ? 'false' : null);
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
|
-
return (h(Host, { key: '
|
|
147
|
+
return (h(Host, { key: 'c0a36766203f4b2f6350c9c92b304eb9052d2ceb', "data-version": version }, h("post-popovercontainer", { key: 'ec9d9e8af53408fd3d2d5aaedab10ccee94322fd', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4edb0a99f660f5b4c1b35a934cc2d21bb84b1c44', class: "popover-container" }, h("div", { key: '96d3fc664e0a8c5d0b877cf46df9e80433909f5e', class: "popover-content" }, h("slot", { key: '978e3335f1214bed829042cfdf6bd7a23ae9229a' })), h("button", { key: 'b42d5a48ba83d6e1b592b0607e837e8036e0cf54', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '95a7cfd1c4b6c30e04a86e58d4cf9a70eec885c8', class: "visually-hidden" }, this.closeButtonCaption))))));
|
|
148
148
|
}
|
|
149
149
|
get host() { return this; }
|
|
150
150
|
static get watchers() { return {
|
|
@@ -181,7 +181,6 @@ function defineCustomElement$1() {
|
|
|
181
181
|
break;
|
|
182
182
|
} });
|
|
183
183
|
}
|
|
184
|
-
defineCustomElement$1();
|
|
185
184
|
|
|
186
185
|
const PostPopover = PostPopover$1;
|
|
187
186
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './
|
|
1
|
+
import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './post-popovercontainer2.js';
|
|
2
2
|
|
|
3
3
|
const PostPopovercontainer = PostPopovercontainer$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|