@ds-mo/ui 12.7.0 → 12.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +22 -9
- package/dist/agent.json +246 -19
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-card-overview.d.ts +19 -0
- package/dist/angular/ds-card-overview.js +42 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-title.js.map +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-bar.js +1 -1
- package/dist/components/ds-card-data-viz-bar.js.map +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-data-viz-line.js +1 -1
- package/dist/components/ds-card-data-viz-line.js.map +1 -1
- package/dist/components/ds-card-overview.d.ts +11 -0
- package/dist/components/ds-card-overview.js +2 -0
- package/dist/components/ds-card-overview.js.map +1 -0
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-chart-bar-stacked.js +1 -1
- package/dist/components/ds-chart-bar-stacked.js.map +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-bar.js.map +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-chart-line.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-conversation-list.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js.map +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-page.js.map +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-skeleton.js.map +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-2foAUsDN.js +2 -0
- package/dist/components/p-2foAUsDN.js.map +1 -0
- package/dist/components/{p-BuiZcSga.js → p-8GK7B7K4.js} +2 -2
- package/dist/components/p-8GK7B7K4.js.map +1 -0
- package/dist/components/p-B5tMlca-.js +2 -0
- package/dist/components/p-B5tMlca-.js.map +1 -0
- package/dist/components/p-B6Vuayt6.js +2 -0
- package/dist/components/p-B6Vuayt6.js.map +1 -0
- package/dist/components/{p-B-9A0e_0.js → p-B88n0pO3.js} +2 -2
- package/dist/components/p-BBePKRHC.js +2 -0
- package/dist/components/p-BBePKRHC.js.map +1 -0
- package/dist/components/p-BBxcMVqk.js +2 -0
- package/dist/components/p-BBxcMVqk.js.map +1 -0
- package/dist/components/p-BDKtu6Wb.js +2 -0
- package/dist/components/{p-Bl001G0Y.js.map → p-BDKtu6Wb.js.map} +1 -1
- package/dist/components/p-BKOlvCGS.js +2 -0
- package/dist/components/p-BKOlvCGS.js.map +1 -0
- package/dist/components/{p-C7bZ-jiU.js → p-BO5aqZcf.js} +2 -2
- package/dist/components/{p-guQ7hv6W.js → p-BOCfICln.js} +2 -2
- package/dist/components/p-BX0BMhgz.js +2 -0
- package/dist/components/p-BX0BMhgz.js.map +1 -0
- package/dist/components/p-BhV5e6vF.js +2 -0
- package/dist/components/{p-1darPzys.js.map → p-BhV5e6vF.js.map} +1 -1
- package/dist/components/p-C8HU4W8q.js +2 -0
- package/dist/components/{p-pgxlkvUy.js.map → p-C8HU4W8q.js.map} +1 -1
- package/dist/components/{p-CvyTZ4Mg.js → p-CChcuL04.js} +2 -2
- package/dist/components/{p-Crsn82rz.js → p-CCzG5xDD.js} +2 -2
- package/dist/components/p-CGVXbXv9.js +2 -0
- package/dist/components/p-CGVXbXv9.js.map +1 -0
- package/dist/components/{p-BT5hgg5i.js → p-CIiBpjCn.js} +2 -2
- package/dist/components/{p-B_5nxOeB.js → p-CgEYdMee.js} +2 -2
- package/dist/components/{p-k0Hmj1KV.js → p-Cr3tEx7o.js} +2 -2
- package/dist/components/p-Cr3tEx7o.js.map +1 -0
- package/dist/components/{p-5-QAFB4j.js → p-Cuih680v.js} +2 -2
- package/dist/components/{p-C_9ZH0A3.js → p-Cuqxh-Tq.js} +2 -2
- package/dist/components/{p--eKXTylf.js → p-DCvA3Dc9.js} +2 -2
- package/dist/components/{p-DNFd4Ao-.js → p-DLZm_-sU.js} +2 -2
- package/dist/components/{p-C9h13YnX.js → p-DRnIuCiT.js} +2 -2
- package/dist/components/p-DhKvqh5G.js +2 -0
- package/dist/components/p-DhKvqh5G.js.map +1 -0
- package/dist/components/p-DjKkSqrG.js +2 -0
- package/dist/components/p-DjKkSqrG.js.map +1 -0
- package/dist/components/{p-CUAYsK44.js → p-DlscFn2m.js} +2 -2
- package/dist/components/{p-BcfC6phQ.js → p-DxkEC0hR.js} +2 -2
- package/dist/components/p-DxkEC0hR.js.map +1 -0
- package/dist/components/{p-C6xC48hG.js → p-Re2kPrXm.js} +2 -2
- package/dist/components/{p-DIa73GJP.js → p-XMZCaXs7.js} +2 -2
- package/dist/components/p-YR1XeuZf.js +2 -0
- package/dist/components/p-YR1XeuZf.js.map +1 -0
- package/dist/components/{p-CqWV4Hl_.js → p-dyUp3Adm.js} +2 -2
- package/dist/components/{p-CnAkobDW.js → p-nkYN0Bub.js} +2 -2
- package/dist/components/p-yhj1lIPx.js +2 -0
- package/dist/docs/components.json +847 -167
- package/dist/lib/components/Menu/menu-position.d.ts +6 -6
- package/dist/lib/toast/toast-types.d.ts +3 -3
- package/dist/lib/utils/anchored-position.d.ts +34 -0
- package/dist/lib/utils/choice-popup-alignment.d.ts +2 -2
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +31 -0
- package/dist/lib/utils/index.js.map +3 -3
- package/dist/lib/utils/metric-change.d.ts +52 -0
- package/dist/lib/utils/token-defaults.d.ts +3 -0
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +2 -2
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +122 -6
- package/dist/mcp-data/registry/button-unfilled.json +49 -5
- package/dist/mcp-data/registry/card-data-viz-bar.json +2 -2
- package/dist/mcp-data/registry/card-data-viz-donut.json +2 -1
- package/dist/mcp-data/registry/card-data-viz-line.json +2 -2
- package/dist/mcp-data/registry/card-overview.json +360 -0
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/card-shell-data-viz.json +1 -1
- package/dist/mcp-data/registry/chart-bar-stacked.json +14 -9
- package/dist/mcp-data/registry/chart-bar.json +15 -10
- package/dist/mcp-data/registry/chart-donut.json +3 -2
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart-line.json +15 -10
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/icon.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +3 -3
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/message.json +1 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +1 -1
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +3 -2
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +249 -19
- package/dist/mcp-data/registry/scroll-overlay.json +1 -1
- package/dist/mcp-data/registry/select-multi.json +2 -2
- package/dist/mcp-data/registry/select.json +2 -2
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-picker.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-swatch.json +1 -1
- package/dist/mcp-data/registry/shell-page.json +5 -4
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/tag.json +1 -1
- package/dist/mcp-data/registry/text.json +3 -3
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip-data-viz.json +3 -1
- package/dist/mcp-data/registry/tooltip.json +3 -8
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-card-overview.d.ts +12 -0
- package/dist/react/ds-card-overview.js +12 -0
- package/dist/styles/control-elevation.css +11 -0
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +32 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +20 -0
- package/dist/types/components/CardOverview/CardOverview.d.ts +64 -0
- package/dist/types/components/CardOverview/card-overview-types.d.ts +34 -0
- package/dist/types/components/CardOverview/index.d.ts +2 -0
- package/dist/types/components/ChartBar/ChartBar.d.ts +11 -0
- package/dist/types/components/ChartBarStacked/ChartBarStacked.d.ts +11 -0
- package/dist/types/components/ChartLine/ChartLine.d.ts +11 -0
- package/dist/types/components/Menu/Menu.d.ts +7 -5
- package/dist/types/components/Menu/menu-position.d.ts +6 -6
- package/dist/types/components/ShellPage/ShellPage.d.ts +1 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +1 -4
- package/dist/types/components.d.ts +234 -2
- package/dist/types/toast/toast-types.d.ts +3 -3
- package/dist/types/utils/anchored-position-controller.d.ts +105 -0
- package/dist/types/utils/anchored-position.d.ts +35 -0
- package/dist/types/utils/cartesian-chart-layout.d.ts +13 -0
- package/dist/types/utils/chart-viewport-controller.d.ts +21 -0
- package/dist/types/utils/choice-popup-alignment.d.ts +2 -2
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/metric-change.d.ts +53 -0
- package/dist/types/utils/select-controller.d.ts +3 -3
- package/dist/types/utils/token-defaults.d.ts +3 -0
- package/package.json +3 -3
- package/dist/components/p-1darPzys.js +0 -2
- package/dist/components/p-B8C_yfLQ.js +0 -2
- package/dist/components/p-B8C_yfLQ.js.map +0 -1
- package/dist/components/p-BcfC6phQ.js.map +0 -1
- package/dist/components/p-Bl001G0Y.js +0 -2
- package/dist/components/p-BuiZcSga.js.map +0 -1
- package/dist/components/p-Bv9frkvW.js +0 -2
- package/dist/components/p-Bv9frkvW.js.map +0 -1
- package/dist/components/p-C0-K8vnW.js +0 -2
- package/dist/components/p-C0-K8vnW.js.map +0 -1
- package/dist/components/p-C2ym_Ich.js +0 -2
- package/dist/components/p-C_ewSXTT.js +0 -2
- package/dist/components/p-C_ewSXTT.js.map +0 -1
- package/dist/components/p-Ca9-fnFl.js +0 -2
- package/dist/components/p-Ca9-fnFl.js.map +0 -1
- package/dist/components/p-CydY-v7X.js +0 -2
- package/dist/components/p-CydY-v7X.js.map +0 -1
- package/dist/components/p-De7NquTI.js +0 -2
- package/dist/components/p-De7NquTI.js.map +0 -1
- package/dist/components/p-Dg3xLna0.js +0 -2
- package/dist/components/p-Dg3xLna0.js.map +0 -1
- package/dist/components/p-k0Hmj1KV.js.map +0 -1
- package/dist/components/p-pgxlkvUy.js +0 -2
- package/dist/lib/utils/anchored-popup.d.ts +0 -23
- package/dist/types/components/Tooltip/tooltip-position.d.ts +0 -21
- package/dist/types/utils/anchored-popup.d.ts +0 -24
- /package/dist/components/{p-B-9A0e_0.js.map → p-B88n0pO3.js.map} +0 -0
- /package/dist/components/{p-C7bZ-jiU.js.map → p-BO5aqZcf.js.map} +0 -0
- /package/dist/components/{p-guQ7hv6W.js.map → p-BOCfICln.js.map} +0 -0
- /package/dist/components/{p-CvyTZ4Mg.js.map → p-CChcuL04.js.map} +0 -0
- /package/dist/components/{p-Crsn82rz.js.map → p-CCzG5xDD.js.map} +0 -0
- /package/dist/components/{p-BT5hgg5i.js.map → p-CIiBpjCn.js.map} +0 -0
- /package/dist/components/{p-B_5nxOeB.js.map → p-CgEYdMee.js.map} +0 -0
- /package/dist/components/{p-5-QAFB4j.js.map → p-Cuih680v.js.map} +0 -0
- /package/dist/components/{p-C_9ZH0A3.js.map → p-Cuqxh-Tq.js.map} +0 -0
- /package/dist/components/{p--eKXTylf.js.map → p-DCvA3Dc9.js.map} +0 -0
- /package/dist/components/{p-DNFd4Ao-.js.map → p-DLZm_-sU.js.map} +0 -0
- /package/dist/components/{p-C9h13YnX.js.map → p-DRnIuCiT.js.map} +0 -0
- /package/dist/components/{p-CUAYsK44.js.map → p-DlscFn2m.js.map} +0 -0
- /package/dist/components/{p-C6xC48hG.js.map → p-Re2kPrXm.js.map} +0 -0
- /package/dist/components/{p-DIa73GJP.js.map → p-XMZCaXs7.js.map} +0 -0
- /package/dist/components/{p-CqWV4Hl_.js.map → p-dyUp3Adm.js.map} +0 -0
- /package/dist/components/{p-CnAkobDW.js.map → p-nkYN0Bub.js.map} +0 -0
- /package/dist/components/{p-C2ym_Ich.js.map → p-yhj1lIPx.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{P as o,d as s}from"./p-
|
|
1
|
+
import{P as o,d as s}from"./p-DxkEC0hR.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-panel-tools.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-k0Hmj1KV.js";import{D as a,s as d}from"./p-BgGP65Nn.js";import{C as c}from"./p-CuwopElg.js";const l=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=a;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;d(this.internals,o,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"fae7377eb85402eacc9da7d2c3a28fe895758559",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:c[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return l()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),h)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}v();const f=h;const u=v;export{f as DsRadio,u as defineCustomElement};
|
|
1
|
+
import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-Cr3tEx7o.js";import{D as a,s as d}from"./p-BgGP65Nn.js";import{C as c}from"./p-CuwopElg.js";const l=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=a;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;d(this.internals,o,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"5944bd2a47d654d9cc4cb6fba4cfe9602c3f3c10",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:c[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return l()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),h)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}v();const f=h;const u=v;export{f as DsRadio,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-radio.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as l,c as s,h as r,a
|
|
1
|
+
import{p as e,H as l,c as s,h as r,a,t as o}from"./index.js";import{S as d}from"./p-CY19gMiz.js";const t=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-scroll-overlay{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll");this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(a,{key:"fd4a37812cac22a3b8da81a8d5831d9975754503"},r("div",{key:"39cbf6adb044adc86410469c9724df5113294596",class:"scroll-overlay"},r("div",{key:"53cf2fd38c3e72f5d4e795671e538e6ca8811aaa",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"4cf15f809928e18a000e45ec8c06e53dcd5f56dc",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"6d17b2422faca479434f6df2bc5a666cdf9759dd",class:"scroll-overlay__body"},r("slot",{key:"381e05ce3304b6712793583a83be3155a4a4b01b"})))),r("div",{key:"42a56b60bc33d0dd06bbaf46e6a580363836c8ef",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"e38554ee65c5d40aa42c950ee65eb9025456bf18",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(o(e))){customElements.define(o(e),i)}break}}))}n();const g=i;const f=n;export{g as DsScrollOverlay,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-scroll-overlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"sGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n /* Intersecting the block and inline masks lets every edge compose correctly. */\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n display: block;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.scroll-overlay {\n position: relative;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.scroll-overlay__viewport {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.scroll-overlay__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.scroll-overlay__content {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n flex: 1 0 auto;\n min-height: 0;\n}\n\n.scroll-overlay__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n scrollTop: number;\n scrollHeight: number;\n clientHeight: number;\n}\n\n@Component({\n tag: 'ds-scroll-overlay',\n styleUrl: 'ScrollOverlay.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class ScrollOverlay {\n @Element() el!: HTMLElement;\n\n /** Optional accessible name. When provided, the scrollport is a focusable region. */\n @Prop() scrollLabel: string | undefined;\n\n /** Reports scroll position without exposing the internal scrollport element. */\n @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private controller?: ScrollOverlayController;\n\n componentDidLoad(): void {\n if (!this.viewport || !this.content || !this.overlay) return;\n this.controller = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n });\n this.controller.connect();\n }\n\n disconnectedCallback(): void {\n this.controller?.disconnect();\n }\n\n /** Move the owned scrollport to its beginning. */\n @Method()\n async scrollToStart(): Promise<void> {\n this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Move the owned scrollport to its live end. */\n @Method()\n async scrollToEnd(): Promise<void> {\n this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n this.controller?.sync();\n }\n\n /** Re-measure footer geometry after an imperative slotted-content update. */\n @Method()\n async refreshOverlay(): Promise<void> {\n this.controller?.sync();\n }\n\n private handleScroll = (): void => {\n if (!this.viewport) return;\n this.controller?.sync();\n this.dsScroll.emit({\n scrollTop: this.viewport.scrollTop,\n scrollHeight: this.viewport.scrollHeight,\n clientHeight: this.viewport.clientHeight,\n });\n };\n\n render() {\n const labelled = Boolean(this.scrollLabel?.trim());\n return (\n <Host>\n <div class=\"scroll-overlay\">\n <div\n class=\"scroll-overlay__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role={labelled ? 'region' : undefined}\n aria-label={labelled ? this.scrollLabel : undefined}\n tabIndex={labelled ? 0 : undefined}\n onScroll={this.handleScroll}\n >\n <div\n class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n >\n <div class=\"scroll-overlay__body\">\n <slot />\n </div>\n </div>\n </div>\n <div\n class=\"scroll-overlay__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <slot name=\"overlay\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as l}from"./p-DjbTFy2B.js";import{S as d,r as a,f as h,a as u,b as m,d as g}from"./p-Bv9frkvW.js";import{d as p}from"./p-BT5hgg5i.js";import{d as f}from"./p-BuiZcSga.js";import{d as v}from"./p-DIa73GJP.js";import{d as b}from"./p-pgxlkvUy.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-k0Hmj1KV.js";import{d as k}from"./p-C0-K8vnW.js";import{D as _,s as z}from"./p-BgGP65Nn.js";import{a as C,C as F}from"./p-CuwopElg.js";import{c as j}from"./p-C61yJkfr.js";const V=()=>`.sc-ds-select-multi-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select-multi-h,.ds-focus-ring.sc-ds-select-multi,.ds-focus-ring-inset.sc-ds-select-multi-h,.ds-focus-ring-inset.sc-ds-select-multi{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-multi-h:focus-visible,.ds-focus-ring.sc-ds-select-multi:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-multi-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-multi{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select-multi-h:focus-visible,.ds-focus-ring-inset.sc-ds-select-multi:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-multi-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select-multi:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-multi-h,.ds-interaction-fill.sc-ds-select-multi{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-multi-h::before,.ds-interaction-fill.sc-ds-select-multi::before,.ds-interaction-fill.sc-ds-select-multi-h::after,.ds-interaction-fill.sc-ds-select-multi::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-multi-h::before,.ds-interaction-fill.sc-ds-select-multi::before{z-index:1}.ds-interaction-fill.sc-ds-select-multi-h::after,.ds-interaction-fill.sc-ds-select-multi::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-multi-h,.ds-interaction-fill--bordered.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-multi-h::before,.ds-interaction-fill--selected.sc-ds-select-multi::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-multi-h,.ds-interaction-fill--selected.sc-ds-select-multi{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-multi-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-multi:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-multi-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-multi:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-multi-h>.ds-interaction-fill__content.sc-ds-select-multi,.ds-interaction-fill.sc-ds-select-multi>.ds-interaction-fill__content.sc-ds-select-multi,.ds-interaction-fill__content.sc-ds-select-multi{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-multi-h,.ds-interaction-fill--on-faint.sc-ds-select-multi{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-multi-h,.ds-interaction-fill--on-medium.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-multi-h,.ds-interaction-fill--on-bold.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-multi-h,.ds-interaction-fill--on-strong.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-select-multi-h,.ds-interaction-fill--on-translucent.sc-ds-select-multi{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-multi-h,.ds-interaction-fill--on-inverted.sc-ds-select-multi{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-multi-h,.ds-interaction-fill--on-media.sc-ds-select-multi{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-multi-h,.ds-interaction-fill--on-always-dark.sc-ds-select-multi{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-multi-h,.ds-interaction-fill--on-navigation.sc-ds-select-multi{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-multi-h,.ds-control-inactive.sc-ds-select-multi{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-select-multi,.ds-control--lg.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi,.ds-control--sm.sc-ds-select-multi-h,.ds-control--sm.sc-ds-select-multi,.ds-control--xs.sc-ds-select-multi-h,.ds-control--xs.sc-ds-select-multi{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-multi-h,.ds-control--lg.sc-ds-select-multi{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-select-multi-h,.ds-control--sm.sc-ds-select-multi{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-select-multi-h,.ds-control--xs.sc-ds-select-multi{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-multi-h,.ds-chrome-space--sm.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-multi-h,.ds-chrome-space--md.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-multi-h,.ds-chrome-space--lg.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-multi-h,.ds-chrome-row.sc-ds-select-multi,.ds-chrome-column.sc-ds-select-multi-h,.ds-chrome-column.sc-ds-select-multi,.ds-chrome-grid.sc-ds-select-multi-h,.ds-chrome-grid.sc-ds-select-multi{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-multi-h,.ds-chrome-row.sc-ds-select-multi{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-multi-h,.ds-chrome-column.sc-ds-select-multi{flex-direction:column}.ds-chrome-grid.sc-ds-select-multi-h,.ds-chrome-grid.sc-ds-select-multi{display:grid;align-items:center}.ds-control-frame.sc-ds-select-multi{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select-multi{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select-multi{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select-multi{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select-multi{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select-multi::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select-multi{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select-multi{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select-multi{opacity:0}}.ds-choice-list.sc-ds-select-multi{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select-multi{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select-multi{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select-multi{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select-multi:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select-multi{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select-multi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select-multi{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select-multi,.ds-choice-item__suffix.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select-multi,.ds-choice-loading.sc-ds-select-multi{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select-multi{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select-multi::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select-multi{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select-multi,.ds-choice-footer__clear.sc-ds-select-multi ds-text.sc-ds-select-multi{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select-multi{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select-multi:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.ds-control-frame.sc-ds-select-multi{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select-multi{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-multi-h,.ds-control-width--hug.sc-ds-select-multi{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-multi-h,.ds-control-width--fill.sc-ds-select-multi{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-multi-h,.ds-field-stack.sc-ds-select-multi{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select-multi{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select-multi::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select-multi:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select-multi{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select-multi:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select-multi>ds-icon.sc-ds-select-multi{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select-multi .select-search__control.sc-ds-select-multi .select-search__clear.sc-ds-select-multi{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select-multi input[type='search'].sc-ds-select-multi::-webkit-search-cancel-button,.select-search__control.sc-ds-select-multi input[type='search'].sc-ds-select-multi::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-multi-h,.ds-text--display-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-multi-h,.ds-text--display-small.sc-ds-select-multi{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-multi-h,.ds-text--title-large.sc-ds-select-multi{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-multi-h,.ds-text--title-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-multi-h,.ds-text--title-small.sc-ds-select-multi{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-multi-h,.ds-text--body-large.sc-ds-select-multi{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-multi-h,.ds-text--body-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-multi-h,.ds-text--body-small.sc-ds-select-multi{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-multi-h,.ds-text--caption.sc-ds-select-multi{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select-multi,.ds-text--display-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--display-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--display-medium.ds-text--regular.sc-ds-select-multi,.ds-text--display-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-large.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select-multi,.ds-text--title-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-medium.ds-text--regular.sc-ds-select-multi,.ds-text--title-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select-multi,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-large.ds-text--regular.sc-ds-select-multi,.ds-text--body-medium.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--caption.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-multi-h,.ds-text--caption.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-multi-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-multi-h,.ds-control-width--fill.sc-ds-select-multi-h .trigger.sc-ds-select-multi{width:100%}.trigger.sc-ds-select-multi{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select-multi .trigger__label.sc-ds-select-multi{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select-multi,.trigger__chevron.sc-ds-select-multi{position:relative;z-index:2}.trigger__prefix.sc-ds-select-multi{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select-multi{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select-multi{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select-multi{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select-multi .ds-choice-item__icon.sc-ds-select-multi{color:var(--color-foreground-primary)}.error-text.sc-ds-select-multi{width:100%}.select-host--background-medium.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-multi-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-multi-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-multi-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-multi-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const I={lg:"lg",md:"md",sm:"sm",xs:"xs"};let S=0;const L=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.values=[];this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-multi-${++S}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValues=[];this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.values=[];this.dsChange.emit([]);this.dsClear.emit();this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new d({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){return-1},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.toggleOption(s)})}componentWillLoad(){this.initialValues=[...this.values];this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){const e=this.resolvedValues;if(this.isDisabled||!this.name||e.length===0){this.internals.setFormValue(null)}else{const s=new FormData;e.forEach((e=>s.append(this.name,e)));this.internals.setFormValue(s,JSON.stringify(e))}const s=this.required&&!this.isDisabled&&e.length===0;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.values=[...this.initialValues];this.closePopup()}formStateRestoreCallback(e){if(typeof e!=="string"){this.values=[];return}try{const s=JSON.parse(e);this.values=Array.isArray(s)?s.filter((e=>typeof e==="string")):[]}catch{this.values=[]}}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get allSections(){return a(this.options,this.sections)}get allOptions(){return h(this.allSections)}get visibleSections(){return this.searchable?u(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return h(this.visibleSections)}get resolvedValues(){const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.values.filter((s=>e.has(s))))]}get hasSelection(){return this.resolvedValues.length>0}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}toggleOption(e){if(e.isInactive||this.isLoading)return;const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.values=t;this.dsChange.emit([...t])}renderOption(e,s,t){const o=this.values.includes(e.value);const r=this.activeIndex===s;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:o,active:r,focusRingVisible:this.focusRingVisible,usesSubtext:t,leading:i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:o,presentation:true})),onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.toggleOption(e)})}render(){const e=this.isDisabled;const s=this.resolvedValues.length;const t=F[this.size];const r=I[this.size];const c=m(this.allOptions);const d=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const h={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let u=0;return i(o,{key:"840d7172a5122df24c0ddf48b7b0ad2802611926",class:{"select-host":true,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...j(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"b0ece2a357eb49968d9efa61ab6435b4d3195ba0",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder||this.error,"trigger--has-value":this.hasSelection,"wrapper--error":this.error,[`ds-control--${this.size}`]:true,...g(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"20bcd5bef5901d594eb544f557cd385f60218c0d",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:r,color:"inherit"}):i("ds-icon",{name:this.icon,size:r,color:"inherit"})),i("ds-text",{key:"166a4a0740626684ebd20e1eb81cefbfcb3d7500",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:t,color:"inherit",lineTruncation:1},`${this.placeholder}${s>0?` · ${s}`:""}`),i("span",{key:"46e495b4c838657a9e47a3bd851f1105086ac9cd",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"bb63ba4b75f0942878a69575646d500dc0e0f39f",name:"ChevronDown",size:r,color:"inherit"}))),this.open&&i("div",{key:"8c32f6b6ec75cdd5f831188a327f709aefd1d959",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:h},this.searchable&&i(n,{key:"d0f847372936c10ca340b5110d12dde74556c68f",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"5b308c429f0c2983b33ecb9ed7ce93e9aaf7a7a6",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":"true","aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:C[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,u++,c))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(l,{key:"22f94dcfa5eb220fbd4328d01b69032738fa1534",size:this.size,summary:`${s} ${this.selectedLabel}`,clearLabel:this.clearLabel,onClear:this.clearSelection})),d&&i("ds-text",{key:"69c946e5d0b715b28b9e69e640bd4dc86035d7c3",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{values:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return V()}},[66,"ds-select-multi",{options:[16],sections:[16],values:[1040],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{values:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-select-multi","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select-multi":if(!customElements.get(r(e))){customElements.define(r(e),L)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){f()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}$();const D=L;const O=$;export{D as DsSelectMulti,O as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as l}from"./p-DjbTFy2B.js";import{S as a,r as d,f as h,a as u,b as m,d as g}from"./p-DjKkSqrG.js";import{d as p}from"./p-CIiBpjCn.js";import{d as f}from"./p-8GK7B7K4.js";import{d as v}from"./p-XMZCaXs7.js";import{d as b}from"./p-C8HU4W8q.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-Cr3tEx7o.js";import{d as k}from"./p-YR1XeuZf.js";import{D as _,s as z}from"./p-BgGP65Nn.js";import{a as C,C as F}from"./p-CuwopElg.js";import{c as j}from"./p-C61yJkfr.js";const I=()=>`.sc-ds-select-multi-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select-multi-h,.ds-focus-ring.sc-ds-select-multi,.ds-focus-ring-inset.sc-ds-select-multi-h,.ds-focus-ring-inset.sc-ds-select-multi{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-multi-h:focus-visible,.ds-focus-ring.sc-ds-select-multi:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-multi-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-multi{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select-multi-h:focus-visible,.ds-focus-ring-inset.sc-ds-select-multi:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-multi-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select-multi:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-multi::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-multi-h,.ds-interaction-fill.sc-ds-select-multi{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-multi-h::before,.ds-interaction-fill.sc-ds-select-multi::before,.ds-interaction-fill.sc-ds-select-multi-h::after,.ds-interaction-fill.sc-ds-select-multi::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-multi-h::before,.ds-interaction-fill.sc-ds-select-multi::before{z-index:1}.ds-interaction-fill.sc-ds-select-multi-h::after,.ds-interaction-fill.sc-ds-select-multi::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-multi-h,.ds-interaction-fill--bordered.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-multi-h::before,.ds-interaction-fill--selected.sc-ds-select-multi::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-multi-h,.ds-interaction-fill--selected.sc-ds-select-multi{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-multi-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-multi:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-multi-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select-multi:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-multi-h>.ds-interaction-fill__content.sc-ds-select-multi,.ds-interaction-fill.sc-ds-select-multi>.ds-interaction-fill__content.sc-ds-select-multi,.ds-interaction-fill__content.sc-ds-select-multi{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-multi-h,.ds-interaction-fill--on-faint.sc-ds-select-multi{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-multi-h,.ds-interaction-fill--on-medium.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-multi-h,.ds-interaction-fill--on-bold.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-multi-h,.ds-interaction-fill--on-strong.sc-ds-select-multi{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-select-multi-h,.ds-interaction-fill--on-translucent.sc-ds-select-multi{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-multi-h,.ds-interaction-fill--on-inverted.sc-ds-select-multi{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-multi-h,.ds-interaction-fill--on-media.sc-ds-select-multi{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-multi-h,.ds-interaction-fill--on-always-dark.sc-ds-select-multi{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-multi-h,.ds-interaction-fill--on-navigation.sc-ds-select-multi{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-multi-h,.ds-control-inactive.sc-ds-select-multi{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-select-multi,.ds-control--lg.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi,.ds-control--sm.sc-ds-select-multi-h,.ds-control--sm.sc-ds-select-multi,.ds-control--xs.sc-ds-select-multi-h,.ds-control--xs.sc-ds-select-multi{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-multi-h,.ds-control--lg.sc-ds-select-multi{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-multi-h,.ds-control--md.sc-ds-select-multi{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-select-multi-h,.ds-control--sm.sc-ds-select-multi{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-select-multi-h,.ds-control--xs.sc-ds-select-multi{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-multi-h,.ds-chrome-space--sm.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-multi-h,.ds-chrome-space--md.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-multi-h,.ds-chrome-space--lg.sc-ds-select-multi{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-multi-h,.ds-chrome-row.sc-ds-select-multi,.ds-chrome-column.sc-ds-select-multi-h,.ds-chrome-column.sc-ds-select-multi,.ds-chrome-grid.sc-ds-select-multi-h,.ds-chrome-grid.sc-ds-select-multi{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-multi-h,.ds-chrome-row.sc-ds-select-multi{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-multi-h,.ds-chrome-column.sc-ds-select-multi{flex-direction:column}.ds-chrome-grid.sc-ds-select-multi-h,.ds-chrome-grid.sc-ds-select-multi{display:grid;align-items:center}.ds-control-frame.sc-ds-select-multi{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select-multi{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select-multi{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select-multi{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select-multi{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select-multi::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select-multi{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select-multi{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select-multi{opacity:0}}.ds-choice-list.sc-ds-select-multi{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select-multi{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select-multi{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select-multi{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select-multi:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select-multi{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select-multi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select-multi{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select-multi,.ds-choice-item__suffix.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select-multi,.ds-choice-loading.sc-ds-select-multi{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select-multi{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select-multi::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select-multi{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select-multi,.ds-choice-footer__clear.sc-ds-select-multi ds-text.sc-ds-select-multi{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select-multi{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select-multi:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.ds-control-frame.sc-ds-select-multi{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select-multi{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select-multi{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-multi-h,.ds-control-width--hug.sc-ds-select-multi{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-multi-h,.ds-control-width--fill.sc-ds-select-multi{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-multi-h,.ds-field-stack.sc-ds-select-multi{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select-multi{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select-multi::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select-multi:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select-multi{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select-multi:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select-multi>ds-icon.sc-ds-select-multi{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select-multi .select-search__control.sc-ds-select-multi .select-search__clear.sc-ds-select-multi{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select-multi input.sc-ds-select-multi:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select-multi input[type='search'].sc-ds-select-multi::-webkit-search-cancel-button,.select-search__control.sc-ds-select-multi input[type='search'].sc-ds-select-multi::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-multi-h,.ds-text--display-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-multi-h,.ds-text--display-small.sc-ds-select-multi{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-multi-h,.ds-text--title-large.sc-ds-select-multi{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-multi-h,.ds-text--title-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-multi-h,.ds-text--title-small.sc-ds-select-multi{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-multi-h,.ds-text--body-large.sc-ds-select-multi{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-multi-h,.ds-text--body-medium.sc-ds-select-multi{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-multi-h,.ds-text--body-small.sc-ds-select-multi{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-multi-h,.ds-text--caption.sc-ds-select-multi{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select-multi,.ds-text--display-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--display-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--display-medium.ds-text--regular.sc-ds-select-multi,.ds-text--display-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-large.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select-multi,.ds-text--title-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--title-medium.ds-text--regular.sc-ds-select-multi,.ds-text--title-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select-multi,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-large.ds-text--regular.sc-ds-select-multi,.ds-text--body-medium.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-multi-h,.ds-text--body-small.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-multi-h,.ds-text--caption.ds-text--emphasis.sc-ds-select-multi{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-multi-h,.ds-text--caption.ds-text--regular.sc-ds-select-multi{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-multi-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-multi-h,.ds-control-width--fill.sc-ds-select-multi-h .trigger.sc-ds-select-multi{width:100%}.trigger.sc-ds-select-multi{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select-multi .trigger__label.sc-ds-select-multi{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select-multi{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select-multi,.trigger__chevron.sc-ds-select-multi{position:relative;z-index:2}.trigger__prefix.sc-ds-select-multi{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select-multi{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select-multi{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select-multi{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select-multi .ds-choice-item__icon.sc-ds-select-multi{color:var(--color-foreground-primary)}.error-text.sc-ds-select-multi{width:100%}.select-host--background-medium.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-multi-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-multi-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-multi-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-multi-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-multi-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const V={lg:"lg",md:"md",sm:"sm",xs:"xs"};let S=0;const L=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.values=[];this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-multi-${++S}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValues=[];this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.values=[];this.dsChange.emit([]);this.dsClear.emit();this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new a({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){return-1},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.toggleOption(s)})}componentWillLoad(){this.initialValues=[...this.values];this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){const e=this.resolvedValues;if(this.isDisabled||!this.name||e.length===0){this.internals.setFormValue(null)}else{const s=new FormData;e.forEach((e=>s.append(this.name,e)));this.internals.setFormValue(s,JSON.stringify(e))}const s=this.required&&!this.isDisabled&&e.length===0;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.values=[...this.initialValues];this.closePopup()}formStateRestoreCallback(e){if(typeof e!=="string"){this.values=[];return}try{const s=JSON.parse(e);this.values=Array.isArray(s)?s.filter((e=>typeof e==="string")):[]}catch{this.values=[]}}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get allSections(){return d(this.options,this.sections)}get allOptions(){return h(this.allSections)}get visibleSections(){return this.searchable?u(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return h(this.visibleSections)}get resolvedValues(){const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.values.filter((s=>e.has(s))))]}get hasSelection(){return this.resolvedValues.length>0}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}toggleOption(e){if(e.isInactive||this.isLoading)return;const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.values=t;this.dsChange.emit([...t])}renderOption(e,s,t){const o=this.values.includes(e.value);const r=this.activeIndex===s;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:o,active:r,focusRingVisible:this.focusRingVisible,usesSubtext:t,leading:i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:o,presentation:true})),onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.toggleOption(e)})}render(){const e=this.isDisabled;const s=this.resolvedValues.length;const t=F[this.size];const r=V[this.size];const c=m(this.allOptions);const a=this.error&&Boolean(this.errorMessage);const d=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const h={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let u=0;return i(o,{key:"29fea714da0a13af11a21a86f9d406088af7861b",class:{"select-host":true,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...j(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"e3f4e190f09ad0b145c484b72ea51b5c03fe45fe",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder||this.error,"trigger--has-value":this.hasSelection,"wrapper--error":this.error,[`ds-control--${this.size}`]:true,...g(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":d,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"7035b68e368622d83bf033bc1c2566597c7e4eb5",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:r,color:"inherit"}):i("ds-icon",{name:this.icon,size:r,color:"inherit"})),i("ds-text",{key:"75bba4ec016f90a19c483a1f216ab856a3158f3a",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:t,color:"inherit",lineTruncation:1},`${this.placeholder}${s>0?` · ${s}`:""}`),i("span",{key:"3fd51e80df76960fd570e487ceaff555bce54317",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"910bf050389a01cea0c0ec94130caf7bea62f79c",name:"ChevronDown",size:r,color:"inherit"}))),this.open&&i("div",{key:"a65e0baa0fbff28a4c7aad9f381ad7f3e78a9768",popover:"manual",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:h},this.searchable&&i(n,{key:"984313dc55994de8541f55f4735a034506efc581",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"e702dd02885196550a0e854ed880a05758e1c281",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":"true","aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:C[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,u++,c))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(l,{key:"09dc00117dbe6bf3a36f016476086aeab06b8f39",size:this.size,summary:`${s} ${this.selectedLabel}`,clearLabel:this.clearLabel,onClear:this.clearSelection})),a&&i("ds-text",{key:"863a95ad43cc17843ec0a48a94f621754237c6b4",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{values:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return I()}},[66,"ds-select-multi",{options:[16],sections:[16],values:[1040],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{values:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-select-multi","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select-multi":if(!customElements.get(r(e))){customElements.define(r(e),L)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){f()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}$();const D=L;const O=$;export{D as DsSelectMulti,O as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-select-multi.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["selectMultiCss","ICON_SIZE","lg","md","sm","xs","selectMultiId","SelectMulti","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","sections","values","open","disabled","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","placeholder","size","width","isInactive","isLoading","activeFill","hasBorder","allowClear","clearLabel","selectedLabel","searchable","searchPlaceholder","noResultsText","loadingLabel","error","ariaLabel","activeIndex","searchTerm","formDisabled","position","x","y","positionReady","focusRingVisible","generatedId","listboxId","errorId","initialValues","controller","createController","clearSelection","event","preventDefault","stopPropagation","dsChange","emit","dsClear","focusSearchOrTrigger","handleListKeyDown","handleTriggerKeyDown","owner","SelectController","host","el","visibleOptions","isDisabled","preferredIndex","value","selectOption","option","toggleOption","componentWillLoad","syncFormValue","componentDidLoad","connect","disconnectedCallback","disconnect","resolvedValues","name","length","internals","setFormValue","data","FormData","forEach","append","JSON","stringify","missing","setRequiredValidity","optionsChanged","onLoadingChange","loadingChanged","onOpenChange","dsOpenChange","openChanged","onSearchTermChange","searchChanged","onActiveIndexChange","activeIndexChanged","formDisabledCallback","formResetCallback","closePopup","formStateRestoreCallback","state","restored","parse","Array","isArray","filter","setFocus","allSections","resolveChoiceSections","allOptions","flattenChoiceSections","visibleSections","filterChoiceSections","valid","Set","map","has","hasSelection","activeOptionId","restoreFocus","openPopup","focusVisible","edge","current","next","includes","renderOption","index","usesSubtext","selected","active","h","ChoiceOptionRow","id","leading","class","label","checked","presentation","onHover","onSelect","render","inactive","count","textVariant","CONTROL_TEXT_VARIANT","iconSize","usesOptionSubtext","choiceListUsesSubtext","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","join","popupStyle","left","top","transform","Math","round","zIndex","visibility","flatIndex","Host","key","controlWidthClass","background","ref","element","setTriggerElement","inputId","type","trigger","choiceBackgroundClassMap","role","String","ariaLabelledby","onClick","onKeyDown","icon","color","as","variant","lineTruncation","setPopupElement","style","ChoiceSearch","controls","activeDescendant","inputRef","setSearchElement","onValueChange","body","section","divider","header","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","ChoiceFooter","summary","onClear","textId"],"sources":["src/wc/components/SelectMulti/SelectMulti.css?tag=ds-select-multi&encapsulation=scoped","src/wc/components/SelectMulti/SelectMulti.tsx"],"sourcesContent":["@import '../Select/Select.css';\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n setRequiredValidity,\n type ControlWidth,\n} from '../../utils';\nimport { ChoiceFooter, ChoiceOptionRow, ChoiceSearch } from '../../utils/choice-list-parts';\nimport {\n choiceBackgroundClassMap,\n choiceListUsesSubtext,\n filterChoiceSections,\n flattenChoiceSections,\n resolveChoiceSections,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\nimport type {\n SelectBackground,\n SelectOption,\n SelectSection,\n SelectSize,\n} from '../Select/Select';\n\nexport type SelectMultiOption = Omit<SelectOption, 'icon'>;\nexport type SelectMultiSection = Omit<SelectSection, 'options'> & {\n options: SelectMultiOption[];\n};\nexport type SelectMultiBackground = SelectBackground;\nexport type SelectMultiSize = SelectSize;\nexport type SelectMultiWidth = ControlWidth;\n\nconst ICON_SIZE: Record<SelectMultiSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n lg: 'lg',\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\nlet selectMultiId = 0;\n\n@Component({\n tag: 'ds-select-multi',\n styleUrl: 'SelectMulti.css',\n scoped: true,\n formAssociated: true,\n})\nexport class SelectMulti {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Flat choices. Assign arrays through the JavaScript property. */\n @Prop() options: SelectMultiOption[] = [];\n /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n @Prop() sections: SelectMultiSection[] = [];\n /** Selected values. Assign arrays through the JavaScript property. */\n @Prop({ mutable: true }) values: string[] = [];\n /** Controlled popup visibility. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n /** Native form field name used for each repeated selected-value entry. */\n @Prop({ reflect: true }) name: string | undefined;\n /** Native disabled state. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Require at least one valid selected value. */\n @Prop({ reflect: true }) required: boolean = false;\n /** Validation message used when required is missing. */\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Persistent trigger label; selected option labels never replace it. */\n @Prop() placeholder: string = 'Select';\n /** Control density. */\n @Prop() size: SelectMultiSize = 'md';\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: SelectMultiWidth = 'hug';\n /** Shared inactive treatment; removes interaction and form submission. */\n @Prop() isInactive: boolean = false;\n /** Replace the prefix with a loader and disable option interaction. */\n @Prop() isLoading: boolean = false;\n /** Show the selected interaction fill when at least one value exists. */\n @Prop() activeFill: boolean = true;\n /** Show the surface-aware inset border. */\n @Prop() hasBorder: boolean = true;\n /** Optional trigger prefix icon name. */\n @Prop() icon: string | undefined;\n /** Show the clear-all footer action when values exist. */\n @Prop() allowClear: boolean = true;\n /** Localized clear-all action label. */\n @Prop() clearLabel: string = 'Clear';\n /** Localized noun displayed after the selected count. */\n @Prop() selectedLabel: string = 'selected';\n /** Show immediate local filtering over option labels, subtext, and section headings. */\n @Prop() searchable: boolean = false;\n /** Localized search-field placeholder and accessible name. */\n @Prop() searchPlaceholder: string = 'Search';\n /** Localized empty-filter result text. */\n @Prop() noResultsText: string = 'No results found';\n /** Accessible loading status label. */\n @Prop() loadingLabel: string = 'Loading';\n /** Actual parent surface context; omit on primary and secondary surfaces. */\n @Prop() background: SelectMultiBackground | undefined;\n /** Show invalid visual state. */\n @Prop() error: boolean = false;\n /** Error text rendered below the trigger when error is true. */\n @Prop() errorMessage: string | undefined;\n /** ID applied to the internal combobox trigger for external labels. */\n @Prop() inputId: string | undefined;\n /** Direct accessible name when no external label is available. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** IDs of elements that label the combobox. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Additional IDs that describe the combobox. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n /** Emitted after user toggles or clearing with a new values array. */\n @Event() dsChange!: EventEmitter<string[]>;\n /** Emitted after the footer clear-all action. */\n @Event() dsClear!: EventEmitter<void>;\n /** Emitted whenever popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private activeIndex = -1;\n @State() private searchTerm = '';\n @State() private formDisabled = false;\n @State() private position = { x: 0, y: 0 };\n @State() private positionReady = false;\n @State() private focusRingVisible = false;\n\n private readonly generatedId = `ds-select-multi-${++selectMultiId}`;\n private readonly listboxId = `${this.generatedId}-listbox`;\n private readonly errorId = `${this.generatedId}-error`;\n private initialValues: string[] = [];\n private readonly controller = this.createController();\n\n private createController() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- adapter getters preserve reactive component ownership without inheritance.\n const owner = this;\n return new SelectController<SelectMultiOption>({\n get host() { return owner.el; },\n generatedId: owner.generatedId,\n get options() { return owner.visibleOptions; },\n get searchable() { return owner.searchable; },\n get isLoading() { return owner.isLoading; },\n get isDisabled() { return owner.isDisabled; },\n get preferredIndex() { return -1; },\n get open() { return owner.open; },\n set open(value) { owner.open = value; },\n get activeIndex() { return owner.activeIndex; },\n set activeIndex(value) { owner.activeIndex = value; },\n get searchTerm() { return owner.searchTerm; },\n set searchTerm(value) { owner.searchTerm = value; },\n get focusRingVisible() { return owner.focusRingVisible; },\n set focusRingVisible(value) { owner.focusRingVisible = value; },\n get position() { return owner.position; },\n set position(value) { owner.position = value; },\n get positionReady() { return owner.positionReady; },\n set positionReady(value) { owner.positionReady = value; },\n selectOption: option => owner.toggleOption(option),\n });\n }\n\n componentWillLoad() {\n this.initialValues = [...this.values];\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.controller.connect();\n }\n\n disconnectedCallback() {\n this.controller.disconnect();\n }\n\n @Watch('values')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n @Watch('name')\n @Watch('options')\n @Watch('sections')\n syncFormValue() {\n const resolvedValues = this.resolvedValues;\n if (this.isDisabled || !this.name || resolvedValues.length === 0) {\n this.internals.setFormValue(null);\n } else {\n const data = new FormData();\n resolvedValues.forEach(value => data.append(this.name as string, value));\n this.internals.setFormValue(data, JSON.stringify(resolvedValues));\n }\n const missing = this.required && !this.isDisabled && resolvedValues.length === 0;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n this.controller.optionsChanged();\n }\n\n @Watch('isLoading')\n onLoadingChange() {\n this.controller.loadingChanged();\n }\n\n @Watch('open')\n onOpenChange(open: boolean) {\n this.dsOpenChange.emit(open);\n this.controller.openChanged(open);\n }\n\n @Watch('searchTerm')\n onSearchTermChange() {\n this.controller.searchChanged();\n }\n\n @Watch('activeIndex')\n onActiveIndexChange() {\n this.controller.activeIndexChanged();\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.values = [...this.initialValues];\n this.closePopup();\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state !== 'string') {\n this.values = [];\n return;\n }\n try {\n const restored = JSON.parse(state);\n this.values = Array.isArray(restored)\n ? restored.filter((value): value is string => typeof value === 'string')\n : [];\n } catch {\n this.values = [];\n }\n }\n\n @Method()\n async setFocus() {\n this.controller.setFocus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get allSections(): SelectMultiSection[] {\n return resolveChoiceSections(this.options, this.sections);\n }\n\n private get allOptions(): SelectMultiOption[] {\n return flattenChoiceSections(this.allSections);\n }\n\n private get visibleSections(): SelectMultiSection[] {\n return this.searchable\n ? filterChoiceSections(this.allSections, this.searchTerm)\n : this.allSections;\n }\n\n private get visibleOptions(): SelectMultiOption[] {\n return flattenChoiceSections(this.visibleSections);\n }\n\n private get resolvedValues(): string[] {\n const valid = new Set(this.allOptions.map(option => option.value));\n return [...new Set(this.values.filter(value => valid.has(value)))];\n }\n\n private get hasSelection(): boolean {\n return this.resolvedValues.length > 0;\n }\n\n private get activeOptionId(): string | undefined {\n return this.controller.activeOptionId;\n }\n\n private closePopup(restoreFocus = false) {\n this.controller.closePopup(restoreFocus);\n }\n\n private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n this.controller.openPopup(focusVisible, edge);\n }\n\n private toggleOption(option: SelectMultiOption) {\n if (option.isInactive || this.isLoading) return;\n const current = this.resolvedValues;\n const next = current.includes(option.value)\n ? current.filter(value => value !== option.value)\n : [...current, option.value];\n this.values = next;\n this.dsChange.emit([...next]);\n }\n\n private clearSelection = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.values = [];\n this.dsChange.emit([]);\n this.dsClear.emit();\n this.controller.focusSearchOrTrigger();\n };\n\n private readonly handleListKeyDown = this.controller.handleListKeyDown;\n private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n private renderOption(option: SelectMultiOption, index: number, usesSubtext: boolean) {\n const selected = this.values.includes(option.value);\n const active = this.activeIndex === index;\n return (\n <ChoiceOptionRow\n size={this.size}\n id={`${this.generatedId}-option-${index}`}\n option={option}\n selected={selected}\n active={active}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={usesSubtext}\n leading={(\n <span class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-checkbox\n class=\"select-option__checkbox\"\n label=\"\"\n size={this.size}\n checked={selected}\n presentation\n />\n </span>\n )}\n onHover={() => {\n this.focusRingVisible = false;\n this.activeIndex = index;\n }}\n onSelect={() => this.toggleOption(option)}\n />\n );\n }\n\n render() {\n const inactive = this.isDisabled;\n const count = this.resolvedValues.length;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n const showError = this.error && Boolean(this.errorMessage);\n const describedBy = [this.ariaDescribedby, showError ? this.errorId : undefined]\n .filter(Boolean)\n .join(' ') || undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n let flatIndex = 0;\n\n return (\n <Host\n class={{\n 'select-host': true,\n 'ds-field-stack': true,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n [`select-host--background-${this.background}`]: !!this.background,\n }}\n >\n <button\n ref={element => {\n this.controller.setTriggerElement((element as HTMLButtonElement) ?? null);\n }}\n id={this.inputId ?? this.generatedId}\n type=\"button\"\n class={{\n trigger: true,\n 'ds-control-frame': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected':\n !inactive && this.activeFill && this.hasSelection,\n 'trigger--bordered': this.hasBorder || this.error,\n 'trigger--has-value': this.hasSelection,\n 'wrapper--error': this.error,\n [`ds-control--${this.size}`]: true,\n ...choiceBackgroundClassMap(this.background),\n }}\n disabled={inactive}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={String(this.open)}\n aria-controls={this.open ? this.listboxId : undefined}\n aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required || undefined}\n aria-busy={this.isLoading ? 'true' : undefined}\n onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {(this.icon || this.isLoading) && (\n <span class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n {this.isLoading ? (\n <ds-loader size={iconSize} color=\"inherit\" />\n ) : (\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n )}\n </span>\n )}\n <ds-text\n class=\"trigger__label ds-control-label-box ds-interaction-fill__content\"\n as=\"span\"\n variant={textVariant}\n color=\"inherit\"\n lineTruncation={1}\n >\n {`${this.placeholder}${count > 0 ? ` · ${count}` : ''}`}\n </ds-text>\n <span class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n </span>\n </button>\n\n {this.open && (\n <div\n ref={element => {\n this.controller.setPopupElement((element as HTMLDivElement) ?? null);\n }}\n class=\"select-popup ds-choice-popup\"\n style={popupStyle}\n >\n {this.searchable && (\n <ChoiceSearch\n size={this.size}\n value={this.searchTerm}\n placeholder={this.searchPlaceholder}\n controls={this.listboxId}\n activeDescendant={this.activeOptionId}\n inputRef={this.controller.setSearchElement}\n clearLabel={this.clearLabel}\n onValueChange={value => {\n this.searchTerm = value;\n }}\n onKeyDown={event => this.handleListKeyDown(event)}\n />\n )}\n <div\n id={this.listboxId}\n class=\"ds-choice-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n aria-label={this.ariaLabel ?? this.placeholder}\n aria-busy={this.isLoading ? 'true' : undefined}\n >\n {this.isLoading ? (\n <div\n class=\"ds-choice-loading\"\n role=\"option\"\n aria-selected=\"false\"\n aria-disabled=\"true\"\n aria-label={this.loadingLabel}\n aria-live=\"polite\"\n >\n <ds-loader size={this.size} color=\"inherit\" />\n </div>\n ) : this.visibleOptions.length === 0 ? (\n <div\n class=\"ds-choice-empty ds-empty-region\"\n role=\"option\"\n aria-selected=\"false\"\n aria-disabled=\"true\"\n aria-label={this.noResultsText}\n aria-live=\"polite\"\n >\n <ds-empty-state body={this.noResultsText} />\n </div>\n ) : (\n this.visibleSections.map(section => (\n <div\n class={{\n 'ds-choice-section': true,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n 'ds-choice-section--divided': !!section.divider,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class={`ds-choice-section__header ds-control--${this.size}`}\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {section.options.map(option => this.renderOption(\n option,\n flatIndex++,\n usesOptionSubtext,\n ))}\n </div>\n ))\n )}\n </div>\n {this.allowClear && this.hasSelection && !this.isLoading && (\n <ChoiceFooter\n size={this.size}\n summary={`${count} ${this.selectedLabel}`}\n clearLabel={this.clearLabel}\n onClear={this.clearSelection}\n />\n )}\n </div>\n )}\n\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["selectMultiCss","ICON_SIZE","lg","md","sm","xs","selectMultiId","SelectMulti","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","sections","values","open","disabled","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","placeholder","size","width","isInactive","isLoading","activeFill","hasBorder","allowClear","clearLabel","selectedLabel","searchable","searchPlaceholder","noResultsText","loadingLabel","error","ariaLabel","activeIndex","searchTerm","formDisabled","position","x","y","positionReady","focusRingVisible","generatedId","listboxId","errorId","initialValues","controller","createController","clearSelection","event","preventDefault","stopPropagation","dsChange","emit","dsClear","focusSearchOrTrigger","handleListKeyDown","handleTriggerKeyDown","owner","SelectController","host","el","visibleOptions","isDisabled","preferredIndex","value","selectOption","option","toggleOption","componentWillLoad","syncFormValue","componentDidLoad","connect","disconnectedCallback","disconnect","resolvedValues","name","length","internals","setFormValue","data","FormData","forEach","append","JSON","stringify","missing","setRequiredValidity","optionsChanged","onLoadingChange","loadingChanged","onOpenChange","dsOpenChange","openChanged","onSearchTermChange","searchChanged","onActiveIndexChange","activeIndexChanged","formDisabledCallback","formResetCallback","closePopup","formStateRestoreCallback","state","restored","parse","Array","isArray","filter","setFocus","allSections","resolveChoiceSections","allOptions","flattenChoiceSections","visibleSections","filterChoiceSections","valid","Set","map","has","hasSelection","activeOptionId","restoreFocus","openPopup","focusVisible","edge","current","next","includes","renderOption","index","usesSubtext","selected","active","h","ChoiceOptionRow","id","leading","class","label","checked","presentation","onHover","onSelect","render","inactive","count","textVariant","CONTROL_TEXT_VARIANT","iconSize","usesOptionSubtext","choiceListUsesSubtext","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","join","popupStyle","left","top","transform","Math","round","zIndex","visibility","flatIndex","Host","key","controlWidthClass","background","ref","element","setTriggerElement","inputId","type","trigger","choiceBackgroundClassMap","role","String","ariaLabelledby","onClick","onKeyDown","icon","color","as","variant","lineTruncation","popover","setPopupElement","style","ChoiceSearch","controls","activeDescendant","inputRef","setSearchElement","onValueChange","body","section","divider","header","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","ChoiceFooter","summary","onClear","textId"],"sources":["src/wc/components/SelectMulti/SelectMulti.css?tag=ds-select-multi&encapsulation=scoped","src/wc/components/SelectMulti/SelectMulti.tsx"],"sourcesContent":["@import '../Select/Select.css';\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_SUPPORTING_TEXT_VARIANT,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n setRequiredValidity,\n type ControlWidth,\n} from '../../utils';\nimport { ChoiceFooter, ChoiceOptionRow, ChoiceSearch } from '../../utils/choice-list-parts';\nimport {\n choiceBackgroundClassMap,\n choiceListUsesSubtext,\n filterChoiceSections,\n flattenChoiceSections,\n resolveChoiceSections,\n} from '../../utils/choice-list';\nimport { SelectController } from '../../utils/select-controller';\nimport type { SelectBackground, SelectOption, SelectSection, SelectSize } from '../Select/Select';\n\nexport type SelectMultiOption = Omit<SelectOption, 'icon'>;\nexport type SelectMultiSection = Omit<SelectSection, 'options'> & {\n options: SelectMultiOption[];\n};\nexport type SelectMultiBackground = SelectBackground;\nexport type SelectMultiSize = SelectSize;\nexport type SelectMultiWidth = ControlWidth;\n\nconst ICON_SIZE: Record<SelectMultiSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n lg: 'lg',\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\nlet selectMultiId = 0;\n\n@Component({\n tag: 'ds-select-multi',\n styleUrl: 'SelectMulti.css',\n scoped: true,\n formAssociated: true,\n})\nexport class SelectMulti {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Flat choices. Assign arrays through the JavaScript property. */\n @Prop() options: SelectMultiOption[] = [];\n /** Grouped choices; takes precedence over options. Assign through JavaScript. */\n @Prop() sections: SelectMultiSection[] = [];\n /** Selected values. Assign arrays through the JavaScript property. */\n @Prop({ mutable: true }) values: string[] = [];\n /** Controlled popup visibility. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n /** Native form field name used for each repeated selected-value entry. */\n @Prop({ reflect: true }) name: string | undefined;\n /** Native disabled state. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Require at least one valid selected value. */\n @Prop({ reflect: true }) required: boolean = false;\n /** Validation message used when required is missing. */\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Persistent trigger label; selected option labels never replace it. */\n @Prop() placeholder: string = 'Select';\n /** Control density. */\n @Prop() size: SelectMultiSize = 'md';\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: SelectMultiWidth = 'hug';\n /** Shared inactive treatment; removes interaction and form submission. */\n @Prop() isInactive: boolean = false;\n /** Replace the prefix with a loader and disable option interaction. */\n @Prop() isLoading: boolean = false;\n /** Show the selected interaction fill when at least one value exists. */\n @Prop() activeFill: boolean = true;\n /** Show the surface-aware inset border. */\n @Prop() hasBorder: boolean = true;\n /** Optional trigger prefix icon name. */\n @Prop() icon: string | undefined;\n /** Show the clear-all footer action when values exist. */\n @Prop() allowClear: boolean = true;\n /** Localized clear-all action label. */\n @Prop() clearLabel: string = 'Clear';\n /** Localized noun displayed after the selected count. */\n @Prop() selectedLabel: string = 'selected';\n /** Show immediate local filtering over option labels, subtext, and section headings. */\n @Prop() searchable: boolean = false;\n /** Localized search-field placeholder and accessible name. */\n @Prop() searchPlaceholder: string = 'Search';\n /** Localized empty-filter result text. */\n @Prop() noResultsText: string = 'No results found';\n /** Accessible loading status label. */\n @Prop() loadingLabel: string = 'Loading';\n /** Actual parent surface context; omit on primary and secondary surfaces. */\n @Prop() background: SelectMultiBackground | undefined;\n /** Show invalid visual state. */\n @Prop() error: boolean = false;\n /** Error text rendered below the trigger when error is true. */\n @Prop() errorMessage: string | undefined;\n /** ID applied to the internal combobox trigger for external labels. */\n @Prop() inputId: string | undefined;\n /** Direct accessible name when no external label is available. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** IDs of elements that label the combobox. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Additional IDs that describe the combobox. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n /** Emitted after user toggles or clearing with a new values array. */\n @Event() dsChange!: EventEmitter<string[]>;\n /** Emitted after the footer clear-all action. */\n @Event() dsClear!: EventEmitter<void>;\n /** Emitted whenever popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private activeIndex = -1;\n @State() private searchTerm = '';\n @State() private formDisabled = false;\n @State() private position = { x: 0, y: 0 };\n @State() private positionReady = false;\n @State() private focusRingVisible = false;\n\n private readonly generatedId = `ds-select-multi-${++selectMultiId}`;\n private readonly listboxId = `${this.generatedId}-listbox`;\n private readonly errorId = `${this.generatedId}-error`;\n private initialValues: string[] = [];\n private readonly controller = this.createController();\n\n private createController() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- adapter getters preserve reactive component ownership without inheritance.\n const owner = this;\n return new SelectController<SelectMultiOption>({\n get host() {\n return owner.el;\n },\n generatedId: owner.generatedId,\n get options() {\n return owner.visibleOptions;\n },\n get searchable() {\n return owner.searchable;\n },\n get isLoading() {\n return owner.isLoading;\n },\n get isDisabled() {\n return owner.isDisabled;\n },\n get preferredIndex() {\n return -1;\n },\n get open() {\n return owner.open;\n },\n set open(value) {\n owner.open = value;\n },\n get activeIndex() {\n return owner.activeIndex;\n },\n set activeIndex(value) {\n owner.activeIndex = value;\n },\n get searchTerm() {\n return owner.searchTerm;\n },\n set searchTerm(value) {\n owner.searchTerm = value;\n },\n get focusRingVisible() {\n return owner.focusRingVisible;\n },\n set focusRingVisible(value) {\n owner.focusRingVisible = value;\n },\n get position() {\n return owner.position;\n },\n set position(value) {\n owner.position = value;\n },\n get positionReady() {\n return owner.positionReady;\n },\n set positionReady(value) {\n owner.positionReady = value;\n },\n selectOption: option => owner.toggleOption(option),\n });\n }\n\n componentWillLoad() {\n this.initialValues = [...this.values];\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.controller.connect();\n }\n\n disconnectedCallback() {\n this.controller.disconnect();\n }\n\n @Watch('values')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n @Watch('name')\n @Watch('options')\n @Watch('sections')\n syncFormValue() {\n const resolvedValues = this.resolvedValues;\n if (this.isDisabled || !this.name || resolvedValues.length === 0) {\n this.internals.setFormValue(null);\n } else {\n const data = new FormData();\n resolvedValues.forEach(value => data.append(this.name as string, value));\n this.internals.setFormValue(data, JSON.stringify(resolvedValues));\n }\n const missing = this.required && !this.isDisabled && resolvedValues.length === 0;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n this.controller.optionsChanged();\n }\n\n @Watch('isLoading')\n onLoadingChange() {\n this.controller.loadingChanged();\n }\n\n @Watch('open')\n onOpenChange(open: boolean) {\n this.dsOpenChange.emit(open);\n this.controller.openChanged(open);\n }\n\n @Watch('searchTerm')\n onSearchTermChange() {\n this.controller.searchChanged();\n }\n\n @Watch('activeIndex')\n onActiveIndexChange() {\n this.controller.activeIndexChanged();\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.values = [...this.initialValues];\n this.closePopup();\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state !== 'string') {\n this.values = [];\n return;\n }\n try {\n const restored = JSON.parse(state);\n this.values = Array.isArray(restored)\n ? restored.filter((value): value is string => typeof value === 'string')\n : [];\n } catch {\n this.values = [];\n }\n }\n\n @Method()\n async setFocus() {\n this.controller.setFocus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get allSections(): SelectMultiSection[] {\n return resolveChoiceSections(this.options, this.sections);\n }\n\n private get allOptions(): SelectMultiOption[] {\n return flattenChoiceSections(this.allSections);\n }\n\n private get visibleSections(): SelectMultiSection[] {\n return this.searchable\n ? filterChoiceSections(this.allSections, this.searchTerm)\n : this.allSections;\n }\n\n private get visibleOptions(): SelectMultiOption[] {\n return flattenChoiceSections(this.visibleSections);\n }\n\n private get resolvedValues(): string[] {\n const valid = new Set(this.allOptions.map(option => option.value));\n return [...new Set(this.values.filter(value => valid.has(value)))];\n }\n\n private get hasSelection(): boolean {\n return this.resolvedValues.length > 0;\n }\n\n private get activeOptionId(): string | undefined {\n return this.controller.activeOptionId;\n }\n\n private closePopup(restoreFocus = false) {\n this.controller.closePopup(restoreFocus);\n }\n\n private openPopup(focusVisible: boolean, edge?: 'first' | 'last') {\n this.controller.openPopup(focusVisible, edge);\n }\n\n private toggleOption(option: SelectMultiOption) {\n if (option.isInactive || this.isLoading) return;\n const current = this.resolvedValues;\n const next = current.includes(option.value)\n ? current.filter(value => value !== option.value)\n : [...current, option.value];\n this.values = next;\n this.dsChange.emit([...next]);\n }\n\n private clearSelection = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.values = [];\n this.dsChange.emit([]);\n this.dsClear.emit();\n this.controller.focusSearchOrTrigger();\n };\n\n private readonly handleListKeyDown = this.controller.handleListKeyDown;\n private readonly handleTriggerKeyDown = this.controller.handleTriggerKeyDown;\n\n private renderOption(option: SelectMultiOption, index: number, usesSubtext: boolean) {\n const selected = this.values.includes(option.value);\n const active = this.activeIndex === index;\n return (\n <ChoiceOptionRow\n size={this.size}\n id={`${this.generatedId}-option-${index}`}\n option={option}\n selected={selected}\n active={active}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={usesSubtext}\n leading={\n <span\n class=\"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-checkbox\n class=\"select-option__checkbox\"\n label=\"\"\n size={this.size}\n checked={selected}\n presentation\n />\n </span>\n }\n onHover={() => {\n this.focusRingVisible = false;\n this.activeIndex = index;\n }}\n onSelect={() => this.toggleOption(option)}\n />\n );\n }\n\n render() {\n const inactive = this.isDisabled;\n const count = this.resolvedValues.length;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n const usesOptionSubtext = choiceListUsesSubtext(this.allOptions);\n const showError = this.error && Boolean(this.errorMessage);\n const describedBy =\n [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n let flatIndex = 0;\n\n return (\n <Host\n class={{\n 'select-host': true,\n 'ds-field-stack': true,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n [`select-host--background-${this.background}`]: !!this.background,\n }}\n >\n <button\n ref={element => {\n this.controller.setTriggerElement((element as HTMLButtonElement) ?? null);\n }}\n id={this.inputId ?? this.generatedId}\n type=\"button\"\n class={{\n trigger: true,\n 'ds-control-frame': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': !inactive && this.activeFill && this.hasSelection,\n 'trigger--bordered': this.hasBorder || this.error,\n 'trigger--has-value': this.hasSelection,\n 'wrapper--error': this.error,\n [`ds-control--${this.size}`]: true,\n ...choiceBackgroundClassMap(this.background),\n }}\n disabled={inactive}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={String(this.open)}\n aria-controls={this.open ? this.listboxId : undefined}\n aria-activedescendant={this.open && !this.searchable ? this.activeOptionId : undefined}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required || undefined}\n aria-busy={this.isLoading ? 'true' : undefined}\n onClick={() => (this.open ? this.closePopup() : this.openPopup(false))}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {(this.icon || this.isLoading) && (\n <span\n class=\"trigger__prefix ds-control-icon-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n {this.isLoading ? (\n <ds-loader size={iconSize} color=\"inherit\" />\n ) : (\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n )}\n </span>\n )}\n <ds-text\n class=\"trigger__label ds-control-label-box ds-interaction-fill__content\"\n as=\"span\"\n variant={textVariant}\n color=\"inherit\"\n lineTruncation={1}\n >\n {`${this.placeholder}${count > 0 ? ` · ${count}` : ''}`}\n </ds-text>\n <span\n class=\"trigger__chevron ds-control-icon-box ds-interaction-fill__content\"\n aria-hidden=\"true\"\n >\n <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n </span>\n </button>\n\n {this.open && (\n <div\n popover=\"manual\"\n ref={element => {\n this.controller.setPopupElement((element as HTMLDivElement) ?? null);\n }}\n class=\"select-popup ds-choice-popup\"\n style={popupStyle}\n >\n {this.searchable && (\n <ChoiceSearch\n size={this.size}\n value={this.searchTerm}\n placeholder={this.searchPlaceholder}\n controls={this.listboxId}\n activeDescendant={this.activeOptionId}\n inputRef={this.controller.setSearchElement}\n clearLabel={this.clearLabel}\n onValueChange={value => {\n this.searchTerm = value;\n }}\n onKeyDown={event => this.handleListKeyDown(event)}\n />\n )}\n <div\n id={this.listboxId}\n class=\"ds-choice-list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n aria-label={this.ariaLabel ?? this.placeholder}\n aria-busy={this.isLoading ? 'true' : undefined}\n >\n {this.isLoading ? (\n <div\n class=\"ds-choice-loading\"\n role=\"option\"\n aria-selected=\"false\"\n aria-disabled=\"true\"\n aria-label={this.loadingLabel}\n aria-live=\"polite\"\n >\n <ds-loader size={this.size} color=\"inherit\" />\n </div>\n ) : this.visibleOptions.length === 0 ? (\n <div\n class=\"ds-choice-empty ds-empty-region\"\n role=\"option\"\n aria-selected=\"false\"\n aria-disabled=\"true\"\n aria-label={this.noResultsText}\n aria-live=\"polite\"\n >\n <ds-empty-state body={this.noResultsText} />\n </div>\n ) : (\n this.visibleSections.map(section => (\n <div\n class={{\n 'ds-choice-section': true,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n 'ds-choice-section--divided': !!section.divider,\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <ds-text\n class={`ds-choice-section__header ds-control--${this.size}`}\n as=\"span\"\n variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n emphasis\n color=\"primary\"\n aria-hidden=\"true\"\n >\n {section.header}\n </ds-text>\n )}\n {section.options.map(option =>\n this.renderOption(option, flatIndex++, usesOptionSubtext)\n )}\n </div>\n ))\n )}\n </div>\n {this.allowClear && this.hasSelection && !this.isLoading && (\n <ChoiceFooter\n size={this.size}\n summary={`${count} ${this.selectedLabel}`}\n clearLabel={this.clearLabel}\n onClear={this.clearSelection}\n />\n )}\n </div>\n )}\n\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|