@ds-mo/ui 0.9.3 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-bar-nav-action.d.ts +11 -0
- package/dist/components/ds-bar-nav-action.js +2 -0
- package/dist/components/ds-bar-nav-action.js.map +1 -0
- package/dist/components/ds-bar-nav.d.ts +11 -0
- package/dist/components/ds-bar-nav.js +2 -0
- package/dist/components/ds-bar-nav.js.map +1 -0
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-group.js +1 -1
- package/dist/components/ds-button-group.js.map +1 -1
- package/dist/components/ds-button.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-card.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-empty-state.js.map +1 -1
- package/dist/components/ds-fade.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-header.js +1 -1
- package/dist/components/ds-header.js.map +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-label-wrap.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-nav.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-scrollbar.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-surface.js +1 -1
- package/dist/components/ds-surface.js.map +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toast-provider.js.map +1 -1
- package/dist/components/ds-toggle-button-group.js +1 -1
- package/dist/components/ds-toggle-button.js +1 -1
- package/dist/components/ds-toggle.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-DdN6WnFs.js → p-B51N5kiy.js} +2 -2
- package/dist/components/p-B7OGjJYj.js +2 -0
- package/dist/components/p-B7OGjJYj.js.map +1 -0
- package/dist/components/p-ByTsF1H6.js +2 -0
- package/dist/components/p-ByTsF1H6.js.map +1 -0
- package/dist/components/{p-DZN5IIgI.js → p-C_mk7BoY.js} +2 -2
- package/dist/components/{p-DZN5IIgI.js.map → p-C_mk7BoY.js.map} +1 -1
- package/dist/components/{p-CGuwZUFk.js → p-CkBXHj0e.js} +2 -2
- package/dist/components/{p-DRuXu8Ql.js → p-M_LSU5Uu.js} +2 -2
- package/dist/types/.stencil/BarNav/BarNav.d.ts +52 -0
- package/dist/types/.stencil/BarNav/index.d.ts +2 -0
- package/dist/types/.stencil/BarNavAction/BarNavAction.d.ts +20 -0
- package/dist/types/.stencil/BarNavAction/index.d.ts +2 -0
- package/dist/types/.stencil/TabGroup/TabGroup.d.ts +2 -11
- package/dist/types/components.d.ts +190 -0
- package/package.json +2 -2
- package/src/angular/index.ts +2 -0
- package/src/angular/proxies.ts +65 -0
- /package/dist/components/{p-DdN6WnFs.js.map → p-B51N5kiy.js.map} +0 -0
- /package/dist/components/{p-CGuwZUFk.js.map → p-CkBXHj0e.js.map} +0 -0
- /package/dist/components/{p-DRuXu8Ql.js.map → p-M_LSU5Uu.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"
|
|
1
|
+
import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"1b9cec9d54beadcd67ef2b849b84f36b2b578748",style:{display:"contents"}},e(r,{key:"5e633960e4fbc249f33ee71d49387ce93b84d02a",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"c60424261c1ef1f1f4da72f49814e224c04ade1c"})))}static get style(){return n()}},[262,"ds-surface",{background:[1],intent:[1],contrast:[1],elevation:[1],edge:[1],radius:[1],interactive:[4],selected:[4],inactive:[4],as:[1]}]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-surface"];r.forEach((r=>{switch(r){case"ds-surface":if(!customElements.get(s(r))){customElements.define(s(r),t)}break}}))}d();const i=t;const u=d;export{i as DsSurface,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-surface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["surfaceCss","RADIUS_PRESETS","Set","Surface","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","contrast","elevation","interactive","selected","inactive","as","render","Tag","intentClass","intent","elevClass","edgeClasses","edge","trim","split","map","e","radiusClass","radius","has","customRadius","undefined","cls","filter","Boolean","join","h","Host","key","style","display","class","borderRadius"],"sources":["src/wc/components/Surface/Surface.css?tag=ds-surface&encapsulation=scoped","src/wc/components/Surface/Surface.tsx"],"sourcesContent":[".surface {\n box-sizing: border-box;\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n background: none;\n text-decoration: none;\n text-align: left;\n cursor: default;\n appearance: none;\n -webkit-appearance: none;\n}\n\n/* Backgrounds */\n.bg-primary { background-color: var(--color-background-primary); }\n.bg-secondary { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n background-color: var(--color-background-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Intent × Contrast */\n.intent-brand-faint { background-color: var(--color-background-faint-brand); }\n.intent-brand-medium { background-color: var(--color-background-medium-brand); }\n.intent-brand-bold { background-color: var(--color-background-bold-brand); }\n.intent-brand-strong { background-color: var(--color-background-strong-brand); }\n.intent-positive-faint { background-color: var(--color-background-faint-positive); }\n.intent-positive-medium { background-color: var(--color-background-medium-positive); }\n.intent-positive-bold { background-color: var(--color-background-bold-positive); }\n.intent-positive-strong { background-color: var(--color-background-strong-positive); }\n.intent-negative-faint { background-color: var(--color-background-faint-negative); }\n.intent-negative-medium { background-color: var(--color-background-medium-negative); }\n.intent-negative-bold { background-color: var(--color-background-bold-negative); }\n.intent-negative-strong { background-color: var(--color-background-strong-negative); }\n.intent-warning-faint { background-color: var(--color-background-faint-warning); }\n.intent-warning-medium { background-color: var(--color-background-medium-warning); }\n.intent-warning-bold { background-color: var(--color-background-bold-warning); }\n.intent-warning-strong { background-color: var(--color-background-strong-warning); }\n.intent-caution-faint { background-color: var(--color-background-faint-caution); }\n.intent-caution-medium { background-color: var(--color-background-medium-caution); }\n.intent-caution-bold { background-color: var(--color-background-bold-caution); }\n.intent-caution-strong { background-color: var(--color-background-strong-caution); }\n.intent-ai-faint { background-color: var(--color-background-faint-ai); }\n.intent-ai-medium { background-color: var(--color-background-medium-ai); }\n.intent-ai-bold { background-color: var(--color-background-bold-ai); }\n.intent-ai-strong { background-color: var(--color-background-strong-ai); }\n.intent-neutral-faint { background-color: var(--color-background-faint-neutral); }\n.intent-neutral-medium { background-color: var(--color-background-medium-neutral); }\n.intent-neutral-bold { background-color: var(--color-background-bold-neutral); }\n.intent-neutral-strong { background-color: var(--color-background-strong-neutral); }\n.intent-walkthrough-faint { background-color: var(--color-background-faint-walkthrough); }\n.intent-walkthrough-medium { background-color: var(--color-background-medium-walkthrough); }\n.intent-walkthrough-bold { background-color: var(--color-background-bold-walkthrough); }\n.intent-walkthrough-strong { background-color: var(--color-background-strong-walkthrough); }\n.intent-guide-faint { background-color: var(--color-background-faint-guide); }\n.intent-guide-medium { background-color: var(--color-background-medium-guide); }\n.intent-guide-bold { background-color: var(--color-background-bold-guide); }\n.intent-guide-strong { background-color: var(--color-background-strong-guide); }\n\n/* Elevation */\n.elevation-none {}\n.elevation-depressed { box-shadow: var(--effect-elevation-depressed-sm); }\n.elevation-depressed-md { box-shadow: var(--effect-elevation-depressed-md); }\n.elevation-flat { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevation-elevated { box-shadow: var(--effect-elevation-elevated-md); }\n.elevation-floating { box-shadow: var(--effect-elevation-elevated-floating); }\n.elevation-overlayTop { box-shadow: var(--effect-elevation-elevated-panel-top); }\n.elevation-overlayRight { box-shadow: var(--effect-elevation-elevated-panel-right); }\n.elevation-overlayBottom { box-shadow: var(--effect-elevation-elevated-panel-bottom); }\n.elevation-overlayLeft { box-shadow: var(--effect-elevation-elevated-panel-left); }\n\n/* Edges */\n.edge-top { border-top: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-right { border-right: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-bottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-left { border-left: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n\n/* Radius */\n.radius-none { border-radius: var(--dimension-radius-000); }\n.radius-xs { border-radius: var(--dimension-radius-050); }\n.radius-sm { border-radius: var(--dimension-radius-075); }\n.radius-md { border-radius: var(--dimension-radius-100); }\n.radius-lg { border-radius: var(--dimension-radius-125); }\n.radius-xl { border-radius: var(--dimension-radius-175); }\n.radius-2xl { border-radius: var(--dimension-radius-200); }\n.radius-full { border-radius: var(--dimension-radius-half); }\n\n/* Interactive */\n.interactive {\n cursor: pointer;\n transition: transform var(--effect-motion-short-2);\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n}\n.interactive:hover { background-color: var(--_hover-bg); }\n.interactive:active { background-color: var(--_pressed-bg); transform: scale(var(--dimension-scale-subtle)); }\n.interactive:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n/* Selected */\n.selected::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n z-index: 0;\n background-color: var(--color-interaction-hover);\n}\n.selected > * { position: relative; z-index: 1; }\n\n/* Inactive */\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SurfaceIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\nexport type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\nexport type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';\nexport type SurfaceElevation =\n | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'\n | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';\nexport type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';\nexport type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});\nexport type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';\n\nconst RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);\n\n@Component({\n tag: 'ds-surface',\n styleUrl: 'Surface.css',\n scoped: true,\n})\nexport class Surface {\n @Prop() background: SurfaceBackground = 'transparent';\n @Prop() intent: SurfaceIntent | undefined;\n @Prop() contrast: SurfaceContrast = 'faint';\n @Prop() elevation: SurfaceElevation = 'none';\n /** Space-separated list of edges: \"top bottom\" etc. Only applies when elevation='none'. */\n @Prop() edge: string | undefined;\n @Prop() radius: SurfaceRadius | undefined;\n @Prop() interactive: boolean = false;\n @Prop() selected: boolean = false;\n @Prop() inactive: boolean = false;\n @Prop() as: SurfaceElement = 'div';\n\n render() {\n const Tag = this.as as any;\n\n const intentClass = this.intent\n ? `intent-${this.intent}-${this.contrast}`\n : `bg-${this.background}`;\n\n const elevClass = `elevation-${this.elevation}`;\n\n const edgeClasses = this.edge && this.elevation === 'none'\n ? this.edge.trim().split(/\\s+/).map(e => `edge-${e}`)\n : [];\n\n const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)\n ? `radius-${this.radius}`\n : '';\n\n const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)\n ? this.radius\n : undefined;\n\n const cls = [\n 'surface',\n intentClass,\n elevClass,\n ...edgeClasses,\n radiusClass,\n this.interactive ? 'interactive' : '',\n this.selected ? 'selected' : '',\n this.inactive ? 'inactive' : '',\n ].filter(Boolean).join(' ');\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag\n class={cls}\n style={customRadius ? { borderRadius: customRadius } : undefined}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAa,IAAM,01MCczB,MAAMC,EAAiB,IAAIC,IAAI,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,S,MAOhEC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAMUC,KAAAC,WAAgC,cAEhCD,KAAAE,SAA4B,QAC5BF,KAAAG,UAA8B,OAI9BH,KAAAI,YAAuB,MACvBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACpBN,KAAAO,GAAqB,KA6C9B,CA3CC,MAAAC,GACE,MAAMC,EAAMT,KAAKO,GAEjB,MAAMG,EAAcV,KAAKW,OACrB,UAAUX,KAAKW,UAAUX,KAAKE,WAC9B,MAAMF,KAAKC,aAEf,MAAMW,EAAY,aAAaZ,KAAKG,YAEpC,MAAMU,EAAcb,KAAKc,MAAQd,KAAKG,YAAc,OAChDH,KAAKc,KAAKC,OAAOC,MAAM,OAAOC,KAAIC,GAAK,QAAQA,MAC/C,GAEJ,MAAMC,EAAcnB,KAAKoB,QAAU3B,EAAe4B,IAAIrB,KAAKoB,QACvD,UAAUpB,KAAKoB,SACf,GAEJ,MAAME,EAAetB,KAAKoB,SAAW3B,EAAe4B,IAAIrB,KAAKoB,QACzDpB,KAAKoB,OACLG,UAEJ,MAAMC,EAAM,CACV,UACAd,EACAE,KACGC,EACHM,EACAnB,KAAKI,YAAc,cAAgB,GACnCJ,KAAKK,SAAW,WAAa,GAC7BL,KAAKM,SAAW,WAAa,IAC7BmB,OAAOC,SAASC,KAAK,KAEvB,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,aACtBJ,EAACnB,EAAG,CAAAqB,IAAA,2CACFG,MAAOT,EACPO,MAAOT,EAAe,CAAEY,aAAcZ,GAAiBC,WAEvDK,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["surfaceCss","RADIUS_PRESETS","Set","Surface","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","contrast","elevation","interactive","selected","inactive","as","render","Tag","intentClass","intent","elevClass","edgeClasses","edge","trim","split","map","e","radiusClass","radius","has","customRadius","undefined","cls","filter","Boolean","join","h","Host","key","style","display","class","borderRadius"],"sources":["src/wc/components/Surface/Surface.css?tag=ds-surface&encapsulation=scoped","src/wc/components/Surface/Surface.tsx"],"sourcesContent":[".surface {\n box-sizing: border-box;\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n background: none;\n text-decoration: none;\n text-align: left;\n cursor: default;\n appearance: none;\n -webkit-appearance: none;\n}\n\n/* Backgrounds */\n.bg-primary { background-color: var(--color-background-primary); }\n.bg-secondary { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n background-color: var(--color-background-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Intent × Contrast */\n.intent-brand-faint { background-color: var(--color-background-faint-brand); }\n.intent-brand-medium { background-color: var(--color-background-medium-brand); }\n.intent-brand-bold { background-color: var(--color-background-bold-brand); }\n.intent-brand-strong { background-color: var(--color-background-strong-brand); }\n.intent-positive-faint { background-color: var(--color-background-faint-positive); }\n.intent-positive-medium { background-color: var(--color-background-medium-positive); }\n.intent-positive-bold { background-color: var(--color-background-bold-positive); }\n.intent-positive-strong { background-color: var(--color-background-strong-positive); }\n.intent-negative-faint { background-color: var(--color-background-faint-negative); }\n.intent-negative-medium { background-color: var(--color-background-medium-negative); }\n.intent-negative-bold { background-color: var(--color-background-bold-negative); }\n.intent-negative-strong { background-color: var(--color-background-strong-negative); }\n.intent-warning-faint { background-color: var(--color-background-faint-warning); }\n.intent-warning-medium { background-color: var(--color-background-medium-warning); }\n.intent-warning-bold { background-color: var(--color-background-bold-warning); }\n.intent-warning-strong { background-color: var(--color-background-strong-warning); }\n.intent-caution-faint { background-color: var(--color-background-faint-caution); }\n.intent-caution-medium { background-color: var(--color-background-medium-caution); }\n.intent-caution-bold { background-color: var(--color-background-bold-caution); }\n.intent-caution-strong { background-color: var(--color-background-strong-caution); }\n.intent-ai-faint { background-color: var(--color-background-faint-ai); }\n.intent-ai-medium { background-color: var(--color-background-medium-ai); }\n.intent-ai-bold { background-color: var(--color-background-bold-ai); }\n.intent-ai-strong { background-color: var(--color-background-strong-ai); }\n.intent-neutral-faint { background-color: var(--color-background-faint-neutral); }\n.intent-neutral-medium { background-color: var(--color-background-medium-neutral); }\n.intent-neutral-bold { background-color: var(--color-background-bold-neutral); }\n.intent-neutral-strong { background-color: var(--color-background-strong-neutral); }\n.intent-walkthrough-faint { background-color: var(--color-background-faint-walkthrough); }\n.intent-walkthrough-medium { background-color: var(--color-background-medium-walkthrough); }\n.intent-walkthrough-bold { background-color: var(--color-background-bold-walkthrough); }\n.intent-walkthrough-strong { background-color: var(--color-background-strong-walkthrough); }\n.intent-guide-faint { background-color: var(--color-background-faint-guide); }\n.intent-guide-medium { background-color: var(--color-background-medium-guide); }\n.intent-guide-bold { background-color: var(--color-background-bold-guide); }\n.intent-guide-strong { background-color: var(--color-background-strong-guide); }\n\n/* Elevation */\n.elevation-none {}\n.elevation-depressed { box-shadow: var(--effect-elevation-depressed-sm); }\n.elevation-depressed-md { box-shadow: var(--effect-elevation-depressed-md); }\n.elevation-flat { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevation-elevated { box-shadow: var(--effect-elevation-elevated-md); }\n.elevation-floating { box-shadow: var(--effect-elevation-elevated-floating); }\n.elevation-overlayTop { box-shadow: var(--effect-elevation-elevated-panel-top); }\n.elevation-overlayRight { box-shadow: var(--effect-elevation-elevated-panel-right); }\n.elevation-overlayBottom { box-shadow: var(--effect-elevation-elevated-panel-bottom); }\n.elevation-overlayLeft { box-shadow: var(--effect-elevation-elevated-panel-left); }\n\n/* Edges */\n.edge-top { border-top: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-right { border-right: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-bottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-left { border-left: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n\n/* Radius */\n.radius-none { border-radius: var(--dimension-radius-000); }\n.radius-xs { border-radius: var(--dimension-radius-050); }\n.radius-sm { border-radius: var(--dimension-radius-075); }\n.radius-md { border-radius: var(--dimension-radius-100); }\n.radius-lg { border-radius: var(--dimension-radius-125); }\n.radius-xl { border-radius: var(--dimension-radius-175); }\n.radius-2xl { border-radius: var(--dimension-radius-200); }\n.radius-full { border-radius: var(--dimension-radius-half); }\n\n/* Interactive */\n.interactive {\n cursor: pointer;\n transition: transform var(--effect-motion-short-2);\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n}\n.interactive:hover { background-color: var(--_hover-bg); }\n.interactive:active { background-color: var(--_pressed-bg); transform: scale(var(--dimension-scale-subtle)); }\n.interactive:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n/* Selected */\n.selected::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n z-index: 0;\n background-color: var(--color-interaction-hover);\n}\n.selected > * { position: relative; z-index: 1; }\n\n/* Inactive */\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SurfaceIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\nexport type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\nexport type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';\nexport type SurfaceElevation =\n | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'\n | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';\nexport type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';\nexport type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});\nexport type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';\n\nconst RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);\n\n@Component({\n tag: 'ds-surface',\n styleUrl: 'Surface.css',\n scoped: true,\n})\nexport class Surface {\n @Prop() background: SurfaceBackground = 'transparent';\n @Prop() intent: SurfaceIntent | undefined;\n @Prop() contrast: SurfaceContrast = 'faint';\n @Prop() elevation: SurfaceElevation = 'none';\n /** Space-separated list of edges: \"top bottom\" etc. Only applies when elevation='none'. */\n @Prop() edge: string | undefined;\n @Prop() radius: SurfaceRadius | undefined;\n @Prop() interactive: boolean = false;\n @Prop() selected: boolean = false;\n @Prop() inactive: boolean = false;\n @Prop() as: SurfaceElement = 'div';\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n\n const intentClass = this.intent\n ? `intent-${this.intent}-${this.contrast}`\n : `bg-${this.background}`;\n\n const elevClass = `elevation-${this.elevation}`;\n\n const edgeClasses = this.edge && this.elevation === 'none'\n ? this.edge.trim().split(/\\s+/).map(e => `edge-${e}`)\n : [];\n\n const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)\n ? `radius-${this.radius}`\n : '';\n\n const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)\n ? this.radius\n : undefined;\n\n const cls = [\n 'surface',\n intentClass,\n elevClass,\n ...edgeClasses,\n radiusClass,\n this.interactive ? 'interactive' : '',\n this.selected ? 'selected' : '',\n this.inactive ? 'inactive' : '',\n ].filter(Boolean).join(' ');\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag\n class={cls}\n style={customRadius ? { borderRadius: customRadius } : undefined}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAa,IAAM,01MCczB,MAAMC,EAAiB,IAAIC,IAAI,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,S,MAOhEC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAMUC,KAAAC,WAAgC,cAEhCD,KAAAE,SAA4B,QAC5BF,KAAAG,UAA8B,OAI9BH,KAAAI,YAAuB,MACvBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACpBN,KAAAO,GAAqB,KAgD9B,CA9CC,MAAAC,GAIE,MAAMC,EAAMT,KAAKO,GAEjB,MAAMG,EAAcV,KAAKW,OACrB,UAAUX,KAAKW,UAAUX,KAAKE,WAC9B,MAAMF,KAAKC,aAEf,MAAMW,EAAY,aAAaZ,KAAKG,YAEpC,MAAMU,EAAcb,KAAKc,MAAQd,KAAKG,YAAc,OAChDH,KAAKc,KAAKC,OAAOC,MAAM,OAAOC,KAAIC,GAAK,QAAQA,MAC/C,GAEJ,MAAMC,EAAcnB,KAAKoB,QAAU3B,EAAe4B,IAAIrB,KAAKoB,QACvD,UAAUpB,KAAKoB,SACf,GAEJ,MAAME,EAAetB,KAAKoB,SAAW3B,EAAe4B,IAAIrB,KAAKoB,QACzDpB,KAAKoB,OACLG,UAEJ,MAAMC,EAAM,CACV,UACAd,EACAE,KACGC,EACHM,EACAnB,KAAKI,YAAc,cAAgB,GACnCJ,KAAKK,SAAW,WAAa,GAC7BL,KAAKM,SAAW,WAAa,IAC7BmB,OAAOC,SAASC,KAAK,KAEvB,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,aACtBJ,EAACnB,EAAG,CAAAqB,IAAA,2CACFG,MAAOT,EACPO,MAAOT,EAAe,CAAEY,aAAcZ,GAAiBC,WAEvDK,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{T as o,d as s}from"./p-B7OGjJYj.js";const t=o;const j=s;export{t as DsTabGroup,j as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tab-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","indicatorOffset","indicatorSize","resizeObserver","componentDidLoad","ResizeObserver","updateIndicator","list","el","querySelector","observe","disconnectedCallback","disconnect","onValueChange","onTabsChange","requestAnimationFrame","onOrientationChange","selected","closest","listRect","getBoundingClientRect","tabRect","top","height","left","width","selectTab","id","dsChange","emit","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","next","btn","focus","getBgClass","background","render","bgClass","indicatorStyle","transform","h","Host","class","role","ariaLabel","ariaLabelledby","undefined","map","tab","isSelected","type","panelId","tabIndex","onClick","label","count","style"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.tab-list {\n display: flex;\n align-items: center;\n position: relative;\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-secondary);\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n flex-direction: column;\n align-items: stretch;\n border-bottom: none;\n border-right: var(--dimension-stroke-width-015) solid var(--color-border-secondary);\n}\n\n.tab {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--color-foreground-secondary);\n position: relative;\n transition: color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);\n flex-shrink: 0;\n height: var(--dimension-size-400);\n box-sizing: border-box;\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n}\n\n.tab:hover { background-color: var(--_hover-bg); }\n.tab:active { background-color: var(--_pressed-bg); }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Count badge pill */\n.tab-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--dimension-size-200);\n height: var(--dimension-size-200);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-full, 9999px);\n background: var(--color-background-faint);\n color: var(--color-foreground-secondary);\n font-size: 11px;\n font-weight: 500;\n line-height: 1;\n}\n\n.tab-count--selected {\n background: var(--color-background-faint-brand);\n color: var(--color-foreground-bold-brand);\n}\n\n/* Background context */\n.on-medium {\n --_hover-bg: var(--color-interaction-on-medium-background-hover);\n --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n}\n\n.on-bold {\n --_hover-bg: var(--color-interaction-on-bold-background-hover);\n --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n --_hover-bg: var(--color-interaction-on-strong-background-hover);\n --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n --_hover-bg: var(--color-always-dark-interaction-hover);\n --_pressed-bg: var(--color-always-dark-interaction-pressed);\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* Sliding indicator — horizontal (default) */\n.indicator {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n background-color: var(--color-foreground-brand);\n border-radius: var(--dimension-radius-full, 9999px);\n transition: transform var(--effect-motion-short-3), width var(--effect-motion-short-3);\n pointer-events: none;\n}\n\n/* Sliding indicator — vertical */\n.tab-list--vertical .indicator {\n top: 0;\n left: auto;\n right: 0;\n bottom: auto;\n width: 2px;\n height: auto;\n transition: transform var(--effect-motion-short-3), height var(--effect-motion-short-3);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nexport interface TabItem {\n id: string;\n label: string;\n disabled?: boolean;\n /** id of the tabpanel this tab controls */\n panelId?: string;\n /** optional badge count shown as a pill next to label */\n count?: number;\n}\n\n@Component({\n tag: 'ds-tab-group',\n styleUrl: 'TabGroup.css',\n scoped: true,\n})\nexport class TabGroup {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() tabs: TabItem[] = [];\n @Prop() background: TabBackground | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n @State() private indicatorOffset: number = 0;\n @State() private indicatorSize: number = 0;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private resizeObserver: ResizeObserver | null = null;\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(() => this.updateIndicator());\n const list = this.el.querySelector('[role=\"tablist\"]') as HTMLElement;\n if (list) this.resizeObserver.observe(list);\n this.updateIndicator();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Watch('value')\n onValueChange() {\n this.updateIndicator();\n }\n\n @Watch('tabs')\n onTabsChange() {\n // Allow a render cycle before measuring\n requestAnimationFrame(() => this.updateIndicator());\n }\n\n @Watch('orientation')\n onOrientationChange() {\n requestAnimationFrame(() => this.updateIndicator());\n }\n\n private updateIndicator() {\n const selected = this.el.querySelector(`[data-tab-id=\"${this.value}\"]`) as HTMLElement | null;\n if (!selected) return;\n const list = selected.closest('.tab-list') as HTMLElement | null;\n if (!list) return;\n const listRect = list.getBoundingClientRect();\n const tabRect = selected.getBoundingClientRect();\n\n if (this.orientation === 'vertical') {\n this.indicatorOffset = tabRect.top - listRect.top;\n this.indicatorSize = tabRect.height;\n } else {\n this.indicatorOffset = tabRect.left - listRect.left;\n this.indicatorSize = tabRect.width;\n }\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsChange.emit(id);\n }\n\n /**\n * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n * Returns `from` unchanged if no other enabled tab exists.\n */\n private findEnabled(from: number, step: 1 | -1): number {\n const len = this.tabs.length;\n for (let n = 0; n < len; n++) {\n const i = (from + step * (n + 1) + len * (n + 1)) % len;\n if (!this.tabs[i]?.disabled) return i;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.tabs.length) return;\n\n const currentIdx = this.tabs.findIndex(t => t.id === this.value);\n const isVertical = this.orientation === 'vertical';\n\n let nextIdx: number | null = null;\n\n if (!isVertical) {\n if (e.key === 'ArrowRight') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowLeft') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n } else {\n if (e.key === 'ArrowDown') {\n nextIdx = this.findEnabled(currentIdx, 1);\n } else if (e.key === 'ArrowUp') {\n nextIdx = this.findEnabled(currentIdx, -1);\n }\n }\n\n if (e.key === 'Home') {\n const first = this.tabs.findIndex(t => !t.disabled);\n nextIdx = first === -1 ? null : first;\n } else if (e.key === 'End') {\n const lastEnabled = [...this.tabs].reverse().findIndex(t => !t.disabled);\n nextIdx = lastEnabled === -1 ? null : this.tabs.length - 1 - lastEnabled;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = this.tabs[nextIdx];\n this.selectTab(next.id);\n const btn = this.el.querySelector(`[data-tab-id=\"${next.id}\"]`) as HTMLElement | null;\n btn?.focus();\n }\n }\n\n private getBgClass(): string {\n if (!this.background || this.background === 'faint') return '';\n if (this.background === 'always-dark') return 'on-always-dark';\n return `on-${this.background}`;\n }\n\n render() {\n const bgClass = this.getBgClass();\n const isVertical = this.orientation === 'vertical';\n\n const indicatorStyle = isVertical\n ? {\n transform: `translateY(${this.indicatorOffset}px)`,\n height: `${this.indicatorSize}px`,\n }\n : {\n transform: `translateX(${this.indicatorOffset}px)`,\n width: `${this.indicatorSize}px`,\n };\n\n return (\n <Host class=\"tab-group-host\">\n <div\n role=\"tablist\"\n class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-orientation={isVertical ? 'vertical' : undefined}\n >\n {this.tabs.map(tab => {\n const isSelected = tab.id === this.value;\n return (\n <button\n key={tab.id}\n type=\"button\"\n role=\"tab\"\n data-tab-id={tab.id}\n class={{\n tab: true,\n 'tab--selected': isSelected,\n [bgClass]: !!bgClass,\n }}\n aria-selected={isSelected}\n aria-disabled={tab.disabled || undefined}\n aria-controls={tab.panelId ?? undefined}\n disabled={tab.disabled}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => !tab.disabled && this.selectTab(tab.id)}\n >\n <span class={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}>\n {tab.label}\n </span>\n {tab.count != null && tab.count > 0 && (\n <span class={{ 'tab-count': true, 'tab-count--selected': isSelected }}>\n {tab.count > 99 ? '99+' : tab.count}\n </span>\n )}\n </button>\n );\n })}\n <div class=\"indicator\" style={indicatorStyle} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as r,a
|
|
1
|
+
import{p as e,H as t,c as s,h as r,a,t as o}from"./index.js";const i=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:12px;color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:14px;width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function n(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return String(e).localeCompare(String(t))*r}const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,r)=>c(n(t,s),n(t,r),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:o}=this;const i=!o&&t.length===0;const c=this.selectedSet;const d=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return r(a,{key:"d148a1dc6f770fbaca93436d7455f18c16a698a7"},r("div",{key:"df60f34f5009cbb5f6215f799846848c703bd375",class:"table-wrapper","aria-busy":o||undefined},r("div",{key:"8fd3338f2d70a460519ee623b47c92a52fd989cd",class:"table-scroll"},r("div",{key:"61e35d966fb7ece1d4e915a33107bd2cf64faabd",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"d12f4aa09f97d1bac41331ac925f2c3488cffc27",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return r("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},r("span",{class:"text-body-small-emphasis",style:{color:"var(--color-foreground-secondary)"}},e.header),t&&r("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),o&&Array.from({length:5}).map(((t,s)=>r("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>r("div",{key:e.id,class:"cell",role:"cell"},r("div",{class:"skeleton"}))))))),i&&r("div",{key:"3d3fd73c6ce522a7d5883890852b67e75a0f3e5f",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"5b7bff2788e26f7a5fc68593977bd8e529b02a6b",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!o&&t.map(((t,s)=>{const a=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":a,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?a:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>r("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},r("span",{class:"text-body-medium cell-value"},String(n(e,t)??""))))))})))),l&&r("div",{key:"f2969cc57fdeb965550349c1239f1fa312257c33",class:"table-pagination"},r("button",{key:"8039b33f836b0a4c92bbd019e8079c8f9e70a3ce",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"e8efd9df9d23460ba995c9fa8026507ac53e11f5",class:"text-body-small"},"Previous")),r("span",{key:"77a15cbecff326056672684e14a88ade98c200ae",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"67376be547cc0b976e74e88336a09047785fb404",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"13d656a60f5d508bd2af2eed8dfbb95c2cac5f16",class:"text-body-small"},"Next")))))}static get style(){return i()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-table"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(o(e))){customElements.define(o(e),d)}break}}))}l();const b=d;const u=l;export{b as DsTable,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: 12px;\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n.cell-value {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n height: 14px;\n width: 60%;\n background-color: var(--color-background-translucent);\n border-radius: var(--dimension-radius-050);\n animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n 0% { opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n {col.header}\n </span>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? 'Loading' : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <div class=\"skeleton\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n {this.emptyMessage}\n </p>\n </div>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <div\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"cell\"\n >\n <span class=\"text-body-medium cell-value\">\n {String(getCellValue(col, row) ?? '')}\n </span>\n </div>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Previous</span>\n </button>\n <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n Page {this.pageIndex! + 1} of {totalPages}\n </span>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Next</span>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: 12px;\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n.cell-value {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n height: 14px;\n width: 60%;\n background-color: var(--color-background-translucent);\n border-radius: var(--dimension-radius-050);\n animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n 0% { opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n {col.header}\n </span>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? 'Loading' : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <div class=\"skeleton\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n {this.emptyMessage}\n </p>\n </div>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <div\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"cell\"\n >\n <span class=\"text-body-medium cell-value\">\n {String(getCellValue(col, row) ?? '')}\n </span>\n </div>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Previous</span>\n </button>\n <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n Page {this.pageIndex! + 1} of {totalPages}\n </span>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Next</span>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6DAAA,MAAMA,EAAW,IAAM,w1GCqBvB,SAASC,EAAgBC,EAAqBC,GAC5C,GAAID,EAAIE,YAAa,OAAQD,EAAgCD,EAAIE,aACjE,GAAIF,EAAIG,SAAU,OAAOH,EAAIG,SAASF,GACtC,OAAOG,SACT,CAEA,SAASC,EAAcC,EAAYC,EAAYC,GAC7C,MAAMC,EAAID,IAAQ,MAAQ,GAAI,EAC9B,GAAIF,GAAK,MAAQC,GAAK,KAAM,OAAO,EACnC,GAAID,GAAK,KAAM,OAAOG,EACtB,GAAIF,GAAK,KAAM,OAAQE,EACvB,UAAWH,IAAM,iBAAmBC,IAAM,SAAU,OAAQD,EAAIC,GAAKE,EACrE,OAAOC,OAAOJ,GAAGK,cAAcD,OAAOH,IAAME,CAC9C,C,MAOaG,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,uJAMUC,KAAAC,QAAyB,GACzBD,KAAAE,KAAkB,GAElBF,KAAAG,QAAmB,MACnBH,KAAAI,aAAuB,oBAEvBJ,KAAAK,aAAuB,GAGvBL,KAAAM,SAAmB,EAwN5B,CAhNC,cAAYC,GACV,OAAOP,KAAKQ,WAAaR,KAAKS,Y,CAGhC,eAAYC,GACV,OAAOV,KAAKC,QAAQU,QAAOC,IAAMA,EAAEC,M,CAGrC,gBAAYC,GACV,OAAOd,KAAKU,YAAYK,KAAIhC,IAC1B,GAAIA,EAAIiC,MAAO,cAAcjC,EAAIiC,QAAU,SAAW,GAAGjC,EAAIiC,UAAYjC,EAAIiC,MAC7E,MAAO,oBAAoB,IAC1BC,KAAK,I,CAGV,cAAYC,GACV,MAAMC,EAAOnB,KAAKO,WAClB,IAAKY,EAAM,OAAOnB,KAAKE,KACvB,MAAMnB,EAAMiB,KAAKC,QAAQmB,MAAKR,GAAKA,EAAES,KAAOF,EAAKG,WACjD,IAAKvC,EAAK,OAAOiB,KAAKE,KACtB,MAAO,IAAIF,KAAKE,MAAMiB,MAAK,CAAC9B,EAAGC,IAC7BF,EAAcN,EAAaC,EAAKM,GAAIP,EAAaC,EAAKO,GAAI6B,EAAKI,Y,CAInE,aAAYC,GACV,GAAIxB,KAAKyB,YAActC,UAAW,OAAOa,KAAKkB,WAC9C,MAAMQ,EAAQ1B,KAAKyB,UAAYzB,KAAKM,SACpC,OAAON,KAAKkB,WAAWS,MAAMD,EAAOA,EAAQ1B,KAAKM,S,CAGnD,cAAYsB,GACV,GAAI5B,KAAKyB,YAActC,UAAW,OAAO,EACzC,OAAO0C,KAAKC,KAAK9B,KAAKkB,WAAWa,OAAS/B,KAAKM,S,CAGjD,eAAY0B,GACV,IAAKhC,KAAKK,aAAc,OAAO,IAAI4B,IACnC,OAAO,IAAIA,IAAIjC,KAAKK,aAAa6B,MAAM,KAAKnB,IAAIoB,QAAQxB,QAAOyB,IAAMC,MAAMD,K,CAGrE,UAAAE,CAAWhB,GACjBtB,KAAKuC,OAAOC,KAAK,CAAElB,aAEnB,IAAKtB,KAAKQ,UAAW,CACnB,MAAMiC,EAAMzC,KAAKS,aACjBT,KAAKS,aAAegC,GAAKnB,WAAaA,EAClC,CAAEA,WAAUC,UAAWkB,EAAIlB,YAAc,MAAQ,OAAS,OAC1D,CAAED,WAAUC,UAAW,M,EAI/B,MAAAmB,GACE,MAAMhC,YAAEA,EAAWc,UAAEA,EAASI,WAAEA,EAAUzB,QAAEA,GAAYH,KACxD,MAAM2C,GAAWxC,GAAWqB,EAAUO,SAAW,EACjD,MAAMC,EAAchC,KAAKgC,YACzB,MAAMb,EAAOnB,KAAKO,WAClB,MAAMqC,EAAgB5C,KAAKyB,YAActC,WAAayC,EAAa,EAEnE,OACEiB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAe,YAAY7C,GAAWhB,WAC/C0D,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,MAAO,CAAEC,oBAAqBlD,KAAKc,cAAgBqC,KAAK,SAGzEN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAaG,KAAK,OAC1BzC,EAAYK,KAAIhC,IACf,MAAMqE,EAAWjC,GAAMG,WAAavC,EAAIsC,GACxC,MAAMgC,EAAWtE,EAAIuE,SAChBF,EAAYjC,EAAKI,YAAc,MAAQ,YAAc,aAAgB,OACtEpC,UACJ,OACE0D,EAAA,OACEE,IAAKhE,EAAIsC,GACT2B,MAAO,CACL,cAAe,KACf,0BAA2BjE,EAAIuE,SAC/B,cAAevE,EAAIwE,QAAU,QAC7B,eAAgBxE,EAAIwE,QAAU,UAEhCJ,KAAK,eAAc,YACRE,EACXG,SAAUzE,EAAIuE,SAAW,EAAInE,UAC7BsE,QAAS,IAAM1E,EAAIuE,UAAYtD,KAAKsC,WAAWvD,EAAIsC,IACnDqC,UAAYC,IACV,GAAI5E,EAAIuE,WAAaK,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,KAAM,CACxDY,EAAEC,iBACF5D,KAAKsC,WAAWvD,EAAIsC,G,GAGxB4B,MAAOlE,EAAI8E,SAAW,CAAEA,gBAAiB9E,EAAI8E,WAAa,SAAW,GAAG9E,EAAI8E,aAAe9E,EAAI8E,UAAuB1E,WAEtH0D,EAAA,QAAMG,MAAM,2BAA2BC,MAAO,CAAEa,MAAO,sCACpD/E,EAAIgF,QAENX,GACCP,EAAA,QAAMG,MAAM,iBAAgB,cAAa,QACtC7B,EAAKI,YAAc,MAAQ,IAAM,KAGlC,KAMXpB,GAAW6D,MAAMC,KAAK,CAAElC,OAAQ,IAAKhB,KAAI,CAACmD,EAAGC,IAC5CtB,EAAA,OACEE,IAAK,MAAMoB,IACXnB,MAAM,MACNG,KAAMgB,IAAM,EAAI,SAAW,MAAK,aACpBA,IAAM,EAAI,UAAYhF,WAEjCuB,EAAYK,KAAIhC,GACf8D,EAAA,OAAKE,IAAKhE,EAAIsC,GAAI2B,MAAM,OAAOG,KAAK,QAClCN,EAAA,OAAKG,MAAM,mBAOlBL,GACCE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAAYC,MAAO,CAAEmB,WAAY,WAC1CvB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEoB,OAAQ,IAAKP,MAAO,sCACtD9D,KAAKI,gBAMVD,GAAWqB,EAAUT,KAAI,CAAC/B,EAAKsF,KAC/B,MAAMC,EAAavC,EAAYwC,IAAIF,GACnC,OACEzB,EAAA,OACEE,IAAKuB,EACLtB,MAAO,CACLhE,IAAO,KACP,gBAAiBuF,EACjB,iBAAkB,MAEpBpB,KAAK,MACLK,SAAU,EAAC,gBACIxD,KAAKK,aAAekE,EAAapF,UAChDsE,QAAS,IAAMzD,KAAKyE,WAAWjC,KAAK,CAAExD,MAAKsF,aAC3CZ,UAAYC,IACV,GAAIA,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,IAAK,CACtCY,EAAEC,iBACF5D,KAAKyE,WAAWjC,KAAK,CAAExD,MAAKsF,Y,IAI/B5D,EAAYK,KAAIhC,GACf8D,EAAA,OACEE,IAAKhE,EAAIsC,GACT2B,MAAO,CACL0B,KAAQ,KACR,cAAe3F,EAAIwE,QAAU,QAC7B,eAAgBxE,EAAIwE,QAAU,UAEhCJ,KAAK,QAELN,EAAA,QAAMG,MAAM,+BACTvD,OAAOX,EAAaC,EAAKC,IAAQ,QAIpC,MAOb4D,GACCC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,UAAAE,IAAA,2CACE4B,KAAK,SACL3B,MAAM,cACN4B,SAAU5E,KAAKyB,YAAc,EAC7BgC,QAAS,KACPzD,KAAKyB,UAAYzB,KAAKyB,UAAa,EACnCzB,KAAK6E,aAAarC,KAAK,CAAEf,UAAWzB,KAAKyB,WAAY,GAGvDoB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,mBAAiB,aAE/BH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,kBAAkBC,MAAO,CAAEa,MAAO,sCAAqC,QAC3E9D,KAAKyB,UAAa,EAAC,OAAMG,GAEjCiB,EAAA,UAAAE,IAAA,2CACE4B,KAAK,SACL3B,MAAM,cACN4B,SAAU5E,KAAKyB,WAAcG,EAAa,EAC1C6B,QAAS,KACPzD,KAAKyB,UAAYzB,KAAKyB,UAAa,EACnCzB,KAAK6E,aAAarC,KAAK,CAAEf,UAAWzB,KAAKyB,WAAY,GAGvDoB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,mBAAiB,W","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as a,h as r,a as n,t as e}from"./index.js";const s=()=>`.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-tag-h{height:calc(var(--dimension-size-base) * 7 / 2);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-tag-h{height:var(--dimension-size-250);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-tag-h{height:var(--dimension-size-150);padding:0 var(--dimension-space-012);gap:0}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--rounded.tag--size-md.sc-ds-tag-h{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.tag--rounded.tag--size-sm.sc-ds-tag-h{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-050) + var(--dimension-space-050))}.tag--rounded.tag--size-xs.sc-ds-tag-h{padding-left:calc(var(--dimension-space-012) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-012) + var(--dimension-space-050))}.tag--on-medium.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-tag-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-tag-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-tag-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-positive)}.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-medium-brand)}.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-strong-brand)}.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{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-tag-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-tag-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-tag-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-tag-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-tag{line-height:0;padding:0 var(--dimension-space-050);white-space:nowrap;flex-shrink:0}.tag--size-sm.sc-ds-tag-h .tag__label.sc-ds-tag,.tag--size-xs.sc-ds-tag-h .tag__label.sc-ds-tag{padding:0 var(--dimension-space-025)}.tag__icon-slot.sc-ds-tag{display:contents}.tag--removable.sc-ds-tag-h{gap:var(--dimension-space-025)}.tag--size-xs.tag--removable.sc-ds-tag-h{gap:0}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag,.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-tag{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-tag-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const i={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:20,sm:16,xs:12};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=a(this,"dsRemove");this.dsClick=a(this,"dsClick");this.dsPressedChange=a(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.interactive=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=i[this.size];const a=c[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const s={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":this.interactive,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return r(n,{key:"938a204537e2c560a63fc5cb5b3fc1f3b7fcc4d5",class:s,style:e,onClick:this.interactive?this.handleClick:undefined,onKeyDown:this.interactive?this.handleKeyDown:undefined,role:this.interactive?"button":undefined,tabIndex:this.interactive?this.inactive?-1:0:undefined,"aria-pressed":this.interactive&&this.pressed!==undefined?String(this.pressed):undefined,"aria-disabled":this.inactive||undefined},r("span",{key:"6a8a7065f8e1ac10759e1569fa32f1bf2f66e0da",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"86c30cba8b91f26e1af81e25d1ec8c3dc6668edb",name:"icon"})),r("span",{key:"b505dfea7cb010ed31c934404dcd140aa17dd20f",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"f448b59fa577fc20049c45dc8cec59c2a346b995",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"b2bc08e379ecb0eee537624f09fd5410163b996c",name:"remove-icon"},r("span",{key:"f05cd73702a68115e98c2f33f5514a0385da4a51",class:"tag__remove-x",style:{fontSize:`${a}px`,lineHeight:"0"}},"✕"))))}static get style(){return s()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028],interactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(e(o))){customElements.define(e(o),g)}break}}))}d();const l=g;const u=d;export{l as DsTag,u as defineCustomElement};
|
|
1
|
+
import{p as o,H as t,c as a,h as r,a as n,t as e}from"./index.js";const s=()=>`.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-tag-h{height:calc(var(--dimension-size-base) * 7 / 2);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-tag-h{height:var(--dimension-size-250);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-tag-h{height:var(--dimension-size-150);padding:0 var(--dimension-space-012);gap:0}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--rounded.tag--size-md.sc-ds-tag-h{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.tag--rounded.tag--size-sm.sc-ds-tag-h{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-050) + var(--dimension-space-050))}.tag--rounded.tag--size-xs.sc-ds-tag-h{padding-left:calc(var(--dimension-space-012) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-012) + var(--dimension-space-050))}.tag--on-medium.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-tag-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-tag-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-tag-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-positive)}.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-medium-brand)}.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-strong-brand)}.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{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-tag-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-tag-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-tag-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-tag-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-tag{line-height:0;padding:0 var(--dimension-space-050);white-space:nowrap;flex-shrink:0}.tag--size-sm.sc-ds-tag-h .tag__label.sc-ds-tag,.tag--size-xs.sc-ds-tag-h .tag__label.sc-ds-tag{padding:0 var(--dimension-space-025)}.tag__icon-slot.sc-ds-tag{display:contents}.tag--removable.sc-ds-tag-h{gap:var(--dimension-space-025)}.tag--size-xs.tag--removable.sc-ds-tag-h{gap:0}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag,.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-tag{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-tag-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const i={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:20,sm:16,xs:12};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=a(this,"dsRemove");this.dsClick=a(this,"dsClick");this.dsPressedChange=a(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.interactive=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=i[this.size];const a=c[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const s={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":this.interactive,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return r(n,{key:"28126091bb43747aaef4b3049f66ef7a86fa1cae",class:s,style:e,onClick:this.interactive?this.handleClick:undefined,onKeyDown:this.interactive?this.handleKeyDown:undefined,role:this.interactive?"button":undefined,tabIndex:this.interactive?this.inactive?-1:0:undefined,"aria-pressed":this.interactive&&this.pressed!==undefined?String(this.pressed):undefined,"aria-disabled":this.inactive||undefined},r("span",{key:"dd596181f924f49e790f4ab1422814b04a78ff7b",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"ae15b93c4fa184d676f806457887df8d22a9f37f",name:"icon"})),r("span",{key:"47f844c7c12902a87f5892492308dbc058fefcf9",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"8290071c80d29e34b82b00ce43b37252e6d2f7b4",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"ed05569d457dbcb69d0dbd0f9a5e314081583383",name:"remove-icon"},r("span",{key:"25a6e1f26c1880056585dcbb6d907365e96081c3",class:"tag__remove-x",style:{fontSize:`${a}px`,lineHeight:"0"}},"✕"))))}static get style(){return s()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028],interactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(e(o))){customElements.define(e(o),g)}break}}))}d();const l=g;const u=d;export{l as DsTag,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tag.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-C_mk7BoY.js";const t=o;const m=s;export{t as DsText,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-text.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const
|
|
1
|
+
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const a=new Set;let r=0;function c(){a.forEach((t=>t()))}function d(t){a.add(t);return()=>a.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++r}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"0c1bd1b6ea8774530d314e9a51da83e25fcaf39e",style:{display:"contents"}},s("div",{key:"bcac6dacda12ad341d434e9caa87d873ae1d5c35",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:p[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return m()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}g();const h=f;const b=g;export{h as DsToastProvider,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toast-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n id: string;\n message: string;\n intent: ToastIntent;\n duration: number;\n}\n\nexport interface ToastOptions {\n message: string;\n intent?: ToastIntent;\n duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n listeners.add(fn);\n return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n return toasts;\n}\n\nexport const toast = {\n show(options: ToastOptions): string {\n const id = `ds-toast-${++idCounter}`;\n toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n emit();\n return id;\n },\n success(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'positive', ...options });\n },\n error(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'negative', ...options });\n },\n warning(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'warning', ...options });\n },\n info(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'neutral', ...options });\n },\n dismiss(id: string) {\n toasts = toasts.filter(t => t.id !== id);\n emit();\n },\n dismissAll() {\n toasts = [];\n emit();\n },\n};\n",".toast {\n animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n width: 100%;\n max-width: 420px;\n}\n\n.toast--exit {\n animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n padding: var(--dimension-space-025);\n margin-left: auto;\n font-size: 16px;\n line-height: 1;\n opacity: 0.7;\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n neutral: 'var(--color-background-bold-neutral)',\n brand: 'var(--color-background-bold-brand)',\n positive: 'var(--color-background-bold-positive)',\n negative: 'var(--color-background-bold-negative)',\n warning: 'var(--color-background-bold-warning)',\n caution: 'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n data: ToastData;\n exiting: boolean;\n timer: ReturnType<typeof setTimeout> | null;\n remaining: number;\n startedAt: number;\n paused: boolean;\n}\n\n@Component({\n tag: 'ds-toast-provider',\n styleUrl: 'Toast.css',\n scoped: true,\n})\nexport class ToastProvider {\n @Prop() position: ToastPosition = 'top-center';\n\n @State() private items: ToastItemState[] = [];\n\n private unsubscribe: (() => void) | null = null;\n\n connectedCallback() {\n this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n this.syncFromStore();\n }\n\n disconnectedCallback() {\n this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n this.unsubscribe?.();\n }\n\n private syncFromStore() {\n const storeToasts = getToasts();\n const existingIds = new Set(this.items.map(i => i.data.id));\n const storeIds = new Set(storeToasts.map(t => t.id));\n\n // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n // Add new items\n const newItems: ToastItemState[] = storeToasts\n .filter(t => !existingIds.has(t.id))\n .map(data => {\n const state: ToastItemState = {\n data,\n exiting: false,\n timer: null,\n remaining: data.duration,\n startedAt: 0,\n paused: false,\n };\n if (data.duration > 0) {\n state.startedAt = Date.now();\n state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n }\n return state;\n });\n\n this.items = [...kept, ...newItems];\n }\n\n private dismissItem(id: string) {\n this.items = this.items.map(i =>\n i.data.id === id ? { ...i, exiting: true, timer: null } : i\n );\n setTimeout(() => {\n this.items = this.items.filter(i => i.data.id !== id);\n toastService.dismiss(id);\n }, 200);\n }\n\n private pauseItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || i.paused || !i.timer) return i;\n clearTimeout(i.timer);\n const elapsed = Date.now() - i.startedAt;\n return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n });\n }\n\n private resumeItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n return { ...i, paused: false, timer, startedAt: Date.now() };\n });\n }\n\n private getPositionStyle(): Record<string, string> {\n const base: Record<string, string> = {\n position: 'fixed',\n zIndex: '9999',\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--dimension-space-075)',\n pointerEvents: 'none',\n padding: 'var(--dimension-space-100)',\n maxWidth: '480px',\n width: '100%',\n boxSizing: 'border-box',\n };\n switch (this.position) {\n case 'top-center':\n return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'top-right':\n return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n case 'bottom-center':\n return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'bottom-right':\n return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n }\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class=\"toast-container\"\n role=\"region\"\n aria-label=\"Notifications\"\n aria-live=\"polite\"\n style={this.getPositionStyle() as any}\n >\n {this.items.map(item => (\n <div\n key={item.data.id}\n class={{ toast: true, 'toast--exit': item.exiting }}\n role={item.data.intent === 'negative' ? 'alert' : 'status'}\n style={{\n backgroundColor: INTENT_BG[item.data.intent],\n borderRadius: 'var(--dimension-radius-125)',\n boxShadow: 'var(--effect-elevation-elevated-floating)',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--dimension-space-075)',\n padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n minHeight: 'var(--dimension-size-400)',\n pointerEvents: 'auto',\n color: 'var(--color-foreground-on-bold-background-primary)',\n boxSizing: 'border-box',\n }}\n onMouseEnter={() => this.pauseItem(item.data.id)}\n onMouseLeave={() => this.resumeItem(item.data.id)}\n >\n <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n <button\n type=\"button\"\n class=\"toast-dismiss\"\n onClick={() => this.dismissItem(item.data.id)}\n aria-label=\"Dismiss\"\n >\n ×\n </button>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n id: string;\n message: string;\n intent: ToastIntent;\n duration: number;\n}\n\nexport interface ToastOptions {\n message: string;\n intent?: ToastIntent;\n duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n listeners.add(fn);\n return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n return toasts;\n}\n\nexport const toast = {\n show(options: ToastOptions): string {\n const id = `ds-toast-${++idCounter}`;\n toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n emit();\n return id;\n },\n success(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'positive', ...options });\n },\n error(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'negative', ...options });\n },\n warning(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'warning', ...options });\n },\n info(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'neutral', ...options });\n },\n dismiss(id: string) {\n toasts = toasts.filter(t => t.id !== id);\n emit();\n },\n dismissAll() {\n toasts = [];\n emit();\n },\n};\n",".toast {\n animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n width: 100%;\n max-width: 420px;\n}\n\n.toast--exit {\n animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n padding: var(--dimension-space-025);\n margin-left: auto;\n font-size: 16px;\n line-height: 1;\n opacity: 0.7;\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n neutral: 'var(--color-background-bold-neutral)',\n brand: 'var(--color-background-bold-brand)',\n positive: 'var(--color-background-bold-positive)',\n negative: 'var(--color-background-bold-negative)',\n warning: 'var(--color-background-bold-warning)',\n caution: 'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n data: ToastData;\n exiting: boolean;\n timer: ReturnType<typeof setTimeout> | null;\n remaining: number;\n startedAt: number;\n paused: boolean;\n}\n\n@Component({\n tag: 'ds-toast-provider',\n styleUrl: 'Toast.css',\n scoped: true,\n})\nexport class ToastProvider {\n @Prop() position: ToastPosition = 'top-center';\n\n @State() private items: ToastItemState[] = [];\n\n private unsubscribe: (() => void) | null = null;\n\n connectedCallback() {\n this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n this.syncFromStore();\n }\n\n disconnectedCallback() {\n this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n this.unsubscribe?.();\n }\n\n private syncFromStore() {\n const storeToasts = getToasts();\n const existingIds = new Set(this.items.map(i => i.data.id));\n const storeIds = new Set(storeToasts.map(t => t.id));\n\n // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n // Add new items\n const newItems: ToastItemState[] = storeToasts\n .filter(t => !existingIds.has(t.id))\n .map(data => {\n const state: ToastItemState = {\n data,\n exiting: false,\n timer: null,\n remaining: data.duration,\n startedAt: 0,\n paused: false,\n };\n if (data.duration > 0) {\n state.startedAt = Date.now();\n state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n }\n return state;\n });\n\n this.items = [...kept, ...newItems];\n }\n\n private dismissItem(id: string) {\n this.items = this.items.map(i =>\n i.data.id === id ? { ...i, exiting: true, timer: null } : i\n );\n setTimeout(() => {\n this.items = this.items.filter(i => i.data.id !== id);\n toastService.dismiss(id);\n }, 200);\n }\n\n private pauseItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || i.paused || !i.timer) return i;\n clearTimeout(i.timer);\n const elapsed = Date.now() - i.startedAt;\n return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n });\n }\n\n private resumeItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n return { ...i, paused: false, timer, startedAt: Date.now() };\n });\n }\n\n private getPositionStyle(): Record<string, string> {\n const base: Record<string, string> = {\n position: 'fixed',\n zIndex: '9999',\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--dimension-space-075)',\n pointerEvents: 'none',\n padding: 'var(--dimension-space-100)',\n maxWidth: '480px',\n width: '100%',\n boxSizing: 'border-box',\n };\n switch (this.position) {\n case 'top-center':\n return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'top-right':\n return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n case 'bottom-center':\n return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'bottom-right':\n return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n }\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class=\"toast-container\"\n role=\"region\"\n aria-label=\"Notifications\"\n aria-live=\"polite\"\n style={this.getPositionStyle()}\n >\n {this.items.map(item => (\n <div\n key={item.data.id}\n class={{ toast: true, 'toast--exit': item.exiting }}\n role={item.data.intent === 'negative' ? 'alert' : 'status'}\n style={{\n backgroundColor: INTENT_BG[item.data.intent],\n borderRadius: 'var(--dimension-radius-125)',\n boxShadow: 'var(--effect-elevation-elevated-floating)',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--dimension-space-075)',\n padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n minHeight: 'var(--dimension-size-400)',\n pointerEvents: 'auto',\n color: 'var(--color-foreground-on-bold-background-primary)',\n boxSizing: 'border-box',\n }}\n onMouseEnter={() => this.pauseItem(item.data.id)}\n onMouseLeave={() => this.resumeItem(item.data.id)}\n >\n <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n <button\n type=\"button\"\n class=\"toast-dismiss\"\n onClick={() => this.dismissItem(item.data.id)}\n aria-label=\"Dismiss\"\n >\n ×\n </button>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,c as r,h as s,a as e,t as i}from"./index.js";import{d}from"./p-
|
|
1
|
+
import{p as t,H as o,c as r,h as s,a as e,t as i}from"./index.js";import{d}from"./p-CkBXHj0e.js";import{d as n}from"./p-M_LSU5Uu.js";const a=()=>`.group.sc-ds-toggle-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-toggle-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-toggle-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-toggle-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-toggle-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-toggle-button-group:active{transform:none !important}.divider.sc-ds-toggle-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-toggle-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-toggle-button-group{height:12px}.dividerGhostSM.sc-ds-toggle-button-group{height:16px}.item.sc-ds-toggle-button-group:hover+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.item:hover){opacity:0}.itemPressed.sc-ds-toggle-button-group+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.itemPressed){opacity:0}.group.sc-ds-toggle-button-group .itemShort.sc-ds-toggle-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.group.sc-ds-toggle-button-group .itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-toggle-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-toggle-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-toggle-button-group{border-radius:0 !important}.groupRounded.sc-ds-toggle-button-group .first.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .first.itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-toggle-button-group .last.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .last.itemPressed.sc-ds-toggle-button-group{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-toggle-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-toggle-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.items=[];this.value="";this.elevation="elevated";this.size="md";this.rounded=false}handleItemChange(t){if(t===this.value)return;this.value=t;this.dsChange.emit(t)}render(){const t=this.items;const o=t.length;const r=this.elevation;const i=r.charAt(0).toUpperCase()+r.slice(1);const d=this.background;const n=r==="none";const a={group:true,[`group${i}`]:true,groupRounded:this.rounded};return s(e,{key:"dcd10bf5e3a6a71e39a367363dcdcf0aed674980"},s("div",{key:"84d8fbf8348f64424f196b832d86acba57e75392",class:a,role:"group"},t.map(((t,e)=>{const i=e===0;const a=e===o-1;const g=!i&&!a;const u=t.id===this.value;const p=!!t.icon&&!t.label;const l=this.rounded&&!p&&this.size!=="xs";const c=this.size.toUpperCase();const m={item:true,first:i,last:a,middle:g,itemShort:n,itemPressed:n&&u,[`roundedFirst${c}`]:!!(l&&i),[`roundedLast${c}`]:!!(l&&a),[`roundedMid${c}`]:!!(l&&g)};const b={divider:true,dividerGhost:n,dividerGhostXS:n&&this.size==="xs",dividerGhostSM:n&&this.size==="sm"};return[e>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-toggle-button",{class:m,elevation:r,size:this.size,label:t.label,icon:t.icon,rounded:this.rounded,background:d,pressed:u,inactive:t.inactive,onDsChange:()=>this.handleItemChange(t.id)})]}))))}static get style(){return a()}},[2,"ds-toggle-button-group",{items:[16],value:[1025],elevation:[1],size:[1],rounded:[4],background:[1]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-toggle-button-group","ds-icon","ds-toggle-button"];t.forEach((t=>{switch(t){case"ds-toggle-button-group":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"ds-icon":if(!customElements.get(i(t))){d()}break;case"ds-toggle-button":if(!customElements.get(i(t))){n()}break}}))}u();const p=g;const l=u;export{p as DsToggleButtonGroup,l as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toggle-button-group.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-M_LSU5Uu.js";const t=o;const p=s;export{t as DsToggleButton,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toggle-button.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"
|
|
1
|
+
import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"4728d9faa1a85d09ee4f01d73fbe01c89a9db994",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"6525170db09dafd31a23d14069bdf57a5da6d52b",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toggle.js.map
|