@ds-mo/ui 12.1.0 → 12.3.0

package/dist/components/ds-bar-workflow.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBarWorkflow extends Components.DsBarWorkflow, HTMLElement {}
+export const DsBarWorkflow: {
+    prototype: DsBarWorkflow;
+    new (): DsBarWorkflow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-bar-workflow.js

@@ -0,0 +1,2 @@
+import{p as s,H as i,c as o,h as t,a as e,t as a}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as r}from"./p-BhxwpOH8.js";import{d}from"./p-CoYFJD-w.js";import{d as l}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";import{d as f}from"./p-D3DYxbC5.js";const h=()=>`.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow,.ds-control--sm.sc-ds-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow,.ds-control--xs.sc-ds-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-bar-workflow-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow.sc-ds-bar-workflow{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow__identity.sc-ds-bar-workflow{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:0}.bar-workflow__heading.sc-ds-bar-workflow{display:inline-flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}.bar-workflow__actions.sc-ds-bar-workflow{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}`;const m=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=o(this,"dsExit");this.dsStepChange=o(this,"dsStepChange");this.dsSubmit=o(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.handlePrevious=()=>{if(this.previousStep&&!this.previousStep.isInactive){this.dsStepChange.emit(this.previousStep.id)}};this.handleNext=()=>{if(this.nextStep&&!this.isNextInactive&&!this.nextStep.isInactive){this.dsStepChange.emit(this.nextStep.id)}}}get currentIndex(){const s=this.steps.findIndex((s=>s.id===this.value));return s>=0?s:0}get previousStep(){return this.steps[this.currentIndex-1]??null}get nextStep(){return this.steps[this.currentIndex+1]??null}get isLastStep(){return this.steps.length<=1||this.currentIndex===this.steps.length-1}get resolvedHeading(){if(this.steps.length<=1)return this.heading;return`${this.heading} · ${this.currentIndex+1}/${this.steps.length}`}render(){const s=this.submitAction;return t(e,{key:"c5bb82cba86bb0625c943ab37b7da3214b5dcf48"},t("div",{key:"99f9d6223498075e4e20da5532e8e1f4a2732fd7",class:"bar-workflow"},t("div",{key:"2cf2ed56382f618e3a7f544ef77ac12f082ba928",class:"bar-workflow__identity"},t("ds-tooltip",{key:"5d6ba04341a94d44d934e26afcc00bcc321d7d6e",label:this.exitLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"ba3056ffc5f258e8a97ad0684aabde3faf234313",class:"bar-workflow__exit",variant:"icon",icon:"Cross","aria-label":this.exitAriaLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,onDsClick:s=>this.dsExit.emit(s.detail)})),t("ds-text",{key:"d6dede66a9a6fe475aa13b82e3a8637f06a70d66",class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),t("div",{key:"71a91c0beb23bcf693cdd408aa09701cc34bc682",class:"bar-workflow__actions"},this.previousStep?t("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?t("ds-tooltip",{label:s.label,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:s.label,"aria-label":s.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:s.type??"submit",isInactive:s.isInactive,isLoading:s.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)})):t("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext})))))}static get style(){return h()}},[2,"ds-bar-workflow",{heading:[1],steps:[16],value:[1],exitLabel:[1,"exit-label"],exitAriaLabel:[1,"exit-aria-label"],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"],submitAction:[16],isNextInactive:[4,"is-next-inactive"]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(a(s))){customElements.define(a(s),m)}break;case"ds-badge":if(!customElements.get(a(s))){n()}break;case"ds-button-filled":if(!customElements.get(a(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){d()}break;case"ds-icon":if(!customElements.get(a(s))){l()}break;case"ds-loader":if(!customElements.get(a(s))){c()}break;case"ds-text":if(!customElements.get(a(s))){b()}break;case"ds-tooltip":if(!customElements.get(a(s))){f()}break}}))}w();const p=m;const u=w;export{p as DsBarWorkflow,u as defineCustomElement};
+//# sourceMappingURL=ds-bar-workflow.js.map

package/dist/components/ds-bar-workflow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["barWorkflowCss","BarWorkflow","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","steps","value","exitLabel","exitAriaLabel","previousLabel","nextLabel","submitAction","label","type","isNextInactive","handlePrevious","previousStep","isInactive","dsStepChange","emit","id","handleNext","nextStep","currentIndex","index","findIndex","step","isLastStep","length","resolvedHeading","heading","render","submit","h","Host","key","class","side","size","variant","icon","background","activeFill","hasBorder","onDsClick","event","dsExit","detail","emphasis","color","as","lineTruncation","intent","contrast","isLoading","dsSubmit"],"sources":["src/wc/components/BarWorkflow/BarWorkflow.css?tag=ds-bar-workflow&encapsulation=scoped","src/wc/components/BarWorkflow/BarWorkflow.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow__identity {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n.bar-workflow__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.bar-workflow__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';\n\n@Component({\n  tag: 'ds-bar-workflow',\n  styleUrl: 'BarWorkflow.css',\n  scoped: true,\n})\nexport class BarWorkflow {\n  /** The workflow's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Ordered workflow steps. Step state is controlled by the application. */\n  @Prop() steps: BarWorkflowStep[] = [];\n\n  /** Id of the current workflow step. Falls back to the first step. */\n  @Prop() value: string = '';\n\n  /** Concise tooltip label for the Exit control. */\n  @Prop() exitLabel: string = 'Exit';\n\n  /** Workflow-specific accessible name for Exit. */\n  @Prop() exitAriaLabel: string = 'Exit workflow';\n\n  /** Tooltip and accessible name for the previous-step control. */\n  @Prop() previousLabel: string = 'Previous step';\n\n  /** Tooltip and accessible name for the next-step control. */\n  @Prop() nextLabel: string = 'Next step';\n\n  /** The final-step Save or Submit action. */\n  @Prop() submitAction: BarWorkflowSubmitAction = {\n    label: 'Save',\n    type: 'submit',\n  };\n\n  /** Prevent advancing while the current step is incomplete or invalid. */\n  @Prop() isNextInactive: boolean = false;\n\n  /** Emitted when Exit is activated. */\n  @Event() dsExit!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the target previous or next step id. The component never mutates value. */\n  @Event() dsStepChange!: EventEmitter<string>;\n\n  /** Emitted when the final Save or Submit control is activated. */\n  @Event() dsSubmit!: EventEmitter<MouseEvent>;\n\n  private get currentIndex(): number {\n    const index = this.steps.findIndex(step => step.id === this.value);\n    return index >= 0 ? index : 0;\n  }\n\n  private get previousStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex - 1] ?? null;\n  }\n\n  private get nextStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex + 1] ?? null;\n  }\n\n  private get isLastStep(): boolean {\n    return this.steps.length <= 1 || this.currentIndex === this.steps.length - 1;\n  }\n\n  private get resolvedHeading(): string {\n    if (this.steps.length <= 1) return this.heading;\n    return `${this.heading} · ${this.currentIndex + 1}/${this.steps.length}`;\n  }\n\n  private handlePrevious = () => {\n    if (this.previousStep && !this.previousStep.isInactive) {\n      this.dsStepChange.emit(this.previousStep.id);\n    }\n  };\n\n  private handleNext = () => {\n    if (this.nextStep && !this.isNextInactive && !this.nextStep.isInactive) {\n      this.dsStepChange.emit(this.nextStep.id);\n    }\n  };\n\n  render() {\n    const submit = this.submitAction;\n    return (\n      <Host>\n        <div class=\"bar-workflow\">\n          <div class=\"bar-workflow__identity\">\n            <ds-tooltip label={this.exitLabel} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                class=\"bar-workflow__exit\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                aria-label={this.exitAriaLabel}\n                size=\"md\"\n                background=\"bold\"\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsExit.emit(event.detail)}\n              />\n            </ds-tooltip>\n            <ds-text\n              class=\"bar-workflow__heading ds-control--md\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"on-bold\"\n              as=\"h1\"\n              lineTruncation={1}\n            >\n              {this.resolvedHeading}\n            </ds-text>\n          </div>\n\n          <div class=\"bar-workflow__actions\">\n            {this.previousStep ? (\n              <ds-tooltip label={this.previousLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"bar-workflow__previous\"\n                  variant=\"icon\"\n                  icon=\"ChevronLeft\"\n                  aria-label={this.previousLabel}\n                  size=\"md\"\n                  background=\"bold\"\n                  activeFill={false}\n                  hasBorder={false}\n                  isInactive={this.previousStep.isInactive}\n                  onDsClick={this.handlePrevious}\n                />\n              </ds-tooltip>\n            ) : null}\n\n            {this.isLastStep ? (\n              <ds-tooltip label={submit.label} side=\"bottom\" size=\"sm\">\n                <ds-button-filled\n                  class=\"bar-workflow__submit\"\n                  variant=\"icon\"\n                  icon=\"Check\"\n                  label={submit.label}\n                  aria-label={submit.label}\n                  intent=\"brand\"\n                  contrast=\"faint\"\n                  background=\"bold\"\n                  size=\"md\"\n                  type={submit.type ?? 'submit'}\n                  isInactive={submit.isInactive}\n                  isLoading={submit.isLoading}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => this.dsSubmit.emit(event.detail)}\n                />\n              </ds-tooltip>\n            ) : (\n              <ds-tooltip label={this.nextLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-filled\n                  class=\"bar-workflow__next\"\n                  variant=\"icon\"\n                  icon=\"ChevronRight\"\n                  label={this.nextLabel}\n                  aria-label={this.nextLabel}\n                  intent=\"brand\"\n                  contrast=\"faint\"\n                  background=\"bold\"\n                  size=\"md\"\n                  type=\"button\"\n                  isInactive={this.isNextInactive || this.nextStep?.isInactive}\n                  onDsClick={this.handleNext}\n                />\n              </ds-tooltip>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yTAAA,MAAMA,EAAiB,IAAM,+pE,MCQhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,mJAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,MAAgB,GAGhBF,KAAAG,UAAoB,OAGpBH,KAAAI,cAAwB,gBAGxBJ,KAAAK,cAAwB,gBAGxBL,KAAAM,UAAoB,YAGpBN,KAAAO,aAAwC,CAC9CC,MAAO,OACPC,KAAM,UAIAT,KAAAU,eAA0B,MAiC1BV,KAAAW,eAAiB,KACvB,GAAIX,KAAKY,eAAiBZ,KAAKY,aAAaC,WAAY,CACtDb,KAAKc,aAAaC,KAAKf,KAAKY,aAAaI,G,GAIrChB,KAAAiB,WAAa,KACnB,GAAIjB,KAAKkB,WAAalB,KAAKU,iBAAmBV,KAAKkB,SAASL,WAAY,CACtEb,KAAKc,aAAaC,KAAKf,KAAKkB,SAASF,G,EA8F1C,CA5HC,gBAAYG,GACV,MAAMC,EAAQpB,KAAKC,MAAMoB,WAAUC,GAAQA,EAAKN,KAAOhB,KAAKE,QAC5D,OAAOkB,GAAS,EAAIA,EAAQ,C,CAG9B,gBAAYR,GACV,OAAOZ,KAAKC,MAAMD,KAAKmB,aAAe,IAAM,I,CAG9C,YAAYD,GACV,OAAOlB,KAAKC,MAAMD,KAAKmB,aAAe,IAAM,I,CAG9C,cAAYI,GACV,OAAOvB,KAAKC,MAAMuB,QAAU,GAAKxB,KAAKmB,eAAiBnB,KAAKC,MAAMuB,OAAS,C,CAG7E,mBAAYC,GACV,GAAIzB,KAAKC,MAAMuB,QAAU,EAAG,OAAOxB,KAAK0B,QACxC,MAAO,GAAG1B,KAAK0B,aAAa1B,KAAKmB,aAAe,KAAKnB,KAAKC,MAAMuB,Q,CAelE,MAAAG,GACE,MAAMC,EAAS5B,KAAKO,aACpB,OACEsB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,cAAAE,IAAA,2CAAYvB,MAAOR,KAAKG,UAAW8B,KAAK,SAASC,KAAK,MACpDL,EAAA,sBAAAE,IAAA,2CACEC,MAAM,qBACNG,QAAQ,OACRC,KAAK,QAAO,aACApC,KAAKI,cACjB8B,KAAK,KACLG,WAAW,OACXC,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCzC,KAAK0C,OAAO3B,KAAK0B,EAAME,WAG1Ed,EAAA,WAAAE,IAAA,2CACEC,MAAM,uCACNG,QAAQ,mBACRS,SAAQ,KACRC,MAAM,UACNC,GAAG,KACHC,eAAgB,GAEf/C,KAAKyB,kBAIVI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yBACRhC,KAAKY,aACJiB,EAAA,cAAYrB,MAAOR,KAAKK,cAAe4B,KAAK,SAASC,KAAK,MACxDL,EAAA,sBACEG,MAAM,yBACNG,QAAQ,OACRC,KAAK,cAAa,aACNpC,KAAKK,cACjB6B,KAAK,KACLG,WAAW,OACXC,WAAY,MACZC,UAAW,MACX1B,WAAYb,KAAKY,aAAaC,WAC9B2B,UAAWxC,KAAKW,kBAGlB,KAEHX,KAAKuB,WACJM,EAAA,cAAYrB,MAAOoB,EAAOpB,MAAOyB,KAAK,SAASC,KAAK,MAClDL,EAAA,oBACEG,MAAM,uBACNG,QAAQ,OACRC,KAAK,QACL5B,MAAOoB,EAAOpB,MAAK,aACPoB,EAAOpB,MACnBwC,OAAO,QACPC,SAAS,QACTZ,WAAW,OACXH,KAAK,KACLzB,KAAMmB,EAAOnB,MAAQ,SACrBI,WAAYe,EAAOf,WACnBqC,UAAWtB,EAAOsB,UAClBV,UAAYC,GAAmCzC,KAAKmD,SAASpC,KAAK0B,EAAME,WAI5Ed,EAAA,cAAYrB,MAAOR,KAAKM,UAAW2B,KAAK,SAASC,KAAK,MACpDL,EAAA,oBACEG,MAAM,qBACNG,QAAQ,OACRC,KAAK,eACL5B,MAAOR,KAAKM,UAAS,aACTN,KAAKM,UACjB0C,OAAO,QACPC,SAAS,QACTZ,WAAW,OACXH,KAAK,KACLzB,KAAK,SACLI,WAAYb,KAAKU,gBAAkBV,KAAKkB,UAAUL,WAClD2B,UAAWxC,KAAKiB,gB","ignoreList":[]}

package/dist/components/ds-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBreadcrumb extends Components.DsBreadcrumb, HTMLElement {}
+export const DsBreadcrumb: {
+    prototype: DsBreadcrumb;
+    new (): DsBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-breadcrumb.js

@@ -0,0 +1,2 @@
+import{B as o,d as s}from"./p-BVV_rlIP.js";const r=o;const t=s;export{r as DsBreadcrumb,t as defineCustomElement};
+//# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-button-filled.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-DpyTrZa2.js";const p=o;const r=s;export{p as DsButtonFilled,r as defineCustomElement};
+import{B as o,d as s}from"./p-BhxwpOH8.js";const p=o;const t=s;export{p as DsButtonFilled,t as defineCustomElement};
 //# sourceMappingURL=ds-button-filled.js.map

package/dist/components/ds-button-unfilled.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-webARv8d.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-CoYFJD-w.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
 //# sourceMappingURL=ds-button-unfilled.js.map

package/dist/components/ds-card-data-viz-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsCardDataVizBar extends Components.DsCardDataVizBar, HTMLElement {}
+export const DsCardDataVizBar: {
+    prototype: DsCardDataVizBar;
+    new (): DsCardDataVizBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-card-data-viz-bar.js

@@ -0,0 +1,2 @@
+import{p as a,H as e,c as s,h as d,a as t,t as i}from"./index.js";import{d as r}from"./p-CH6cNXXF.js";import{d as c}from"./p-CoYFJD-w.js";import{d as n}from"./p-DSa0Hnd3.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";const h=()=>`.sc-ds-card-data-viz-bar-h{display:contents}.card-data-viz-bar__layout.sc-ds-card-data-viz-bar{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;gap:var(--dimension-space-200)}.card-data-viz-bar__chart-region.sc-ds-card-data-viz-bar{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-400) var(--dimension-space-400) 0     var(--dimension-space-400)}.card-data-viz-bar__chart-region.sc-ds-card-data-viz-bar>*.sc-ds-card-data-viz-bar{width:100%;min-width:0;max-width:100%}.card-data-viz-bar__legend-region.sc-ds-card-data-viz-bar{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}`;const f=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsFilterClick=s(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const a=this.el.querySelector('ds-chart-legend[slot="legend"]');if(!a)return;a.setAttribute("highlight-on-hover","false");if("highlightOnHover"in a)a.highlightOnHover=false}render(){return d(t,{key:"f7ad4476cc5584d6a62d1a9182c99d04be4e6034",class:"card-data-viz-bar"},d("ds-card-shell-data-viz",{key:"b4b0c1485088c3bc5415fa8fa475de748c782906",heading:this.heading,cardWidth:this.cardWidth},d("ds-button-unfilled",{key:"e671c5c7252b5df94c2a67ce729ed21e247dc21b",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),d("div",{key:"3e3bdfb0418b45f66b9db4f6965cf501dbe6d583",class:"card-data-viz-bar__layout"},this.hasChartSlot&&d("div",{key:"b935fcbf8a0bead7fca100d832ce443f498ceace",class:"card-data-viz-bar__chart-region"},d("slot",{key:"af0beb6816700c9d196de389e227c5c833708c15",name:"chart"})),this.hasLegendSlot&&d("div",{key:"bcd3bbaf1be3e0a9a6589e0099dbf951d26a53aa",class:"card-data-viz-bar__legend-region"},d("slot",{key:"233789fbaf1c749b6b072a4c6503121dccb9f980",name:"legend"})))))}get el(){return this}static get style(){return h()}},[262,"ds-card-data-viz-bar",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function m(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz-bar","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz-bar":if(!customElements.get(i(a))){customElements.define(i(a),f)}break;case"ds-badge":if(!customElements.get(i(a))){r()}break;case"ds-button-unfilled":if(!customElements.get(i(a))){c()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(a))){n()}break;case"ds-icon":if(!customElements.get(i(a))){o()}break;case"ds-loader":if(!customElements.get(i(a))){l()}break;case"ds-text":if(!customElements.get(i(a))){b()}break}}))}m();const p=f;const g=m;export{p as DsCardDataVizBar,g as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz-bar.js.map

package/dist/components/ds-card-data-viz-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizBarCss","CardDataVizBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizBar/CardDataVizBar.css?tag=ds-card-data-viz-bar&encapsulation=scoped","src/wc/components/CardDataVizBar/CardDataVizBar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-bar__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-bar__chart-region {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz-bar__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-bar__legend-region {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizBarWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Bar-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and an optional, content-sized static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-bar',\n  styleUrl: 'CardDataVizBar.css',\n  scoped: true,\n})\nexport class CardDataVizBar {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizBarWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-bar\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-bar__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-bar__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-bar__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAoB,IAAM,gwB,MCkBnBC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAiC,KACjCD,KAAAE,YAAsB,SAKbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAgBzBJ,KAAAK,kBAAoB,KAC1BL,KAAKM,cAAcC,MAAM,CA+B5B,CA9CC,mBAAAC,GACER,KAAKG,eAAiBH,KAAKS,GAAGC,cAAc,kBAC5CV,KAAKI,gBAAkBJ,KAAKS,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASZ,KAAKS,GAAGC,cACrB,kCAEF,IAAKE,EAAQ,OACbA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,CAO9D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAASpB,KAAKoB,QAASnB,UAAWD,KAAKC,WAC7De,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFxB,KAAKE,YACjBuB,UAAWzB,KAAKK,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACRnB,KAAKG,cACJa,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGd1B,KAAKI,eACJY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/ds-card-data-viz-donut.js

@@ -1,2 +1,2 @@
-import{p as t,H as d,c as a,h as s,a as e,t as i}from"./index.js";import{d as n}from"./p-DxeHimqk.js";import{d as o}from"./p-webARv8d.js";import{d as c}from"./p-liMPkhUP.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-Bs6SS34m.js";const f=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const m=t(class t extends d{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const d=this.el.querySelector('[slot="legend"]');if(!d||!("activeLabel"in d))return;d.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const d=this.el.querySelector('[slot="chart"]');if(!d||!("activeLabel"in d))return;d.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(e,{key:"543f5c3e9bfd0aa72da722010fdf74825d6052ac",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"84d5a0338635911d8823ebce56a7c2bd19a79e3c",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"7e4aca7a151f7f46e0d7bd4df8bff97215aa5076",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"9e88600f7d84bc5266935fc4d342740668afb0dc",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"221e327ef6081d7f662c09911d8ce7ed9c755901",class:"card-data-viz-donut__chart-region"},s("slot",{key:"9ed4d5a361f78685aeab65782492f52577e56d4a",name:"chart"})),this.hasLegendSlot&&s("div",{key:"a464dfebffd86086f3ab9ca8c7eb0585b722cd41",class:"card-data-viz-donut__legend-region"},s("slot",{key:"b9bd59b5d73d86b89788b71699d55cdd7b2aad50",name:"legend"})))))}get el(){return this}static get style(){return f()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),m)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}u();const b=m;const v=u;export{b as DsCardDataVizDonut,v as defineCustomElement};
+import{p as t,H as e,c as a,h as s,a as d,t as i}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as o}from"./p-CoYFJD-w.js";import{d as c}from"./p-DSa0Hnd3.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-BwGnhInj.js";const m=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(d,{key:"77d2c66100bcd0859ac154f45a5496d2bc112594",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"2b27e2c0db1bcbe56253845922bcc52f768735ea",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"7ee7f87447ce938b4d89958a5ae000995ddaee34",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"fc16ef32cb38951adda2e331790b8cd5388318f1",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"d7485fc652520a1bcb45b07c77be22835025e846",class:"card-data-viz-donut__chart-region"},s("slot",{key:"70f030bb2750c87316ae709ddb7ee6de5aa977dc",name:"chart"})),this.hasLegendSlot&&s("div",{key:"acd4395d7f8665e1105aac533520895d1241190b",class:"card-data-viz-donut__legend-region"},s("slot",{key:"348e5dab2a30b074b62546b05d82fedf181ea80a",name:"legend"})))))}get el(){return this}static get style(){return m()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),u)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}b();const f=u;const v=b;export{f as DsCardDataVizDonut,v as defineCustomElement};
 //# sourceMappingURL=ds-card-data-viz-donut.js.map

package/dist/components/ds-card-data-viz-line.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsCardDataVizLine extends Components.DsCardDataVizLine, HTMLElement {}
+export const DsCardDataVizLine: {
+    prototype: DsCardDataVizLine;
+    new (): DsCardDataVizLine;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-card-data-viz-line.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,c as i,h as s,a as t,t as d}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as c}from"./p-CoYFJD-w.js";import{d as r}from"./p-DSa0Hnd3.js";import{d as l}from"./p-BAfG3M8z.js";import{d as o}from"./p-Cpr3K41-.js";import{d as f}from"./p-BwGnhInj.js";const h=()=>`.sc-ds-card-data-viz-line-h{display:contents}.card-data-viz-line__layout.sc-ds-card-data-viz-line{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;gap:var(--dimension-space-200)}.card-data-viz-line__chart-region.sc-ds-card-data-viz-line{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-400) var(--dimension-space-400) 0     var(--dimension-space-400)}.card-data-viz-line__chart-region.sc-ds-card-data-viz-line>*.sc-ds-card-data-viz-line{width:100%;min-width:0;max-width:100%}.card-data-viz-line__legend-region.sc-ds-card-data-viz-line{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}`;const m=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsFilterClick=i(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const e=this.el.querySelector('ds-chart-legend[slot="legend"]');if(!e)return;e.setAttribute("highlight-on-hover","false");if("highlightOnHover"in e)e.highlightOnHover=false}render(){return s(t,{key:"0ebfbb0fe4aa654223ff60a69928d11779614659",class:"card-data-viz-line"},s("ds-card-shell-data-viz",{key:"c21bab44f9785d58f1649ec09bcfccf2f3a5cc73",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"3233bc349eb40292b8ecce8937405df7c1bd4f40",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"974ac5dc55d921ff00da0055eb795f98a0152f44",class:"card-data-viz-line__layout"},this.hasChartSlot&&s("div",{key:"e80ad0264a521fa7c315bc22eef8f444cdffb63e",class:"card-data-viz-line__chart-region"},s("slot",{key:"bdfbf55472be11f1547d10799981561d87fc92f2",name:"chart"})),this.hasLegendSlot&&s("div",{key:"7cf226d2b70579c8800534315fed2346ba437b36",class:"card-data-viz-line__legend-region"},s("slot",{key:"5639fd2befc4947e8bc9bcdfce398287df4aa4e5",name:"legend"})))))}get el(){return this}static get style(){return h()}},[262,"ds-card-data-viz-line",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-card-data-viz-line","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-data-viz-line":if(!customElements.get(d(e))){customElements.define(d(e),m)}break;case"ds-badge":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){c()}break;case"ds-card-shell-data-viz":if(!customElements.get(d(e))){r()}break;case"ds-icon":if(!customElements.get(d(e))){l()}break;case"ds-loader":if(!customElements.get(d(e))){o()}break;case"ds-text":if(!customElements.get(d(e))){f()}break}}))}b();const p=m;const g=b;export{p as DsCardDataVizLine,g as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz-line.js.map

package/dist/components/ds-card-data-viz-line.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizLineCss","CardDataVizLine","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizLine/CardDataVizLine.css?tag=ds-card-data-viz-line&encapsulation=scoped","src/wc/components/CardDataVizLine/CardDataVizLine.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-line__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-line__chart-region {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz-line__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-line__legend-region {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizLineWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and a content-sized, static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-line',\n  styleUrl: 'CardDataVizLine.css',\n  scoped: true,\n})\nexport class CardDataVizLine {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizLineWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-line\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-line__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-line__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-line__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAqB,IAAM,0wB,MCkBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAkC,KAClCD,KAAAE,YAAsB,SAKbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAgBzBJ,KAAAK,kBAAoB,KAC1BL,KAAKM,cAAcC,MAAM,CA+B5B,CA9CC,mBAAAC,GACER,KAAKG,eAAiBH,KAAKS,GAAGC,cAAc,kBAC5CV,KAAKI,gBAAkBJ,KAAKS,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASZ,KAAKS,GAAGC,cACrB,kCAEF,IAAKE,EAAQ,OACbA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,CAO9D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,sBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAASpB,KAAKoB,QAASnB,UAAWD,KAAKC,WAC7De,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFxB,KAAKE,YACjBuB,UAAWzB,KAAKK,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACRnB,KAAKG,cACJa,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGd1B,KAAKI,eACJY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/ds-card-setting.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as i,a,t as d}from"./index.js";import{d as r}from"./p-DxeHimqk.js";import{d as n}from"./p-DpyTrZa2.js";import{d as o}from"./p-webARv8d.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-Bs6SS34m.js";const m=()=>`.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);flex:0 0 auto;box-sizing:border-box;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const h={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const u=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAction=s(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(e,t){this.dsAction.emit({action:e,originalEvent:t})}render(){const e=this.editing;return i(a,{key:"e6fc21744458357622f231bbc7aacf758ff6c94b",class:{"card-setting":true,"card-setting--editing":e},style:{"--_card-setting-width":g[this.cardWidth],"--_card-setting-min-height":h[this.cardWidth]}},i("header",{key:"cffdaab9863f274e2c4cfe9782b557f8e82a25c3",class:"card-setting__header"},i("ds-text",{key:"101c444652cb1a57264a778b27d46ab737d10b0b",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:e?f:"primary",as:"h2"},this.heading),i("div",{key:"e32ee6b60ee72c2e68490aa026f76a3df1388593",class:"card-setting__actions"},!e?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:e=>this.emitAction("edit",e.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:e=>this.emitAction("cancel",e.detail)}),i("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:e=>this.emitAction("save",e.detail)})])),i("div",{key:"4ea4883621081d9d9d0ea804d2d526bcdd63df3c",class:"card-setting__body"},i("slot",{key:"2c142e5db33b591b23967537868a96185214d14c"})))}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-setting":if(!customElements.get(d(e))){customElements.define(d(e),u)}break;case"ds-badge":if(!customElements.get(d(e))){r()}break;case"ds-button-filled":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){o()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){l()}break;case"ds-text":if(!customElements.get(d(e))){b()}break}}))}p();const v=u;const k=p;export{v as DsCardSetting,k as defineCustomElement};
+import{p as e,H as t,c as s,h as i,a,t as d}from"./index.js";import{d as r}from"./p-CH6cNXXF.js";import{d as n}from"./p-BhxwpOH8.js";import{d as o}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";const m=()=>`.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);flex:0 0 auto;box-sizing:border-box;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const h={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const u=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAction=s(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(e,t){this.dsAction.emit({action:e,originalEvent:t})}render(){const e=this.editing;return i(a,{key:"27cba83733ef02f62682856172542f5504baca42",class:{"card-setting":true,"card-setting--editing":e},style:{"--_card-setting-width":g[this.cardWidth],"--_card-setting-min-height":h[this.cardWidth]}},i("header",{key:"8308adf56bc64a1637f7667896a6df61be9bd265",class:"card-setting__header"},i("ds-text",{key:"09fe4e2a31b584ef640e76e77b749828af1381f7",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:e?f:"primary",as:"h2"},this.heading),i("div",{key:"8d84b873b961b1073a25a9226c62a2781fbed3b0",class:"card-setting__actions"},!e?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:e=>this.emitAction("edit",e.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:e=>this.emitAction("cancel",e.detail)}),i("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:e=>this.emitAction("save",e.detail)})])),i("div",{key:"9fc9c57a58e8ce4c990d1328721ee48ccba72ed8",class:"card-setting__body"},i("slot",{key:"3eb7bbbcc304d1df1ea9a2248ae16e2090919692"})))}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-setting":if(!customElements.get(d(e))){customElements.define(d(e),u)}break;case"ds-badge":if(!customElements.get(d(e))){r()}break;case"ds-button-filled":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){o()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){l()}break;case"ds-text":if(!customElements.get(d(e))){b()}break}}))}p();const v=u;const k=p;export{v as DsCardSetting,k as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

package/dist/components/ds-card-shell-data-viz.js

@@ -1,2 +1,2 @@
-import{C as o,d as s}from"./p-liMPkhUP.js";const t=o;const p=s;export{t as DsCardShellDataViz,p as defineCustomElement};
+import{C as o,d as s}from"./p-DSa0Hnd3.js";const t=o;const a=s;export{t as DsCardShellDataViz,a as defineCustomElement};
 //# sourceMappingURL=ds-card-shell-data-viz.js.map

package/dist/components/ds-chart-bar-stacked.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsChartBarStacked extends Components.DsChartBarStacked, HTMLElement {}
+export const DsChartBarStacked: {
+    prototype: DsChartBarStacked;
+    new (): DsChartBarStacked;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-chart-bar-stacked.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as e,a,t as r}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{f as n}from"./p-DXewjzkM.js";import{b as o,l as i}from"./p-C_ewSXTT.js";const h=()=>`.sc-ds-chart-bar-stacked-h{display:inline-flex;max-width:100%;font-family:var(--typography-font-family)}.chart-bar-stacked__svg.sc-ds-chart-bar-stacked{display:block;max-width:100%;height:auto}.chart-bar-stacked__gridline.sc-ds-chart-bar-stacked{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar-stacked__axis-label.sc-ds-chart-bar-stacked{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar-stacked__segment-shape--rounded.sc-ds-chart-bar-stacked{rx:var(--dimension-radius-025)}.chart-bar-stacked__segment-separator.sc-ds-chart-bar-stacked{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-012);stroke-linecap:butt}`;const d={top:16,right:16,bottom:24,left:32};const l=[0,25,50,75,100];const b=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.variant="stacked";this.width=480;this.height=240}valuesForCategory(t){return this.series.map((s=>Math.max(0,s.data[t]??0)))}accessibleLabel(){return this.categories.map(((t,s)=>{const e=this.valuesForCategory(s);const a=e.reduce(((t,s)=>t+s),0);const r=this.series.map(((t,s)=>{const r=e[s];const c=this.variant==="percentage"?n(a?r/a:0,1):String(r);return`${t.name}: ${c}`})).join(", ");return`${t}: ${r}`})).join("; ")}render(){const t=this.width-d.left-d.right;const s=this.height-d.top-d.bottom;const r=this.categories.map(((t,s)=>this.valuesForCategory(s)));const n=r.map((t=>t.reduce(((t,s)=>t+s),0)));const h=this.variant==="percentage"?100:Math.max(0,...n);const b=o().domain(this.categories).range([0,t]).padding(.35);const g=i().domain([0,h||1]).range([s,0]).nice();const k=this.variant==="percentage"?l:g.ticks(4);return e(a,{key:"e9efba588c8c349c844de5c7d7ba6d15080a8bb0",class:"chart-bar-stacked"},e("svg",{key:"de5c077dec1685bb496f2245b202387718c6d984",class:"chart-bar-stacked__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.accessibleLabel()},e("g",{key:"8ff0ae1c9e10e0e6f6d3c73e52e55d9469a841b0",transform:`translate(${d.left}, ${d.top})`},k.map((s=>e("g",{key:`grid-${s}`,transform:`translate(0, ${g(s)})`},e("line",{class:"chart-bar-stacked__gridline",x1:0,x2:t}),e("text",{class:"chart-bar-stacked__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},this.variant==="percentage"?`${s}%`:s)))),this.categories.map(((t,a)=>{const o=b.bandwidth();const i=b(t)??0;const h=r[a];const d=n[a];const l=h.reduce(((t,s,e)=>s>0?e:t),-1);let k=0;return e("g",{class:"chart-bar-stacked__stack","data-category":t,key:t},this.series.map(((t,s)=>{const a=h[s];const r=this.variant==="percentage"?d?a/d*100:0:a;const n=k;const b=k+r;k=b;const p=g(b);const f=g(n);const m=Math.max(0,f-p);if(!m)return null;const y=t.color??c(s);const u=s===l;const _=this.variant==="stacked"&&u;const x=p+m/2;const v=m/2;return e("g",{class:"chart-bar-stacked__segment","data-series":t.name,key:t.name},e("rect",{class:{"chart-bar-stacked__segment-shape":true,"chart-bar-stacked__segment-shape--rounded":_},x:i,y:p,width:o,height:m,fill:y}),_?e("rect",{class:"chart-bar-stacked__segment-square-base",x:i,y:x,width:o,height:v,fill:y}):null,n>0?e("line",{class:"chart-bar-stacked__segment-separator",x1:i,x2:i+o,y1:f,y2:f,"vector-effect":"non-scaling-stroke"}):null)})),e("text",{class:"chart-bar-stacked__axis-label",x:i+o/2,y:s+16,"text-anchor":"middle"},t))})))))}static get style(){return h()}},[2,"ds-chart-bar-stacked",{series:[16],categories:[16],variant:[1],width:[2],height:[2]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar-stacked"];t.forEach((t=>{switch(t){case"ds-chart-bar-stacked":if(!customElements.get(r(t))){customElements.define(r(t),b)}break}}))}g();const k=b;const p=g;export{k as DsChartBarStacked,p as defineCustomElement};
+//# sourceMappingURL=ds-chart-bar-stacked.js.map

package/dist/components/ds-chart-bar-stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chartBarStackedCss","MARGIN","top","right","bottom","left","PERCENTAGE_TICKS","ChartBarStacked","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","series","categories","variant","width","height","valuesForCategory","categoryIndex","map","Math","max","data","accessibleLabel","category","values","total","reduce","sum","value","details","seriesIndex","visibleValue","formatPercentage","String","name","join","render","innerWidth","innerHeight","categoryValues","_","index","totals","yMax","xScale","scaleBand","domain","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","transform","tick","x1","x2","x","barWidth","bandwidth","barX","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","fill","color","categoryColor","isTopSegment","hasRoundedTop","squareBaseY","squareBaseHeight","y","y1","y2"],"sources":["src/wc/components/ChartBarStacked/ChartBarStacked.css?tag=ds-chart-bar-stacked&encapsulation=scoped","src/wc/components/ChartBarStacked/ChartBarStacked.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.chart-bar-stacked__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar-stacked__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue = this.variant === 'percentage'\n              ? formatPercentage(total ? value / total : 0, 1)\n              : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n    const categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__axis-label\"\n                  x={-8}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {this.variant === 'percentage' ? `${tick}%` : tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((category, categoryIndex) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(category) ?? 0;\n              const values = categoryValues[categoryIndex];\n              const total = totals[categoryIndex];\n              const topSeriesIndex = values.reduce(\n                (topIndex, value, seriesIndex) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = this.variant === 'percentage'\n                      ? total\n                        ? (rawValue / total) * 100\n                        : 0\n                      : rawValue;\n                    const segmentStart = cumulativeValue;\n                    const segmentEnd = cumulativeValue + value;\n                    cumulativeValue = segmentEnd;\n\n                    const segmentY = yScale(segmentEnd);\n                    const segmentBottom = yScale(segmentStart);\n                    const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                    if (!segmentHeight) return null;\n\n                    const fill = series.color ?? categoryColor(seriesIndex);\n                    const isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__segment-shape--rounded': hasRoundedTop,\n                          }}\n                          x={barX}\n                          y={segmentY}\n                          width={barWidth}\n                          height={segmentHeight}\n                          fill={fill}\n                        />\n                        {hasRoundedTop ? (\n                          <rect\n                            class=\"chart-bar-stacked__segment-square-base\"\n                            x={barX}\n                            y={squareBaseY}\n                            width={barWidth}\n                            height={squareBaseHeight}\n                            fill={fill}\n                          />\n                        ) : null}\n                        {segmentStart > 0 ? (\n                          <line\n                            class=\"chart-bar-stacked__segment-separator\"\n                            x1={barX}\n                            x2={barX + barWidth}\n                            y1={segmentBottom}\n                            y2={segmentBottom}\n                            vector-effect=\"non-scaling-stroke\"\n                          />\n                        ) : null}\n                      </g>\n                    );\n                  })}\n                  <text\n                    class=\"chart-bar-stacked__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {category}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oKAAA,MAAMA,EAAqB,IAAM,m2BCQjC,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACvD,MAAMC,EAAmB,CAAC,EAAG,GAAI,GAAI,GAAI,K,MAO5BC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CAOUC,KAAAC,OAAwB,GAExBD,KAAAE,WAAuB,GACvBF,KAAAG,QAAkC,UAClCH,KAAAI,MAAgB,IAChBJ,KAAAK,OAAiB,GAmK1B,CAjKS,iBAAAC,CAAkBC,GACxB,OAAOP,KAAKC,OAAOO,KAAIP,GAAUQ,KAAKC,IAAI,EAAGT,EAAOU,KAAKJ,IAAkB,I,CAGrE,eAAAK,GACN,OAAOZ,KAAKE,WACTM,KAAI,CAACK,EAAUN,KACd,MAAMO,EAASd,KAAKM,kBAAkBC,GACtC,MAAMQ,EAAQD,EAAOE,QAAO,CAACC,EAAKC,IAAUD,EAAMC,GAAO,GACzD,MAAMC,EAAUnB,KAAKC,OAClBO,KAAI,CAACP,EAAQmB,KACZ,MAAMF,EAAQJ,EAAOM,GACrB,MAAMC,EAAerB,KAAKG,UAAY,aAClCmB,EAAiBP,EAAQG,EAAQH,EAAQ,EAAG,GAC5CQ,OAAOL,GACX,MAAO,GAAGjB,EAAOuB,SAASH,GAAc,IAEzCI,KAAK,MACR,MAAO,GAAGZ,MAAaM,GAAS,IAEjCM,KAAK,K,CAGV,MAAAC,GACE,MAAMC,EAAa3B,KAAKI,MAAQf,EAAOI,KAAOJ,EAAOE,MACrD,MAAMqC,EAAc5B,KAAKK,OAAShB,EAAOC,IAAMD,EAAOG,OACtD,MAAMqC,EAAiB7B,KAAKE,WAAWM,KAAI,CAACsB,EAAGC,IAAU/B,KAAKM,kBAAkByB,KAChF,MAAMC,EAASH,EAAerB,KAAIM,GAChCA,EAAOE,QAAO,CAACC,EAAKC,IAAUD,EAAMC,GAAO,KAE7C,MAAMe,EAAOjC,KAAKG,UAAY,aAAe,IAAMM,KAAKC,IAAI,KAAMsB,GAElE,MAAME,EAASC,IACZC,OAAOpC,KAAKE,YACZmC,MAAM,CAAC,EAAGV,IACVW,QAAQ,KAEX,MAAMC,EAASC,IACZJ,OAAO,CAAC,EAAGH,GAAQ,IACnBI,MAAM,CAACT,EAAa,IACpBa,OAEH,MAAMC,EAAS1C,KAAKG,UAAY,aAAeT,EAAmB6C,EAAOI,MAAM,GAE/E,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,yBACNC,QAAS,OAAOhD,KAAKI,SAASJ,KAAKK,SACnCD,MAAOJ,KAAKI,MACZC,OAAQL,KAAKK,OACb4C,KAAK,MAAK,aACEjD,KAAKY,mBAEjBgC,EAAA,KAAAE,IAAA,2CAAGI,UAAW,aAAa7D,EAAOI,SAASJ,EAAOC,QAC/CoD,EAAOlC,KAAI2C,GACVP,EAAA,KAAGE,IAAK,QAAQK,IAAQD,UAAW,gBAAgBX,EAAOY,OACxDP,EAAA,QAAMG,MAAM,8BAA8BK,GAAI,EAAGC,GAAI1B,IACrDiB,EAAA,QACEG,MAAM,gCACNO,GAAG,EAAE,cACO,MAAK,oBACC,UAEjBtD,KAAKG,UAAY,aAAe,GAAGgD,KAAUA,MAKnDnD,KAAKE,WAAWM,KAAI,CAACK,EAAUN,KAC9B,MAAMgD,EAAWrB,EAAOsB,YACxB,MAAMC,EAAOvB,EAAOrB,IAAa,EACjC,MAAMC,EAASe,EAAetB,GAC9B,MAAMQ,EAAQiB,EAAOzB,GACrB,MAAMmD,EAAiB5C,EAAOE,QAC5B,CAAC2C,EAAUzC,EAAOE,IAAiBF,EAAQ,EAAIE,EAAcuC,IAC7D,GAEF,IAAIC,EAAkB,EAEtB,OACEhB,EAAA,KAAGG,MAAM,2BAA0B,gBAAgBlC,EAAUiC,IAAKjC,GAC/Db,KAAKC,OAAOO,KAAI,CAACP,EAAQmB,KACxB,MAAMyC,EAAW/C,EAAOM,GACxB,MAAMF,EAAQlB,KAAKG,UAAY,aAC3BY,EACG8C,EAAW9C,EAAS,IACrB,EACF8C,EACJ,MAAMC,EAAeF,EACrB,MAAMG,EAAaH,EAAkB1C,EACrC0C,EAAkBG,EAElB,MAAMC,EAAWzB,EAAOwB,GACxB,MAAME,EAAgB1B,EAAOuB,GAC7B,MAAMI,EAAgBzD,KAAKC,IAAI,EAAGuD,EAAgBD,GAClD,IAAKE,EAAe,OAAO,KAE3B,MAAMC,EAAOlE,EAAOmE,OAASC,EAAcjD,GAC3C,MAAMkD,EAAelD,IAAgBsC,EACrC,MAAMa,EACJvE,KAAKG,UAAY,WAAamE,EAChC,MAAME,EAAcR,EAAWE,EAAgB,EAC/C,MAAMO,EAAmBP,EAAgB,EAEzC,OACEtB,EAAA,KACEG,MAAM,6BAA4B,cACrB9C,EAAOuB,KACpBsB,IAAK7C,EAAOuB,MAEZoB,EAAA,QACEG,MAAO,CACL,mCAAoC,KACpC,4CAA6CwB,GAE/CjB,EAAGG,EACHiB,EAAGV,EACH5D,MAAOmD,EACPlD,OAAQ6D,EACRC,KAAMA,IAEPI,EACC3B,EAAA,QACEG,MAAM,yCACNO,EAAGG,EACHiB,EAAGF,EACHpE,MAAOmD,EACPlD,OAAQoE,EACRN,KAAMA,IAEN,KACHL,EAAe,EACdlB,EAAA,QACEG,MAAM,uCACNK,GAAIK,EACJJ,GAAII,EAAOF,EACXoB,GAAIV,EACJW,GAAIX,EAAa,gBACH,uBAEd,KACF,IAGRrB,EAAA,QACEG,MAAM,gCACNO,EAAGG,EAAOF,EAAW,EACrBmB,EAAG9C,EAAc,GAAE,cACP,UAEXf,GAED,M","ignoreList":[]}

package/dist/components/ds-chart-bar.js

@@ -1,2 +1,2 @@
-import{p as t,H as a,h as s,a as r,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar.sc-ds-chart-bar{rx:var(--dimension-radius-050)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const a=this.height-l.top-l.bottom;const e=c(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const f=d.ticks(4);return s(r,{key:"057ba106456dd4324df28eec34fc47cfad2bd9ec",class:"chart-bar"},s("svg",{key:"0810f279bca8b365ef0da04823422e4ebf12ae3b",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},s("g",{key:"6fc681b43106b48d050f18441ecd0a68a31dca25",transform:`translate(${l.left}, ${l.top})`},f.map((a=>s("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},s("line",{class:"chart-bar__gridline",x1:0,x2:t}),s("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,r)=>{const e=h.bandwidth();const c=h(t.label)??0;const o=d(t.value);return s("g",{key:t.label},s("rect",{class:"chart-bar__bar",x:c,y:o,width:e,height:a-o,fill:t.color??i(r)}),s("text",{class:"chart-bar__axis-label",x:c+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}f();const b=d;const m=f;export{b as DsChartBar,m as defineCustomElement};
+import{p as t,H as a,h as r,a as s,t as e}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{m as i}from"./p-CH3w-P2H.js";import{b as o,l as n}from"./p-C_ewSXTT.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const a=this.height-l.top-l.bottom;const e=i(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const b=d.ticks(4);return r(s,{key:"875c272143a66f499765c00ce026341114ec3b13",class:"chart-bar"},r("svg",{key:"353fb36d3943bd57878c59e1ac93a2cb01a0f82a",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},r("g",{key:"048d204cb9216cad953a24428139950e00ef1363",transform:`translate(${l.left}, ${l.top})`},b.map((a=>r("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,s)=>{const e=h.bandwidth();const i=h(t.label)??0;const o=d(t.value);const n=a-o;const l=o+n/2;const b=n/2;const f=t.color??c(s);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:i,y:o,width:e,height:n,fill:f}),r("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:i,y:l,width:e,height:b,fill:f}),r("text",{class:"chart-bar__axis-label",x:i+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}b();const f=d;const m=b;export{f as DsChartBar,m as defineCustomElement};
 //# sourceMappingURL=ds-chart-bar.js.map

package/dist/components/ds-chart-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartBarCss","MARGIN","top","right","bottom","left","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","render","innerWidth","innerHeight","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","y","fill","color","categoryColor"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar {\n  rx: var(--dimension-radius-050);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={innerHeight - barY}\n                    fill={d.color ?? categoryColor(i)}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAc,IAAM,wgBCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAsE1B,CApEC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,OACEa,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,iBACNQ,EAAGI,EACHE,EAAGD,EACHrC,MAAOkC,EACPjC,OAAQG,EAAciC,EACtBE,KAAMhC,EAAEiC,OAASC,EAAcR,KAEjCZ,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBI,EAAGlC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}
+{"version":3,"names":["chartBarCss","MARGIN","top","right","bottom","left","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","render","innerWidth","innerHeight","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAc,IAAM,ihBCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAkF1B,CAhFC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,MAAM8B,EAAYlC,EAAciC,EAChC,MAAME,EAAcF,EAAOC,EAAY,EACvC,MAAME,EAAmBF,EAAY,EACrC,MAAMG,EAAOlC,EAAEmC,OAASC,EAAcV,GACtC,OACEZ,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,yCACNQ,EAAGI,EACHQ,EAAGP,EACHrC,MAAOkC,EACPjC,OAAQqC,EACRG,KAAMA,IAERpB,EAAA,QACEG,MAAM,6CACNQ,EAAGI,EACHQ,EAAGL,EACHvC,MAAOkC,EACPjC,OAAQuC,EACRC,KAAMA,IAERpB,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBU,EAAGxC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}

package/dist/components/ds-chart-donut.js

@@ -1,2 +1,2 @@
-import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-Bs6SS34m.js";import{d as c}from"./p-CR7yMitN.js";import{T as h}from"./p-Dg3xLna0.js";import{r as u}from"./p-BWUTr_XN.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const S=2*z;function $(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function C(t){return t.innerRadius}function A(t){return t.outerRadius}function P(t){return t.startAngle}function R(t){return t.endAngle}function T(t){return t&&t.padAngle}function B(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function E(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/w(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,g=(d+y)/2,m=p-f,x=y-d,M=m*m+x*x,_=s-r,z=f*y-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),S=(z*x-m*k)/M,$=(-z*m-x*k)/M,j=(z*x+m*k)/M,C=(-z*m+x*k)/M,A=S-v,P=$-g,R=j-v,T=C-g;if(A*A+P*P>R*R+T*T)S=j,$=C;return{cx:S,cy:$,x01:-u,y01:-l,x11:S*(s/_-1),y11:$*(s/_-1)}}function F(){var t=C,n=A,e=d(0),i=null,s=P,r=R,o=T,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>_))a.moveTo(0,0);else if(y>S-_){a.moveTo(f*m(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>_){a.moveTo(l*m(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var C=d,A=p,P=d,R=p,T=y,F=y,L=o.apply(this,arguments)/2,N=L>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),D=x(v(f-l)/2,+e.apply(this,arguments)),H=D,O=D,V,X;if(N>_){var G=j(N/l*M(L)),I=j(N/f*M(L));if((T-=G*2)>_)G*=b?1:-1,P+=G,R-=G;else T=0,P=R=(d+p)/2;if((F-=I*2)>_)I*=b?1:-1,C+=I,A-=I;else F=0,C=A=(d+p)/2}var U=f*m(C),W=f*M(C),Y=l*m(R),q=l*M(R);if(D>_){var J=f*m(A),K=f*M(A),Q=l*m(P),Z=l*M(P),tt;if(y<z){if(tt=B(U,W,Q,Z,J,K,Y,q)){var nt=U-tt[0],et=W-tt[1],it=J-tt[0],st=K-tt[1],rt=1/M($((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);H=x(D,(l-ot)/(rt-1));O=x(D,(f-ot)/(rt+1))}else{H=O=0}}}if(!(F>_))a.moveTo(U,W);else if(O>_){V=E(Q,Z,U,W,f,O,b);X=E(J,K,Y,q,f,O,b);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(O<D)a.arc(V.cx,V.cy,O,g(V.y01,V.x01),g(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,O,g(V.y01,V.x01),g(V.y11,V.x11),!b);a.arc(0,0,f,g(V.cy+V.y11,V.cx+V.x11),g(X.cy+X.y11,X.cx+X.x11),!b);a.arc(X.cx,X.cy,O,g(X.y11,X.x11),g(X.y01,X.x01),!b)}}else a.moveTo(U,W),a.arc(0,0,f,C,A,!b);if(!(l>_)||!(T>_))a.lineTo(Y,q);else if(H>_){V=E(Y,q,J,K,l,-H,b);X=E(U,W,Q,Z,l,-H,b);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(H<D)a.arc(V.cx,V.cy,H,g(V.y01,V.x01),g(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,H,g(V.y01,V.x01),g(V.y11,V.x11),!b);a.arc(0,0,l,g(V.cy+V.y11,V.cx+V.x11),g(X.cy+X.y11,X.cx+X.x11),b);a.arc(X.cx,X.cy,H,g(X.y11,X.x11),g(X.y01,X.x01),!b)}}else a.arc(0,0,l,R,P,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function L(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function N(t){return t}function D(){var t=N,n=L,e=null,i=d(0),s=d(S),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min(S,Math.max(-S,s.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=g){h=f[a],x=d[h],g=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:g,padAngle:m}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const O=.25;const V=0;const X=.82;const G=128;const I=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=G;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,G)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*X;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=F().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:D().value((t=>t.value)).sort(null)(this.data);const v=f?F().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(V+m)/2:n;const x=n+(g+V)/2;const M=this.centerValue??l(c,this.locale);const w=this.centerCaption??"";const _=this.isFillMode;return i(s,{key:"8cca9642ba48d6827f4c70893efc37afa0d82bf5",class:{"chart-donut":true,"chart-donut--fill":_,"chart-donut--fixed":!_},style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"8f48c9545da41e5f8423ddc47bbfc8c3e9bb2018",class:"chart-donut__wrapper",style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"fc79f1b4e9853c2821c5acf182cc7558aeaf834f",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"8777db4b50d63051849271bb99030d014c8d5c48",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,d:p(e)??undefined,fill:r.color??o(s),opacity:a?O:1,tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"3f114a10828946b17652bbcdcb6ade49591d7a33",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"2c211ec11d7b79d2e649bccd6c4c754dbaa9ac4a",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"e23adf79fff4ff5320456d1713055e59b7f279b1",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function U(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),I)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}U();const W=I;const Y=U;export{W as DsChartDonut,Y as defineCustomElement};
+import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-BwGnhInj.js";import{d as c}from"./p-DC7yOUQx.js";import{T as h}from"./p-Dg3xLna0.js";import{r as u}from"./p-BJMRBHKW.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function j(t){return t>1?0:t<-1?z:Math.acos(t)}function C(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function S(t){return t.innerRadius}function A(t){return t.outerRadius}function B(t){return t.startAngle}function P(t){return t.endAngle}function R(t){return t&&t.padAngle}function D(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function E(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/w(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,g=(d+y)/2,m=p-f,x=y-d,M=m*m+x*x,_=s-r,z=f*y-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),$=(z*x-m*k)/M,j=(-z*m-x*k)/M,C=(z*x+m*k)/M,S=(-z*m+x*k)/M,A=$-v,B=j-g,P=C-v,R=S-g;if(A*A+B*B>P*P+R*R)$=C,j=S;return{cx:$,cy:j,x01:-u,y01:-l,x11:$*(s/_-1),y11:j*(s/_-1)}}function F(){var t=S,n=A,e=d(0),i=null,s=B,r=P,o=R,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>_))a.moveTo(0,0);else if(y>$-_){a.moveTo(f*m(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>_){a.moveTo(l*m(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var S=d,A=p,B=d,P=p,R=y,F=y,L=o.apply(this,arguments)/2,T=L>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),H=x(v(f-l)/2,+e.apply(this,arguments)),O=H,N=H,G,I;if(T>_){var V=C(T/l*M(L)),J=C(T/f*M(L));if((R-=V*2)>_)V*=b?1:-1,B+=V,P-=V;else R=0,B=P=(d+p)/2;if((F-=J*2)>_)J*=b?1:-1,S+=J,A-=J;else F=0,S=A=(d+p)/2}var K=f*m(S),Q=f*M(S),U=l*m(P),W=l*M(P);if(H>_){var X=f*m(A),Y=f*M(A),q=l*m(B),Z=l*M(B),tt;if(y<z){if(tt=D(K,Q,q,Z,X,Y,U,W)){var nt=K-tt[0],et=Q-tt[1],it=X-tt[0],st=Y-tt[1],rt=1/M(j((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);O=x(H,(l-ot)/(rt-1));N=x(H,(f-ot)/(rt+1))}else{O=N=0}}}if(!(F>_))a.moveTo(K,Q);else if(N>_){G=E(q,Z,K,Q,f,N,b);I=E(X,Y,U,W,f,N,b);a.moveTo(G.cx+G.x01,G.cy+G.y01);if(N<H)a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(I.y01,I.x01),!b);else{a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,f,g(G.cy+G.y11,G.cx+G.x11),g(I.cy+I.y11,I.cx+I.x11),!b);a.arc(I.cx,I.cy,N,g(I.y11,I.x11),g(I.y01,I.x01),!b)}}else a.moveTo(K,Q),a.arc(0,0,f,S,A,!b);if(!(l>_)||!(R>_))a.lineTo(U,W);else if(O>_){G=E(U,W,X,Y,l,-O,b);I=E(K,Q,q,Z,l,-O,b);a.lineTo(G.cx+G.x01,G.cy+G.y01);if(O<H)a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(I.y01,I.x01),!b);else{a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(I.cy+I.y11,I.cx+I.x11),b);a.arc(I.cx,I.cy,O,g(I.y11,I.x11),g(I.y01,I.x01),!b)}}else a.arc(0,0,l,P,B,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function L(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function T(t){return t}function H(){var t=T,n=L,e=null,i=d(0),s=d($),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min($,Math.max(-$,s.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=g){h=f[a],x=d[h],g=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:g,padAngle:m}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const O=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const N=.25;const G=0;const I=.82;const V=128;const J=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,V)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*I;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=F().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:H().value((t=>t.value)).sort(null)(this.data);const v=f?F().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(G+m)/2:n;const x=n+(g+G)/2;const M=this.centerValue??l(c,this.locale);const w=this.centerCaption??"";const _=this.isFillMode;return i(s,{key:"9435c273576c124733649dd7c180e0a1584063b7",class:{"chart-donut":true,"chart-donut--fill":_,"chart-donut--fixed":!_},style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"aa736c46e859f191aee9c354d8b30cdf6fad8ef5",class:"chart-donut__wrapper",style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"2ca94e40deb1cec5735b9c8f97450aaa818ce73a",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"0cd70e901e29f24cd1d6ffefe938dbe6191b2c29",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,d:p(e)??undefined,fill:r.color??o(s),opacity:a?N:1,tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"6b8187ea5aade3c176a42d01d3062f58c21970ba",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"c0afe0b3c23b6b5696c5bce470c80775234d9b1a",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"3d83246b458b7786ff942dfac22b8135a48c03c1",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return O()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function K(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),J)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}K();const Q=J;const U=K;export{Q as DsChartDonut,U as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map

package/dist/components/ds-chart-legend.js

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-Bs6SS34m.js";import{f as a}from"./p-BBpASejH.js";function d(e,n=1,t){const i=n===2?2:1;const s=Number.isFinite(e)?e:0;return new Intl.NumberFormat(t,{style:"percent",minimumFractionDigits:i,maximumFractionDigits:i}).format(s)}const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return i(s,{key:"897605d8bbabfc669cabab7434b88c4f1cb039ad",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"1b4c657d6d7fb192f97c3ed34ce6889fef7ff700",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:()=>this.handleHover(t),onFocus:()=>this.handleHover(t),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
+import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-BwGnhInj.js";import{f as a}from"./p-DXewjzkM.js";import{f as d}from"./p-BBpASejH.js";const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return i(s,{key:"61e7b39a0b841a1e74ce1b8610dde5864273e0d7",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"cc9d08b329743fb4744ba19e6d8b71c2d7497bae",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?a(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!t.href,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},d(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
 //# sourceMappingURL=ds-chart-legend.js.map

package/dist/components/ds-chart-legend.js.map

@@ -1 +1 @@
-{"version":3,"names":["formatPercentage","ratio","decimals","locale","precision","value","Number","isFinite","Intl","NumberFormat","style","minimumFractionDigits","maximumFractionDigits","format","chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","percentage","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature","formatCompactNumber"],"sources":["src/wc/utils/format-percentage.ts","src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["export type PercentageDecimals = 1 | 2;\n\n/** Format a ratio as a locale-aware percentage with an exact, supported precision. */\nexport function formatPercentage(\n  ratio: number,\n  decimals: PercentageDecimals = 1,\n  locale?: string,\n): string {\n  const precision = decimals === 2 ? 2 : 1;\n  const value = Number.isFinite(ratio) ? ratio : 0;\n\n  return new Intl.NumberFormat(locale, {\n    style: 'percent',\n    minimumFractionDigits: precision,\n    maximumFractionDigits: precision,\n  }).format(value);\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n   as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const RowTag = item.href ? 'a' : 'div';\n            const percentage = item.value != null\n              ? formatPercentage(total ? item.value / total : 0, this.percentageDecimals, this.locale)\n              : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!item.href,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': true,\n                    'ds-focus-ring-inset': !!item.href,\n                  }}\n                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n                  href={item.href}\n                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={() => this.handleHover(item)}\n                  onFocus={() => this.handleHover(item)}\n                  onBlur={() => this.handleHover(null)}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAGM,SAAUA,EACdC,EACAC,EAA+B,EAC/BC,GAEA,MAAMC,EAAYF,IAAa,EAAI,EAAI,EACvC,MAAMG,EAAQC,OAAOC,SAASN,GAASA,EAAQ,EAE/C,OAAO,IAAIO,KAAKC,aAAaN,EAAQ,CACnCO,MAAO,UACPC,sBAAuBP,EACvBQ,sBAAuBR,IACtBS,OAAOR,EACZ,CChBA,MAAMS,EAAiB,IAAM,oqUCQ7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAE1BH,KAAAI,mBAAoD,EAOpDJ,KAAAK,YAA6B,KAIpBL,KAAAM,aAA8B,KAYvCN,KAAAO,YAAc,CAACC,EAAuBC,KAC5CT,KAAKU,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA8FjD,CApGS,WAAAG,CAAYJ,GAClBR,KAAKM,aAAeE,GAAMK,OAAS,KACnCb,KAAKc,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQhB,KAAKC,MAAMgB,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKxB,OAAS,IAAI,GAGxE,MAAMmC,EAAiBnB,KAAKK,aAAeL,KAAKM,aAEhD,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,CAAC,iBAAiBvB,KAAKE,aAAc,KACrC,gCAAiCF,KAAKG,iBAMxCiB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKY,YAAY,OACjEZ,KAAKC,MAAMwB,KAAI,CAACjB,EAAMkB,KACrB,MAAMC,EAAWR,GAAkB,MAAQX,EAAKK,QAAUM,EAC1D,MAAMS,EAASpB,EAAKqB,KAAO,IAAM,MACjC,MAAMC,EAAatB,EAAKxB,OAAS,KAC7BL,EAAiBqC,EAAQR,EAAKxB,MAAQgC,EAAQ,EAAGhB,KAAKI,mBAAoBJ,KAAKlB,QAC/E,GAEJ,OACEsC,EAAA,MAAIG,MAAM,0BAA0BD,IAAKd,EAAKK,OAC5CO,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqCf,EAAKqB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBrB,EAAKqB,MAEhCxC,MAAO,CAAE0C,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMrB,EAAKqB,KACXI,QAASzB,EAAKqB,KAAQK,GAAkBlC,KAAKO,YAAYC,EAAM0B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKY,YAAYJ,GACrC6B,QAAS,IAAMrC,KAAKY,YAAYJ,GAChC8B,OAAQ,IAAMtC,KAAKY,YAAY,OAE/BQ,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBlC,MAAO,CAAEkD,gBAAiB/B,EAAKgC,OAASC,EAAcf,OAE3FN,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOrC,EAAKK,OAEXL,EAAKK,OAEPL,EAAKxB,OAAS,MACboC,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOb,OAAOxB,EAAKxB,QAElBgE,EAAoBxC,EAAKxB,MAAOgB,KAAKlB,SAGzC0B,EAAKxB,OAAS,MAAQgB,KAAKG,gBAC1BiB,EAAA,WACEG,MAAM,2BACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOf,GAENA,IAIJ,K","ignoreList":[]}
+{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","highlightOnHover","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHighlightOnHoverChange","enabled","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","undefined","map","i","isDimmed","RowTag","href","percentage","formatPercentage","locale","style","opacity","String","onClick","e","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature","formatCompactNumber"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n  @Prop() highlightOnHover: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  @Watch('highlightOnHover')\n  handleHighlightOnHoverChange(enabled: boolean) {\n    if (!enabled) this.hoveredLabel = null;\n  }\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul\n          class=\"chart-legend__list\"\n          onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n        >\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const RowTag = item.href ? 'a' : 'div';\n            const percentage = item.value != null\n              ? formatPercentage(total ? item.value / total : 0, this.percentageDecimals, this.locale)\n              : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!item.href,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': this.highlightOnHover || !!item.href,\n                    'ds-focus-ring-inset': !!item.href,\n                  }}\n                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n                  href={item.href}\n                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={\n                    this.highlightOnHover ? () => this.handleHover(item) : undefined\n                  }\n                  onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kNAAA,MAAMA,EAAiB,IAAM,oqUCQ7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAE1BH,KAAAI,mBAAoD,EAEpDJ,KAAAK,iBAA4B,KAO5BL,KAAAM,YAA6B,KAIpBN,KAAAO,aAA8B,KAiBvCP,KAAAQ,YAAc,CAACC,EAAuBC,KAC5CV,KAAKW,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CAmGjD,CA7GC,4BAAAG,CAA6BC,GAC3B,IAAKA,EAASd,KAAKO,aAAe,I,CAG5B,WAAAQ,CAAYN,GAClBT,KAAKO,aAAeE,GAAMO,OAAS,KACnChB,KAAKiB,YAAYL,KAAKH,E,CAOxB,MAAAS,GACE,MAAMC,EAAQnB,KAAKC,MAAMmB,QAAO,CAACC,EAAKZ,IAASY,GAAOZ,EAAKa,OAAS,IAAI,GAGxE,MAAMC,EAAiBvB,KAAKM,cAAgBN,KAAKK,iBAAmBL,KAAKO,aAAe,MAExF,OACEiB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,CAAC,iBAAiB3B,KAAKE,aAAc,KACrC,gCAAiCF,KAAKG,iBAMxCqB,EAAA,MAAAE,IAAA,2CACEC,MAAM,qBACNC,aAAc5B,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAEpE7B,KAAKC,MAAM6B,KAAI,CAACrB,EAAMsB,KACrB,MAAMC,EAAWT,GAAkB,MAAQd,EAAKO,QAAUO,EAC1D,MAAMU,EAASxB,EAAKyB,KAAO,IAAM,MACjC,MAAMC,EAAa1B,EAAKa,OAAS,KAC7Bc,EAAiBjB,EAAQV,EAAKa,MAAQH,EAAQ,EAAGnB,KAAKI,mBAAoBJ,KAAKqC,QAC/E,GAEJ,OACEb,EAAA,MAAIG,MAAM,0BAA0BD,IAAKjB,EAAKO,OAC5CQ,EAACS,EAAM,CACLN,MAAO,CACL,qBAAsB,KACtB,oCAAqClB,EAAKyB,KAC1C,iBAAkB,KAClB,sBAAuBlC,KAAKK,oBAAsBI,EAAKyB,KACvD,wBAAyBzB,EAAKyB,MAEhCI,MAAO,CAAEC,QAASP,EAAWQ,OAAO9C,GAAkB,KACtDwC,KAAMzB,EAAKyB,KACXO,QAAShC,EAAKyB,KAAQQ,GAAkB1C,KAAKQ,YAAYC,EAAMiC,GAAKb,UACpEc,aACE3C,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAEzDe,QAAS5C,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAChEgB,OAAQ7C,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAE/DL,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBW,MAAO,CAAEQ,gBAAiBrC,EAAKsC,OAASC,EAAcjB,OAE3FP,EAAA,WACEG,MAAM,sBACNsB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAO3C,EAAKO,OAEXP,EAAKO,OAEPP,EAAKa,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNsB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOZ,OAAO/B,EAAKa,QAElBiC,EAAoB9C,EAAKa,MAAOtB,KAAKqC,SAGzC5B,EAAKa,OAAS,MAAQtB,KAAKG,gBAC1BqB,EAAA,WACEG,MAAM,2BACNsB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOjB,GAENA,IAIJ,K","ignoreList":[]}