@ds-mo/ui 0.8.7 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ds-button-group.d.ts +11 -0
- package/dist/components/ds-button-group.js +2 -0
- package/dist/components/ds-button-group.js.map +1 -0
- package/dist/components/ds-button.js +1 -1
- package/dist/components/ds-button.js.map +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-checkbox.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-fade.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-field.js.map +1 -1
- package/dist/components/ds-header.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-label-wrap.d.ts +11 -0
- package/dist/components/ds-label-wrap.js +2 -0
- package/dist/components/ds-label-wrap.js.map +1 -0
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-menu.js.map +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.d.ts +11 -0
- package/dist/components/ds-select.js +2 -0
- package/dist/components/ds-select.js.map +1 -0
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-surface.js +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-toggle-button-group.d.ts +11 -0
- package/dist/components/ds-toggle-button-group.js +2 -0
- package/dist/components/ds-toggle-button-group.js.map +1 -0
- package/dist/components/ds-toggle-button.d.ts +11 -0
- package/dist/components/ds-toggle-button.js +2 -0
- package/dist/components/ds-toggle-button.js.map +1 -0
- package/dist/components/ds-toggle.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-Cakvrs26.js → p-CGuwZUFk.js} +2 -2
- package/dist/components/p-CrfnBySX.js +2 -0
- package/dist/components/p-CrfnBySX.js.map +1 -0
- package/dist/components/p-DRuXu8Ql.js +2 -0
- package/dist/components/p-DRuXu8Ql.js.map +1 -0
- package/dist/components/{p-CIMd6yG3.js → p-DZN5IIgI.js} +2 -2
- package/dist/components/p-DdN6WnFs.js +2 -0
- package/dist/components/p-DdN6WnFs.js.map +1 -0
- package/dist/types/.stencil/ButtonGroup/ButtonGroup.d.ts +29 -0
- package/dist/types/.stencil/LabelWrap/LabelWrap.d.ts +15 -0
- package/dist/types/.stencil/PanelNav/PanelNav.d.ts +5 -3
- package/dist/types/.stencil/Select/Select.d.ts +39 -0
- package/dist/types/.stencil/TabGroup/TabGroup.d.ts +13 -2
- package/dist/types/.stencil/ToggleButton/ToggleButton.d.ts +37 -0
- package/dist/types/.stencil/ToggleButtonGroup/ToggleButtonGroup.d.ts +33 -0
- package/dist/types/components.d.ts +471 -0
- package/package.json +1 -1
- package/src/angular/index.ts +5 -0
- package/src/angular/proxies.ts +147 -4
- /package/dist/components/{p-Cakvrs26.js.map → p-CGuwZUFk.js.map} +0 -0
- /package/dist/components/{p-CIMd6yG3.js.map → p-DZN5IIgI.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n}\n\n.label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n position: relative;\n width: 100%;\n height: var(--dimension-size-400);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n}\n\n.track-inner {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-depressed-sm);\n pointer-events: none;\n z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n position: absolute;\n top: var(--dimension-space-025);\n right: 0;\n bottom: var(--dimension-space-025);\n left: 0;\n z-index: 1;\n pointer-events: none;\n}\n\n.fill {\n position: absolute;\n left: var(--dimension-space-025);\n top: 0;\n bottom: 0;\n width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n background-color: var(--color-background-bold-brand);\n box-shadow: var(--effect-elevation-elevated-sm);\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n pointer-events: none;\n}\n\n.track--at-min .fill {\n opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n position: absolute;\n top: 0;\n bottom: 0;\n left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n width: var(--dimension-size-150);\n padding: var(--dimension-space-025);\n box-sizing: border-box;\n pointer-events: none;\n z-index: 2;\n}\n\n.thumb::before {\n content: '';\n position: absolute;\n inset: var(--dimension-space-025);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n content: '';\n position: absolute;\n inset: var(--dimension-space-025);\n background-color: transparent;\n border-radius: var(--dimension-radius-050);\n transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n z-index: 3;\n}\n\n.range-input:disabled {\n cursor: not-allowed;\n}\n\n.range-input:hover {\n cursor: grab;\n}\n\n.range-input:active {\n cursor: grabbing;\n}\n\n.track--inactive {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n})\nexport class Slider {\n private generatedId = `ds-slider-${++idCounter}`;\n\n @Prop() value: number = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n @Prop() label!: string;\n @Prop() inactive: boolean = false;\n @Prop() valueText: string | undefined;\n /** Associates with an external <label>. Defaults to an auto-generated ID. */\n @Prop() inputId: string | undefined;\n\n @Event() dsChange!: EventEmitter<number>;\n\n private handleInput = (e: Event) => {\n this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n };\n\n private get pct() {\n const range = this.max - this.min;\n return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n }\n\n render() {\n const finalId = this.inputId ?? this.generatedId;\n const pct = this.pct;\n\n return (\n <Host class=\"field\">\n <div class=\"label-row\">\n <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n <span class=\"text-body-small-emphasis\">{this.value}</span>\n </div>\n <div\n class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n style={{ '--slider-pct': String(pct) } as Record<string, string>}\n >\n <div class=\"track-inner\">\n <div class=\"fill-track\"><div class=\"fill\" /></div>\n <div class=\"thumb\" />\n </div>\n <input\n type=\"range\"\n id={finalId}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.inactive}\n class=\"range-input\"\n aria-valuetext={this.valueText}\n onInput={this.handleInput}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n}\n\n.label-row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n position: relative;\n width: 100%;\n height: var(--dimension-size-400);\n padding: 0 var(--dimension-space-025);\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n user-select: none;\n box-sizing: border-box;\n}\n\n.track-inner {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-depressed-sm);\n pointer-events: none;\n z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n position: absolute;\n top: var(--dimension-space-025);\n right: 0;\n bottom: var(--dimension-space-025);\n left: 0;\n z-index: 1;\n pointer-events: none;\n}\n\n.fill {\n position: absolute;\n left: var(--dimension-space-025);\n top: 0;\n bottom: 0;\n width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n background-color: var(--color-background-bold-brand);\n box-shadow: var(--effect-elevation-elevated-sm);\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n pointer-events: none;\n}\n\n.track--at-min .fill {\n opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n position: absolute;\n top: 0;\n bottom: 0;\n left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n width: var(--dimension-size-150);\n padding: var(--dimension-space-025);\n box-sizing: border-box;\n pointer-events: none;\n z-index: 2;\n}\n\n.thumb::before {\n content: '';\n position: absolute;\n inset: var(--dimension-space-025);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-sm);\n border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n content: '';\n position: absolute;\n inset: var(--dimension-space-025);\n background-color: transparent;\n border-radius: var(--dimension-radius-050);\n transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n z-index: 3;\n}\n\n.range-input:disabled {\n cursor: not-allowed;\n}\n\n.range-input:hover {\n cursor: grab;\n}\n\n.range-input:active {\n cursor: grabbing;\n}\n\n.track--inactive {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-slider',\n styleUrl: 'Slider.css',\n scoped: true,\n})\nexport class Slider {\n private generatedId = `ds-slider-${++idCounter}`;\n\n @Prop() value: number = 0;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n @Prop() label!: string;\n @Prop() inactive: boolean = false;\n @Prop() valueText: string | undefined;\n /** Associates with an external <label>. Defaults to an auto-generated ID. */\n @Prop() inputId: string | undefined;\n\n @Event() dsChange!: EventEmitter<number>;\n\n private handleInput = (e: Event) => {\n this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n };\n\n private get pct() {\n const range = this.max - this.min;\n return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n }\n\n render() {\n const finalId = this.inputId ?? this.generatedId;\n const pct = this.pct;\n\n return (\n <Host class=\"field\">\n <div class=\"label-row\">\n <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n <span class=\"text-body-small-emphasis\">{this.value}</span>\n </div>\n <div\n class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n style={{ '--slider-pct': String(pct) } as Record<string, string>}\n >\n <div class=\"track-inner\">\n <div class=\"fill-track\"><div class=\"fill\" /></div>\n <div class=\"thumb\" />\n </div>\n <input\n type=\"range\"\n id={finalId}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.inactive}\n class=\"range-input\"\n aria-valuetext={this.valueText}\n onInput={this.handleInput}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,wqFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,SAAoB,MAOpBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA0CnE,CAvCC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEG,MAAO,KAAM,kBAAmB1B,KAAKM,SAAU,gBAAiBO,IAAQ,GACjFc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,SACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}
|
|
@@ -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:"313df30a2ba3ea71370adbac71da81381240ea82",style:{display:"contents"}},e(r,{key:"6ae03cd51bdac88a674a51946eb33f732eef0389",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"956022ff235147a0eccda29112a2ebecb927a101"})))}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,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as
|
|
1
|
+
import{p as o,H as t,c as r,h as e,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;position:relative;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch;border-bottom:none;border-right:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tab.sc-ds-tab-group:hover{background-color:var(--_hover-bg)}.tab.sc-ds-tab-group:active{background-color:var(--_pressed-bg)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-count.sc-ds-tab-group{display:inline-flex;align-items:center;justify-content:center;min-width:var(--dimension-size-200);height:var(--dimension-size-200);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-full, 9999px);background:var(--color-background-faint);color:var(--color-foreground-secondary);font-size:11px;font-weight:500;line-height:1}.tab-count--selected.sc-ds-tab-group{background:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.indicator.sc-ds-tab-group{position:absolute;bottom:0;left:0;height:2px;background-color:var(--color-foreground-brand);border-radius:var(--dimension-radius-full, 9999px);transition:transform var(--effect-motion-short-3), width var(--effect-motion-short-3);pointer-events:none}.tab-list--vertical.sc-ds-tab-group .indicator.sc-ds-tab-group{top:0;left:auto;right:0;bottom:auto;width:2px;height:auto;transition:transform var(--effect-motion-short-3), height var(--effect-motion-short-3)}`;const i=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal";this.indicatorOffset=0;this.indicatorSize=0;this.resizeObserver=null}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.updateIndicator()));const o=this.el.querySelector('[role="tablist"]');if(o)this.resizeObserver.observe(o);this.updateIndicator()}disconnectedCallback(){this.resizeObserver?.disconnect()}onValueChange(){this.updateIndicator()}onTabsChange(){requestAnimationFrame((()=>this.updateIndicator()))}onOrientationChange(){requestAnimationFrame((()=>this.updateIndicator()))}updateIndicator(){const o=this.el.querySelector(`[data-tab-id="${this.value}"]`);if(!o)return;const t=o.closest(".tab-list");if(!t)return;const r=t.getBoundingClientRect();const e=o.getBoundingClientRect();if(this.orientation==="vertical"){this.indicatorOffset=e.top-r.top;this.indicatorSize=e.height}else{this.indicatorOffset=e.left-r.left;this.indicatorSize=e.width}}selectTab(o){this.value=o;this.dsChange.emit(o)}findEnabled(o,t){const r=this.tabs.length;for(let e=0;e<r;e++){const a=(o+t*(e+1)+r*(e+1))%r;if(!this.tabs[a]?.disabled)return a}return o}handleKeyDown(o){if(!this.tabs.length)return;const t=this.tabs.findIndex((o=>o.id===this.value));const r=this.orientation==="vertical";let e=null;if(!r){if(o.key==="ArrowRight"){e=this.findEnabled(t,1)}else if(o.key==="ArrowLeft"){e=this.findEnabled(t,-1)}}else{if(o.key==="ArrowDown"){e=this.findEnabled(t,1)}else if(o.key==="ArrowUp"){e=this.findEnabled(t,-1)}}if(o.key==="Home"){const o=this.tabs.findIndex((o=>!o.disabled));e=o===-1?null:o}else if(o.key==="End"){const o=[...this.tabs].reverse().findIndex((o=>!o.disabled));e=o===-1?null:this.tabs.length-1-o}if(e!==null){o.preventDefault();const t=this.tabs[e];this.selectTab(t.id);const r=this.el.querySelector(`[data-tab-id="${t.id}"]`);r?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=t?{transform:`translateY(${this.indicatorOffset}px)`,height:`${this.indicatorSize}px`}:{transform:`translateX(${this.indicatorOffset}px)`,width:`${this.indicatorSize}px`};return e(a,{key:"1bd4f606e59ce068aa930ab2038f60c902fa84dd",class:"tab-group-host"},e("div",{key:"197a8dca7491a0cd501ffdffebe00d87956b0d7c",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map((t=>{const r=t.id===this.value;return e("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":r,[o]:!!o},"aria-selected":r,"aria-disabled":t.disabled||undefined,"aria-controls":t.panelId??undefined,disabled:t.disabled,tabIndex:r?0:-1,onClick:()=>!t.disabled&&this.selectTab(t.id)},e("span",{class:r?"text-body-medium-emphasis":"text-body-medium"},t.label),t.count!=null&&t.count>0&&e("span",{class:{"tab-count":true,"tab-count--selected":r}},t.count>99?"99+":t.count))})),e("div",{key:"f0bc327e3c4ad9f9dbc73ba23c2d4f3a4bb8fc01",class:"indicator",style:r})))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}],orientation:[{onOrientationChange:0}]}}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],indicatorOffset:[32],indicatorSize:[32]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}],orientation:[{onOrientationChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(s(o))){customElements.define(s(o),i)}break}}))}d();const c=i;const l=d;export{c as DsTabGroup,l 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","indicatorLeft","indicatorWidth","resizeObserver","componentDidLoad","ResizeObserver","updateIndicator","list","el","querySelector","observe","disconnectedCallback","disconnect","onValueChange","onTabsChange","requestAnimationFrame","selected","closest","listRect","getBoundingClientRect","tabRect","left","width","selectTab","id","dsChange","emit","handleKeyDown","e","active","filter","t","disabled","length","currentIdx","findIndex","nextIdx","key","preventDefault","next","btn","focus","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","isSelected","type","undefined","tabIndex","onClick","label","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.tab {\n display: flex;\n align-items: center;\n justify-content: center;\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/* 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 */\n.indicator {\n position: absolute;\n bottom: 0;\n height: 2px;\n background-color: var(--color-foreground-brand);\n border-radius: var(--dimension-radius-full, 9999px);\n transition: left var(--effect-motion-short-3), width var(--effect-motion-short-3);\n pointer-events: none;\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}\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\n @State() private indicatorLeft: number = 0;\n @State() private indicatorWidth: 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 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 this.indicatorLeft = tabRect.left - listRect.left;\n this.indicatorWidth = tabRect.width;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsChange.emit(id);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n const active = this.tabs.filter(t => !t.disabled);\n if (!active.length) return;\n\n const currentIdx = active.findIndex(t => t.id === this.value);\n\n let nextIdx: number | null = null;\n if (e.key === 'ArrowRight') {\n nextIdx = (currentIdx + 1) % active.length;\n } else if (e.key === 'ArrowLeft') {\n nextIdx = (currentIdx - 1 + active.length) % active.length;\n } else if (e.key === 'Home') {\n nextIdx = 0;\n } else if (e.key === 'End') {\n nextIdx = active.length - 1;\n }\n\n if (nextIdx !== null) {\n e.preventDefault();\n const next = active[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\n return (\n <Host class=\"tab-group-host\">\n <div\n role=\"tablist\"\n class=\"tab-list\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\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 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 </button>\n );\n })}\n <div\n class=\"indicator\"\n style={{ left: `${this.indicatorLeft}px`, width: `${this.indicatorWidth}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
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,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as r,a,t as
|
|
1
|
+
import{p as e,H as t,c as s,h as r,a as o,t as a}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:a}=this;const i=!a&&t.length===0;const c=this.selectedSet;const d=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return r(o,{key:"2902c7f7eae73255ed79e43e86f397cf6551dd80"},r("div",{key:"6b72350eeaedf13e9653de48608575a80c7852b8",class:"table-wrapper","aria-busy":a||undefined},r("div",{key:"9dd6d24c5c9f4a11716dc6456b3adaff30e46851",class:"table-scroll"},r("div",{key:"b3df6c36fb3d22908d43fe8495ecbb1888e51083",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"be72b8468e230ebbabbdccc480c87504fba51b3d",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"?"↑":"↓"))}))),a&&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:"9de7307f86db1c12387e23cf52d5d2506b8d401b",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"747b489680064c989c5c8bb6138d98684277359f",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!a&&t.map(((t,s)=>{const o=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":o,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?o: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:"8ebcae51633ed01dd8957acef82ca274f12c0971",class:"table-pagination"},r("button",{key:"26304f714e79cfcc85debddcfc8b1015e2223530",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"370cf734d9cd582009a488408bf3aa360a298aff",class:"text-body-small"},"Previous")),r("span",{key:"42b0d393a02a15e56914378f63939b2a9e9e8433",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"0e74f8a43c8da5ad201f6f158aee5c50c6f874bf",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:"a6881445abc753aa934d0776d3d2b25d0f1e3e78",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(a(e))){customElements.define(a(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":"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","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:"c15d76091369aa19f250ce06a6970f0e9e29067f",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:"d3e44293f32bc13f55d94386c5feb6325a0faba7",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"f05ed0d687bf98f7dbb046409fc0a6645492a862",name:"icon"})),r("span",{key:"d6d4d25132eaec28ce377bb4416b0ff4c59bbabb",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"b82be705895b1dae1fb5601dd766a8de7b717156",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"05e2ae73a48c4e85f9de10630dcbda37e2547228",name:"remove-icon"},r("span",{key:"11a2c700cd9c978e28fc249c79e8d90709d5a6b3",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:"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};
|
|
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-DZN5IIgI.js";const t=o;const p=s;export{t as DsText,p 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 r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;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:"
|
|
1
|
+
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;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:"e0927b3ad6fc615d3bcb2285b76ca0044670d7c5",style:{display:"contents"}},s("div",{key:"162421eae3ddfc05151478f9233bb7049c061c47",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
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface DsToggleButtonGroup extends Components.DsToggleButtonGroup, HTMLElement {}
|
|
4
|
+
export const DsToggleButtonGroup: {
|
|
5
|
+
prototype: DsToggleButtonGroup;
|
|
6
|
+
new (): DsToggleButtonGroup;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +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-CGuwZUFk.js";import{d as n}from"./p-DRuXu8Ql.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:"208af6627966778168c2d82c11315c357977a367"},s("div",{key:"f08cca546b0969a3c76929db55ead79bb852efe4",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
|
+
//# sourceMappingURL=ds-toggle-button-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["toggleButtonGroupCss","ToggleButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","value","elevation","size","rounded","handleItemChange","id","dsChange","emit","render","count","length","elev","elevKey","charAt","toUpperCase","slice","bg","background","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","isPressed","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","itemPressed","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","pressed","inactive","onDsChange"],"sources":["src/wc/components/ToggleButtonGroup/ToggleButtonGroup.css?tag=ds-toggle-button-group&encapsulation=scoped","src/wc/components/ToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n ToggleButtonGroup — flush row of ds-toggle-button components.\n The group container carries the elevation; individual button chrome\n (shadow/border) is suppressed via .item.\n ========================================================================== */\n\n.group {\n display: inline-flex;\n align-items: stretch;\n border-radius: var(--dimension-radius-050);\n position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n flex-shrink: 0;\n /* Suppress individual elevation so the group reads as one unit */\n box-shadow: none !important;\n border: none !important;\n /* Suppress scale-on-press to avoid gaps at the divider */\n}\n\n.item:active {\n transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n/* Full-height divider (elevated / flat / floating) */\n.divider {\n width: 1px;\n flex-shrink: 0;\n background-color: var(--color-border-tertiary);\n position: relative;\n z-index: 1;\n margin: 0 -0.5px;\n pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost { height: 20px; align-self: center; }\n.dividerGhostXS { height: 12px; }\n.dividerGhostSM { height: 16px; }\n\n/* Ghost hover-fade: hide divider adjacent to hovered ghost button */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* Ghost pressed-state: hide divider adjacent to selected button */\n.itemPressed + .dividerGhost,\n.dividerGhost:has(+ .itemPressed) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n border-top-left-radius: var(--dimension-radius-050) !important;\n border-top-right-radius: var(--dimension-radius-050) !important;\n border-bottom-right-radius: var(--dimension-radius-050) !important;\n border-bottom-left-radius: var(--dimension-radius-050) !important;\n}\n\n.group .itemPressed {\n border-top-left-radius: var(--dimension-radius-050) !important;\n border-top-right-radius: var(--dimension-radius-050) !important;\n border-bottom-right-radius: var(--dimension-radius-050) !important;\n border-bottom-left-radius: var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n}\n\n.last {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after,\n.groupRounded .first.itemPressed {\n border-top-left-radius: var(--dimension-radius-half) !important;\n border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after,\n.groupRounded .last.itemPressed {\n border-top-right-radius: var(--dimension-radius-half) !important;\n border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD { padding-left: var(--dimension-space-100) !important; }\n.roundedMidMD { padding-left: var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM { padding-left: var(--dimension-space-075) !important; }\n.roundedMidSM { padding-left: var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ToggleGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ToggleGroupSize = 'md' | 'sm' | 'xs';\nexport type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nexport interface ToggleGroupItem {\n id: string;\n label?: string;\n /** Icon name for <ds-icon>. */\n icon?: string;\n inactive?: boolean;\n}\n\n@Component({\n tag: 'ds-toggle-button-group',\n styleUrl: 'ToggleButtonGroup.css',\n scoped: true,\n})\nexport class ToggleButtonGroup {\n /**\n * Array of item descriptors. Set via JS property.\n * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];\n */\n @Prop() items: ToggleGroupItem[] = [];\n\n /** ID of the currently selected / pressed item. */\n @Prop({ mutable: true }) value: string = '';\n\n /** Chrome level for the group container. */\n @Prop() elevation: ToggleGroupElevation = 'elevated';\n\n /** Size passed to each ds-toggle-button. */\n @Prop() size: ToggleGroupSize = 'md';\n\n /** Pill shape for group + buttons. */\n @Prop() rounded: boolean = false;\n\n /** Parent surface context. */\n @Prop() background: ToggleGroupBackground | undefined;\n\n /** Emits the id of the newly selected item. */\n @Event() dsChange!: EventEmitter<string>;\n\n private handleItemChange(id: string) {\n if (id === this.value) return;\n this.value = id;\n this.dsChange.emit(id);\n }\n\n render() {\n const items = this.items;\n const count = items.length;\n const elev = this.elevation;\n const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n const bg = this.background;\n const isGhost = elev === 'none';\n\n const groupCls: Record<string, boolean> = {\n group: true,\n [`group${elevKey}`]: true,\n groupRounded: this.rounded,\n };\n\n return (\n <Host>\n <div class={groupCls} role=\"group\">\n {items.map((item, i) => {\n const isFirst = i === 0;\n const isLast = i === count - 1;\n const isMid = !isFirst && !isLast;\n const isPressed = item.id === this.value;\n const isIconOnly = !!item.icon && !item.label;\n const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';\n\n const itemCls: Record<string, boolean> = {\n item: true,\n first: isFirst,\n last: isLast,\n middle: isMid,\n itemShort: isGhost,\n itemPressed: isGhost && isPressed,\n [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n };\n\n const dividerCls: Record<string, boolean> = {\n divider: true,\n dividerGhost: isGhost,\n dividerGhostXS: isGhost && this.size === 'xs',\n dividerGhostSM: isGhost && this.size === 'sm',\n };\n\n return [\n i > 0 && (\n <div class={dividerCls} aria-hidden=\"true\" />\n ),\n <ds-toggle-button\n class={itemCls}\n elevation={elev}\n size={this.size}\n label={item.label}\n icon={item.icon}\n rounded={this.rounded}\n background={bg}\n pressed={isPressed}\n inactive={item.inactive}\n onDsChange={() => this.handleItemChange(item.id)}\n />,\n ];\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"qIAAA,MAAMA,EAAuB,IAAM,yuH,MCmBtBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,6EAUUC,KAAAC,MAA2B,GAGVD,KAAAE,MAAgB,GAGjCF,KAAAG,UAAkC,WAGlCH,KAAAI,KAAwB,KAGxBJ,KAAAK,QAAmB,KAiF5B,CAzES,gBAAAC,CAAiBC,GACvB,GAAIA,IAAOP,KAAKE,MAAO,OACvBF,KAAKE,MAAQK,EACbP,KAAKQ,SAASC,KAAKF,E,CAGrB,MAAAG,GACE,MAAMT,EAAQD,KAAKC,MACnB,MAAMU,EAAQV,EAAMW,OACpB,MAAMC,EAAOb,KAAKG,UAClB,MAAMW,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAKlB,KAAKmB,WAChB,MAAMC,EAAUP,IAAS,OAEzB,MAAMQ,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQR,KAAY,KACrBS,aAAcvB,KAAKK,SAGrB,OACEmB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxB3B,EAAM4B,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMpB,EAAQ,EAC7B,MAAMuB,GAASF,IAAYC,EAC3B,MAAME,EAAYL,EAAKvB,KAAOP,KAAKE,MACnC,MAAMkC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBvC,KAAKK,UAAY+B,GAAcpC,KAAKI,OAAS,KAC5E,MAAMoC,EAAUxC,KAAKI,KAAKY,cAE1B,MAAMyB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,EACX0B,YAAa1B,GAAWe,EACxB,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMa,EAAsC,CAC1CC,QAAS,KACTC,aAAc7B,EACd8B,eAAgB9B,GAAWpB,KAAKI,OAAS,KACzC+C,eAAgB/B,GAAWpB,KAAKI,OAAS,MAG3C,MAAO,CACL2B,EAAI,GACFP,EAAA,OAAKG,MAAOoB,EAAU,cAAc,SAEtCvB,EAAA,oBACEG,MAAOc,EACPtC,UAAWU,EACXT,KAAMJ,KAAKI,KACXkC,MAAOR,EAAKQ,MACZD,KAAMP,EAAKO,KACXhC,QAASL,KAAKK,QACdc,WAAYD,EACZkC,QAASjB,EACTkB,SAAUvB,EAAKuB,SACfC,WAAY,IAAMtD,KAAKM,iBAAiBwB,EAAKvB,MAEhD,K","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface DsToggleButton extends Components.DsToggleButton, HTMLElement {}
|
|
4
|
+
export const DsToggleButton: {
|
|
5
|
+
prototype: DsToggleButton;
|
|
6
|
+
new (): DsToggleButton;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
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:"5cf20132ba4bed4fba88eb8aee83c9b3ff64a70f",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:"cd46079a789c1d2e86b349ed87896d2b97a082fa",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
|