@ds-mo/ui 13.0.0 → 13.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +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-input.js +1 -1
- package/dist/components/ds-input.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-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-radio.js +1 -1
- package/dist/components/ds-radio.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/{p-B1cbQ0SG.js → p-B1XW4VSn.js} +2 -2
- package/dist/components/p-B9p6w-_T.js +2 -0
- package/dist/components/{p-z5RIrXuX.js.map → p-B9p6w-_T.js.map} +1 -1
- package/dist/components/p-BBFEhNzM.js +2 -0
- package/dist/components/{p-CS6CHlHK.js.map → p-BBFEhNzM.js.map} +1 -1
- package/dist/components/p-BGUK8-Qm.js +2 -0
- package/dist/components/{p-C3ArcO50.js.map → p-BGUK8-Qm.js.map} +1 -1
- package/dist/components/p-BO4cj3iX.js +2 -0
- package/dist/components/{p-BaUsq_VK.js.map → p-BO4cj3iX.js.map} +1 -1
- package/dist/components/p-BYWkksDO.js +2 -0
- package/dist/components/{p-Bkv3UjZz.js.map → p-BYWkksDO.js.map} +1 -1
- package/dist/components/{p-CWoXKe_h.js → p-C-aCzwhA.js} +2 -2
- package/dist/components/{p-DdvEZyX4.js → p-C-kzknkR.js} +2 -2
- package/dist/components/p-C4uYvyq6.js.map +1 -1
- package/dist/components/{p-Dg1LBXJ2.js → p-CH9yArA1.js} +2 -2
- package/dist/components/p-CHpNyAo1.js +2 -0
- package/dist/components/{p-CMWata9g.js.map → p-CHpNyAo1.js.map} +1 -1
- package/dist/components/{p-D09HINr_.js → p-CJDTh9Tg.js} +2 -2
- package/dist/components/p-CJbLY1tu.js +2 -0
- package/dist/components/{p-CwwuSGER.js.map → p-CJbLY1tu.js.map} +1 -1
- package/dist/components/{p-DeQwkbT1.js → p-CreGah0j.js} +2 -2
- package/dist/components/p-Cvxm1OZB.js +2 -0
- package/dist/components/{p-lyZNvRvO.js.map → p-Cvxm1OZB.js.map} +1 -1
- package/dist/components/{p-CTTnM7cE.js → p-DhEdICfD.js} +2 -2
- package/dist/components/{p-BwT6B5Fi.js → p-bxoryr-3.js} +2 -2
- package/dist/components/p-eAfNzlMa.js +2 -0
- package/dist/components/{p-DsiCDzoF.js.map → p-eAfNzlMa.js.map} +1 -1
- package/dist/components/{p-_DzUXA86.js → p-gZni7A2L.js} +2 -2
- package/dist/docs/components.json +1 -1
- package/dist/mcp/cli.js +15613 -17399
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +1 -1
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/card-data-viz.json +1 -1
- package/dist/mcp-data/registry/card-overview.json +3 -3
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/chart-bar.json +1 -1
- package/dist/mcp-data/registry/chart-donut.json +3 -3
- package/dist/mcp-data/registry/chart-legend.json +3 -3
- package/dist/mcp-data/registry/chart-line.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +1 -1
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/icon.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -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 +1 -1
- package/dist/mcp-data/registry/message.json +1 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +1 -1
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +1 -1
- package/dist/mcp-data/registry/scroll-overlay.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/shell-page.json +1 -1
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/tag.json +1 -1
- package/dist/mcp-data/registry/text.json +1 -1
- package/dist/mcp-data/registry/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-data-viz.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +1 -1
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/types/components/CardOverview/CardOverview.d.ts +2 -3
- package/package.json +5 -4
- package/dist/components/p-BaUsq_VK.js +0 -2
- package/dist/components/p-Bkv3UjZz.js +0 -2
- package/dist/components/p-C3ArcO50.js +0 -2
- package/dist/components/p-CMWata9g.js +0 -2
- package/dist/components/p-CS6CHlHK.js +0 -2
- package/dist/components/p-CwwuSGER.js +0 -2
- package/dist/components/p-DsiCDzoF.js +0 -2
- package/dist/components/p-lyZNvRvO.js +0 -2
- package/dist/components/p-z5RIrXuX.js +0 -2
- /package/dist/components/{p-B1cbQ0SG.js.map → p-B1XW4VSn.js.map} +0 -0
- /package/dist/components/{p-CWoXKe_h.js.map → p-C-aCzwhA.js.map} +0 -0
- /package/dist/components/{p-DdvEZyX4.js.map → p-C-kzknkR.js.map} +0 -0
- /package/dist/components/{p-Dg1LBXJ2.js.map → p-CH9yArA1.js.map} +0 -0
- /package/dist/components/{p-D09HINr_.js.map → p-CJDTh9Tg.js.map} +0 -0
- /package/dist/components/{p-DeQwkbT1.js.map → p-CreGah0j.js.map} +0 -0
- /package/dist/components/{p-CTTnM7cE.js.map → p-DhEdICfD.js.map} +0 -0
- /package/dist/components/{p-BwT6B5Fi.js.map → p-bxoryr-3.js.map} +0 -0
- /package/dist/components/{p-_DzUXA86.js.map → p-gZni7A2L.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,a,t as n}from"./index.js";import{c as o,d as l}from"./p-BwT6B5Fi.js";import{C as h,c as r,r as d,a as p,b as c,d as u}from"./p-lyZNvRvO.js";import{i as b,a as m,r as f,b as g,S as v,c as _}from"./p-BnQXAbif.js";import{d as k}from"./p-yhj1lIPx.js";import{d as y}from"./p-BsoqsbBh.js";import{d as w}from"./p-Dg1LBXJ2.js";import{d as x}from"./p-DbQr7Kwr.js";import{d as C}from"./p-C3ArcO50.js";import{d as S}from"./p-DsiCDzoF.js";import{d as D}from"./p-BAfG3M8z.js";import{d as M}from"./p-Ca-I2UnB.js";import{d as L}from"./p-CS6CHlHK.js";import{d as A}from"./p-BbMJTilO.js";import{d as B}from"./p-D09HINr_.js";import{d as E}from"./p-CWoXKe_h.js";import{d as P}from"./p-_DzUXA86.js";import{d as j}from"./p-CwwuSGER.js";import{d as z}from"./p-B1cbQ0SG.js";import{d as T}from"./p-DEaszb15.js";import{d as N}from"./p-DdvEZyX4.js";import{d as I}from"./p-BaUsq_VK.js";import{d as O}from"./p-Bkv3UjZz.js";import{d as $}from"./p-CMWata9g.js";import{d as F}from"./p-Ay1AX7Ql.js";import{d as G}from"./p-ohsLFap_.js";const H=["none","cool","neutral","warm","fresh"];const U="neutral";const K={cool:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-blue-strong-background)",position:100}]},neutral:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-grey-strong-background)",position:100}]},warm:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-yellow-strong-background)",position:100}]},fresh:{opacity:.4,stops:[{color:"var(--color-color-intent-cyan-faint-background)",position:0},{color:"var(--color-background-transparent)",position:47},{color:"var(--color-background-transparent)",position:58},{color:"var(--color-color-intent-red-faint-background)",position:83},{color:"var(--color-color-intent-pink-faint-background)",position:100}]}};const V="100% 100% at 0% 0%";function W(s){const e=q(s);return e==="none"?null:K[e]}function R(s){return String(W(s)?.opacity??0)}function X(s){return H.includes(s)}function q(s){return s!=null&&X(s)?s:U}function Q(s){const e=q(s);if(e==="none")return"none";return Z(K[e].stops)}function Z(s){const e=s.map((s=>`${s.color} ${s.position}%`)).join(", ");return`radial-gradient(${V}, ${e})`}const J="--ds-shell-gradient-image";const Y="--ds-shell-gradient-size";const ss="--ds-shell-gradient-position-panel";const es="--ds-shell-gradient-position-bar";const ts="--ds-shell-gradient-opacity";function is(s=U){return Q(s)}function as(s){const e=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!e)return{width:0,height:0};const t=e.visualViewport;return{width:Math.round(t?.width??e.innerWidth),height:Math.round(t?.height??e.innerHeight)}}function ns(s){return`${Math.round(s.width)}px ${Math.round(s.height)}px`}function os(){return"0 0"}function ls(s){return`${-Math.round(s)}px 0`}const hs={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity","/":"help"};function rs(s){return!s.metaKey&&!s.ctrlKey&&!s.altKey&&!s.shiftKey}function ds(s){if(!s||typeof s!=="object")return false;if(!("closest"in s)||typeof s.closest!=="function")return false;const e=s;const t=e.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const i=e.getAttribute("role");if(i==="textbox"||i==="combobox"||i==="searchbox")return true;return Boolean(e.isContentEditable)}function ps(s){if(s.key==="["||s.code==="BracketLeft")return"[";if(s.key==="]"||s.code==="BracketRight")return"]";return s.key.length===1?s.key.toLowerCase():s.key.toLowerCase()}function cs(s){if(!rs(s))return null;const e=ps(s);if(e==="[")return"toggle-panel-nav";if(e==="]")return"close-panel-tools";const t=hs[e];if(t)return`open-tool:${t}`;return null}function us(s,e){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+e+");";s.appendChild(t);const i=t.getBoundingClientRect().width;s.removeChild(t);return i}function bs(s){return{expandedPx:us(s,"--_nav-width"),collapsedPx:us(s,"--_nav-width-collapsed")}}function ms(s,e){if(e?.classList.contains("panel-nav--collapsed"))return true;const t=s?.collapsed;return t===true}function fs(s,e){return e?s.collapsedPx:s.expandedPx}const gs=()=>`.sc-ds-shell-app-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.shell-app.sc-ds-shell-app{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-secondary)}.shell-app__row.sc-ds-shell-app{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.shell-app__chrome.sc-ds-shell-app{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.shell-app--gradient.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.shell-app__panel.sc-ds-shell-app{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.shell-app__panel.sc-ds-shell-app-s>ds-panel-nav,.shell-app__panel .sc-ds-shell-app-s>ds-panel-nav{display:block;height:100%}.shell-app__panel.sc-ds-shell-app>ds-panel-nav.sc-ds-shell-app{display:block;height:100%}.shell-app__main.sc-ds-shell-app{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.shell-app__mobile-sheet-nav.sc-ds-shell-app,.shell-app__mobile-bar-nav.sc-ds-shell-app{display:none}.shell-app__bar.sc-ds-shell-app{grid-area:bar;flex:0 0 auto;min-width:0}.shell-app__bar.sc-ds-shell-app-s>ds-bar-nav,.shell-app__bar .sc-ds-shell-app-s>ds-bar-nav{display:block}.shell-app__bar.sc-ds-shell-app>ds-bar-nav.sc-ds-shell-app{display:block}.shell-app__content.sc-ds-shell-app{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.shell-app__content.sc-ds-shell-app{position:relative;z-index:1;background-color:var(--color-background-primary)}.shell-app__tools.sc-ds-shell-app{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.shell-app__tools.sc-ds-shell-app-s>ds-panel-tools,.shell-app__tools .sc-ds-shell-app-s>ds-panel-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app-s>ds-shell-tools,.shell-app__tools .sc-ds-shell-app-s>ds-shell-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app>ds-shell-tools.sc-ds-shell-app{display:block;height:100%;min-height:0}.shell-app__content.sc-ds-shell-app>ds-shell-page.sc-ds-shell-app{display:block;min-height:100%}.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{visibility:hidden}.shell-app--mobile.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app{display:none}.shell-app--mobile.sc-ds-shell-app-h .shell-app__main.sc-ds-shell-app{width:100%;padding-block-start:env(safe-area-inset-top);box-sizing:border-box;grid-template-columns:minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto;grid-template-areas:'stage' 'mobile-bar-nav';background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{grid-area:stage;min-width:0;min-height:0;height:100%;position:relative}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{z-index:1;overflow:auto}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{z-index:2;width:100%;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{display:block;z-index:3;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav.sc-ds-shell-app{grid-area:mobile-bar-nav;display:block;min-width:0;position:relative;z-index:4}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav[hidden].sc-ds-shell-app{display:none}.shell-app--mobile-tool-active.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{visibility:hidden}`;const vs=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsResponsiveModeChange=t(this,"dsResponsiveModeChange");this.dsNavSelect=t(this,"dsNavSelect");this.dsTabChange=t(this,"dsTabChange");this.dsSubsectionChange=t(this,"dsSubsectionChange");this.dsPageBack=t(this,"dsPageBack");this.dsBreadcrumbSelect=t(this,"dsBreadcrumbSelect");this.dsPageAction=t(this,"dsPageAction");this.dsToolChange=t(this,"dsToolChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsBrowseContextChange=t(this,"dsBrowseContextChange");this.dsNavFooterAction=t(this,"dsNavFooterAction");this.dsNavUserAction=t(this,"dsNavUserAction");this.composition="managed";this.navigation={};this.pageChrome={};this.tools={};this.navStyle="dashboard";this.gradientPreset=U;this.shortcutsEnabled=true;this.mobileDestination="area";this.mobileSheetNavOpen=false;this.toolsFullscreen=false;this.resolvedMode="desktop";this.managedToolsOpen=false;this.managedActiveTool="";this.managedToolPresentation="drawer";this.managedMobileDestination="area";this.managedMobileSheetNavOpen=false;this.managedInboxTool="";this.managedBrowseContext="dashboard";this.resizeObserver=null;this.hasLoaded=false;this.panelNavTransition=new h;this.chromeSyncCoalescer=r((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{this.updateResponsiveMode();if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=s=>{if(d(s)!=="panel-nav")return;this.panelNavTransition.enter();const e=as();this.cachedViewportWidth=e.width;this.cachedViewportHeight=e.height;this.syncChrome()};this.onChromeTransitionEnd=s=>{if(d(s)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}};this.handleManagedNavSelect=s=>{s.stopPropagation();this.dsNavSelect.emit(s.detail)};this.handleManagedTabChange=s=>{s.stopPropagation();this.dsTabChange.emit(s.detail)};this.handleManagedPageBack=s=>{s.stopPropagation();this.dsPageBack.emit(s.detail)};this.handleManagedBreadcrumbSelect=s=>{s.stopPropagation();const e=this.dsBreadcrumbSelect.emit(s.detail);if(e.defaultPrevented)s.preventDefault()};this.handleManagedSubsectionChange=s=>{s.stopPropagation();this.dsSubsectionChange.emit(s.detail)};this.handleManagedPageAction=s=>{s.stopPropagation();this.dsPageAction.emit(s.detail)};this.handleManagedToolChange=s=>{s.stopPropagation();const{id:e,selected:t}=s.detail;this.managedActiveTool=e;this.managedToolsOpen=t;const i=this.resolvedToolItems.find((s=>s.id===e));if(i?.mobileDestination==="inbox"||b(e)){this.managedInboxTool=e}this.managedMobileDestination=t?i?.mobileDestination??m(true,e):"area";this.managedMobileSheetNavOpen=false;this.dsToolChange.emit(s.detail)};this.handleManagedPresentationChange=s=>{s.stopPropagation();this.managedToolPresentation=s.detail.presentation;this.toolsFullscreen=s.detail.presentation==="fullscreen";this.dsPresentationChange.emit(s.detail)};this.handleManagedHeaderBack=s=>{s.stopPropagation();this.dsHeaderBack.emit(s.detail)};this.handleManagedHeaderAction=s=>{s.stopPropagation();this.dsHeaderAction.emit(s.detail)};this.handleManagedSheetToggle=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=s.detail;if(s.detail){this.managedMobileDestination="area";this.managedToolsOpen=false}};this.handleManagedMobileDestination=s=>{s.stopPropagation();const e=s.detail.destination;this.managedMobileSheetNavOpen=false;this.managedMobileDestination=e;if(e==="area"){this.managedToolsOpen=false;return}const t=e==="inbox"?f(this.managedInboxTool,this.availableInboxTools):e;if(!t)return;const i=this.resolvedToolItems.find((s=>s.id===t||e!=="inbox"&&s.mobileDestination===e));if(!i||i.isInactive)return;const a=i.id;this.managedActiveTool=a;this.managedToolsOpen=true;if(b(a))this.managedInboxTool=a;this.dsToolChange.emit({id:a,selected:true})};this.handleManagedAreaSelect=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=false;this.managedMobileDestination="area";this.dsNavSelect.emit(s.detail)};this.handleManagedBrowseContext=s=>{s.stopPropagation();this.managedBrowseContext=s.detail;this.dsBrowseContextChange.emit(s.detail)};this.handleManagedSheetClose=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=false};this.handleManagedNavFooterAction=s=>{s.stopPropagation();this.dsNavFooterAction.emit()};this.handleManagedNavUserAction=s=>{s.stopPropagation();this.dsNavUserAction.emit(s.detail)}}get managed(){return this.composition==="managed"}get effectiveMobileDestination(){return this.managed?this.managedMobileDestination:this.mobileDestination}get effectiveMobileSheetNavOpen(){return this.managed?this.managedMobileSheetNavOpen:this.mobileSheetNavOpen}get resolvedNavigationGroups(){if(this.navigation.groups?.length)return this.navigation.groups;return this.managedBrowseContext==="settings"?this.navigation.settingsGroups??[]:this.navigation.dashboardGroups??[]}get resolvedToolItems(){return this.tools.items??o}get availableInboxTools(){return this.resolvedToolItems.filter((s=>!s.isInactive&&(s.mobileDestination==="inbox"||b(s.id)))).map((s=>s.id))}componentWillLoad(){if(typeof window!=="undefined"){this.resolvedMode=g(window.innerWidth)}this.managedBrowseContext=this.navigation.browseContext??this.navStyle;this.managedMobileDestination=this.mobileDestination;this.managedMobileSheetNavOpen=this.mobileSheetNavOpen;this.managedInboxTool=f("",this.availableInboxTools)}componentDidLoad(){this.hasLoaded=true;this.syncSlottedNavStyle();this.syncSlottedMobileState();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(c,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const s=this.el.querySelector("ds-shell-tools, ds-panel-tools");this.toolsFullscreen=s?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(s){this.toolsFullscreen=s.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(c,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}handleNavigationChange(){this.managedBrowseContext=this.navigation.browseContext??this.navStyle}handleToolsChange(){if(this.managedActiveTool&&!this.resolvedToolItems.some((s=>s.id===this.managedActiveTool))){this.managedToolsOpen=false;this.managedActiveTool="";this.managedMobileDestination="area"}this.managedInboxTool=f(this.managedInboxTool,this.availableInboxTools)}onMobileStateChange(s,t){if(this.managed){this.managedMobileDestination=this.mobileDestination;this.managedMobileSheetNavOpen=this.mobileSheetNavOpen}this.syncSlottedMobileState();if(t===true&&!this.effectiveMobileSheetNavOpen&&this.resolvedMode==="mobile"){requestAnimationFrame((()=>{const s=this.el.querySelector("ds-mobile-bar-nav");const t=document.activeElement;if(t instanceof e&&s?.contains(t))return;void s?.focusDestination?.("sheet-nav")}))}}updateResponsiveMode(){if(typeof window==="undefined")return;const s=g(window.innerWidth);if(s===this.resolvedMode)return;this.resolvedMode=s;this.syncSlottedMobileState();this.scheduleChromeSync();if(this.hasLoaded)this.dsResponsiveModeChange.emit({mode:s})}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}}syncSlottedMobileState(){const s=this.el.querySelector("ds-shell-tools");const e=this.el.querySelector("ds-mobile-bar-nav");const t=this.el.querySelector("ds-mobile-sheet-nav");if(s){s.setAttribute("responsive-mode",this.resolvedMode);s.responsiveMode=this.resolvedMode}if(e){e.activeDestination=this.effectiveMobileDestination;e.sheetNavExpanded=this.effectiveMobileSheetNavOpen}if(t){t.open=this.effectiveMobileSheetNavOpen}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const s=this.el.querySelector(".shell-app__panel");if(s)this.resizeObserver.observe(s)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const s=window.visualViewport;if(s){s.addEventListener("resize",this.onVisualViewportChange,{passive:true});s.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const s=window.visualViewport;if(s){s.removeEventListener("resize",this.onVisualViewportChange);s.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const s=this.el.querySelector("ds-panel-nav .panel-nav");if(!s)return;this.panelWidthTokens=bs(s)}applyGradientVars(s,e){const t=s.style;for(const[s,i]of Object.entries(e)){if(i===null)t.removeProperty(s);else t.setProperty(s,i)}}clearGradientPaintVars(s){const e=[J,Y,ts];for(const t of s){for(const s of e)t.style.removeProperty(s)}}syncChromeLayoutVars(s,e,t,i){if(s){s.style.setProperty(ss,t)}if(e){e.style.setProperty(es,i)}}resolvePanelWidthPx(s){const e=s?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=ms(s,e);return fs(this.panelWidthTokens,t)}const t=this.el.querySelector(".shell-app__panel");const i=t?.getBoundingClientRect().width??0;if(i>0)return i;if(this.panelWidthTokens.expandedPx>0){const t=ms(s,e);return fs(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return as()}chromeLayerActive(){return this.resolvedMode!=="mobile"&&q(this.gradientPreset)!=="none"}handleWindowKeyDown(s){if(!this.shortcutsEnabled)return;if(ds(s.target))return;const e=cs(s);if(!e)return;s.preventDefault();const t=this.el.querySelector("ds-panel-nav");const i=this.el.querySelector("ds-shell-tools, ds-panel-tools");if(e==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(e==="close-panel-tools"){void i?.closeDrawer?.();return}if(e.startsWith("open-tool:")&&i){const s=e.slice("open-tool:".length);void i.activateTool?.(s)}}async activateTool(s){const e=this.el.querySelector("ds-shell-tools, ds-panel-tools");await(e?.activateTool?.(s))}async closeGlobalSurface(){if(this.managedMobileSheetNavOpen){this.managedMobileSheetNavOpen=false;return}const s=this.el.querySelector("ds-shell-tools, ds-panel-tools");await(s?.closeDrawer?.())}async setToolPresentation(s){this.managedToolPresentation=s;this.toolsFullscreen=s==="fullscreen"}get currentArea(){const s=[...this.navigation.dashboardGroups??[],...this.navigation.settingsGroups??[],...this.resolvedNavigationGroups];const e=s.flatMap((s=>s.items));const t=this.navigation.activeId||k(this.navigation.currentUrl??this.pageChrome.currentUrl??"",e);return e.find((s=>s.id===t))??e[0]??{id:"area",icon:"MapPage",label:this.pageChrome.heading||"Area"}}toolDot(s){return this.resolvedToolItems.find((e=>e.id===s))?.dot??false}syncChrome(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");const t=[this.el,s,e].filter((s=>s!==null));const i=()=>{if(s)s.style.removeProperty(ss);if(e)e.style.removeProperty(es)};const a=q(this.gradientPreset);if(a==="none"||this.resolvedMode==="mobile"){this.clearGradientPaintVars(t);i();return}const n=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(s);const l=os();const h=ls(o);this.syncChromeLayoutVars(s,e,l,h);const r=is(a);const d=ns({width:n.width,height:n.height});const p=R(a);for(const s of t){if(s===this.el){this.applyGradientVars(s,{[J]:r,[Y]:d,[ss]:l,[es]:h,[ts]:p});continue}const e=s.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(s,{[J]:r,[Y]:d,[ts]:p,[ss]:e?null:l,[es]:e?h:null})}}renderManagedPanelNav(){const s=this.navigation;return i("ds-panel-nav",{navStyle:this.navStyle,groups:this.resolvedNavigationGroups,breakpoint:v,routerMode:s.routerMode??"event",activeId:s.activeId??"",currentUrl:s.currentUrl??this.pageChrome.currentUrl??"",storageKey:s.storageKey??"",userName:s.userName??"",userInitial:s.userInitial??"",accountMenuExpanded:s.accountMenuExpanded??false,dashboardLabel:s.dashboardLabel??"Dashboard",settingsLabel:s.settingsLabel??"Settings",accountLabel:s.accountLabel??"Account",dashboardNavigationLabel:s.dashboardNavigationLabel??"Dashboard navigation",settingsNavigationLabel:s.settingsNavigationLabel??"Settings navigation",navigationItemsLabel:s.navigationLabel??"Navigation items",onDsNavSelect:this.handleManagedNavSelect,onDsNavFooterAction:this.handleManagedNavFooterAction,onDsNavUserAction:this.handleManagedNavUserAction})}renderManagedBarNav(){return i("ds-bar-nav",{navStyle:this.navStyle,tabs:this.pageChrome.tabs??[],value:this.pageChrome.value??"",heading:this.pageChrome.routeHeading??this.pageChrome.heading,basePath:this.pageChrome.basePath??"",currentUrl:this.pageChrome.currentUrl??this.navigation.currentUrl??"",onDsTabChange:this.handleManagedTabChange})}renderManagedToolSlots(){const s=this.resolvedToolItems.map((s=>s.id));return s.flatMap((s=>[i("slot",{name:s,slot:s}),i("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderManagedTools(){const s=this.tools;return i("ds-shell-tools",{responsiveMode:this.resolvedMode,open:this.managedToolsOpen,activeTool:this.managedActiveTool,presentation:this.managedToolPresentation,fullscreenHeaderMode:s.fullscreenHeaderMode??"shared",items:this.resolvedToolItems,headers:s.headers??{},storageKey:s.storageKey??"",toolsLabel:s.toolsLabel??"Tools",toolShortcutsLabel:s.toolShortcutsLabel??"Tool shortcuts",inboxLabel:s.inboxLabel??"Inbox",inboxNavigationLabel:s.inboxNavigationLabel??"Inbox sections",onDsToolChange:this.handleManagedToolChange,onDsPresentationChange:this.handleManagedPresentationChange,onDsHeaderBack:this.handleManagedHeaderBack,onDsHeaderAction:this.handleManagedHeaderAction},this.renderManagedToolSlots())}renderManagedMobileSheetNav(){const s=this.navigation;return i("ds-mobile-sheet-nav",{open:this.managedMobileSheetNavOpen,browseContext:this.managedBrowseContext,dashboardGroups:s.dashboardGroups??s.groups??[],settingsGroups:s.settingsGroups??[],currentUrl:s.currentUrl??this.pageChrome.currentUrl??"",navigationLabel:s.navigationLabel??"Application navigation",dashboardLabel:s.dashboardLabel??"Dashboard",settingsLabel:s.settingsLabel??"Settings",accountLabel:s.accountLabel??"Account",onDsAreaSelect:this.handleManagedAreaSelect,onDsBrowseContextChange:this.handleManagedBrowseContext,onDsClose:this.handleManagedSheetClose})}renderManagedMobileBarNav(){return i("ds-mobile-bar-nav",{hidden:this.tools.mobileBarHidden??false,activeDestination:this.managedMobileDestination,currentArea:this.currentArea,sheetNavExpanded:this.managedMobileSheetNavOpen,searchLabel:this.tools.items?.find((s=>s.id==="search"))?.ariaLabel??"Search",agentsLabel:this.tools.items?.find((s=>s.id==="agents"))?.ariaLabel??"Agents",inboxLabel:this.tools.inboxLabel??"Inbox",helpLabel:this.tools.items?.find((s=>s.id==="help"))?.ariaLabel??"Help & Support",searchDot:this.toolDot("search"),agentsDot:this.toolDot("agents"),inboxDot:this.toolDot("messages")||this.toolDot("stacks")||this.toolDot("activity"),onDsSheetNavToggle:this.handleManagedSheetToggle,onDsDestinationChange:this.handleManagedMobileDestination})}renderManagedMobileLeading(){if(!this.pageChrome.showBack){return i("slot",{name:"page-header-leading",slot:"leading"})}return[i("ds-tooltip",{slot:"leading",label:this.pageChrome.backAriaLabel??"Back",side:"bottom",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.pageChrome.backIcon??"ChevronLeft",size:"md","aria-label":this.pageChrome.backAriaLabel??"Back",activeFill:false,hasBorder:false,onDsClick:s=>this.dsPageBack.emit(s.detail)})),i("slot",{name:"page-header-leading",slot:"leading"})]}renderManagedMobileActions(){const s=this.pageChrome.mobileActions??[];return[...s.map((s=>i("ds-tooltip",{slot:"trailing",key:s.id,label:s.ariaLabel,side:"bottom",size:"sm"},i("ds-button-unfilled",{id:s.triggerId||undefined,variant:"icon",icon:s.icon,size:"md","aria-label":s.ariaLabel,haspopup:s.haspopup,controls:s.controls,expanded:s.expanded,pressed:s.pressed,isActive:!!s.expanded,isInactive:s.isInactive,activeFill:false,hasBorder:false,onDsClick:()=>this.dsPageAction.emit(s.id)})))),i("slot",{name:"page-header-trailing",slot:"trailing"})]}renderManagedPage(){const s=this.pageChrome;const e=s.showBack?[]:s.tabs??[];const t=(s.subsections??[]).map((s=>"type"in s?{type:"divider"}:{id:s.id,label:s.label,isInactive:s.isInactive}));return i("ds-shell-page",{responsiveMode:this.resolvedMode,headerCapacity:_(this.resolvedMode,this.managedToolsOpen),contentInset:s.contentInset??"default"},i("ds-bar-title",{slot:"header",heading:s.heading??"",description:s.description??"",showBack:s.showBack??false,backAriaLabel:s.backAriaLabel??"Back",backLabel:s.backLabel??"Back",breadcrumbs:s.breadcrumbs??[],breadcrumbAriaLabel:s.breadcrumbAriaLabel??"Breadcrumb",sections:t,value:s.subvalue??"",sectionsAriaLabel:s.subsectionsAriaLabel??"Change page subsection",primaryAction:s.primaryAction??null,actions:s.actions??[],actionsAriaLabel:s.actionsAriaLabel??"More page actions",onDsBack:this.handleManagedPageBack,onDsBreadcrumbSelect:this.handleManagedBreadcrumbSelect,onDsSectionChange:this.handleManagedSubsectionChange,onDsAction:this.handleManagedPageAction}),i("ds-mobile-header",{slot:"mobile-header",heading:s.heading??"",headingLevel:s.headingLevel??"h1",sections:e,value:s.showBack?"":s.value??"",sectionsAriaLabel:s.sectionsAriaLabel??"Change page section",subsections:s.subsections??[],subvalue:s.subvalue??"",subsectionsAriaLabel:s.subsectionsAriaLabel??"Change page subsection",tone:s.tone??"default",onDsSectionChange:this.handleManagedTabChange,onDsSubsectionChange:this.handleManagedSubsectionChange},this.renderManagedMobileLeading(),this.renderManagedMobileActions()),i("slot",null))}renderSlottedShell(s,e,t,n,o){return i(a,{class:s,"responsive-mode":this.resolvedMode},i("div",{class:"shell-app__row"},i("div",{class:"shell-app__chrome","aria-hidden":"true"}),i("div",{class:"shell-app__panel","aria-hidden":o?"true":undefined,inert:o?true:undefined},i("slot",{name:"panel"})),i("div",{class:"shell-app__main"},i("div",{class:"shell-app__bar","aria-hidden":o?"true":undefined,inert:o?true:undefined},i("slot",{name:"bar"})),i("div",{class:"shell-app__tools","aria-hidden":e&&(!t||this.mobileSheetNavOpen)?"true":undefined,inert:e&&(!t||this.mobileSheetNavOpen)?true:undefined,hidden:e&&!t},i("slot",{name:"tools"})),i("div",{class:"shell-app__content","aria-hidden":o||n?"true":undefined,inert:o||n?true:undefined},i("slot",null)),i("div",{class:"shell-app__mobile-sheet-nav",hidden:!e||!this.mobileSheetNavOpen,"aria-hidden":e&&this.mobileSheetNavOpen?undefined:"true",inert:e&&this.mobileSheetNavOpen?undefined:true},i("slot",{name:"mobile-sheet-nav"})),i("div",{class:"shell-app__mobile-bar-nav",hidden:!e},i("slot",{name:"mobile-bar-nav"})))))}render(){const s=this.chromeLayerActive();const e=this.resolvedMode==="mobile";const t=e&&this.effectiveMobileDestination!=="area";const n=e&&(t||this.effectiveMobileSheetNavOpen);const o=!e&&this.toolsFullscreen;const l={"shell-app":true,"shell-app--gradient":s,[`shell-app--${this.navStyle}`]:true,[`shell-app--${this.resolvedMode}`]:true,"shell-app--tools-fullscreen":o,"shell-app--mobile-tool-active":t,"shell-app--mobile-sheet-nav-open":e&&this.effectiveMobileSheetNavOpen,"shell-app--managed":this.managed,"shell-app--slotted":!this.managed};if(!this.managed){return this.renderSlottedShell(l,e,t,n,o)}return i(a,{class:l,"responsive-mode":this.resolvedMode},i("div",{class:"shell-app__row"},i("div",{class:"shell-app__chrome","aria-hidden":"true"}),i("div",{class:"shell-app__panel","aria-hidden":o?"true":undefined,inert:o?true:undefined},this.renderManagedPanelNav()),i("div",{class:"shell-app__main"},i("div",{class:"shell-app__bar","aria-hidden":o?"true":undefined,inert:o?true:undefined},this.renderManagedBarNav()),i("div",{class:"shell-app__tools","aria-hidden":e&&(!t||this.effectiveMobileSheetNavOpen)?"true":undefined,inert:e&&(!t||this.effectiveMobileSheetNavOpen)?true:undefined,hidden:e&&!t},this.renderManagedTools()),i("div",{class:"shell-app__content","aria-hidden":o||n?"true":undefined,inert:o||n?true:undefined},this.renderManagedPage()),i("div",{class:"shell-app__mobile-sheet-nav",hidden:!e||!this.effectiveMobileSheetNavOpen,"aria-hidden":e&&this.effectiveMobileSheetNavOpen?undefined:"true",inert:e&&this.effectiveMobileSheetNavOpen?undefined:true},this.renderManagedMobileSheetNav()),i("div",{class:"shell-app__mobile-bar-nav",hidden:!e},this.renderManagedMobileBarNav()))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],navigation:[{handleNavigationChange:0}],tools:[{handleToolsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}}static get style(){return gs()}},[262,"ds-shell-app",{composition:[513],navigation:[16],pageChrome:[16],tools:[16],navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],mobileDestination:[1,"mobile-destination"],mobileSheetNavOpen:[4,"mobile-sheet-nav-open"],toolsFullscreen:[32],resolvedMode:[32],managedToolsOpen:[32],managedActiveTool:[32],managedToolPresentation:[32],managedMobileDestination:[32],managedMobileSheetNavOpen:[32],managedInboxTool:[32],managedBrowseContext:[32],activateTool:[64],closeGlobalSurface:[64],setToolPresentation:[64]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],navigation:[{handleNavigationChange:0}],tools:[{handleToolsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}]);function _s(){if(typeof customElements==="undefined"){return}const s=["ds-shell-app","ds-badge","ds-bar-nav","ds-bar-title","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-bar-nav","ds-mobile-header","ds-mobile-section-switcher","ds-mobile-sheet-nav","ds-panel-nav","ds-panel-tool-header","ds-panel-tools","ds-shell-page","ds-shell-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-app":if(!customElements.get(n(s))){customElements.define(n(s),vs)}break;case"ds-badge":if(!customElements.get(n(s))){y()}break;case"ds-bar-nav":if(!customElements.get(n(s))){u()}break;case"ds-bar-title":if(!customElements.get(n(s))){w()}break;case"ds-breadcrumb":if(!customElements.get(n(s))){x()}break;case"ds-button-filled":if(!customElements.get(n(s))){C()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){S()}break;case"ds-icon":if(!customElements.get(n(s))){D()}break;case"ds-loader":if(!customElements.get(n(s))){M()}break;case"ds-menu":if(!customElements.get(n(s))){L()}break;case"ds-mobile-bar-nav":if(!customElements.get(n(s))){A()}break;case"ds-mobile-header":if(!customElements.get(n(s))){B()}break;case"ds-mobile-section-switcher":if(!customElements.get(n(s))){E()}break;case"ds-mobile-sheet-nav":if(!customElements.get(n(s))){P()}break;case"ds-panel-nav":if(!customElements.get(n(s))){j()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){z()}break;case"ds-panel-tools":if(!customElements.get(n(s))){l()}break;case"ds-shell-page":if(!customElements.get(n(s))){T()}break;case"ds-shell-tools":if(!customElements.get(n(s))){N()}break;case"ds-swatch-picker":if(!customElements.get(n(s))){I()}break;case"ds-switch":if(!customElements.get(n(s))){O()}break;case"ds-tab-group":if(!customElements.get(n(s))){$()}break;case"ds-text":if(!customElements.get(n(s))){F()}break;case"ds-tooltip":if(!customElements.get(n(s))){G()}break}}))}_s();const ks=vs;const ys=_s;export{ks as DsShellApp,ys as defineCustomElement};
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a,t as n}from"./index.js";import{c as o,d as l}from"./p-bxoryr-3.js";import{C as h,c as r,r as d,a as p,b as c,d as u}from"./p-Cvxm1OZB.js";import{i as b,a as m,r as f,b as g,S as v,c as _}from"./p-BnQXAbif.js";import{d as k}from"./p-yhj1lIPx.js";import{d as y}from"./p-BsoqsbBh.js";import{d as w}from"./p-CH9yArA1.js";import{d as x}from"./p-DbQr7Kwr.js";import{d as C}from"./p-BGUK8-Qm.js";import{d as S}from"./p-eAfNzlMa.js";import{d as D}from"./p-BAfG3M8z.js";import{d as M}from"./p-Ca-I2UnB.js";import{d as A}from"./p-BBFEhNzM.js";import{d as L}from"./p-BbMJTilO.js";import{d as B}from"./p-CJDTh9Tg.js";import{d as z}from"./p-C-aCzwhA.js";import{d as E}from"./p-gZni7A2L.js";import{d as P}from"./p-CJbLY1tu.js";import{d as T}from"./p-B1XW4VSn.js";import{d as j}from"./p-DEaszb15.js";import{d as N}from"./p-C-kzknkR.js";import{d as I}from"./p-BO4cj3iX.js";import{d as O}from"./p-BYWkksDO.js";import{d as $}from"./p-CHpNyAo1.js";import{d as F}from"./p-Ay1AX7Ql.js";import{d as G}from"./p-ohsLFap_.js";const H=["none","cool","neutral","warm","fresh"];const U="neutral";const V={cool:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-blue-strong-background)",position:100}]},neutral:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-grey-strong-background)",position:100}]},warm:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-yellow-strong-background)",position:100}]},fresh:{opacity:.4,stops:[{color:"var(--color-color-intent-cyan-faint-background)",position:0},{color:"var(--color-background-transparent)",position:47},{color:"var(--color-background-transparent)",position:58},{color:"var(--color-color-intent-red-faint-background)",position:83},{color:"var(--color-color-intent-pink-faint-background)",position:100}]}};const W="100% 100% at 0% 0%";function K(s){const e=X(s);return e==="none"?null:V[e]}function R(s){return String(K(s)?.opacity??0)}function Q(s){return H.includes(s)}function X(s){return s!=null&&Q(s)?s:U}function q(s){const e=X(s);if(e==="none")return"none";return J(V[e].stops)}function J(s){const e=s.map((s=>`${s.color} ${s.position}%`)).join(", ");return`radial-gradient(${W}, ${e})`}const Y="--ds-shell-gradient-image";const Z="--ds-shell-gradient-size";const ss="--ds-shell-gradient-position-panel";const es="--ds-shell-gradient-position-bar";const ts="--ds-shell-gradient-opacity";function is(s=U){return q(s)}function as(s){const e=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!e)return{width:0,height:0};const t=e.visualViewport;return{width:Math.round(t?.width??e.innerWidth),height:Math.round(t?.height??e.innerHeight)}}function ns(s){return`${Math.round(s.width)}px ${Math.round(s.height)}px`}function os(){return"0 0"}function ls(s){return`${-Math.round(s)}px 0`}const hs={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity","/":"help"};function rs(s){return!s.metaKey&&!s.ctrlKey&&!s.altKey&&!s.shiftKey}function ds(s){if(!s||typeof s!=="object")return false;if(!("closest"in s)||typeof s.closest!=="function")return false;const e=s;const t=e.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const i=e.getAttribute("role");if(i==="textbox"||i==="combobox"||i==="searchbox")return true;return Boolean(e.isContentEditable)}function ps(s){if(s.key==="["||s.code==="BracketLeft")return"[";if(s.key==="]"||s.code==="BracketRight")return"]";return s.key.length===1?s.key.toLowerCase():s.key.toLowerCase()}function cs(s){if(!rs(s))return null;const e=ps(s);if(e==="[")return"toggle-panel-nav";if(e==="]")return"close-panel-tools";const t=hs[e];if(t)return`open-tool:${t}`;return null}function us(s,e){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+e+");";s.appendChild(t);const i=t.getBoundingClientRect().width;s.removeChild(t);return i}function bs(s){return{expandedPx:us(s,"--_nav-width"),collapsedPx:us(s,"--_nav-width-collapsed")}}function ms(s,e){if(e?.classList.contains("panel-nav--collapsed"))return true;const t=s?.collapsed;return t===true}function fs(s,e){return e?s.collapsedPx:s.expandedPx}const gs=()=>`.sc-ds-shell-app-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.shell-app.sc-ds-shell-app{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-secondary)}.shell-app__row.sc-ds-shell-app{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.shell-app__chrome.sc-ds-shell-app{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.shell-app--gradient.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.shell-app__panel.sc-ds-shell-app{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.shell-app__panel.sc-ds-shell-app-s>ds-panel-nav,.shell-app__panel .sc-ds-shell-app-s>ds-panel-nav{display:block;height:100%}.shell-app__panel.sc-ds-shell-app>ds-panel-nav.sc-ds-shell-app{display:block;height:100%}.shell-app__main.sc-ds-shell-app{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.shell-app__mobile-sheet-nav.sc-ds-shell-app,.shell-app__mobile-bar-nav.sc-ds-shell-app{display:none}.shell-app__bar.sc-ds-shell-app{grid-area:bar;flex:0 0 auto;min-width:0}.shell-app__bar.sc-ds-shell-app-s>ds-bar-nav,.shell-app__bar .sc-ds-shell-app-s>ds-bar-nav{display:block}.shell-app__bar.sc-ds-shell-app>ds-bar-nav.sc-ds-shell-app{display:block}.shell-app__content.sc-ds-shell-app{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.shell-app__content.sc-ds-shell-app{position:relative;z-index:1;background-color:var(--color-background-primary)}.shell-app__tools.sc-ds-shell-app{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.shell-app__tools.sc-ds-shell-app-s>ds-panel-tools,.shell-app__tools .sc-ds-shell-app-s>ds-panel-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app-s>ds-shell-tools,.shell-app__tools .sc-ds-shell-app-s>ds-shell-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app>ds-shell-tools.sc-ds-shell-app{display:block;height:100%;min-height:0}.shell-app__content.sc-ds-shell-app>ds-shell-page.sc-ds-shell-app{display:block;min-height:100%}.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{visibility:hidden}.shell-app--mobile.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app{display:none}.shell-app--mobile.sc-ds-shell-app-h .shell-app__main.sc-ds-shell-app{width:100%;padding-block-start:env(safe-area-inset-top);box-sizing:border-box;grid-template-columns:minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto;grid-template-areas:'stage' 'mobile-bar-nav';background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{grid-area:stage;min-width:0;min-height:0;height:100%;position:relative}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{z-index:1;overflow:auto}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{z-index:2;width:100%;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{display:block;z-index:3;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav.sc-ds-shell-app{grid-area:mobile-bar-nav;display:block;min-width:0;position:relative;z-index:4}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav[hidden].sc-ds-shell-app{display:none}.shell-app--mobile-tool-active.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{visibility:hidden}`;const vs=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsResponsiveModeChange=t(this,"dsResponsiveModeChange");this.dsNavSelect=t(this,"dsNavSelect");this.dsTabChange=t(this,"dsTabChange");this.dsSubsectionChange=t(this,"dsSubsectionChange");this.dsPageBack=t(this,"dsPageBack");this.dsBreadcrumbSelect=t(this,"dsBreadcrumbSelect");this.dsPageAction=t(this,"dsPageAction");this.dsToolChange=t(this,"dsToolChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsBrowseContextChange=t(this,"dsBrowseContextChange");this.dsNavFooterAction=t(this,"dsNavFooterAction");this.dsNavUserAction=t(this,"dsNavUserAction");this.composition="managed";this.navigation={};this.pageChrome={};this.tools={};this.navStyle="dashboard";this.gradientPreset=U;this.shortcutsEnabled=true;this.mobileDestination="area";this.mobileSheetNavOpen=false;this.toolsFullscreen=false;this.resolvedMode="desktop";this.managedToolsOpen=false;this.managedActiveTool="";this.managedToolPresentation="drawer";this.managedMobileDestination="area";this.managedMobileSheetNavOpen=false;this.managedInboxTool="";this.managedBrowseContext="dashboard";this.resizeObserver=null;this.hasLoaded=false;this.panelNavTransition=new h;this.chromeSyncCoalescer=r((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{this.updateResponsiveMode();if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=s=>{if(d(s)!=="panel-nav")return;this.panelNavTransition.enter();const e=as();this.cachedViewportWidth=e.width;this.cachedViewportHeight=e.height;this.syncChrome()};this.onChromeTransitionEnd=s=>{if(d(s)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}};this.handleManagedNavSelect=s=>{s.stopPropagation();this.dsNavSelect.emit(s.detail)};this.handleManagedTabChange=s=>{s.stopPropagation();this.dsTabChange.emit(s.detail)};this.handleManagedPageBack=s=>{s.stopPropagation();this.dsPageBack.emit(s.detail)};this.handleManagedBreadcrumbSelect=s=>{s.stopPropagation();const e=this.dsBreadcrumbSelect.emit(s.detail);if(e.defaultPrevented)s.preventDefault()};this.handleManagedSubsectionChange=s=>{s.stopPropagation();this.dsSubsectionChange.emit(s.detail)};this.handleManagedPageAction=s=>{s.stopPropagation();this.dsPageAction.emit(s.detail)};this.handleManagedToolChange=s=>{s.stopPropagation();const{id:e,selected:t}=s.detail;this.managedActiveTool=e;this.managedToolsOpen=t;const i=this.resolvedToolItems.find((s=>s.id===e));if(i?.mobileDestination==="inbox"||b(e)){this.managedInboxTool=e}this.managedMobileDestination=t?i?.mobileDestination??m(true,e):"area";this.managedMobileSheetNavOpen=false;this.dsToolChange.emit(s.detail)};this.handleManagedPresentationChange=s=>{s.stopPropagation();this.managedToolPresentation=s.detail.presentation;this.toolsFullscreen=s.detail.presentation==="fullscreen";this.dsPresentationChange.emit(s.detail)};this.handleManagedHeaderBack=s=>{s.stopPropagation();this.dsHeaderBack.emit(s.detail)};this.handleManagedHeaderAction=s=>{s.stopPropagation();this.dsHeaderAction.emit(s.detail)};this.handleManagedSheetToggle=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=s.detail;if(s.detail){this.managedMobileDestination="area";this.managedToolsOpen=false}};this.handleManagedMobileDestination=s=>{s.stopPropagation();const e=s.detail.destination;this.managedMobileSheetNavOpen=false;this.managedMobileDestination=e;if(e==="area"){this.managedToolsOpen=false;return}const t=e==="inbox"?f(this.managedInboxTool,this.availableInboxTools):e;if(!t)return;const i=this.resolvedToolItems.find((s=>s.id===t||e!=="inbox"&&s.mobileDestination===e));if(!i||i.isInactive)return;const a=i.id;this.managedActiveTool=a;this.managedToolsOpen=true;if(b(a))this.managedInboxTool=a;this.dsToolChange.emit({id:a,selected:true})};this.handleManagedAreaSelect=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=false;this.managedMobileDestination="area";this.dsNavSelect.emit(s.detail)};this.handleManagedBrowseContext=s=>{s.stopPropagation();this.managedBrowseContext=s.detail;this.dsBrowseContextChange.emit(s.detail)};this.handleManagedSheetClose=s=>{s.stopPropagation();this.managedMobileSheetNavOpen=false};this.handleManagedNavFooterAction=s=>{s.stopPropagation();this.dsNavFooterAction.emit()};this.handleManagedNavUserAction=s=>{s.stopPropagation();this.dsNavUserAction.emit(s.detail)}}get managed(){return this.composition==="managed"}get effectiveMobileDestination(){return this.managed?this.managedMobileDestination:this.mobileDestination}get effectiveMobileSheetNavOpen(){return this.managed?this.managedMobileSheetNavOpen:this.mobileSheetNavOpen}get resolvedNavigationGroups(){if(this.navigation.groups?.length)return this.navigation.groups;return this.managedBrowseContext==="settings"?this.navigation.settingsGroups??[]:this.navigation.dashboardGroups??[]}get resolvedToolItems(){return this.tools.items??o}get availableInboxTools(){return this.resolvedToolItems.filter((s=>!s.isInactive&&(s.mobileDestination==="inbox"||b(s.id)))).map((s=>s.id))}componentWillLoad(){if(typeof window!=="undefined"){this.resolvedMode=g(window.innerWidth)}this.managedBrowseContext=this.navigation.browseContext??this.navStyle;this.managedMobileDestination=this.mobileDestination;this.managedMobileSheetNavOpen=this.mobileSheetNavOpen;this.managedInboxTool=f("",this.availableInboxTools)}componentDidLoad(){this.hasLoaded=true;this.syncSlottedNavStyle();this.syncSlottedMobileState();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(c,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const s=this.el.querySelector("ds-shell-tools, ds-panel-tools");this.toolsFullscreen=s?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(s){this.toolsFullscreen=s.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(c,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}handleNavigationChange(){this.managedBrowseContext=this.navigation.browseContext??this.navStyle}handleToolsChange(){if(this.managedActiveTool&&!this.resolvedToolItems.some((s=>s.id===this.managedActiveTool))){this.managedToolsOpen=false;this.managedActiveTool="";this.managedMobileDestination="area"}this.managedInboxTool=f(this.managedInboxTool,this.availableInboxTools)}onMobileStateChange(s,t){if(this.managed){this.managedMobileDestination=this.mobileDestination;this.managedMobileSheetNavOpen=this.mobileSheetNavOpen}this.syncSlottedMobileState();if(t===true&&!this.effectiveMobileSheetNavOpen&&this.resolvedMode==="mobile"){requestAnimationFrame((()=>{const s=this.el.querySelector("ds-mobile-bar-nav");const t=document.activeElement;if(t instanceof e&&s?.contains(t))return;void s?.focusDestination?.("sheet-nav")}))}}updateResponsiveMode(){if(typeof window==="undefined")return;const s=g(window.innerWidth);if(s===this.resolvedMode)return;this.resolvedMode=s;this.syncSlottedMobileState();this.scheduleChromeSync();if(this.hasLoaded)this.dsResponsiveModeChange.emit({mode:s})}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}}syncSlottedMobileState(){const s=this.el.querySelector("ds-shell-tools");const e=this.el.querySelector("ds-mobile-bar-nav");const t=this.el.querySelector("ds-mobile-sheet-nav");if(s){s.setAttribute("responsive-mode",this.resolvedMode);s.responsiveMode=this.resolvedMode}if(e){e.activeDestination=this.effectiveMobileDestination;e.sheetNavExpanded=this.effectiveMobileSheetNavOpen}if(t){t.open=this.effectiveMobileSheetNavOpen}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const s=this.el.querySelector(".shell-app__panel");if(s)this.resizeObserver.observe(s)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const s=window.visualViewport;if(s){s.addEventListener("resize",this.onVisualViewportChange,{passive:true});s.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const s=window.visualViewport;if(s){s.removeEventListener("resize",this.onVisualViewportChange);s.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const s=this.el.querySelector("ds-panel-nav .panel-nav");if(!s)return;this.panelWidthTokens=bs(s)}applyGradientVars(s,e){const t=s.style;for(const[s,i]of Object.entries(e)){if(i===null)t.removeProperty(s);else t.setProperty(s,i)}}clearGradientPaintVars(s){const e=[Y,Z,ts];for(const t of s){for(const s of e)t.style.removeProperty(s)}}syncChromeLayoutVars(s,e,t,i){if(s){s.style.setProperty(ss,t)}if(e){e.style.setProperty(es,i)}}resolvePanelWidthPx(s){const e=s?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=ms(s,e);return fs(this.panelWidthTokens,t)}const t=this.el.querySelector(".shell-app__panel");const i=t?.getBoundingClientRect().width??0;if(i>0)return i;if(this.panelWidthTokens.expandedPx>0){const t=ms(s,e);return fs(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return as()}chromeLayerActive(){return this.resolvedMode!=="mobile"&&X(this.gradientPreset)!=="none"}handleWindowKeyDown(s){if(!this.shortcutsEnabled)return;if(ds(s.target))return;const e=cs(s);if(!e)return;s.preventDefault();const t=this.el.querySelector("ds-panel-nav");const i=this.el.querySelector("ds-shell-tools, ds-panel-tools");if(e==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(e==="close-panel-tools"){void i?.closeDrawer?.();return}if(e.startsWith("open-tool:")&&i){const s=e.slice("open-tool:".length);void i.activateTool?.(s)}}async activateTool(s){const e=this.el.querySelector("ds-shell-tools, ds-panel-tools");await(e?.activateTool?.(s))}async closeGlobalSurface(){if(this.managedMobileSheetNavOpen){this.managedMobileSheetNavOpen=false;return}const s=this.el.querySelector("ds-shell-tools, ds-panel-tools");await(s?.closeDrawer?.())}async setToolPresentation(s){this.managedToolPresentation=s;this.toolsFullscreen=s==="fullscreen"}get currentArea(){const s=[...this.navigation.dashboardGroups??[],...this.navigation.settingsGroups??[],...this.resolvedNavigationGroups];const e=s.flatMap((s=>s.items));const t=this.navigation.activeId||k(this.navigation.currentUrl??this.pageChrome.currentUrl??"",e);return e.find((s=>s.id===t))??e[0]??{id:"area",icon:"MapPage",label:this.pageChrome.heading||"Area"}}toolDot(s){return this.resolvedToolItems.find((e=>e.id===s))?.dot??false}syncChrome(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");const t=[this.el,s,e].filter((s=>s!==null));const i=()=>{if(s)s.style.removeProperty(ss);if(e)e.style.removeProperty(es)};const a=X(this.gradientPreset);if(a==="none"||this.resolvedMode==="mobile"){this.clearGradientPaintVars(t);i();return}const n=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(s);const l=os();const h=ls(o);this.syncChromeLayoutVars(s,e,l,h);const r=is(a);const d=ns({width:n.width,height:n.height});const p=R(a);for(const s of t){if(s===this.el){this.applyGradientVars(s,{[Y]:r,[Z]:d,[ss]:l,[es]:h,[ts]:p});continue}const e=s.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(s,{[Y]:r,[Z]:d,[ts]:p,[ss]:e?null:l,[es]:e?h:null})}}renderManagedPanelNav(){const s=this.navigation;return i("ds-panel-nav",{navStyle:this.navStyle,groups:this.resolvedNavigationGroups,breakpoint:v,routerMode:s.routerMode??"event",activeId:s.activeId??"",currentUrl:s.currentUrl??this.pageChrome.currentUrl??"",storageKey:s.storageKey??"",userName:s.userName??"",userInitial:s.userInitial??"",accountMenuExpanded:s.accountMenuExpanded??false,dashboardLabel:s.dashboardLabel??"Dashboard",settingsLabel:s.settingsLabel??"Settings",accountLabel:s.accountLabel??"Account",dashboardNavigationLabel:s.dashboardNavigationLabel??"Dashboard navigation",settingsNavigationLabel:s.settingsNavigationLabel??"Settings navigation",navigationItemsLabel:s.navigationLabel??"Navigation items",onDsNavSelect:this.handleManagedNavSelect,onDsNavFooterAction:this.handleManagedNavFooterAction,onDsNavUserAction:this.handleManagedNavUserAction})}renderManagedBarNav(){return i("ds-bar-nav",{navStyle:this.navStyle,tabs:this.pageChrome.tabs??[],value:this.pageChrome.value??"",heading:this.pageChrome.routeHeading??this.pageChrome.heading,basePath:this.pageChrome.basePath??"",currentUrl:this.pageChrome.currentUrl??this.navigation.currentUrl??"",onDsTabChange:this.handleManagedTabChange})}renderManagedToolSlots(){const s=this.resolvedToolItems.map((s=>s.id));return s.flatMap((s=>[i("slot",{name:s,slot:s}),i("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderManagedTools(){const s=this.tools;return i("ds-shell-tools",{responsiveMode:this.resolvedMode,open:this.managedToolsOpen,activeTool:this.managedActiveTool,presentation:this.managedToolPresentation,fullscreenHeaderMode:s.fullscreenHeaderMode??"shared",items:this.resolvedToolItems,headers:s.headers??{},storageKey:s.storageKey??"",toolsLabel:s.toolsLabel??"Tools",toolShortcutsLabel:s.toolShortcutsLabel??"Tool shortcuts",inboxLabel:s.inboxLabel??"Inbox",inboxNavigationLabel:s.inboxNavigationLabel??"Inbox sections",onDsToolChange:this.handleManagedToolChange,onDsPresentationChange:this.handleManagedPresentationChange,onDsHeaderBack:this.handleManagedHeaderBack,onDsHeaderAction:this.handleManagedHeaderAction},this.renderManagedToolSlots())}renderManagedMobileSheetNav(){const s=this.navigation;return i("ds-mobile-sheet-nav",{open:this.managedMobileSheetNavOpen,browseContext:this.managedBrowseContext,dashboardGroups:s.dashboardGroups??s.groups??[],settingsGroups:s.settingsGroups??[],currentUrl:s.currentUrl??this.pageChrome.currentUrl??"",navigationLabel:s.navigationLabel??"Application navigation",dashboardLabel:s.dashboardLabel??"Dashboard",settingsLabel:s.settingsLabel??"Settings",accountLabel:s.accountLabel??"Account",onDsAreaSelect:this.handleManagedAreaSelect,onDsBrowseContextChange:this.handleManagedBrowseContext,onDsClose:this.handleManagedSheetClose})}renderManagedMobileBarNav(){return i("ds-mobile-bar-nav",{hidden:this.tools.mobileBarHidden??false,activeDestination:this.managedMobileDestination,currentArea:this.currentArea,sheetNavExpanded:this.managedMobileSheetNavOpen,searchLabel:this.tools.items?.find((s=>s.id==="search"))?.ariaLabel??"Search",agentsLabel:this.tools.items?.find((s=>s.id==="agents"))?.ariaLabel??"Agents",inboxLabel:this.tools.inboxLabel??"Inbox",helpLabel:this.tools.items?.find((s=>s.id==="help"))?.ariaLabel??"Help & Support",searchDot:this.toolDot("search"),agentsDot:this.toolDot("agents"),inboxDot:this.toolDot("messages")||this.toolDot("stacks")||this.toolDot("activity"),onDsSheetNavToggle:this.handleManagedSheetToggle,onDsDestinationChange:this.handleManagedMobileDestination})}renderManagedMobileLeading(){if(!this.pageChrome.showBack){return i("slot",{name:"page-header-leading",slot:"leading"})}return[i("ds-tooltip",{slot:"leading",label:this.pageChrome.backAriaLabel??"Back",side:"bottom",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.pageChrome.backIcon??"ChevronLeft",size:"md","aria-label":this.pageChrome.backAriaLabel??"Back",activeFill:false,hasBorder:false,onDsClick:s=>this.dsPageBack.emit(s.detail)})),i("slot",{name:"page-header-leading",slot:"leading"})]}renderManagedMobileActions(){const s=this.pageChrome.mobileActions??[];return[...s.map((s=>i("ds-tooltip",{slot:"trailing",key:s.id,label:s.ariaLabel,side:"bottom",size:"sm"},i("ds-button-unfilled",{id:s.triggerId||undefined,variant:"icon",icon:s.icon,size:"md","aria-label":s.ariaLabel,haspopup:s.haspopup,controls:s.controls,expanded:s.expanded,pressed:s.pressed,isActive:!!s.expanded,isInactive:s.isInactive,activeFill:false,hasBorder:false,onDsClick:()=>this.dsPageAction.emit(s.id)})))),i("slot",{name:"page-header-trailing",slot:"trailing"})]}renderManagedPage(){const s=this.pageChrome;const e=s.showBack?[]:s.tabs??[];const t=(s.subsections??[]).map((s=>"type"in s?{type:"divider"}:{id:s.id,label:s.label,isInactive:s.isInactive}));return i("ds-shell-page",{responsiveMode:this.resolvedMode,headerCapacity:_(this.resolvedMode,this.managedToolsOpen),contentInset:s.contentInset??"default"},i("ds-bar-title",{slot:"header",heading:s.heading??"",description:s.description??"",showBack:s.showBack??false,backAriaLabel:s.backAriaLabel??"Back",backLabel:s.backLabel??"Back",breadcrumbs:s.breadcrumbs??[],breadcrumbAriaLabel:s.breadcrumbAriaLabel??"Breadcrumb",sections:t,value:s.subvalue??"",sectionsAriaLabel:s.subsectionsAriaLabel??"Change page subsection",primaryAction:s.primaryAction??null,actions:s.actions??[],actionsAriaLabel:s.actionsAriaLabel??"More page actions",onDsBack:this.handleManagedPageBack,onDsBreadcrumbSelect:this.handleManagedBreadcrumbSelect,onDsSectionChange:this.handleManagedSubsectionChange,onDsAction:this.handleManagedPageAction}),i("ds-mobile-header",{slot:"mobile-header",heading:s.heading??"",headingLevel:s.headingLevel??"h1",sections:e,value:s.showBack?"":s.value??"",sectionsAriaLabel:s.sectionsAriaLabel??"Change page section",subsections:s.subsections??[],subvalue:s.subvalue??"",subsectionsAriaLabel:s.subsectionsAriaLabel??"Change page subsection",tone:s.tone??"default",onDsSectionChange:this.handleManagedTabChange,onDsSubsectionChange:this.handleManagedSubsectionChange},this.renderManagedMobileLeading(),this.renderManagedMobileActions()),i("slot",null))}renderSlottedShell(s,e,t,n,o){return i(a,{class:s,"responsive-mode":this.resolvedMode},i("div",{class:"shell-app__row"},i("div",{class:"shell-app__chrome","aria-hidden":"true"}),i("div",{class:"shell-app__panel","aria-hidden":o?"true":undefined,inert:o?true:undefined},i("slot",{name:"panel"})),i("div",{class:"shell-app__main"},i("div",{class:"shell-app__bar","aria-hidden":o?"true":undefined,inert:o?true:undefined},i("slot",{name:"bar"})),i("div",{class:"shell-app__tools","aria-hidden":e&&(!t||this.mobileSheetNavOpen)?"true":undefined,inert:e&&(!t||this.mobileSheetNavOpen)?true:undefined,hidden:e&&!t},i("slot",{name:"tools"})),i("div",{class:"shell-app__content","aria-hidden":o||n?"true":undefined,inert:o||n?true:undefined},i("slot",null)),i("div",{class:"shell-app__mobile-sheet-nav",hidden:!e||!this.mobileSheetNavOpen,"aria-hidden":e&&this.mobileSheetNavOpen?undefined:"true",inert:e&&this.mobileSheetNavOpen?undefined:true},i("slot",{name:"mobile-sheet-nav"})),i("div",{class:"shell-app__mobile-bar-nav",hidden:!e},i("slot",{name:"mobile-bar-nav"})))))}render(){const s=this.chromeLayerActive();const e=this.resolvedMode==="mobile";const t=e&&this.effectiveMobileDestination!=="area";const n=e&&(t||this.effectiveMobileSheetNavOpen);const o=!e&&this.toolsFullscreen;const l={"shell-app":true,"shell-app--gradient":s,[`shell-app--${this.navStyle}`]:true,[`shell-app--${this.resolvedMode}`]:true,"shell-app--tools-fullscreen":o,"shell-app--mobile-tool-active":t,"shell-app--mobile-sheet-nav-open":e&&this.effectiveMobileSheetNavOpen,"shell-app--managed":this.managed,"shell-app--slotted":!this.managed};if(!this.managed){return this.renderSlottedShell(l,e,t,n,o)}return i(a,{class:l,"responsive-mode":this.resolvedMode},i("div",{class:"shell-app__row"},i("div",{class:"shell-app__chrome","aria-hidden":"true"}),i("div",{class:"shell-app__panel","aria-hidden":o?"true":undefined,inert:o?true:undefined},this.renderManagedPanelNav()),i("div",{class:"shell-app__main"},i("div",{class:"shell-app__bar","aria-hidden":o?"true":undefined,inert:o?true:undefined},this.renderManagedBarNav()),i("div",{class:"shell-app__tools","aria-hidden":e&&(!t||this.effectiveMobileSheetNavOpen)?"true":undefined,inert:e&&(!t||this.effectiveMobileSheetNavOpen)?true:undefined,hidden:e&&!t},this.renderManagedTools()),i("div",{class:"shell-app__content","aria-hidden":o||n?"true":undefined,inert:o||n?true:undefined},this.renderManagedPage()),i("div",{class:"shell-app__mobile-sheet-nav",hidden:!e||!this.effectiveMobileSheetNavOpen,"aria-hidden":e&&this.effectiveMobileSheetNavOpen?undefined:"true",inert:e&&this.effectiveMobileSheetNavOpen?undefined:true},this.renderManagedMobileSheetNav()),i("div",{class:"shell-app__mobile-bar-nav",hidden:!e},this.renderManagedMobileBarNav()))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],navigation:[{handleNavigationChange:0}],tools:[{handleToolsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}}static get style(){return gs()}},[262,"ds-shell-app",{composition:[513],navigation:[16],pageChrome:[16],tools:[16],navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],mobileDestination:[1,"mobile-destination"],mobileSheetNavOpen:[4,"mobile-sheet-nav-open"],toolsFullscreen:[32],resolvedMode:[32],managedToolsOpen:[32],managedActiveTool:[32],managedToolPresentation:[32],managedMobileDestination:[32],managedMobileSheetNavOpen:[32],managedInboxTool:[32],managedBrowseContext:[32],activateTool:[64],closeGlobalSurface:[64],setToolPresentation:[64]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],navigation:[{handleNavigationChange:0}],tools:[{handleToolsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}]);function _s(){if(typeof customElements==="undefined"){return}const s=["ds-shell-app","ds-badge","ds-bar-nav","ds-bar-title","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-bar-nav","ds-mobile-header","ds-mobile-section-switcher","ds-mobile-sheet-nav","ds-panel-nav","ds-panel-tool-header","ds-panel-tools","ds-shell-page","ds-shell-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-app":if(!customElements.get(n(s))){customElements.define(n(s),vs)}break;case"ds-badge":if(!customElements.get(n(s))){y()}break;case"ds-bar-nav":if(!customElements.get(n(s))){u()}break;case"ds-bar-title":if(!customElements.get(n(s))){w()}break;case"ds-breadcrumb":if(!customElements.get(n(s))){x()}break;case"ds-button-filled":if(!customElements.get(n(s))){C()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){S()}break;case"ds-icon":if(!customElements.get(n(s))){D()}break;case"ds-loader":if(!customElements.get(n(s))){M()}break;case"ds-menu":if(!customElements.get(n(s))){A()}break;case"ds-mobile-bar-nav":if(!customElements.get(n(s))){L()}break;case"ds-mobile-header":if(!customElements.get(n(s))){B()}break;case"ds-mobile-section-switcher":if(!customElements.get(n(s))){z()}break;case"ds-mobile-sheet-nav":if(!customElements.get(n(s))){E()}break;case"ds-panel-nav":if(!customElements.get(n(s))){P()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){T()}break;case"ds-panel-tools":if(!customElements.get(n(s))){l()}break;case"ds-shell-page":if(!customElements.get(n(s))){j()}break;case"ds-shell-tools":if(!customElements.get(n(s))){N()}break;case"ds-swatch-picker":if(!customElements.get(n(s))){I()}break;case"ds-switch":if(!customElements.get(n(s))){O()}break;case"ds-tab-group":if(!customElements.get(n(s))){$()}break;case"ds-text":if(!customElements.get(n(s))){F()}break;case"ds-tooltip":if(!customElements.get(n(s))){G()}break}}))}_s();const ks=vs;const ys=_s;export{ks as DsShellApp,ys as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-shell-app.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as o,d as s}from"./p-
|
|
1
|
+
import{S as o,d as s}from"./p-C-kzknkR.js";const t=o;const k=s;export{t as DsShellTools,k as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-shell-tools.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 a}from"./index.js";import{d}from"./p-Ay1AX7Ql.js";import{a as l,s as n,b as h,r as o}from"./p-D2xWcVv6.js";const c=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-field-stack.sc-ds-slider-h,.ds-field-stack.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.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);box-sizing:border-box;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:default;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 u=0;let m=0;const b=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-${++u}`;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.isRange){l(this.internals,this.name,s,{inactive:this.isDisabled})}else{const t=String(s[0]);n(this.internals,this.name?t:null,{inactive:this.isDisabled,state:t})}}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(this.isRange){const t=h(s,2);this.value=t.length?t:this.cloneValue(this.initialValue)}else{const t=Number(o(s,"NaN"));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 a=Math.min(this.minimumGap,t-s);if(r-e<a){r=Math.min(t,this.snap(e+a));e=Math.max(s,this.snap(r-a))}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 a=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(a))}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 a=this.isRange?[...e]:e[0];if(this.valuesEqual(i,a))return false;this.value=a;this.dsChange.emit(this.cloneValue(a));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-${++m}`;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 a=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-a*2);return Math.min(1,Math.max(0,(i.bottom-a-s.clientY)/t))}const d=Math.max(1,i.width-a*2);const l=(s.clientX-i.left-a)/d;return Math.min(1,Math.max(0,l))}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 a=Math.abs(s-r[0]);const d=Math.abs(s-r[1]);if(a===d)return s>=r[0]?1:0;return a<d?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 a=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const d=this.isRange?r:a?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":d,"aria-labelledby":a,"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 a=this.inputId??`${this.generatedId}-input`;const d=!this.valuesEqual(this.publicValue,this.initialValue);const l=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"2ecdcdc27a8f93e744b7428101a09fe3c15bdf80","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,"ds-field-stack":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":d?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"0ab3b5b38e65a3c01b523cf5d9f410e4176e0e23",class:"slider__label-row"},this.label&&e("ds-text",{key:"f60bd7547ce2432c1374fad3a1d6ba5bf56cc66b",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:a,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"b56430b2f86015a420264efe69ef8d4a8bb73cc7",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},l)),e("div",{key:"cd07a50f1a8042de898b81bc031d041e34b8aa89",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:"8afa423f1a068a2f8dbba93c85c2479f836093a5",class:"slider__rail","aria-hidden":"true"},e("div",{key:"a2ca223d03b009ff0303657db4b20ce46bba380d",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 c()}},[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 f(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(a(s))){customElements.define(a(s),b)}break;case"ds-text":if(!customElements.get(a(s))){d()}break}}))}f();const v=b;const p=f;export{v as DsSlider,p as defineCustomElement};
|
|
1
|
+
import{p as s,H as t,c as i,h as e,a as r,t as a}from"./index.js";import{d}from"./p-Ay1AX7Ql.js";import{a as l,s as n,b as h,r as o}from"./p-D2xWcVv6.js";const c=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}.ds-field-stack.sc-ds-slider-h,.ds-field-stack.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.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);box-sizing:border-box;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:default;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 u=0;let m=0;const b=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-${++u}`;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.isRange){l(this.internals,this.name,s,{inactive:this.isDisabled})}else{const t=String(s[0]);n(this.internals,this.name?t:null,{inactive:this.isDisabled,state:t})}}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(this.isRange){const t=h(s,2);this.value=t.length?t:this.cloneValue(this.initialValue)}else{const t=Number(o(s,"NaN"));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 a=Math.min(this.minimumGap,t-s);if(r-e<a){r=Math.min(t,this.snap(e+a));e=Math.max(s,this.snap(r-a))}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 a=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(a))}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 a=this.isRange?[...e]:e[0];if(this.valuesEqual(i,a))return false;this.value=a;this.dsChange.emit(this.cloneValue(a));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-${++m}`;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 a=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-a*2);return Math.min(1,Math.max(0,(i.bottom-a-s.clientY)/t))}const d=Math.max(1,i.width-a*2);const l=(s.clientX-i.left-a)/d;return Math.min(1,Math.max(0,l))}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 a=Math.abs(s-r[0]);const d=Math.abs(s-r[1]);if(a===d)return s>=r[0]?1:0;return a<d?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 a=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const d=this.isRange?r:a?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":d,"aria-labelledby":a,"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 a=this.inputId??`${this.generatedId}-input`;const d=!this.valuesEqual(this.publicValue,this.initialValue);const l=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"2ecdcdc27a8f93e744b7428101a09fe3c15bdf80","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,"ds-field-stack":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":d?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"0ab3b5b38e65a3c01b523cf5d9f410e4176e0e23",class:"slider__label-row"},this.label&&e("ds-text",{key:"f60bd7547ce2432c1374fad3a1d6ba5bf56cc66b",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:a,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"b56430b2f86015a420264efe69ef8d4a8bb73cc7",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},l)),e("div",{key:"cd07a50f1a8042de898b81bc031d041e34b8aa89",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:"8afa423f1a068a2f8dbba93c85c2479f836093a5",class:"slider__rail","aria-hidden":"true"},e("div",{key:"a2ca223d03b009ff0303657db4b20ce46bba380d",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 c()}},[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 f(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(a(s))){customElements.define(a(s),b)}break;case"ds-text":if(!customElements.get(a(s))){d()}break}}))}f();const v=b;const p=f;export{v as DsSlider,p 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","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","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","map","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@import '../../utils/field-stack.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 box-sizing: border-box;\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: default;\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` (50% 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';\nimport {\n restoreNumberArrayFormState,\n restoreStringFormState,\n setFormControlValue,\n setRepeatedFormControlValue,\n} from '../../utils';\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.isRange) {\n setRepeatedFormControlValue(this.internals, this.name, values, {\n inactive: this.isDisabled,\n });\n } else {\n const value = String(values[0]);\n setFormControlValue(this.internals, this.name ? value : null, {\n inactive: this.isDisabled,\n state: value,\n });\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 (this.isRange) {\n const restored = restoreNumberArrayFormState(state, 2);\n this.value = restored.length\n ? restored\n : this.cloneValue(this.initialValue);\n } else {\n const restored = Number(restoreStringFormState(state, 'NaN'));\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 'ds-field-stack': 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":"0JAAA,MAAMA,EAAY,IAAM,4jMCyBxB,IAAIC,EAAW,EACf,IAAIC,EAAwB,E,MAQfC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,oJAW2BC,KAAAC,MAAqB,EACtCD,KAAAE,IAAc,EACdF,KAAAG,IAAc,IACdH,KAAAI,KAAe,EAEfJ,KAAAK,sBAAgC,EAIhCL,KAAAM,UAAqB,KACrBN,KAAAO,KAAmB,KACnBP,KAAAQ,YAAiC,aAEjCR,KAAAS,eAAuC,OAGtBT,KAAAU,SAAoB,MAEpBV,KAAAW,SAAoB,MACrCX,KAAAY,WAAsB,MAEKZ,KAAAa,UAA2B,KAMtDb,KAAAc,WAAqB,gBAErBd,KAAAe,SAAmB,gBAInBf,KAAAgB,WAAuB,GAKvBhB,KAAAiB,YAAsB,GACtBjB,KAAAkB,YAAsB,GACtBlB,KAAAmB,eAAyB,IAShBnB,KAAAoB,aAAe,MACfpB,KAAAqB,SAAW,MACXrB,KAAAsB,QAAU,MACVtB,KAAAuB,QAAU,MACVvB,KAAAwB,iBAAmB,EAGnBxB,KAAAyB,YAAc,eAAehC,IAC7BO,KAAA0B,QAAU,GAAG1B,KAAKyB,oBAC3BzB,KAAA2B,aAA4B,EAC5B3B,KAAA4B,mBAAkC,EAClC5B,KAAA6B,UAA2B,KAC3B7B,KAAA8B,kBAAiC,EACjC9B,KAAA+B,UAAmC,KAoNnC/B,KAAAgC,kBAAoB,CAACC,EAAcC,KACzC,MAAMC,EAAQF,EAAMG,OACpBpC,KAAKwB,iBAAmBU,EACxB,GAAIlC,KAAKW,UAAYX,KAAKqC,WAAY,CACpCF,EAAMlC,MAAQqC,OAAOtC,KAAKuC,eAAeL,IACzC,M,CAEFlC,KAAKwC,WAAWN,EAAOO,OAAON,EAAMlC,OAAO,EAGrCD,KAAA0C,mBAAqB,KAC3B,IAAK1C,KAAKW,WAAaX,KAAKqC,WAAYrC,KAAK2C,iBAAiB,EAGxD3C,KAAA4C,cAAiBX,IACvB,IAAKjC,KAAKW,SAAU,OACpB,GAAI,CAAC,YAAa,aAAc,UAAW,YAAa,OAAQ,MAAO,SAAU,YAAYkC,SAASZ,EAAMa,KAAM,CAChHb,EAAMc,gB,GAIF/C,KAAAgD,YAAed,IACrBlC,KAAKwB,iBAAmBU,EACxBlC,KAAKsB,QAAU,IAAI,EAGbtB,KAAAiD,WAAchB,IACpB,MAAMiB,EAAOjB,EAAMkB,cACnB,GAAID,aAAgBE,MAAQpD,KAAKqD,GAAGC,SAASJ,GAAO,OACpDlD,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,IAAI,EAGbvB,KAAAuD,gBAAmBtB,IACzB,GAAIA,EAAMG,SAAWpC,KAAKqD,IAAMrD,KAAKqC,WAAY,OACjD,MAAMmB,EAASxD,KAAKqD,GAAGI,iBAAmC,kBAC1DD,EAAOE,KAAKxD,IAAIF,KAAKwB,iBAAkBgC,EAAOG,OAAS,KAAKC,OAAO,EA4C7D5D,KAAA6D,kBAAqB5B,IAC3B,GAAIA,EAAM6B,SAAW,GAAK9D,KAAKqC,YAAcrC,KAAKW,SAAU,OAC5DsB,EAAMc,iBACN,MAAM9C,EAAQD,KAAK+D,iBAAiB9B,GACpC,MAAMC,EAAQlC,KAAKgE,kBAAkB/D,EAAOgC,EAAMG,QAClDpC,KAAKwB,iBAAmBU,EACxBlC,KAAK6B,UAAYI,EAAMJ,UACvB7B,KAAK8B,kBAAoB9B,KAAKiE,WAAWjE,KAAKkE,aAC9ClE,KAAKqB,SAAW,KAChBrB,KAAKwC,WAAWN,EAAOjC,GACvBD,KAAK+B,WAAWoC,kBAAkBlC,EAAMJ,WACxCuC,uBAAsB,IAAMpE,KAAKqD,GAAGI,iBAAmC,kBAAkBvB,IAAQ0B,MAAM,CAAES,cAAe,QAAQ,EAG1HrE,KAAAsE,kBAAqBrC,IAC3B,GAAIjC,KAAK6B,YAAcI,EAAMJ,YAAc7B,KAAKqB,SAAU,OAC1DY,EAAMc,iBACN/C,KAAKwC,WAAWxC,KAAKwB,iBAAkBxB,KAAK+D,iBAAiB9B,GAAO,CAuIvE,CA1bC,iBAAAsC,GACEvE,KAAK2B,aAAe3B,KAAKiE,WAAWjE,KAAKkE,aACzClE,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAKkE,aAC/ClE,KAAKwE,e,CAGP,gBAAAC,GACEzE,KAAK0E,kB,CAWP,aAAAF,GACE,MAAMG,EAAS3E,KAAKuC,eACpB,GAAIvC,KAAK4E,QAAS,CAChBC,EAA4B7E,KAAK8E,UAAW9E,KAAK+E,KAAMJ,EAAQ,CAC7DK,SAAUhF,KAAKqC,Y,KAEZ,CACL,MAAMpC,EAAQqC,OAAOqC,EAAO,IAC5BM,EAAoBjF,KAAK8E,UAAW9E,KAAK+E,KAAO9E,EAAQ,KAAM,CAC5D+E,SAAUhF,KAAKqC,WACf6C,MAAOjF,G,EAKb,oBAAAkF,CAAqBzE,GACnBV,KAAKoB,aAAeV,EACpBV,KAAKwE,e,CAGP,iBAAAY,GACEpF,KAAKC,MAAQD,KAAKiE,WAAWjE,KAAK2B,cAClC3B,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAK2B,cAC/C3B,KAAKqB,SAAW,MAChBrB,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,K,CAGjB,wBAAA8D,CAAyBH,GACvB,GAAIlF,KAAK4E,QAAS,CAChB,MAAMU,EAAWC,EAA4BL,EAAO,GACpDlF,KAAKC,MAAQqF,EAAS3B,OAClB2B,EACAtF,KAAKiE,WAAWjE,KAAK2B,a,KACpB,CACL,MAAM2D,EAAW7C,OAAO+C,EAAuBN,EAAO,QACtD,GAAIzC,OAAOgD,SAASH,GAAWtF,KAAKC,MAAQqF,C,CAE9CtF,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAKkE,Y,CAIjD,cAAMwB,CAASxD,EAAgB,GAC7B,MAAMsB,EAASxD,KAAKqD,GAAGI,iBAAmC,kBAC1DD,EAAOE,KAAKvD,IAAI,EAAGuD,KAAKxD,IAAIgC,EAAOsB,EAAOG,OAAS,MAAMC,O,CAG3D,cAAYvB,GACV,OAAOrC,KAAKU,UAAYV,KAAKY,YAAcZ,KAAKoB,Y,CAGlD,WAAYwD,GACV,OAAOe,MAAMC,QAAQ5F,KAAKC,M,CAG5B,YAAY4F,GACV,OAAOpD,OAAOgD,SAASzF,KAAKI,OAASJ,KAAKI,KAAO,EAAIJ,KAAKI,KAAO,C,CAGnE,WAAY0F,GACV,OAAOrD,OAAOgD,SAASzF,KAAKE,KAAOF,KAAKE,IAAM,C,CAGhD,WAAY6F,GACV,MAAMC,EAAUhG,KAAK8F,QACrB,OAAOrD,OAAOgD,SAASzF,KAAKG,MAAQH,KAAKG,IAAM6F,EAAUhG,KAAKG,IAAM6F,EAAUhG,KAAK6F,Q,CAGrF,cAAYI,GACV,MAAMC,EAAQzD,OAAOgD,SAASzF,KAAKK,uBAC/BqD,KAAKvD,IAAI,EAAGuD,KAAKyC,MAAMnG,KAAKK,wBAC5B,EACJ,OAAO6F,EAAQlG,KAAK6F,Q,CAGtB,kBAAYtD,GACV,MAAMyD,EAAUhG,KAAK8F,QACrB,MAAMM,EAAUpG,KAAK+F,QACrB,IAAK/F,KAAK4E,QAAS,MAAO,CAAC5E,KAAKqG,KAAK5D,OAAOzC,KAAKC,SAEjD,MAAMqG,EAAMtG,KAAKC,MACjB,IAAIsG,EAAQvG,KAAKqG,KAAK5D,OAAO6D,EAAI,IAAMN,IACvC,IAAIQ,EAAQxG,KAAKqG,KAAK5D,OAAO6D,EAAI,IAAMF,IACvC,GAAIG,EAAQC,GAAQD,EAAOC,GAAS,CAACA,EAAOD,GAE5C,MAAME,EAAM/C,KAAKxD,IAAIF,KAAKiG,WAAYG,EAAUJ,GAChD,GAAIQ,EAAQD,EAAQE,EAAK,CACvBD,EAAQ9C,KAAKxD,IAAIkG,EAASpG,KAAKqG,KAAKE,EAAQE,IAC5CF,EAAQ7C,KAAKvD,IAAI6F,EAAShG,KAAKqG,KAAKG,EAAQC,G,CAE9C,MAAO,CAACF,EAAOC,E,CAGjB,eAAYtC,GACV,MAAMS,EAAS3E,KAAKuC,eACpB,OAAOvC,KAAK4E,QAAU,IAAID,GAAUA,EAAO,E,CAGrC,UAAAV,CAAWhE,GACjB,OAAO0F,MAAMC,QAAQ3F,GAAS,IAAIA,GAASA,C,CAGrC,WAAAyG,CAAYC,EAAgBC,GAClC,GAAIjB,MAAMC,QAAQe,IAAMhB,MAAMC,QAAQgB,GAAI,CACxC,OAAOD,EAAEhD,SAAWiD,EAAEjD,QAAUgD,EAAEE,OAAM,CAAC5G,EAAOiC,IAAUjC,IAAU2G,EAAE1E,I,CAExE,OAAQyD,MAAMC,QAAQe,KAAOhB,MAAMC,QAAQgB,IAAMD,IAAMC,C,CAGjD,aAAAE,CAAc7G,GACpB,MAAM8G,EAAOzE,OAAOrC,GAAO+G,cAC3B,GAAID,EAAKlE,SAAS,MAAO,OAAOJ,OAAOsE,EAAKE,MAAM,MAAM,KAAO,EAC/D,OAAOF,EAAKlE,SAAS,KAAOkE,EAAKE,MAAM,KAAK,GAAGtD,OAAS,C,CAGlD,IAAA0C,CAAKpG,GACX,MAAM+F,EAAUhG,KAAK8F,QACrB,MAAMM,EAAUpG,KAAK+F,QACrB,MAAMmB,EAAYzE,OAAOgD,SAASxF,GAASA,EAAQ+F,EACnD,MAAMmB,EAAUnB,EAAUtC,KAAK0D,OAAOF,EAAYlB,GAAWhG,KAAK6F,UAAY7F,KAAK6F,SACnF,MAAMwB,EAAY3D,KAAKxD,IAAI,GAAIwD,KAAKvD,IAClCH,KAAK8G,cAAcd,GACnBhG,KAAK8G,cAAcV,GACnBpG,KAAK8G,cAAc9G,KAAK6F,YAE1B,OAAOpD,OAAOiB,KAAKxD,IAAIkG,EAAS1C,KAAKvD,IAAI6F,EAASmB,IAAUG,QAAQD,G,CAG9D,OAAAE,CAAQtH,GACd,OAASA,EAAQD,KAAK8F,UAAY9F,KAAK+F,QAAU/F,KAAK8F,SAAY,G,CAG5D,UAAA0B,CAAWtF,EAAeyC,EAAS3E,KAAKuC,gBAC9C,OAAOvC,KAAK4E,SAAW1C,IAAU,EAC7BwB,KAAKxD,IAAIF,KAAK+F,QAASpB,EAAO,GAAK3E,KAAKiG,YACxCjG,KAAK8F,O,CAGH,UAAA2B,CAAWvF,EAAeyC,EAAS3E,KAAKuC,gBAC9C,OAAOvC,KAAK4E,SAAW1C,IAAU,EAC7BwB,KAAKvD,IAAIH,KAAK8F,QAASnB,EAAO,GAAK3E,KAAKiG,YACxCjG,KAAK+F,O,CAGH,UAAAvD,CAAWN,EAAegB,GAChC,MAAMwE,EAAW1H,KAAKkE,YACtB,MAAMS,EAAS3E,KAAKuC,eACpB,MAAMoF,EAAcjE,KAAKxD,IAAIF,KAAKyH,WAAWvF,EAAOyC,GAASjB,KAAKvD,IAAIH,KAAKwH,WAAWtF,EAAOyC,GAAS3E,KAAKqG,KAAKnD,KAChHyB,EAAOzC,GAASyF,EAChB,MAAMC,EAAyB5H,KAAK4E,QAAU,IAAID,GAAUA,EAAO,GACnE,GAAI3E,KAAK0G,YAAYgB,EAAUE,GAAY,OAAO,MAElD5H,KAAKC,MAAQ2H,EACb5H,KAAK6H,SAASC,KAAK9H,KAAKiE,WAAW2D,IACnC,OAAO,I,CAGD,eAAAjF,GACN,MAAMoF,EAAU/H,KAAKkE,YACrB,GAAIlE,KAAK0G,YAAYqB,EAAS/H,KAAK4B,oBAAqB,OACxD5B,KAAK4B,mBAAqB5B,KAAKiE,WAAW8D,GAC1C/H,KAAKgI,SAASF,KAAK9H,KAAKiE,WAAW8D,G,CAG7B,gBAAArD,GACN,GAAI1E,KAAKiI,OAASjI,KAAKa,WAAab,KAAKkI,gBAAkBlI,KAAK4E,QAAS,OACzE,MAAMuD,EAAOxC,MAAMyC,KAAKpI,KAAK8E,UAAUuD,QAA+BC,KAAIL,IACxE,IAAKA,EAAMM,GAAIN,EAAMM,GAAK,qBAAqB7I,IAC/C,OAAOuI,EAAMM,EAAE,IAEjB,GAAIJ,EAAIxE,OAAQ3D,KAAKwI,mBAAqBL,EAAIM,KAAK,I,CAG7C,cAAAC,CAAezI,EAAeiC,GACpC,MAAMyG,EAAW3I,KAAKgB,WAAWkB,IAAUlC,KAAK4I,UAChD,GAAID,EAAU,OAAOA,EACrB,IAAIE,EACJ,IACEA,EAAS,IAAIC,KAAKC,aAAa/I,KAAKgJ,OAAQhJ,KAAKiJ,eAAeC,OAAOjJ,E,CACvE,MACA4I,EAASvG,OAAOrC,E,CAElB,MAAO,GAAGD,KAAKiB,cAAc4H,IAAS7I,KAAKkB,a,CAGrC,aAAAiI,CAAclJ,EAAeiC,GACnC,GAAIlC,KAAKgB,WAAWkB,IAAUlC,KAAK4I,WAAa5I,KAAKiB,aAAejB,KAAKkB,aAAelB,KAAKiJ,cAAe,CAC1G,OAAOjJ,KAAK0I,eAAezI,EAAOiC,E,CAEpC,OAAOkH,S,CA0CD,cAAAC,CAAepH,GACrB,MAAMqH,EAAUtJ,KAAK+B,UACrB,IAAKuH,EAAS,OAAO,EACrB,MAAMC,EAAOD,EAAQE,wBACrB,MAAMC,EAAQzJ,KAAKqD,GAAGqG,cAA2B,kBACjD,MAAMC,EAAYF,EACdzJ,KAAKQ,cAAgB,aAAeiJ,EAAMG,YAAcH,EAAMI,aAC9D,EAIJ,MAAMC,EAAQH,EAAY,EAE1B,GAAI3J,KAAKQ,cAAgB,WAAY,CACnC,MAAMuJ,EAASrG,KAAKvD,IAAI,EAAGoJ,EAAKS,OAASF,EAAQ,GACjD,OAAOpG,KAAKxD,IAAI,EAAGwD,KAAKvD,IAAI,GAAIoJ,EAAKU,OAASH,EAAQ7H,EAAMiI,SAAWH,G,CAGzE,MAAMA,EAASrG,KAAKvD,IAAI,EAAGoJ,EAAKY,MAAQL,EAAQ,GAChD,MAAMvC,GAAWtF,EAAMmI,QAAUb,EAAKc,KAAOP,GAASC,EACtD,OAAOrG,KAAKxD,IAAI,EAAGwD,KAAKvD,IAAI,EAAGoH,G,CAGzB,gBAAAxD,CAAiB9B,GACvB,OAAOjC,KAAKqG,KAAKrG,KAAK8F,QAAU9F,KAAKqJ,eAAepH,IAAUjC,KAAK+F,QAAU/F,KAAK8F,S,CAG5E,iBAAA9B,CAAkB/D,EAAemC,GACvC,MAAMkI,EAAgBlI,aAAkBvC,EACpCuC,EAAOmI,QAAqB,kBAC5B,KACJ,GAAID,GAAeE,QAAQ,SAAU,OAAO/H,OAAO6H,EAAcE,QAAQ,UACzE,IAAKxK,KAAK4E,QAAS,OAAO,EAE1B,MAAMD,EAAS3E,KAAKuC,eACpB,MAAMkI,EAAgB/G,KAAKgH,IAAIzK,EAAQ0E,EAAO,IAC9C,MAAMgG,EAAgBjH,KAAKgH,IAAIzK,EAAQ0E,EAAO,IAC9C,GAAI8F,IAAkBE,EAAe,OAAO1K,GAAS0E,EAAO,GAAK,EAAI,EACrE,OAAO8F,EAAgBE,EAAgB,EAAI,C,CAuBrC,qBAAAC,CAAsB3I,EAAqB4I,GACjD,GAAI7K,KAAK6B,YAAcI,EAAMJ,UAAW,OACxC,GAAI7B,KAAK+B,WAAW+I,kBAAkB7I,EAAMJ,WAAY7B,KAAK+B,UAAUgJ,sBAAsB9I,EAAMJ,WACnG7B,KAAK6B,UAAY,KACjB7B,KAAKqB,SAAW,MAChBrB,KAAKuB,QAAU,KACf,IAAKsJ,IAAa7K,KAAK0G,YAAY1G,KAAK8B,kBAAmB9B,KAAKkE,aAAclE,KAAK2C,iB,CAG7E,WAAAqI,CAAY/K,EAAeiC,GACjC,MAAM+I,EAAU/I,IAAU,EACtBlC,KAAKiL,SAAW,GAAGjL,KAAKyB,oBACxB,GAAGzB,KAAKiL,SAAW,GAAGjL,KAAKyB,0BAC/B,MAAMyJ,EAAahJ,IAAU,EAAIlC,KAAKc,WAAad,KAAKe,SACxD,MAAMoK,EAAanL,KAAK4E,QACpBwE,UACApJ,KAAKkI,iBAAmBlI,KAAKiI,MAAQjI,KAAK0B,QAAU1B,KAAKwI,oBAC7D,MAAM4C,EAAcpL,KAAK4E,QAAUsG,EAAaC,EAAa/B,UAAYpJ,KAAKa,UAE9E,OACEwK,EAAA,OACEC,MAAO,CACLC,cAAe,KACf,wBAAyBrJ,IAAUlC,KAAKwB,kBACzC,aACWc,OAAOJ,GACnBsJ,MAAO,CAAE,wBAAyBlJ,OAAOtC,KAAKuH,QAAQtH,MAEtDoL,EAAA,SACEC,MAAM,gBACNG,KAAK,QACLlD,GAAI0C,EACJ/K,IAAKF,KAAKwH,WAAWtF,GACrB/B,IAAKH,KAAKyH,WAAWvF,GACrB9B,KAAMJ,KAAK6F,SACX5F,MAAOA,EACPS,SAAUV,KAAKqC,WAAU,aACb+I,EAAW,kBACND,EAAU,mBACTnL,KAAK0L,gBAAe,iBACtB1L,KAAKmJ,cAAclJ,EAAOiC,GAAM,mBAC9BlC,KAAKQ,cAAgB,WAAa,WAAa4I,UAAS,gBAC3DpJ,KAAKW,SAAW,OAASyI,UACxCuC,QAAU1J,GAAiBjC,KAAKgC,kBAAkBC,EAAOC,GACzD0J,SAAU5L,KAAK0C,mBACfmJ,UAAW7L,KAAK4C,cAChBkJ,QAAS,IAAM9L,KAAKgD,YAAYd,GAChC6J,OAAQ/L,KAAKiD,aAEfoI,EAAA,QAAMC,MAAM,uBAAsB,cAAa,QAAOD,EAAA,QAAMC,MAAM,wB,CAKxE,MAAAU,GACE,MAAMrH,EAAS3E,KAAKuC,eACpB,MAAM0J,EAAQtH,EAAO,GACrB,MAAMuH,EAAOvH,EAAOA,EAAOhB,OAAS,GACpC,MAAMwI,EAAenM,KAAKiL,SAAW,GAAGjL,KAAKyB,oBAC7C,MAAM2K,GAASpM,KAAK0G,YAAY1G,KAAKkE,YAAalE,KAAK2B,cACvD,MAAM0K,EAAe1H,EAAO2D,KAAI,CAACrI,EAAOiC,IAAUlC,KAAK0I,eAAezI,EAAOiC,KAAQuG,KAAK,IAAIzI,KAAKmB,mBAEnG,OACEkK,EAACiB,EAAI,CAAAxJ,IAAA,2DACY9C,KAAKqC,WAAa,OAAS+G,UAC1CkC,MAAO,CACLiB,OAAQ,KACR,iBAAkB,KAClB,CAAC,WAAWvM,KAAKO,QAAS,KAC1B,CAAC,WAAWP,KAAKQ,eAAgB,KACjC,CAAC,iBAAiBR,KAAKS,kBAAmB,KAC1C,gBAAiBT,KAAK4E,QACtB,mBAAoB5E,KAAKW,SACzB,sBAAuBX,KAAKqC,YAC7B,mBACiBrC,KAAKQ,YAAW,gBACnBR,KAAKqC,WAAa,GAAK+G,UAAS,gBAChCpJ,KAAKW,SAAW,GAAKyI,UAAS,gBAC9BpJ,KAAKqB,SAAW,GAAK+H,UAAS,eAC/BpJ,KAAKsB,QAAU,GAAK8H,UAAS,cAC/B,GAAE,aACFgD,EAAQ,GAAKhD,UAAS,eACpBpJ,KAAKuB,QAAU,GAAK6H,UAAS,cAC9BpJ,KAAKqC,WAAa,GAAK+G,UACpCoD,QAASxM,KAAKuD,kBAEZvD,KAAKiI,OAASjI,KAAKM,YACnB+K,EAAA,OAAAvI,IAAA,2CAAKwI,MAAM,qBACRtL,KAAKiI,OACJoD,EAAA,WAAAvI,IAAA,2CACEwI,MAAM,gBACNmB,GAAG,QACHC,QAAQ,kBACRC,MAAM,UACNC,SAAQ,KACRC,IAAKV,EACLW,OAAQ9M,KAAK0B,SAEZ1B,KAAKiI,OAGTjI,KAAKM,WACJ+K,EAAA,WAAAvI,IAAA,2CACEwI,MAAM,gBACNmB,GAAG,OACHC,QAAQ,kBACRC,MAAM,UACNI,YAAY,gBAEXV,IAKThB,EAAA,OAAAvI,IAAA,2CACEwI,MAAM,kBACN0B,IAAKC,IAAajN,KAAK+B,UAAYkL,GAAW,IAAI,EAClDzB,MAAO,CACL,wBAAyBlJ,OAAOtC,KAAK4E,QAAU5E,KAAKuH,QAAQ0E,GAAS,GACrE,sBAAuB3J,OAAOtC,KAAKuH,QAAQ2E,KAE7CgB,cAAelN,KAAK6D,kBACpBsJ,cAAenN,KAAKsE,kBACpB8I,YAAcnL,GAAwBjC,KAAK4K,sBAAsB3I,EAAO,OACxEoL,gBAAkBpL,GAAwBjC,KAAK4K,sBAAsB3I,EAAO,OAE5EoJ,EAAA,OAAAvI,IAAA,2CAAKwI,MAAM,eAAc,cAAa,QAAOD,EAAA,OAAAvI,IAAA,2CAAKwI,MAAM,uBACvD3G,EAAO2D,KAAI,CAACrI,EAAOiC,IAAUlC,KAAKgL,YAAY/K,EAAOiC,M","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","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","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","map","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@import '../../utils/field-stack.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 box-sizing: border-box;\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: default;\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` (50% 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';\nimport {\n restoreNumberArrayFormState,\n restoreStringFormState,\n setFormControlValue,\n setRepeatedFormControlValue,\n} from '../../utils';\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.isRange) {\n setRepeatedFormControlValue(this.internals, this.name, values, {\n inactive: this.isDisabled,\n });\n } else {\n const value = String(values[0]);\n setFormControlValue(this.internals, this.name ? value : null, {\n inactive: this.isDisabled,\n state: value,\n });\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 (this.isRange) {\n const restored = restoreNumberArrayFormState(state, 2);\n this.value = restored.length\n ? restored\n : this.cloneValue(this.initialValue);\n } else {\n const restored = Number(restoreStringFormState(state, 'NaN'));\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 'ds-field-stack': 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
|
|
1
|
+
import{S as o,d as s}from"./p-BO4cj3iX.js";const t=o;const c=s;export{t as DsSwatchPicker,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-swatch-picker.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as
|
|
1
|
+
import{S as s,d as o}from"./p-BYWkksDO.js";const t=s;const p=o;export{t as DsSwitch,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-switch.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-CHpNyAo1.js";const p=o;const t=s;export{p as DsTabGroup,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tab-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as r,h as n,a,t as i}from"./index.js";import{d as s}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ay1AX7Ql.js";import{C as e}from"./p-CuwopElg.js";const d=()=>`.ds-control--lg.sc-ds-tag,.ds-control--lg.sc-ds-tag-h,.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag,.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag,.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tag-h,.ds-control--lg.sc-ds-tag{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--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-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-tag-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-tag-h,.ds-focus-ring.sc-ds-tag,.ds-focus-ring-inset.sc-ds-tag-h,.ds-focus-ring-inset.sc-ds-tag{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tag-h:focus-visible,.ds-focus-ring.sc-ds-tag: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-tag-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tag{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-tag-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tag: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-tag-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-on-strong-background-primary)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-on-medium-background-primary)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:default}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__button--expanded.sc-ds-tag::after{background:var(--ds-interaction-pressed)}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=e[this.size];const t=l[this.size];const r=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const i={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const s=[this.icon&&n("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:t,color:"inherit"}),n("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return n(a,{class:i,style:r},s)}return n(a,{class:i,style:r},n("button",{type:"button",class:{tag__button:true,"tag__button--expanded":this.expanded,"ds-interaction-fill":true,"ds-focus-ring-inset":true},"aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},s,n("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:t,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(i(o))){customElements.define(i(o),g)}break;case"ds-icon":if(!customElements.get(i(o))){s()}break;case"ds-text":if(!customElements.get(i(o))){c()}break}}))}u();const v=g;const f=u;export{v as DsTag,f as defineCustomElement};
|
|
1
|
+
import{p as o,H as t,c as r,h as n,a,t as i}from"./index.js";import{d as s}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ay1AX7Ql.js";import{C as e}from"./p-CuwopElg.js";const d=()=>`.ds-control--lg.sc-ds-tag,.ds-control--lg.sc-ds-tag-h,.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag,.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag,.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tag-h,.ds-control--lg.sc-ds-tag{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tag-h,.ds-control--md.sc-ds-tag{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tag-h,.ds-control--sm.sc-ds-tag{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tag-h,.ds-control--xs.sc-ds-tag{--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-interaction-fill.sc-ds-tag-h,.ds-interaction-fill.sc-ds-tag{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before,.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tag-h::before,.ds-interaction-fill.sc-ds-tag::before{z-index:1}.ds-interaction-fill.sc-ds-tag-h::after,.ds-interaction-fill.sc-ds-tag::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-tag-h,.ds-interaction-fill--bordered.sc-ds-tag{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tag-h::before,.ds-interaction-fill--selected.sc-ds-tag::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tag-h,.ds-interaction-fill--selected.sc-ds-tag{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tag-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tag-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tag:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tag-h>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill.sc-ds-tag>.ds-interaction-fill__content.sc-ds-tag,.ds-interaction-fill__content.sc-ds-tag{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tag-h,.ds-interaction-fill--on-faint.sc-ds-tag{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tag-h,.ds-interaction-fill--on-medium.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-bold.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-strong.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-translucent.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-inverted.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-media.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-always-dark.sc-ds-tag{--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-tag-h,.ds-interaction-fill--on-navigation.sc-ds-tag{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-tag-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-tag-h,.ds-focus-ring.sc-ds-tag,.ds-focus-ring-inset.sc-ds-tag-h,.ds-focus-ring-inset.sc-ds-tag{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tag-h:focus-visible,.ds-focus-ring.sc-ds-tag: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-tag-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tag{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-tag-h:focus-visible,.ds-focus-ring-inset.sc-ds-tag:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tag-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tag: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-tag-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tag::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tag-h,.ds-control-inactive.sc-ds-tag{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-tag{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-on-strong-background-primary)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-on-medium-background-primary)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{padding:0;gap:0}.tag__button.sc-ds-tag{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;max-width:100%;height:100%;padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);border-radius:inherit;color:inherit;cursor:default}.tag__button.sc-ds-tag:disabled{cursor:not-allowed}.tag__button--expanded.sc-ds-tag::after{background:var(--ds-interaction-pressed)}.tag__prefix-icon.sc-ds-tag,.tag__suffix-icon.sc-ds-tag{position:relative;z-index:2;display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.icon="";this.intent="neutral";this.contrast="faint";this.size="md";this.rounded=false;this.interactive=false;this.expanded=false;this.isInactive=false;this.handleClick=o=>{if(!this.interactive||this.isInactive)return;this.dsClick.emit(o)}}render(){const o=e[this.size];const t=l[this.size];const r=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const i={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--interactive":this.interactive,"ds-control-inactive":this.interactive&&this.isInactive};const s=[this.icon&&n("ds-icon",{class:"tag__prefix-icon",name:this.icon,size:t,color:"inherit"}),n("ds-text",{class:"tag__label",as:"span",variant:o,color:"inherit"},this.label)];if(!this.interactive){return n(a,{class:i,style:r},s)}return n(a,{class:i,style:r},n("button",{type:"button",class:{tag__button:true,"tag__button--expanded":this.expanded,"ds-interaction-fill":true,"ds-focus-ring-inset":true},"aria-haspopup":"menu","aria-expanded":this.expanded?"true":"false","aria-controls":this.ariaControls,disabled:this.isInactive||undefined,onClick:this.handleClick},s,n("ds-icon",{class:"tag__suffix-icon",name:"ChevronUpDown",size:t,color:"inherit"})))}static get style(){return d()}},[2,"ds-tag",{label:[1],icon:[1],intent:[1],contrast:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],interactive:[4],expanded:[4],ariaControls:[1,"aria-controls"],isInactive:[4,"is-inactive"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tag","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(i(o))){customElements.define(i(o),g)}break;case"ds-icon":if(!customElements.get(i(o))){s()}break;case"ds-text":if(!customElements.get(i(o))){c()}break}}))}u();const v=g;const f=u;export{v as DsTag,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tag.js.map
|