@ds-mo/ui 9.2.0 → 9.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -79
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +17 -1
- package/dist/angular/ds-avatar.d.ts +1 -1
- package/dist/angular/ds-avatar.js +3 -3
- package/dist/angular/ds-conversation-list-item.d.ts +1 -1
- package/dist/angular/ds-conversation-list-item.js +3 -3
- package/dist/angular/ds-menu.d.ts +6 -1
- package/dist/angular/ds-menu.js +5 -2
- package/dist/angular/ds-panel-nav.d.ts +1 -1
- package/dist/angular/ds-panel-nav.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +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-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +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-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-legend.js +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-section.js.map +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-icon.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-composer.js.map +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-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +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-panel-tools.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +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-tag.js.map +1 -1
- package/dist/components/{p-Di-ThR90.js → p-BHpWYKtP.js} +2 -2
- package/dist/components/p-BHpWYKtP.js.map +1 -0
- package/dist/components/p-BRfOCc_h.js +2 -0
- package/dist/components/p-BRfOCc_h.js.map +1 -0
- package/dist/components/{p-BEQB8EnB.js → p-CBYuvZKM.js} +2 -2
- package/dist/components/{p-BFWC17em.js → p-CJlgONwR.js} +2 -2
- package/dist/components/p-CWNdl52Y.js +2 -0
- package/dist/components/p-CWNdl52Y.js.map +1 -0
- package/dist/components/{p-BZAEZENv.js → p-CblAABEo.js} +2 -2
- package/dist/components/{p--KbMQblZ.js → p-CeFBA7Dx.js} +2 -2
- package/dist/components/p-CiKGqsA2.js +2 -0
- package/dist/components/{p-CnM9SW_8.js.map → p-CiKGqsA2.js.map} +1 -1
- package/dist/components/{p-2br9YDbG.js → p-Ci_nVk5P.js} +2 -2
- package/dist/components/p-Cijzn3YQ.js +2 -0
- package/dist/components/p-Cijzn3YQ.js.map +1 -0
- package/dist/components/p-DFxqk71w.js +2 -0
- package/dist/components/p-DFxqk71w.js.map +1 -0
- package/dist/components/{p-C0sq948W.js → p-DaQ0ZE_V.js} +2 -2
- package/dist/components/{p-t9Ei1kHP.js → p-DiooIO2B.js} +2 -2
- package/dist/components/{p-DIsDiGcp.js → p-Dj5MejHv.js} +2 -2
- package/dist/components/p-Dj5MejHv.js.map +1 -0
- package/dist/components/{p-Bo5wikia.js → p-DnMCRAwx.js} +2 -2
- package/dist/components/{p-CZMEhdlA.js → p-Dst-OliP.js} +2 -2
- package/dist/components/p-Dst-OliP.js.map +1 -0
- package/dist/components/p-T0Mzhv3-.js +2 -0
- package/dist/components/p-T0Mzhv3-.js.map +1 -0
- package/dist/components/{p-Bx1G7P6W.js → p-kezp2_Xu.js} +2 -2
- package/dist/components/{p-Di4HBckb.js → p-xB0GPG3-.js} +2 -2
- package/dist/docs/components.json +291 -11
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/avatar.json +19 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +2 -2
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +20 -2
- 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/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +17 -1
- 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 +2 -2
- package/dist/mcp-data/registry/message.json +2 -2
- package/dist/mcp-data/registry/panel-nav.json +20 -2
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/registry.json +16 -0
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/react/ds-menu.d.ts +1 -0
- package/dist/react/ds-menu.js +1 -0
- package/dist/types/components/Avatar/Avatar.d.ts +3 -0
- package/dist/types/components/BarNav/BarNav.d.ts +2 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -0
- package/dist/types/components/ConversationListItem/ConversationListItem.d.ts +2 -0
- package/dist/types/components/Menu/Menu.d.ts +6 -0
- package/dist/types/components/MessageScroller/MessageScroller.d.ts +4 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +2 -0
- package/dist/types/components.d.ts +44 -6
- package/package.json +8 -11
- package/dist/components/p-41UAx2eq.js +0 -2
- package/dist/components/p-41UAx2eq.js.map +0 -1
- package/dist/components/p-B7NbIYjS.js +0 -2
- package/dist/components/p-B7NbIYjS.js.map +0 -1
- package/dist/components/p-CC1C8s6m.js +0 -2
- package/dist/components/p-CC1C8s6m.js.map +0 -1
- package/dist/components/p-CZMEhdlA.js.map +0 -1
- package/dist/components/p-CnM9SW_8.js +0 -2
- package/dist/components/p-CuKn9I5f.js +0 -2
- package/dist/components/p-CuKn9I5f.js.map +0 -1
- package/dist/components/p-DFMM60My.js +0 -2
- package/dist/components/p-DFMM60My.js.map +0 -1
- package/dist/components/p-DIsDiGcp.js.map +0 -1
- package/dist/components/p-Di-ThR90.js.map +0 -1
- /package/dist/components/{p-BEQB8EnB.js.map → p-CBYuvZKM.js.map} +0 -0
- /package/dist/components/{p-BFWC17em.js.map → p-CJlgONwR.js.map} +0 -0
- /package/dist/components/{p-BZAEZENv.js.map → p-CblAABEo.js.map} +0 -0
- /package/dist/components/{p--KbMQblZ.js.map → p-CeFBA7Dx.js.map} +0 -0
- /package/dist/components/{p-2br9YDbG.js.map → p-Ci_nVk5P.js.map} +0 -0
- /package/dist/components/{p-C0sq948W.js.map → p-DaQ0ZE_V.js.map} +0 -0
- /package/dist/components/{p-t9Ei1kHP.js.map → p-DiooIO2B.js.map} +0 -0
- /package/dist/components/{p-Bo5wikia.js.map → p-DnMCRAwx.js.map} +0 -0
- /package/dist/components/{p-Bx1G7P6W.js.map → p-kezp2_Xu.js.map} +0 -0
- /package/dist/components/{p-Di4HBckb.js.map → p-xB0GPG3-.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{c as n,a as c,r as a}from"./p-l6PmnW_P.js";import{a as d,C as l,b as h}from"./p-CKaJx0IX.js";import{e as g,r as p,f,a as u,m as v,b as m,c as b,d as y,g as x}from"./p-BhC1YyId.js";import{d as w}from"./p-CiwdnKKp.js";import{d as k}from"./p-CZMEhdlA.js";import{d as _}from"./p-BFWC17em.js";import{d as z}from"./p-BEQB8EnB.js";import{d as C}from"./p-Cpr3K41-.js";import{d as F}from"./p-BSOZXagj.js";import{r as A}from"./p-BWUTr_XN.js";import{a as j}from"./p-BHtg1fh3.js";import{C as I}from"./p-Cx-ywr1e.js";import{T as L}from"./p-drBA73M_.js";import{c as E}from"./p-DuFm-ieS.js";const O=()=>`.sc-ds-select-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-h:focus-visible,.ds-focus-ring.sc-ds-select: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-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{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-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select: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-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::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-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--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-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-h,.ds-interaction-fill--on-translucent.sc-ds-select{--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-h,.ds-interaction-fill--on-inverted.sc-ds-select{--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-h,.ds-interaction-fill--on-media.sc-ds-select{--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-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-h,.ds-interaction-fill--on-navigation.sc-ds-select{--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-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--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-control-radius:var(--dimension-radius-025)}.ds-choice-popup.sc-ds-select{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;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::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{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{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{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{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select: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{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select,.ds-choice-item__subtext.sc-ds-select,ds-text.ds-choice-item__subtext.sc-ds-select{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{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,.ds-choice-loading.sc-ds-select{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::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{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{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{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:pointer}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::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:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{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:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select>.select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{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 input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{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-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);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-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-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-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-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-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-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-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-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={md:"md",sm:"sm",xs:"xs"};let q=0;const P=8;const T=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.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage="This field is required.";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.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-${++q}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.initialValue="";this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.repositionHandler=null;this.positionRetryRaf=null;this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value="";this.dsChange.emit("");this.dsClear.emit();const s=g(this.visibleOptions);this.activeIndex=s[0]??-1;requestAnimationFrame((()=>this.searchable?this.searchEl?.focus():this.triggerEl?.focus()))};this.handleTriggerKeyDown=e=>{if(!this.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey){e.preventDefault();this.openPopup(true);if(this.searchable){this.searchTerm=e.key}else{this.handleTypeahead(e.key)}}return}this.handleListKeyDown(e)}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}syncFormValue(){const e=this.isDisabled;const s=this.hasSelection?this.value:"";this.internals.setFormValue(e?null:s);const t=this.required&&!e&&!s;this.internals.setValidity(t?{valueMissing:true}:{},t?this.requiredMessage:"");if(this.open){const e=g(this.visibleOptions);if(!e.includes(this.activeIndex))this.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}}onLoadingChange(){if(this.open)requestAnimationFrame((()=>this.updatePosition()))}onOpenChange(e){this.dsOpenChange.emit(e);if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.searchable)this.searchEl?.focus()}))}else{this.cancelPositionRetry();this.unbindPopupListeners();this.searchTerm="";this.positionReady=false}}onSearchTermChange(){const e=g(this.visibleOptions);this.activeIndex=e[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}onActiveIndexChange(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.initialValue;this.closePopup()}formStateRestoreCallback(e){this.value=typeof e==="string"?e:""}async setFocus(){this.triggerEl?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get allSections(){return p(this.options,this.sections)}get allOptions(){return f(this.allSections)}get visibleSections(){return this.searchable?u(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return f(this.visibleSections)}get selectedOption(){return this.allOptions.find((e=>e.value===this.value))}get hasSelection(){return Boolean(this.selectedOption)}get activeOptionId(){return!this.isLoading&&this.activeIndex>=0?`${this.generatedId}-option-${this.activeIndex}`:undefined}scrollActiveOptionIntoView(){if(!this.open||!this.activeOptionId)return;this.el.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{const s=e.target;if(this.el.contains(s))return;this.closePopup()};this.repositionHandler=()=>this.updatePosition();document.addEventListener("mousedown",this.outsideHandler,true);window.addEventListener("scroll",this.repositionHandler,true);window.addEventListener("resize",this.repositionHandler)}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}if(this.repositionHandler){window.removeEventListener("scroll",this.repositionHandler,true);window.removeEventListener("resize",this.repositionHandler);this.repositionHandler=null}}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=P;const t=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.updatePosition()){e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(t)}};this.positionRetryRaf=requestAnimationFrame(t)}updatePosition(){if(!this.open||!this.triggerEl||!this.popupEl||!this.popupEl.isConnected||!this.el.contains(this.popupEl))return false;const e=A(L.space050,L.space050);this.popupEl.style.minWidth=`${n(this.triggerEl.offsetWidth,e)}px`;this.position=c({anchorRect:this.triggerEl.getBoundingClientRect(),popupWidth:this.popupEl.offsetWidth,popupHeight:this.popupEl.offsetHeight,side:"bottom",align:"start",sideOffsetPx:e,alignOffsetPx:a({align:"start",alignOffsetPx:0,sectionInsetPx:e}),viewportPadPx:e,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});this.positionReady=true;return true}openPopup(e,s){if(this.isDisabled||!this.allOptions.length&&!this.isLoading)return;const t=g(this.visibleOptions);const i=this.visibleOptions.findIndex((e=>e.value===this.value&&!e.isInactive));this.activeIndex=s==="last"?t[t.length-1]??-1:i>=0?i:t[0]??-1;this.focusRingVisible=e;this.open=true}closePopup(e=false){if(!this.open)return;this.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}selectOption(e){if(e.isInactive||this.isLoading)return;this.value=e.value;this.dsChange.emit(this.value);this.closePopup(true)}moveActive(e){this.activeIndex=v(this.visibleOptions,this.activeIndex,e)}setActiveEdge(e){const s=g(this.visibleOptions);this.activeIndex=e==="first"?s[0]??-1:s[s.length-1]??-1}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=m(this.visibleOptions,this.typeahead,this.activeIndex);if(i>=0)this.activeIndex=i;const r=j(L.animationDurationMedium1,L.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),r)}handleListKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault();this.focusRingVisible=true;this.moveActive(1);break;case"ArrowUp":e.preventDefault();this.focusRingVisible=true;this.moveActive(-1);break;case"Home":e.preventDefault();this.focusRingVisible=true;this.setActiveEdge("first");break;case"End":e.preventDefault();this.focusRingVisible=true;this.setActiveEdge("last");break;case"Enter":case" ":{if(e.key===" "&&this.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.visibleOptions[this.activeIndex];if(s)this.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.searchable&&e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey){this.handleTypeahead(e.key)}}}renderOption(e,s,t,r){const o=e.value===this.value;const n=s===this.activeIndex;return i(d,{id:`${this.generatedId}-option-${s}`,option:e,selected:o,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:r,leading:t&&e.icon?i("span",{class:"ds-choice-item__icon ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:"md",color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=s?this.placeholder:this.selectedOption?.label;const o=I[this.size];const n=V[this.size];const c=b(this.allOptions);const a=y(this.allOptions);const d=this.error&&Boolean(this.errorMessage);const g=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const p={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 f=0;return i(r,{key:"43b1873c3f48a431f8c0c3ab5bd23eece864a1f5",class:{"select-host":true,"ds-control-inactive":e,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...E(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"f9d174464f4ffc5bdc74508aa079f19e9dae3ff5",ref:e=>{this.triggerEl=e??null},id:this.inputId??this.generatedId,type:"button",class:{trigger: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--placeholder":s,"trigger--has-value":this.hasSelection,"wrapper--error":this.error,[`ds-control--${this.size}`]:true,...x(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":g,"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:"317d03416089ffa63143502a654c7407b41f48a0",class:"trigger__prefix ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:n,color:"inherit"}):i("ds-icon",{name:this.icon,size:n,color:"inherit"})),i("ds-text",{key:"817b6ecc7cd71fc1fec6bc3c8cdfefa39127ea51",class:"trigger__label ds-interaction-fill__content",as:"span",variant:o,color:"inherit",lineTruncation:1},t),i("span",{key:"54f0ddeae3f35f257f68ce84827b8c0f83a1a83c",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"c2b169a65850e7ee23a8a27bce826a5b55a0a8cd",name:"ChevronDown",size:n,color:"inherit"}))),this.open&&i("div",{key:"6a74a0e38d0fd7e1ec64acbc83175839bd251aa0",ref:e=>{this.popupEl=e??null},class:"select-popup ds-choice-popup",style:p},this.searchable&&i(l,{key:"6a715bd8467c1f1a86f935507b9354cf6066e16f",value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:e=>{this.searchEl=e},clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"6db0790ffbe4e8b06ea464765eaa228078e720a4",id:this.listboxId,class:"ds-choice-list",role:"listbox","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:"md",color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty",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-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--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,f++,c,a))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(h,{key:"d6ce7f6bb9f98ba98abf4e1fe735e2e259a6c9d6",clearLabel:this.clearLabel,onClear:this.clearSelection})),d&&i("ds-text",{key:"6c03e753c5400f9cd80e0fba2596f79abb355367",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{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return O()}},[66,"ds-select",{options:[16],sections:[16],value:[1025],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"],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,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{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","ds-badge","ds-button-unfilled","ds-empty-state","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),T)}break;case"ds-badge":if(!customElements.get(o(e))){w()}break;case"ds-button-unfilled":if(!customElements.get(o(e))){k()}break;case"ds-empty-state":if(!customElements.get(o(e))){_()}break;case"ds-icon":if(!customElements.get(o(e))){z()}break;case"ds-loader":if(!customElements.get(o(e))){C()}break;case"ds-text":if(!customElements.get(o(e))){F()}break}}))}$();const S=T;const B=$;export{S as DsSelect,B as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{c as n,a as c,r as a}from"./p-l6PmnW_P.js";import{a as d,C as l,b as h}from"./p-CKaJx0IX.js";import{e as g,r as p,f,a as u,m as v,b as m,c as b,d as y,g as x}from"./p-BhC1YyId.js";import{d as w}from"./p-CiwdnKKp.js";import{d as k}from"./p-Dst-OliP.js";import{d as _}from"./p-CJlgONwR.js";import{d as z}from"./p-CBYuvZKM.js";import{d as C}from"./p-Cpr3K41-.js";import{d as F}from"./p-BSOZXagj.js";import{r as A}from"./p-BWUTr_XN.js";import{a as j}from"./p-BHtg1fh3.js";import{C as I}from"./p-Cx-ywr1e.js";import{T as O}from"./p-drBA73M_.js";import{c as L}from"./p-DuFm-ieS.js";const P=()=>`.sc-ds-select-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-h:focus-visible,.ds-focus-ring.sc-ds-select: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-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{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-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select: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-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::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-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--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-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-h,.ds-interaction-fill--on-translucent.sc-ds-select{--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-h,.ds-interaction-fill--on-inverted.sc-ds-select{--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-h,.ds-interaction-fill--on-media.sc-ds-select{--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-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-h,.ds-interaction-fill--on-navigation.sc-ds-select{--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-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--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-control-radius:var(--dimension-radius-025)}.ds-choice-popup.sc-ds-select{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;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::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{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{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{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{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select: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{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select,.ds-choice-item__subtext.sc-ds-select,ds-text.ds-choice-item__subtext.sc-ds-select{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{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,.ds-choice-loading.sc-ds-select{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::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{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{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{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:pointer}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::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:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{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:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select>.select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{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 input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{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-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);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-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:flex-start;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-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-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-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-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-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-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-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={md:"md",sm:"sm",xs:"xs"};let q=0;const T=8;const $=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.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage="This field is required.";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.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-${++q}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.initialValue="";this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.repositionHandler=null;this.positionRetryRaf=null;this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value="";this.dsChange.emit("");this.dsClear.emit();const s=g(this.visibleOptions);this.activeIndex=s[0]??-1;requestAnimationFrame((()=>this.searchable?this.searchEl?.focus():this.triggerEl?.focus()))};this.handleTriggerKeyDown=e=>{if(!this.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey){e.preventDefault();this.openPopup(true);if(this.searchable){this.searchTerm=e.key}else{this.handleTypeahead(e.key)}}return}this.handleListKeyDown(e)}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}syncFormValue(){const e=this.isDisabled;const s=this.hasSelection?this.value:"";this.internals.setFormValue(e?null:s);const t=this.required&&!e&&!s;this.internals.setValidity(t?{valueMissing:true}:{},t?this.requiredMessage:"");if(this.open){const e=g(this.visibleOptions);if(!e.includes(this.activeIndex))this.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}}onLoadingChange(){if(this.open)requestAnimationFrame((()=>this.updatePosition()))}onOpenChange(e){this.dsOpenChange.emit(e);if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.searchable)this.searchEl?.focus()}))}else{this.cancelPositionRetry();this.unbindPopupListeners();this.searchTerm="";this.positionReady=false}}onSearchTermChange(){const e=g(this.visibleOptions);this.activeIndex=e[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}onActiveIndexChange(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.initialValue;this.closePopup()}formStateRestoreCallback(e){this.value=typeof e==="string"?e:""}async setFocus(){this.triggerEl?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get allSections(){return p(this.options,this.sections)}get allOptions(){return f(this.allSections)}get visibleSections(){return this.searchable?u(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return f(this.visibleSections)}get selectedOption(){return this.allOptions.find((e=>e.value===this.value))}get hasSelection(){return Boolean(this.selectedOption)}get activeOptionId(){return!this.isLoading&&this.activeIndex>=0?`${this.generatedId}-option-${this.activeIndex}`:undefined}scrollActiveOptionIntoView(){if(!this.open||!this.activeOptionId)return;this.el.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{const s=e.target;if(this.el.contains(s))return;this.closePopup()};this.repositionHandler=()=>this.updatePosition();document.addEventListener("mousedown",this.outsideHandler,true);window.addEventListener("scroll",this.repositionHandler,true);window.addEventListener("resize",this.repositionHandler)}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}if(this.repositionHandler){window.removeEventListener("scroll",this.repositionHandler,true);window.removeEventListener("resize",this.repositionHandler);this.repositionHandler=null}}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=T;const t=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.updatePosition()){e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(t)}};this.positionRetryRaf=requestAnimationFrame(t)}updatePosition(){if(!this.open||!this.triggerEl||!this.popupEl||!this.popupEl.isConnected||!this.el.contains(this.popupEl))return false;const e=A(O.space050,O.space050);this.popupEl.style.minWidth=`${n(this.triggerEl.offsetWidth,e)}px`;this.position=c({anchorRect:this.triggerEl.getBoundingClientRect(),popupWidth:this.popupEl.offsetWidth,popupHeight:this.popupEl.offsetHeight,side:"bottom",align:"start",sideOffsetPx:e,alignOffsetPx:a({align:"start",alignOffsetPx:0,sectionInsetPx:e}),viewportPadPx:e,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});this.positionReady=true;return true}openPopup(e,s){if(this.isDisabled||!this.allOptions.length&&!this.isLoading)return;const t=g(this.visibleOptions);const i=this.visibleOptions.findIndex((e=>e.value===this.value&&!e.isInactive));this.activeIndex=s==="last"?t[t.length-1]??-1:i>=0?i:t[0]??-1;this.focusRingVisible=e;this.open=true}closePopup(e=false){if(!this.open)return;this.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}selectOption(e){if(e.isInactive||this.isLoading)return;this.value=e.value;this.dsChange.emit(this.value);this.closePopup(true)}moveActive(e){this.activeIndex=v(this.visibleOptions,this.activeIndex,e)}setActiveEdge(e){const s=g(this.visibleOptions);this.activeIndex=e==="first"?s[0]??-1:s[s.length-1]??-1}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=m(this.visibleOptions,this.typeahead,this.activeIndex);if(i>=0)this.activeIndex=i;const r=j(O.animationDurationMedium1,O.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),r)}handleListKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault();this.focusRingVisible=true;this.moveActive(1);break;case"ArrowUp":e.preventDefault();this.focusRingVisible=true;this.moveActive(-1);break;case"Home":e.preventDefault();this.focusRingVisible=true;this.setActiveEdge("first");break;case"End":e.preventDefault();this.focusRingVisible=true;this.setActiveEdge("last");break;case"Enter":case" ":{if(e.key===" "&&this.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.visibleOptions[this.activeIndex];if(s)this.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.searchable&&e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey){this.handleTypeahead(e.key)}}}renderOption(e,s,t,r){const o=e.value===this.value;const n=s===this.activeIndex;return i(d,{id:`${this.generatedId}-option-${s}`,option:e,selected:o,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:r,leading:t&&e.icon?i("span",{class:"ds-choice-item__icon ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:"md",color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=s?this.placeholder:this.selectedOption?.label;const o=I[this.size];const n=V[this.size];const c=b(this.allOptions);const a=y(this.allOptions);const d=this.error&&Boolean(this.errorMessage);const g=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const p={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 f=0;return i(r,{key:"43b1873c3f48a431f8c0c3ab5bd23eece864a1f5",class:{"select-host":true,"ds-control-inactive":e,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...L(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"f9d174464f4ffc5bdc74508aa079f19e9dae3ff5",ref:e=>{this.triggerEl=e??null},id:this.inputId??this.generatedId,type:"button",class:{trigger: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--placeholder":s,"trigger--has-value":this.hasSelection,"wrapper--error":this.error,[`ds-control--${this.size}`]:true,...x(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":g,"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:"317d03416089ffa63143502a654c7407b41f48a0",class:"trigger__prefix ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:n,color:"inherit"}):i("ds-icon",{name:this.icon,size:n,color:"inherit"})),i("ds-text",{key:"817b6ecc7cd71fc1fec6bc3c8cdfefa39127ea51",class:"trigger__label ds-interaction-fill__content",as:"span",variant:o,color:"inherit",lineTruncation:1},t),i("span",{key:"54f0ddeae3f35f257f68ce84827b8c0f83a1a83c",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"c2b169a65850e7ee23a8a27bce826a5b55a0a8cd",name:"ChevronDown",size:n,color:"inherit"}))),this.open&&i("div",{key:"6a74a0e38d0fd7e1ec64acbc83175839bd251aa0",ref:e=>{this.popupEl=e??null},class:"select-popup ds-choice-popup",style:p},this.searchable&&i(l,{key:"6a715bd8467c1f1a86f935507b9354cf6066e16f",value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:e=>{this.searchEl=e},clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"6db0790ffbe4e8b06ea464765eaa228078e720a4",id:this.listboxId,class:"ds-choice-list",role:"listbox","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:"md",color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty",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-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--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,f++,c,a))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(h,{key:"d6ce7f6bb9f98ba98abf4e1fe735e2e259a6c9d6",clearLabel:this.clearLabel,onClear:this.clearSelection})),d&&i("ds-text",{key:"6c03e753c5400f9cd80e0fba2596f79abb355367",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{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return P()}},[66,"ds-select",{options:[16],sections:[16],value:[1025],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"],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,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-badge","ds-button-unfilled","ds-empty-state","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),$)}break;case"ds-badge":if(!customElements.get(o(e))){w()}break;case"ds-button-unfilled":if(!customElements.get(o(e))){k()}break;case"ds-empty-state":if(!customElements.get(o(e))){_()}break;case"ds-icon":if(!customElements.get(o(e))){z()}break;case"ds-loader":if(!customElements.get(o(e))){C()}break;case"ds-text":if(!customElements.get(o(e))){F()}break}}))}D();const E=$;const S=D;export{E as DsSelect,S as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-select.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as t,c as i,h as e,a as r,t as d}from"./index.js";import{d as a}from"./p-BSOZXagj.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-015);--ds-slider-thumb-stroke:var(--dimension-stroke-width-018);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);display:flex;flex-direction:column;box-sizing:border-box;gap:var(--dimension-space-050);width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075);--ds-slider-track-stroke:var(--dimension-stroke-width-012)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050);--ds-slider-track-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:pointer;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-foreground-tertiary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );width:calc( ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:inset 0 0 0 var(--ds-slider-thumb-stroke) var(--color-border-bold-brand);pointer-events:none;transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );height:calc( ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}`;let l=0;let h=0;const o=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.dsCommit=i(this,"dsCommit");this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++l}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,t)=>{const i=s.target;this.activeThumbIndex=t;if(this.readOnly||this.isDisabled){i.value=String(this.resolvedValues[t]);return}this.setValueAt(t,Number(i.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const t=s.relatedTarget;if(t instanceof Node&&this.el.contains(t))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const t=this.el.querySelectorAll(".slider__input");t[Math.min(this.activeThumbIndex,t.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const t=this.valueFromPointer(s);const i=this.closestThumbIndex(t,s.target);this.activeThumbIndex=i;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(i,t);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[i]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isDisabled||!this.name){this.internals.setFormValue(null);return}if(this.isRange){const t=new FormData;s.forEach((s=>t.append(this.name,String(s))));this.internals.setFormValue(t,JSON.stringify(s))}else{this.internals.setFormValue(String(s[0]),String(s[0]))}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(typeof s!=="string")return;if(this.isRange){try{const t=JSON.parse(s);if(Array.isArray(t))this.value=t.map(Number).slice(0,2)}catch{this.value=this.cloneValue(this.initialValue)}}else{const t=Number(s);if(Number.isFinite(t))this.value=t}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const t=this.el.querySelectorAll(".slider__input");t[Math.max(0,Math.min(s,t.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const t=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const i=this.value;let e=this.snap(Number(i[0]??s));let r=this.snap(Number(i[1]??t));if(e>r)[e,r]=[r,e];const d=Math.min(this.minimumGap,t-s);if(r-e<d){r=Math.min(t,this.snap(e+d));e=Math.max(s,this.snap(r-d))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,t){if(Array.isArray(s)&&Array.isArray(t)){return s.length===t.length&&s.every(((s,i)=>s===t[i]))}return!Array.isArray(s)&&!Array.isArray(t)&&s===t}decimalPlaces(s){const t=String(s).toLowerCase();if(t.includes("e-"))return Number(t.split("e-")[1])||0;return t.includes(".")?t.split(".")[1].length:0}snap(s){const t=this.safeMin;const i=this.safeMax;const e=Number.isFinite(s)?s:t;const r=t+Math.round((e-t)/this.safeStep)*this.safeStep;const d=Math.min(10,Math.max(this.decimalPlaces(t),this.decimalPlaces(i),this.decimalPlaces(this.safeStep)));return Number(Math.min(i,Math.max(t,r)).toFixed(d))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,t=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,t[0]+this.minimumGap):this.safeMin}allowedMax(s,t=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,t[1]-this.minimumGap):this.safeMax}setValueAt(s,t){const i=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(t)));e[s]=r;const d=this.isRange?[...e]:e[0];if(this.valuesEqual(i,d))return false;this.value=d;this.dsChange.emit(this.cloneValue(d));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++h}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,t){const i=this.valueTexts[t]??this.valueText;if(i)return i;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,t){if(this.valueTexts[t]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,t)}return undefined}pointerPercent(s){const t=this.controlEl;if(!t)return 0;const i=t.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const d=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-d*2);return Math.min(1,Math.max(0,(i.bottom-d-s.clientY)/t))}const a=Math.max(1,i.width-d*2);const n=(s.clientX-i.left-d)/a;return Math.min(1,Math.max(0,n))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,i){const e=i instanceof t?i.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const d=Math.abs(s-r[0]);const a=Math.abs(s-r[1]);if(d===a)return s>=r[0]?1:0;return d<a?0:1}endPointerInteraction(s,t){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!t&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,t){const i=t===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=t===0?this.startLabel:this.endLabel;const d=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const a=this.isRange?r:d?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":t===this.activeThumbIndex},"data-index":String(t),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:i,min:this.allowedMin(t),max:this.allowedMax(t),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":a,"aria-labelledby":d,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,t),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,t),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(t),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const t=s[0];const i=s[s.length-1];const d=this.inputId??`${this.generatedId}-input`;const a=!this.valuesEqual(this.publicValue,this.initialValue);const n=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"a5d67eb1e9b9b6b6c47f458dd9cf72fccc81c281","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":a?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"5362fedbed6280e8af79da2fa40f563991057c92",class:"slider__label-row"},this.label&&e("ds-text",{key:"34130fbc67aa1338edfb75c67fa6d2d11cbba87e",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:d,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"84de6c107a1c231ca7cc0d02318958d650e4b229",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},n)),e("div",{key:"461f6764f2eaddecdb06b60525c06e569f0d846c",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(t):0),"--ds-slider-end-pct":String(this.percent(i))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"31d451320bf8d4f10ab0974da6d2353ab132afbf",class:"slider__rail","aria-hidden":"true"},e("div",{key:"79b47e46205b68d42f60a75d4365192bc821da38",class:"slider__indicator"})),s.map(((s,t)=>this.renderThumb(s,t)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(d(s))){customElements.define(d(s),o)}break;case"ds-text":if(!customElements.get(d(s))){a()}break}}))}c();const u=o;const m=c;export{u as DsSlider,m as defineCustomElement};
|
|
1
|
+
import{p as s,H as t,c as i,h as e,a as r,t as d}from"./index.js";import{d as a}from"./p-BSOZXagj.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-012);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);display:flex;flex-direction:column;box-sizing:border-box;gap:var(--dimension-space-050);width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:pointer;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );width:calc( ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);pointer-events:none;transition:background-color var(--effect-motion-short-2), box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc( var(--ds-slider-thumb-size) / 2 + (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)) );height:calc( ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) * (100% - var(--ds-slider-thumb-size)) )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}`;let l=0;let h=0;const o=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.dsCommit=i(this,"dsCommit");this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++l}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,t)=>{const i=s.target;this.activeThumbIndex=t;if(this.readOnly||this.isDisabled){i.value=String(this.resolvedValues[t]);return}this.setValueAt(t,Number(i.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const t=s.relatedTarget;if(t instanceof Node&&this.el.contains(t))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const t=this.el.querySelectorAll(".slider__input");t[Math.min(this.activeThumbIndex,t.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const t=this.valueFromPointer(s);const i=this.closestThumbIndex(t,s.target);this.activeThumbIndex=i;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(i,t);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[i]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isDisabled||!this.name){this.internals.setFormValue(null);return}if(this.isRange){const t=new FormData;s.forEach((s=>t.append(this.name,String(s))));this.internals.setFormValue(t,JSON.stringify(s))}else{this.internals.setFormValue(String(s[0]),String(s[0]))}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(typeof s!=="string")return;if(this.isRange){try{const t=JSON.parse(s);if(Array.isArray(t))this.value=t.map(Number).slice(0,2)}catch{this.value=this.cloneValue(this.initialValue)}}else{const t=Number(s);if(Number.isFinite(t))this.value=t}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const t=this.el.querySelectorAll(".slider__input");t[Math.max(0,Math.min(s,t.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const t=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const i=this.value;let e=this.snap(Number(i[0]??s));let r=this.snap(Number(i[1]??t));if(e>r)[e,r]=[r,e];const d=Math.min(this.minimumGap,t-s);if(r-e<d){r=Math.min(t,this.snap(e+d));e=Math.max(s,this.snap(r-d))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,t){if(Array.isArray(s)&&Array.isArray(t)){return s.length===t.length&&s.every(((s,i)=>s===t[i]))}return!Array.isArray(s)&&!Array.isArray(t)&&s===t}decimalPlaces(s){const t=String(s).toLowerCase();if(t.includes("e-"))return Number(t.split("e-")[1])||0;return t.includes(".")?t.split(".")[1].length:0}snap(s){const t=this.safeMin;const i=this.safeMax;const e=Number.isFinite(s)?s:t;const r=t+Math.round((e-t)/this.safeStep)*this.safeStep;const d=Math.min(10,Math.max(this.decimalPlaces(t),this.decimalPlaces(i),this.decimalPlaces(this.safeStep)));return Number(Math.min(i,Math.max(t,r)).toFixed(d))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,t=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,t[0]+this.minimumGap):this.safeMin}allowedMax(s,t=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,t[1]-this.minimumGap):this.safeMax}setValueAt(s,t){const i=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(t)));e[s]=r;const d=this.isRange?[...e]:e[0];if(this.valuesEqual(i,d))return false;this.value=d;this.dsChange.emit(this.cloneValue(d));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++h}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,t){const i=this.valueTexts[t]??this.valueText;if(i)return i;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,t){if(this.valueTexts[t]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,t)}return undefined}pointerPercent(s){const t=this.controlEl;if(!t)return 0;const i=t.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const d=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-d*2);return Math.min(1,Math.max(0,(i.bottom-d-s.clientY)/t))}const a=Math.max(1,i.width-d*2);const n=(s.clientX-i.left-d)/a;return Math.min(1,Math.max(0,n))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,i){const e=i instanceof t?i.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const d=Math.abs(s-r[0]);const a=Math.abs(s-r[1]);if(d===a)return s>=r[0]?1:0;return d<a?0:1}endPointerInteraction(s,t){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!t&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,t){const i=t===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=t===0?this.startLabel:this.endLabel;const d=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const a=this.isRange?r:d?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":t===this.activeThumbIndex},"data-index":String(t),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:i,min:this.allowedMin(t),max:this.allowedMax(t),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":a,"aria-labelledby":d,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,t),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,t),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(t),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const t=s[0];const i=s[s.length-1];const d=this.inputId??`${this.generatedId}-input`;const a=!this.valuesEqual(this.publicValue,this.initialValue);const n=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"a5d67eb1e9b9b6b6c47f458dd9cf72fccc81c281","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":a?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"5362fedbed6280e8af79da2fa40f563991057c92",class:"slider__label-row"},this.label&&e("ds-text",{key:"34130fbc67aa1338edfb75c67fa6d2d11cbba87e",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:d,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"84de6c107a1c231ca7cc0d02318958d650e4b229",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},n)),e("div",{key:"461f6764f2eaddecdb06b60525c06e569f0d846c",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(t):0),"--ds-slider-end-pct":String(this.percent(i))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"31d451320bf8d4f10ab0974da6d2353ab132afbf",class:"slider__rail","aria-hidden":"true"},e("div",{key:"79b47e46205b68d42f60a75d4365192bc821da38",class:"slider__indicator"})),s.map(((s,t)=>this.renderThumb(s,t)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(d(s))){customElements.define(d(s),o)}break;case"ds-text":if(!customElements.get(d(s))){a()}break}}))}c();const u=o;const m=c;export{u as DsSlider,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","name","internals","setFormValue","isRange","data","FormData","forEach","append","JSON","stringify","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restored","parse","Array","isArray","map","slice","isFinite","setFocus","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n --ds-slider-control-size: var(--dimension-size-400);\n --ds-slider-thumb-size: var(--dimension-size-200);\n --ds-slider-track-size: var(--dimension-size-100);\n --ds-slider-track-stroke: var(--dimension-stroke-width-015);\n --ds-slider-thumb-stroke: var(--dimension-stroke-width-018);\n --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n gap: var(--dimension-space-050);\n width: 100%;\n color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n --ds-slider-control-size: var(--dimension-size-300);\n --ds-slider-thumb-size: var(--dimension-size-150);\n --ds-slider-track-size: var(--dimension-size-075);\n --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.slider--xs) {\n --ds-slider-control-size: var(--dimension-size-200);\n --ds-slider-thumb-size: var(--dimension-size-100);\n --ds-slider-track-size: var(--dimension-size-050);\n --ds-slider-track-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n:host(.slider--vertical) {\n width: fit-content;\n min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.slider__label {\n min-width: 0;\n}\n\n.slider__value {\n flex-shrink: 0;\n}\n\n.slider__control {\n position: relative;\n width: 100%;\n height: var(--ds-slider-control-size);\n border-radius: var(--dimension-radius-half);\n cursor: pointer;\n touch-action: none;\n user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n align-self: center;\n width: var(--ds-slider-control-size);\n height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n cursor: not-allowed;\n}\n\n.slider__rail {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n height: var(--ds-slider-track-size);\n overflow: hidden;\n border-radius: var(--dimension-radius-025);\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-foreground-tertiary);\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n right: calc(var(--ds-slider-thumb-size) / 2);\n left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n border-radius: inherit;\n background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n left: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n width: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n left: calc(var(--ds-slider-start-pct, 0) * 1%);\n width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n position: absolute;\n top: 50%;\n left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n width: var(--ds-slider-thumb-size);\n height: var(--ds-slider-thumb-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.slider__thumb--active {\n z-index: 2;\n}\n\n.slider__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n opacity: 0;\n appearance: none;\n pointer-events: none;\n z-index: 2;\n}\n\n.slider__thumb-visual {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n overflow: visible;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: inset 0 0 0 var(--ds-slider-thumb-stroke) var(--color-border-bold-brand);\n pointer-events: none;\n transition:\n background-color var(--effect-motion-short-2),\n box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb--active .slider__thumb-wash {\n background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n top: 0;\n right: auto;\n bottom: 0;\n left: 50%;\n width: var(--ds-slider-track-size);\n height: auto;\n transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n top: calc(var(--ds-slider-thumb-size) / 2);\n bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n bottom: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n height: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n top: auto;\n bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n left: 50%;\n transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .slider__thumb-visual,\n .slider__thumb-wash {\n transition: none;\n }\n}\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';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Slider {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n @Prop({ mutable: true }) value: SliderValue = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n /** Minimum number of steps kept between two range thumbs. */\n @Prop() minStepsBetweenValues: number = 0;\n /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n @Prop() label: string | undefined;\n /** Show the formatted current value beside the visible label. */\n @Prop() showValue: boolean = true;\n @Prop() size: SliderSize = 'md';\n @Prop() orientation: SliderOrientation = 'horizontal';\n /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keep the value focusable and submittable while preventing changes. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop() isInactive: boolean = false;\n /** Direct accessible name for a single-thumb slider without a visible label. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Id references for a visible single-thumb slider label. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Id references for supporting guidance or error text. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n /** Accessible label for the lower thumb in a range slider. */\n @Prop() startLabel: string = 'Minimum value';\n /** Accessible label for the upper thumb in a range slider. */\n @Prop() endLabel: string = 'Maximum value';\n /** Human-readable value text for a single slider or both range thumbs. */\n @Prop() valueText: string | undefined;\n /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n @Prop() valueTexts: string[] = [];\n /** Locale used by Intl.NumberFormat for the visible value. */\n @Prop() locale: string | undefined;\n /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n @Prop() valuePrefix: string = '';\n @Prop() valueSuffix: string = '';\n @Prop() rangeSeparator: string = '–';\n /** Id applied to the first native range input. */\n @Prop() inputId: string | undefined;\n\n /** Emitted continuously while the value changes. */\n @Event() dsChange!: EventEmitter<SliderValue>;\n /** Emitted when a pointer or keyboard value change is committed. */\n @Event() dsCommit!: EventEmitter<SliderValue>;\n\n @State() private formDisabled = false;\n @State() private dragging = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private activeThumbIndex = 0;\n @State() private externalLabelledby: string | undefined;\n\n private readonly generatedId = `ds-slider-${++sliderId}`;\n private readonly labelId = `${this.generatedId}-label`;\n private initialValue: SliderValue = 0;\n private lastCommittedValue: SliderValue = 0;\n private pointerId: number | null = null;\n private pointerStartValue: SliderValue = 0;\n private controlEl: HTMLDivElement | null = null;\n\n componentWillLoad() {\n this.initialValue = this.cloneValue(this.publicValue);\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n @Watch('minStepsBetweenValues')\n @Watch('name')\n @Watch('disabled')\n @Watch('isInactive')\n syncFormValue() {\n const values = this.resolvedValues;\n if (this.isDisabled || !this.name) {\n this.internals.setFormValue(null);\n return;\n }\n\n if (this.isRange) {\n const data = new FormData();\n values.forEach(value => data.append(this.name as string, String(value)));\n this.internals.setFormValue(data, JSON.stringify(values));\n } else {\n this.internals.setFormValue(String(values[0]), String(values[0]));\n }\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.cloneValue(this.initialValue);\n this.lastCommittedValue = this.cloneValue(this.initialValue);\n this.dragging = false;\n this.focused = false;\n this.touched = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state !== 'string') return;\n if (this.isRange) {\n try {\n const restored = JSON.parse(state);\n if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n } catch {\n this.value = this.cloneValue(this.initialValue);\n }\n } else {\n const restored = Number(state);\n if (Number.isFinite(restored)) this.value = restored;\n }\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n }\n\n @Method()\n async setFocus(index: number = 0) {\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get isRange(): boolean {\n return Array.isArray(this.value);\n }\n\n private get safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n }\n\n private get safeMin(): number {\n return Number.isFinite(this.min) ? this.min : 0;\n }\n\n private get safeMax(): number {\n const minimum = this.safeMin;\n return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n }\n\n private get minimumGap(): number {\n const steps = Number.isFinite(this.minStepsBetweenValues)\n ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n : 0;\n return steps * this.safeStep;\n }\n\n private get resolvedValues(): number[] {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n if (!this.isRange) return [this.snap(Number(this.value))];\n\n const raw = this.value as number[];\n let lower = this.snap(Number(raw[0] ?? minimum));\n let upper = this.snap(Number(raw[1] ?? maximum));\n if (lower > upper) [lower, upper] = [upper, lower];\n\n const gap = Math.min(this.minimumGap, maximum - minimum);\n if (upper - lower < gap) {\n upper = Math.min(maximum, this.snap(lower + gap));\n lower = Math.max(minimum, this.snap(upper - gap));\n }\n return [lower, upper];\n }\n\n private get publicValue(): SliderValue {\n const values = this.resolvedValues;\n return this.isRange ? [...values] : values[0];\n }\n\n private cloneValue(value: SliderValue): SliderValue {\n return Array.isArray(value) ? [...value] : value;\n }\n\n private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((value, index) => value === b[index]);\n }\n return !Array.isArray(a) && !Array.isArray(b) && a === b;\n }\n\n private decimalPlaces(value: number): number {\n const text = String(value).toLowerCase();\n if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n return text.includes('.') ? text.split('.')[1].length : 0;\n }\n\n private snap(value: number): number {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n const candidate = Number.isFinite(value) ? value : minimum;\n const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n const precision = Math.min(10, Math.max(\n this.decimalPlaces(minimum),\n this.decimalPlaces(maximum),\n this.decimalPlaces(this.safeStep),\n ));\n return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n }\n\n private percent(value: number): number {\n return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n }\n\n private allowedMin(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 1\n ? Math.min(this.safeMax, values[0] + this.minimumGap)\n : this.safeMin;\n }\n\n private allowedMax(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 0\n ? Math.max(this.safeMin, values[1] - this.minimumGap)\n : this.safeMax;\n }\n\n private setValueAt(index: number, next: number): boolean {\n const previous = this.publicValue;\n const values = this.resolvedValues;\n const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n values[index] = constrained;\n const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n if (this.valuesEqual(previous, nextValue)) return false;\n\n this.value = nextValue;\n this.dsChange.emit(this.cloneValue(nextValue));\n return true;\n }\n\n private commitIfChanged() {\n const current = this.publicValue;\n if (this.valuesEqual(current, this.lastCommittedValue)) return;\n this.lastCommittedValue = this.cloneValue(current);\n this.dsCommit.emit(this.cloneValue(current));\n }\n\n private syncNativeLabels() {\n if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n return label.id;\n });\n if (ids.length) this.externalLabelledby = ids.join(' ');\n }\n\n private formattedValue(value: number, index: number): string {\n const authored = this.valueTexts[index] ?? this.valueText;\n if (authored) return authored;\n let number: string;\n try {\n number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n } catch {\n number = String(value);\n }\n return `${this.valuePrefix}${number}${this.valueSuffix}`;\n }\n\n private ariaValueText(value: number, index: number): string | undefined {\n if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n return this.formattedValue(value, index);\n }\n return undefined;\n }\n\n private handleNativeInput = (event: Event, index: number) => {\n const input = event.target as HTMLInputElement;\n this.activeThumbIndex = index;\n if (this.readOnly || this.isDisabled) {\n input.value = String(this.resolvedValues[index]);\n return;\n }\n this.setValueAt(index, Number(input.value));\n };\n\n private handleNativeChange = () => {\n if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (!this.readOnly) return;\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n event.preventDefault();\n }\n };\n\n private handleFocus = (index: number) => {\n this.activeThumbIndex = index;\n this.focused = true;\n };\n\n private handleBlur = (event: FocusEvent) => {\n const next = event.relatedTarget;\n if (next instanceof Node && this.el.contains(next)) return;\n this.focused = false;\n this.touched = true;\n };\n\n private handleHostClick = (event: MouseEvent) => {\n if (event.target !== this.el || this.isDisabled) return;\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n };\n\n private pointerPercent(event: PointerEvent): number {\n const control = this.controlEl;\n if (!control) return 0;\n const rect = control.getBoundingClientRect();\n const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n const thumbSize = thumb\n ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n : 0;\n // Both alignment modes keep the complete thumb inside the control. Edge\n // alignment lets the rail span the control while center alignment insets\n // the rail to the same thumb-center travel.\n const inset = thumbSize / 2;\n\n if (this.orientation === 'vertical') {\n const travel = Math.max(1, rect.height - inset * 2);\n return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n }\n\n const travel = Math.max(1, rect.width - inset * 2);\n const percent = (event.clientX - rect.left - inset) / travel;\n return Math.min(1, Math.max(0, percent));\n }\n\n private valueFromPointer(event: PointerEvent): number {\n return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n }\n\n private closestThumbIndex(value: number, target: EventTarget | null): number {\n const targetElement = target instanceof HTMLElement\n ? target.closest<HTMLElement>('.slider__thumb')\n : null;\n if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n if (!this.isRange) return 0;\n\n const values = this.resolvedValues;\n const lowerDistance = Math.abs(value - values[0]);\n const upperDistance = Math.abs(value - values[1]);\n if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n return lowerDistance < upperDistance ? 0 : 1;\n }\n\n private handlePointerDown = (event: PointerEvent) => {\n if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n event.preventDefault();\n const value = this.valueFromPointer(event);\n const index = this.closestThumbIndex(value, event.target);\n this.activeThumbIndex = index;\n this.pointerId = event.pointerId;\n this.pointerStartValue = this.cloneValue(this.publicValue);\n this.dragging = true;\n this.setValueAt(index, value);\n this.controlEl?.setPointerCapture(event.pointerId);\n requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (this.pointerId !== event.pointerId || !this.dragging) return;\n event.preventDefault();\n this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n };\n\n private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n if (this.pointerId !== event.pointerId) return;\n if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n this.pointerId = null;\n this.dragging = false;\n this.touched = true;\n if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n }\n\n private renderThumb(value: number, index: number) {\n const inputId = index === 0\n ? this.inputId ?? `${this.generatedId}-input`\n : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n const labelledby = this.isRange\n ? undefined\n : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n return (\n <div\n class={{\n slider__thumb: true,\n 'slider__thumb--active': index === this.activeThumbIndex,\n }}\n data-index={String(index)}\n style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n >\n <input\n class=\"slider__input\"\n type=\"range\"\n id={inputId}\n min={this.allowedMin(index)}\n max={this.allowedMax(index)}\n step={this.safeStep}\n value={value}\n disabled={this.isDisabled}\n aria-label={directLabel}\n aria-labelledby={labelledby}\n aria-describedby={this.ariaDescribedby}\n aria-valuetext={this.ariaValueText(value, index)}\n aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n onInput={(event: Event) => this.handleNativeInput(event, index)}\n onChange={this.handleNativeChange}\n onKeyDown={this.handleKeyDown}\n onFocus={() => this.handleFocus(index)}\n onBlur={this.handleBlur}\n />\n <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n </div>\n );\n }\n\n render() {\n const values = this.resolvedValues;\n const first = values[0];\n const last = values[values.length - 1];\n const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n return (\n <Host\n aria-disabled={this.isDisabled ? 'true' : undefined}\n class={{\n slider: true,\n [`slider--${this.size}`]: true,\n [`slider--${this.orientation}`]: true,\n [`slider--thumb-${this.thumbAlignment}`]: true,\n 'slider--range': this.isRange,\n 'slider--readonly': this.readOnly,\n 'ds-control-inactive': this.isDisabled,\n }}\n data-orientation={this.orientation}\n data-disabled={this.isDisabled ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-dragging={this.dragging ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-filled=\"\"\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n data-valid={!this.isDisabled ? '' : undefined}\n onClick={this.handleHostClick}\n >\n {(this.label || this.showValue) && (\n <div class=\"slider__label-row\">\n {this.label && (\n <ds-text\n class=\"slider__label\"\n as=\"label\"\n variant=\"text-body-small\"\n color=\"primary\"\n emphasis\n for={firstInputId}\n textId={this.labelId}\n >\n {this.label}\n </ds-text>\n )}\n {this.showValue && (\n <ds-text\n class=\"slider__value\"\n as=\"span\"\n variant=\"text-body-small\"\n color=\"primary\"\n fontFeature=\"tabular-nums\"\n >\n {valueDisplay}\n </ds-text>\n )}\n </div>\n )}\n <div\n class=\"slider__control\"\n ref={element => { this.controlEl = element ?? null; }}\n style={{\n '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n '--ds-slider-end-pct': String(this.percent(last)),\n } as Record<string, string>}\n onPointerDown={this.handlePointerDown}\n onPointerMove={this.handlePointerMove}\n onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n >\n <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n {values.map((value, index) => this.renderThumb(value, index))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","name","internals","setFormValue","isRange","data","FormData","forEach","append","JSON","stringify","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restored","parse","Array","isArray","map","slice","isFinite","setFocus","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n --ds-slider-control-size: var(--dimension-size-400);\n --ds-slider-thumb-size: var(--dimension-size-200);\n --ds-slider-track-size: var(--dimension-size-100);\n --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n gap: var(--dimension-space-050);\n width: 100%;\n color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n --ds-slider-control-size: var(--dimension-size-300);\n --ds-slider-thumb-size: var(--dimension-size-150);\n --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n --ds-slider-control-size: var(--dimension-size-200);\n --ds-slider-thumb-size: var(--dimension-size-100);\n --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n width: fit-content;\n min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n min-width: 0;\n}\n\n.slider__label {\n min-width: 0;\n}\n\n.slider__value {\n flex-shrink: 0;\n}\n\n.slider__control {\n position: relative;\n width: 100%;\n height: var(--ds-slider-control-size);\n border-radius: var(--dimension-radius-half);\n cursor: pointer;\n touch-action: none;\n user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n align-self: center;\n width: var(--ds-slider-control-size);\n height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n cursor: not-allowed;\n}\n\n.slider__rail {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n height: var(--ds-slider-track-size);\n overflow: hidden;\n border-radius: var(--dimension-radius-025);\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n right: calc(var(--ds-slider-thumb-size) / 2);\n left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n border-radius: inherit;\n background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n left: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n width: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n left: calc(var(--ds-slider-start-pct, 0) * 1%);\n width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n position: absolute;\n top: 50%;\n left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n width: var(--ds-slider-thumb-size);\n height: var(--ds-slider-thumb-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.slider__thumb--active {\n z-index: 2;\n}\n\n.slider__input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n opacity: 0;\n appearance: none;\n pointer-events: none;\n z-index: 2;\n}\n\n.slider__thumb-visual {\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n overflow: visible;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n pointer-events: none;\n transition:\n background-color var(--effect-motion-short-2),\n box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n .slider__thumb--active .slider__thumb-wash {\n background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n top: 0;\n right: auto;\n bottom: 0;\n left: 50%;\n width: var(--ds-slider-track-size);\n height: auto;\n transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n top: calc(var(--ds-slider-thumb-size) / 2);\n bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n bottom: calc(\n var(--ds-slider-thumb-size) / 2 +\n (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n );\n height: calc(\n ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n (100% - var(--ds-slider-thumb-size))\n );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n top: auto;\n bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n left: 50%;\n transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .slider__thumb-visual,\n .slider__thumb-wash {\n transition: none;\n }\n}\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';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Slider {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n @Prop({ mutable: true }) value: SliderValue = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n /** Minimum number of steps kept between two range thumbs. */\n @Prop() minStepsBetweenValues: number = 0;\n /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n @Prop() label: string | undefined;\n /** Show the formatted current value beside the visible label. */\n @Prop() showValue: boolean = true;\n @Prop() size: SliderSize = 'md';\n @Prop() orientation: SliderOrientation = 'horizontal';\n /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keep the value focusable and submittable while preventing changes. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop() isInactive: boolean = false;\n /** Direct accessible name for a single-thumb slider without a visible label. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Id references for a visible single-thumb slider label. */\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n /** Id references for supporting guidance or error text. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n /** Accessible label for the lower thumb in a range slider. */\n @Prop() startLabel: string = 'Minimum value';\n /** Accessible label for the upper thumb in a range slider. */\n @Prop() endLabel: string = 'Maximum value';\n /** Human-readable value text for a single slider or both range thumbs. */\n @Prop() valueText: string | undefined;\n /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n @Prop() valueTexts: string[] = [];\n /** Locale used by Intl.NumberFormat for the visible value. */\n @Prop() locale: string | undefined;\n /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n @Prop() valuePrefix: string = '';\n @Prop() valueSuffix: string = '';\n @Prop() rangeSeparator: string = '–';\n /** Id applied to the first native range input. */\n @Prop() inputId: string | undefined;\n\n /** Emitted continuously while the value changes. */\n @Event() dsChange!: EventEmitter<SliderValue>;\n /** Emitted when a pointer or keyboard value change is committed. */\n @Event() dsCommit!: EventEmitter<SliderValue>;\n\n @State() private formDisabled = false;\n @State() private dragging = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private activeThumbIndex = 0;\n @State() private externalLabelledby: string | undefined;\n\n private readonly generatedId = `ds-slider-${++sliderId}`;\n private readonly labelId = `${this.generatedId}-label`;\n private initialValue: SliderValue = 0;\n private lastCommittedValue: SliderValue = 0;\n private pointerId: number | null = null;\n private pointerStartValue: SliderValue = 0;\n private controlEl: HTMLDivElement | null = null;\n\n componentWillLoad() {\n this.initialValue = this.cloneValue(this.publicValue);\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n this.syncFormValue();\n }\n\n componentDidLoad() {\n this.syncNativeLabels();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n @Watch('minStepsBetweenValues')\n @Watch('name')\n @Watch('disabled')\n @Watch('isInactive')\n syncFormValue() {\n const values = this.resolvedValues;\n if (this.isDisabled || !this.name) {\n this.internals.setFormValue(null);\n return;\n }\n\n if (this.isRange) {\n const data = new FormData();\n values.forEach(value => data.append(this.name as string, String(value)));\n this.internals.setFormValue(data, JSON.stringify(values));\n } else {\n this.internals.setFormValue(String(values[0]), String(values[0]));\n }\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.cloneValue(this.initialValue);\n this.lastCommittedValue = this.cloneValue(this.initialValue);\n this.dragging = false;\n this.focused = false;\n this.touched = false;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state !== 'string') return;\n if (this.isRange) {\n try {\n const restored = JSON.parse(state);\n if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n } catch {\n this.value = this.cloneValue(this.initialValue);\n }\n } else {\n const restored = Number(state);\n if (Number.isFinite(restored)) this.value = restored;\n }\n this.lastCommittedValue = this.cloneValue(this.publicValue);\n }\n\n @Method()\n async setFocus(index: number = 0) {\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.isInactive || this.formDisabled;\n }\n\n private get isRange(): boolean {\n return Array.isArray(this.value);\n }\n\n private get safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n }\n\n private get safeMin(): number {\n return Number.isFinite(this.min) ? this.min : 0;\n }\n\n private get safeMax(): number {\n const minimum = this.safeMin;\n return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n }\n\n private get minimumGap(): number {\n const steps = Number.isFinite(this.minStepsBetweenValues)\n ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n : 0;\n return steps * this.safeStep;\n }\n\n private get resolvedValues(): number[] {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n if (!this.isRange) return [this.snap(Number(this.value))];\n\n const raw = this.value as number[];\n let lower = this.snap(Number(raw[0] ?? minimum));\n let upper = this.snap(Number(raw[1] ?? maximum));\n if (lower > upper) [lower, upper] = [upper, lower];\n\n const gap = Math.min(this.minimumGap, maximum - minimum);\n if (upper - lower < gap) {\n upper = Math.min(maximum, this.snap(lower + gap));\n lower = Math.max(minimum, this.snap(upper - gap));\n }\n return [lower, upper];\n }\n\n private get publicValue(): SliderValue {\n const values = this.resolvedValues;\n return this.isRange ? [...values] : values[0];\n }\n\n private cloneValue(value: SliderValue): SliderValue {\n return Array.isArray(value) ? [...value] : value;\n }\n\n private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n if (Array.isArray(a) && Array.isArray(b)) {\n return a.length === b.length && a.every((value, index) => value === b[index]);\n }\n return !Array.isArray(a) && !Array.isArray(b) && a === b;\n }\n\n private decimalPlaces(value: number): number {\n const text = String(value).toLowerCase();\n if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n return text.includes('.') ? text.split('.')[1].length : 0;\n }\n\n private snap(value: number): number {\n const minimum = this.safeMin;\n const maximum = this.safeMax;\n const candidate = Number.isFinite(value) ? value : minimum;\n const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n const precision = Math.min(10, Math.max(\n this.decimalPlaces(minimum),\n this.decimalPlaces(maximum),\n this.decimalPlaces(this.safeStep),\n ));\n return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n }\n\n private percent(value: number): number {\n return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n }\n\n private allowedMin(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 1\n ? Math.min(this.safeMax, values[0] + this.minimumGap)\n : this.safeMin;\n }\n\n private allowedMax(index: number, values = this.resolvedValues): number {\n return this.isRange && index === 0\n ? Math.max(this.safeMin, values[1] - this.minimumGap)\n : this.safeMax;\n }\n\n private setValueAt(index: number, next: number): boolean {\n const previous = this.publicValue;\n const values = this.resolvedValues;\n const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n values[index] = constrained;\n const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n if (this.valuesEqual(previous, nextValue)) return false;\n\n this.value = nextValue;\n this.dsChange.emit(this.cloneValue(nextValue));\n return true;\n }\n\n private commitIfChanged() {\n const current = this.publicValue;\n if (this.valuesEqual(current, this.lastCommittedValue)) return;\n this.lastCommittedValue = this.cloneValue(current);\n this.dsCommit.emit(this.cloneValue(current));\n }\n\n private syncNativeLabels() {\n if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n return label.id;\n });\n if (ids.length) this.externalLabelledby = ids.join(' ');\n }\n\n private formattedValue(value: number, index: number): string {\n const authored = this.valueTexts[index] ?? this.valueText;\n if (authored) return authored;\n let number: string;\n try {\n number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n } catch {\n number = String(value);\n }\n return `${this.valuePrefix}${number}${this.valueSuffix}`;\n }\n\n private ariaValueText(value: number, index: number): string | undefined {\n if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n return this.formattedValue(value, index);\n }\n return undefined;\n }\n\n private handleNativeInput = (event: Event, index: number) => {\n const input = event.target as HTMLInputElement;\n this.activeThumbIndex = index;\n if (this.readOnly || this.isDisabled) {\n input.value = String(this.resolvedValues[index]);\n return;\n }\n this.setValueAt(index, Number(input.value));\n };\n\n private handleNativeChange = () => {\n if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (!this.readOnly) return;\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n event.preventDefault();\n }\n };\n\n private handleFocus = (index: number) => {\n this.activeThumbIndex = index;\n this.focused = true;\n };\n\n private handleBlur = (event: FocusEvent) => {\n const next = event.relatedTarget;\n if (next instanceof Node && this.el.contains(next)) return;\n this.focused = false;\n this.touched = true;\n };\n\n private handleHostClick = (event: MouseEvent) => {\n if (event.target !== this.el || this.isDisabled) return;\n const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n };\n\n private pointerPercent(event: PointerEvent): number {\n const control = this.controlEl;\n if (!control) return 0;\n const rect = control.getBoundingClientRect();\n const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n const thumbSize = thumb\n ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n : 0;\n // Both alignment modes keep the complete thumb inside the control. Edge\n // alignment lets the rail span the control while center alignment insets\n // the rail to the same thumb-center travel.\n const inset = thumbSize / 2;\n\n if (this.orientation === 'vertical') {\n const travel = Math.max(1, rect.height - inset * 2);\n return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n }\n\n const travel = Math.max(1, rect.width - inset * 2);\n const percent = (event.clientX - rect.left - inset) / travel;\n return Math.min(1, Math.max(0, percent));\n }\n\n private valueFromPointer(event: PointerEvent): number {\n return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n }\n\n private closestThumbIndex(value: number, target: EventTarget | null): number {\n const targetElement = target instanceof HTMLElement\n ? target.closest<HTMLElement>('.slider__thumb')\n : null;\n if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n if (!this.isRange) return 0;\n\n const values = this.resolvedValues;\n const lowerDistance = Math.abs(value - values[0]);\n const upperDistance = Math.abs(value - values[1]);\n if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n return lowerDistance < upperDistance ? 0 : 1;\n }\n\n private handlePointerDown = (event: PointerEvent) => {\n if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n event.preventDefault();\n const value = this.valueFromPointer(event);\n const index = this.closestThumbIndex(value, event.target);\n this.activeThumbIndex = index;\n this.pointerId = event.pointerId;\n this.pointerStartValue = this.cloneValue(this.publicValue);\n this.dragging = true;\n this.setValueAt(index, value);\n this.controlEl?.setPointerCapture(event.pointerId);\n requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n };\n\n private handlePointerMove = (event: PointerEvent) => {\n if (this.pointerId !== event.pointerId || !this.dragging) return;\n event.preventDefault();\n this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n };\n\n private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n if (this.pointerId !== event.pointerId) return;\n if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n this.pointerId = null;\n this.dragging = false;\n this.touched = true;\n if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n }\n\n private renderThumb(value: number, index: number) {\n const inputId = index === 0\n ? this.inputId ?? `${this.generatedId}-input`\n : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n const labelledby = this.isRange\n ? undefined\n : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n return (\n <div\n class={{\n slider__thumb: true,\n 'slider__thumb--active': index === this.activeThumbIndex,\n }}\n data-index={String(index)}\n style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n >\n <input\n class=\"slider__input\"\n type=\"range\"\n id={inputId}\n min={this.allowedMin(index)}\n max={this.allowedMax(index)}\n step={this.safeStep}\n value={value}\n disabled={this.isDisabled}\n aria-label={directLabel}\n aria-labelledby={labelledby}\n aria-describedby={this.ariaDescribedby}\n aria-valuetext={this.ariaValueText(value, index)}\n aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n aria-readonly={this.readOnly ? 'true' : undefined}\n onInput={(event: Event) => this.handleNativeInput(event, index)}\n onChange={this.handleNativeChange}\n onKeyDown={this.handleKeyDown}\n onFocus={() => this.handleFocus(index)}\n onBlur={this.handleBlur}\n />\n <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n </div>\n );\n }\n\n render() {\n const values = this.resolvedValues;\n const first = values[0];\n const last = values[values.length - 1];\n const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n return (\n <Host\n aria-disabled={this.isDisabled ? 'true' : undefined}\n class={{\n slider: true,\n [`slider--${this.size}`]: true,\n [`slider--${this.orientation}`]: true,\n [`slider--thumb-${this.thumbAlignment}`]: true,\n 'slider--range': this.isRange,\n 'slider--readonly': this.readOnly,\n 'ds-control-inactive': this.isDisabled,\n }}\n data-orientation={this.orientation}\n data-disabled={this.isDisabled ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-dragging={this.dragging ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-filled=\"\"\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n data-valid={!this.isDisabled ? '' : undefined}\n onClick={this.handleHostClick}\n >\n {(this.label || this.showValue) && (\n <div class=\"slider__label-row\">\n {this.label && (\n <ds-text\n class=\"slider__label\"\n as=\"label\"\n variant=\"text-body-small\"\n color=\"primary\"\n emphasis\n for={firstInputId}\n textId={this.labelId}\n >\n {this.label}\n </ds-text>\n )}\n {this.showValue && (\n <ds-text\n class=\"slider__value\"\n as=\"span\"\n variant=\"text-body-small\"\n color=\"primary\"\n fontFeature=\"tabular-nums\"\n >\n {valueDisplay}\n </ds-text>\n )}\n </div>\n )}\n <div\n class=\"slider__control\"\n ref={element => { this.controlEl = element ?? null; }}\n style={{\n '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n '--ds-slider-end-pct': String(this.percent(last)),\n } as Record<string, string>}\n onPointerDown={this.handlePointerDown}\n onPointerMove={this.handlePointerMove}\n onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n >\n <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n {values.map((value, index) => this.renderThumb(value, index))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as o,d as s}from"./p-
|
|
1
|
+
import{S as o,d as s}from"./p-BRfOCc_h.js";const t=o;const c=s;export{t as DsSwitch,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-switch.js.map
|