@ds-mo/ui 2.11.1 → 2.12.0

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

@@ -1,2 +1,2 @@
-import{p as a,H as d,h as e,a as i,t as s}from"./index.js";import{d as r}from"./p-DOU4cbpc.js";const t=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400)}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends d{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}render(){return e(i,{key:"02e9e594d4fc518e57919d337abf2556dd46aece",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},e("header",{key:"7dca7e07f84ba9e2db3ef9844023f2ed95579df8",class:"card-data-viz__header"},e("div",{key:"3313cba7c0a3f61a0eaa1783447ee085e3044a1c",class:"card-data-viz__title-wrap"},e("ds-text",{key:"b0f60df9b266b8b2cac3a251aac24d760c5fccac",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),e("div",{key:"fc3e3a9af00d0f5dc464a914a959b18921400b85",class:"card-data-viz__body"},this.hasChartSlot&&e("div",{key:"5e200c314d92f4d7e73bb790717469151ac949a0",class:"card-data-viz__chart-region"},e("slot",{key:"1d5d010ffbbbfdb9cc2a01ca48b2f28720d201bf",name:"chart"})),this.hasLegendSlot&&e("div",{key:"7e9ef114d2ac528a03396343c1f9089790ebce88",class:"card-data-viz__legend-region"},e("slot",{key:"0b3dd934c157faec7202621cb20ef737d14c651c",name:"legend"}))))}get el(){return this}static get style(){return t()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){r()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
+import{p as a,H as e,h as d,a as i,t as s}from"./index.js";import{d as t}from"./p-DRqxVEye.js";const r=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);overflow:visible}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=a=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null};this.handleLegendHover=a=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return d(i,{key:"167aa753ad75765b1d3b44d1aa4c192ee861465f",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},d("header",{key:"568e4a0a47f9131871b8638eee2159a2218d74f7",class:"card-data-viz__header"},d("div",{key:"fea5fc75f9b2058136fb2e40c4d1879df07d3840",class:"card-data-viz__title-wrap"},d("ds-text",{key:"6b38d205d22bf309e03b9b90bc56b7ac64a1e053",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),d("div",{key:"094b712266838f6f96930b609086bf7a0b421e20",class:"card-data-viz__body"},this.hasChartSlot&&d("div",{key:"2369c59a646e1078896d6a29d4f1d911c68f5409",class:"card-data-viz__chart-region"},d("slot",{key:"4025c84cc4c91d94199b8e3fff3a8c7728b1dc4b",name:"chart"})),this.hasLegendSlot&&d("div",{key:"a74efb5bab10074f2df70d64370291dd4321c0cc",class:"card-data-viz__legend-region"},d("slot",{key:"40639e5219c7df38519960bd2a52e402c1f3cf9e",name:"legend"}))))}get el(){return this}static get style(){return r()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){t()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
 //# sourceMappingURL=ds-card-data-viz.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","xs","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","componentWillRender","el","querySelector","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n.card-data-viz__header {\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  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200);\n  min-height: var(--dimension-card-width-sm);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n/*\n * Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n */\n.card-data-viz__chart-region {\n  display: flex;\n  justify-content: center;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n}\n\n/* 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. */\n.card-data-viz__legend-region {\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n  xs: 'var(--dimension-card-width-xs)',\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\n/**\n * Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n */\n@Component({\n  tag: 'ds-card-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardDataVizWidth = 'md';\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n  }\n\n  render() {\n    return (\n      <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n        <header class=\"card-data-viz__header\">\n          <div class=\"card-data-viz__title-wrap\">\n            <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n              {this.heading}\n            </ds-text>\n          </div>\n        </header>\n        <div class=\"card-data-viz__body\">\n          {this.hasChartSlot && (\n            <div class=\"card-data-viz__chart-region\">\n              <slot name=\"chart\" />\n            </div>\n          )}\n          {this.hasLegendSlot && (\n            <div class=\"card-data-viz__legend-region\">\n              <slot name=\"legend\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,6kDCI7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,KAgClC,CA9BC,mBAAAC,GACEJ,KAAKE,eAAiBF,KAAKK,GAAGC,cAAc,2BAC5CN,KAAKG,gBAAkBH,KAAKK,GAAGC,cAAc,2B,CAG/C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,yBAA0BtB,EAAgBU,KAAKC,aAClFO,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,MACjFf,KAAKgB,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACRX,KAAKE,cACJM,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,WAGdjB,KAAKG,eACJK,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}
+{"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","componentWillRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n.card-data-viz__header {\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  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n/*\n * Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n */\n.card-data-viz__chart-region {\n  display: flex;\n  justify-content: center;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n  /* Cursor-following tooltip may extend past the chart; don't clip it here. */\n  overflow: visible;\n}\n\n/* 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. */\n.card-data-viz__legend-region {\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'sm' | 'md' | 'lg';\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\n/**\n * Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n */\n@Component({\n  tag: 'ds-card-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardDataVizWidth = 'md';\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-* + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so\n    // they're no longer direct children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n        <header class=\"card-data-viz__header\">\n          <div class=\"card-data-viz__title-wrap\">\n            <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n              {this.heading}\n            </ds-text>\n          </div>\n        </header>\n        <div class=\"card-data-viz__body\">\n          {this.hasChartSlot && (\n            <div class=\"card-data-viz__chart-region\">\n              <slot name=\"chart\" />\n            </div>\n          )}\n          {this.hasLegendSlot && (\n            <div class=\"card-data-viz__legend-region\">\n              <slot name=\"legend\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,ojDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,MAqBzBH,KAAAI,iBAAoBC,IAI1B,MAAMC,EAASN,KAAKO,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEX,KAAAY,kBAAqBP,IAC3B,MAAMQ,EAAQb,KAAKO,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,CA4B7E,CA3DC,mBAAAG,GACEd,KAAKE,eAAiBF,KAAKO,GAAGC,cAAc,2BAC5CR,KAAKG,gBAAkBH,KAAKO,GAAGC,cAAc,2B,CAG/C,gBAAAO,GAKEf,KAAKO,GAAGS,iBAAiB,eAAgBhB,KAAKI,kBAC9CJ,KAAKO,GAAGS,iBAAiB,cAAehB,KAAKY,kB,CAG/C,oBAAAK,GACEjB,KAAKO,GAAGW,oBAAoB,eAAgBlB,KAAKI,kBACjDJ,KAAKO,GAAGW,oBAAoB,cAAelB,KAAKY,kB,CAkBlD,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,yBAA0BjC,EAAgBS,KAAKC,aAClFmB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,MACjF3B,KAAK4B,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACRvB,KAAKE,cACJkB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,WAGd7B,KAAKG,eACJiB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as s,c as e,h as i,a as d,t as r}from"./index.js";import{d as a}from"./p-EK1hOP19.js";import{d as n}from"./p-BMQbEIrQ.js";import{d as o}from"./p-BSFgy5r6.js";import{d as c}from"./p-8Nt92j1-.js";import{d as l}from"./p-DOU4cbpc.js";const b=()=>`.sc-ds-card-setting-h{display:block;box-sizing:border-box;width:var(--_card-setting-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.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);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}.card-setting__title-wrap.sc-ds-card-setting{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__title.sc-ds-card-setting{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.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{min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const m="var(--color-foreground-faint-brand)";const h=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsEditingChange=e(this,"dsEditingChange");this.cardWidth="md";this.editing=false;this.enterEdit=()=>{this.dsEditingChange.emit(true)};this.exitEdit=()=>{this.dsEditingChange.emit(false)}}render(){const t=this.editing;return i(d,{key:"f539f8076546598adc3e932e9f4f3eebae654084",class:{"card-setting":true,"card-setting--editing":t},style:{"--_card-setting-width":g[this.cardWidth]}},i("header",{key:"a48d998d82a979bc9632407ec599bdeb37b284b6",class:"card-setting__header"},i("div",{key:"bd903764f4f997f8c4a25d21fd607052e3c5e32a",class:"card-setting__title-wrap"},i("ds-text",{key:"e8d37c44a74b7479f2b374f1dc6c56f19626a7da",class:"card-setting__title",variant:"text-title-small",color:t?m:"primary",as:"h2"},this.heading)),!t?i("ds-button-unfilled-icon",{type:"button",icon:"Pencil","aria-label":"Edit",onDsClick:this.enterEdit}):i("div",{class:"card-setting__actions"},i("ds-button-unfilled-icon",{type:"button",icon:"Cross",backgroundContrast:"bold","has-border":true,"aria-label":"Cancel",onDsClick:this.exitEdit}),i("ds-button-filled",{type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":"Save",onDsClick:this.exitEdit}))),i("div",{key:"13301bf8e2368c5da46272b4b5250a8c569bf519",class:"card-setting__body"},i("slot",{key:"e92fd908d1e27e769201bceb3d532820997f429b"})))}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled-icon","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-setting":if(!customElements.get(r(t))){customElements.define(r(t),h)}break;case"ds-badge":if(!customElements.get(r(t))){a()}break;case"ds-button-filled":if(!customElements.get(r(t))){n()}break;case"ds-button-unfilled-icon":if(!customElements.get(r(t))){o()}break;case"ds-icon":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}u();const f=h;const p=u;export{f as DsCardSetting,p as defineCustomElement};
+import{p as t,H as s,c as e,h as i,a,t as d}from"./index.js";import{d as r}from"./p-EK1hOP19.js";import{d as n}from"./p-DusYu-if.js";import{d as c}from"./p-BTC9Njj6.js";import{d as o}from"./p-CyFVn2Sc.js";import{d as l}from"./p-DRqxVEye.js";const b=()=>`.sc-ds-card-setting-h{display:block;box-sizing:border-box;width:var(--_card-setting-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.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);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}.card-setting__title-wrap.sc-ds-card-setting{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__title.sc-ds-card-setting{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.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{border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}.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 m="var(--color-foreground-faint-brand)";const u=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsEditingChange=e(this,"dsEditingChange");this.cardWidth="md";this.editing=false;this.enterEdit=()=>{this.dsEditingChange.emit(true)};this.exitEdit=()=>{this.dsEditingChange.emit(false)}}render(){const t=this.editing;return i(a,{key:"d20530827897fcd1aa4a10295160374c39cc05ea",class:{"card-setting":true,"card-setting--editing":t},style:{"--_card-setting-width":g[this.cardWidth]}},i("header",{key:"97511282cfe65581dce2cabab6a97cd2bcc4698d",class:"card-setting__header"},i("div",{key:"a2e366776a73c8e161a912c1f3c01ad88f685058",class:"card-setting__title-wrap"},i("ds-text",{key:"61d79ff4a82d494c0e21beab76115475a6f4ec40",class:"card-setting__title",variant:"text-title-small",color:t?m:"primary",as:"h2"},this.heading)),!t?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":"Edit",onDsClick:this.enterEdit}):i("div",{class:"card-setting__actions"},i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Cross",backgroundContrast:"bold","aria-label":"Cancel",onDsClick:this.exitEdit}),i("ds-button-filled",{variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":"Save",onDsClick:this.exitEdit}))),i("div",{key:"0c66aaf642d9136f336dedd0c9a3c43cfa1e9a8a",class:"card-setting__body"},i("slot",{key:"1e42ccfcb8396634de19615a5431bbe50e253927"})))}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-setting":if(!customElements.get(d(t))){customElements.define(d(t),u)}break;case"ds-badge":if(!customElements.get(d(t))){r()}break;case"ds-button-filled":if(!customElements.get(d(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(t))){c()}break;case"ds-icon":if(!customElements.get(d(t))){o()}break;case"ds-text":if(!customElements.get(d(t))){l()}break}}))}f();const h=u;const p=f;export{h as DsCardSetting,p as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","xs","sm","md","lg","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","enterEdit","dsEditingChange","emit","exitEdit","render","h","Host","key","class","style","variant","color","as","heading","type","icon","onDsClick","backgroundContrast","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\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  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.card-setting__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  min-height: var(--dimension-card-width-sm);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  xs: 'var(--dimension-card-width-xs)',\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n\n  /** Emits when the user enters or exits edit mode. */\n  @Event() dsEditingChange!: EventEmitter<boolean>;\n\n  private enterEdit = () => {\n    this.dsEditingChange.emit(true);\n  };\n\n  private exitEdit = () => {\n    this.dsEditingChange.emit(false);\n  };\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{ '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth] }}\n      >\n        <header class=\"card-setting__header\">\n          <div class=\"card-setting__title-wrap\">\n            <ds-text\n              class=\"card-setting__title\"\n              variant=\"text-title-small\"\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          {!editing ? (\n            <ds-button-unfilled-icon\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label=\"Edit\"\n              onDsClick={this.enterEdit}\n            />\n          ) : (\n            <div class=\"card-setting__actions\">\n              <ds-button-unfilled-icon\n                type=\"button\"\n                icon=\"Cross\"\n                backgroundContrast=\"bold\"\n                has-border\n                aria-label=\"Cancel\"\n                onDsClick={this.exitEdit}\n              />\n              <ds-button-filled\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label=\"Save\"\n                onDsClick={this.exitEdit}\n              />\n            </div>\n          )}\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAAA,MAAMA,EAAiB,IAAM,suDCI7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2FAUUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MAKVF,KAAAG,UAAY,KAClBH,KAAKI,gBAAgBC,KAAK,KAAK,EAGzBL,KAAAM,SAAW,KACjBN,KAAKI,gBAAgBC,KAAK,MAAM,CA2DnC,CAxDC,MAAAE,GACE,MAAML,EAAUF,KAAKE,QAErB,OACEM,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBT,GAE3BU,MAAO,CAAE,wBAAyBvB,EAAgBW,KAAKC,aAEvDO,EAAA,UAAAE,IAAA,2CAAQC,MAAM,wBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,MAAOZ,EAAUR,EAA0B,UAC3CqB,GAAG,MAEFf,KAAKgB,WAGRd,EACAM,EAAA,2BACES,KAAK,SACLC,KAAK,SAAQ,aACF,OACXC,UAAWnB,KAAKG,YAGlBK,EAAA,OAAKG,MAAM,yBACTH,EAAA,2BACES,KAAK,SACLC,KAAK,QACLE,mBAAmB,OAAM,+BAEd,SACXD,UAAWnB,KAAKM,WAElBE,EAAA,oBACES,KAAK,SACLC,KAAK,QACLG,OAAO,QACPC,SAAS,QAAO,aACL,OACXH,UAAWnB,KAAKM,aAKxBE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","enterEdit","dsEditingChange","emit","exitEdit","render","h","Host","key","class","style","variant","color","as","heading","type","icon","onDsClick","backgroundContrast","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\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  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.card-setting__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n\n  /** Emits when the user enters or exits edit mode. */\n  @Event() dsEditingChange!: EventEmitter<boolean>;\n\n  private enterEdit = () => {\n    this.dsEditingChange.emit(true);\n  };\n\n  private exitEdit = () => {\n    this.dsEditingChange.emit(false);\n  };\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{ '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth] }}\n      >\n        <header class=\"card-setting__header\">\n          <div class=\"card-setting__title-wrap\">\n            <ds-text\n              class=\"card-setting__title\"\n              variant=\"text-title-small\"\n              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          {!editing ? (\n            <ds-button-unfilled variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label=\"Edit\"\n              onDsClick={this.enterEdit}\n            />\n          ) : (\n            <div class=\"card-setting__actions\">\n              <ds-button-unfilled variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                backgroundContrast=\"bold\"\n                aria-label=\"Cancel\"\n                onDsClick={this.exitEdit}\n              />\n              <ds-button-filled variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label=\"Save\"\n                onDsClick={this.exitEdit}\n              />\n            </div>\n          )}\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iPAAA,MAAMA,EAAiB,IAAM,4rDCI7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2FAUUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MAKVF,KAAAG,UAAY,KAClBH,KAAKI,gBAAgBC,KAAK,KAAK,EAGzBL,KAAAM,SAAW,KACjBN,KAAKI,gBAAgBC,KAAK,MAAM,CA0DnC,CAvDC,MAAAE,GACE,MAAML,EAAUF,KAAKE,QAErB,OACEM,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBT,GAE3BU,MAAO,CAAE,wBAAyBtB,EAAgBU,KAAKC,aAEvDO,EAAA,UAAAE,IAAA,2CAAQC,MAAM,wBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,MAAOZ,EAAUR,EAA0B,UAC3CqB,GAAG,MAEFf,KAAKgB,WAGRd,EACAM,EAAA,sBAAoBK,QAAQ,OAC1BI,KAAK,SACLC,KAAK,SAAQ,aACF,OACXC,UAAWnB,KAAKG,YAGlBK,EAAA,OAAKG,MAAM,yBACTH,EAAA,sBAAoBK,QAAQ,OAC1BI,KAAK,SACLC,KAAK,QACLE,mBAAmB,OAAM,aACd,SACXD,UAAWnB,KAAKM,WAElBE,EAAA,oBAAkBK,QAAQ,OACxBI,KAAK,SACLC,KAAK,QACLG,OAAO,QACPC,SAAS,QAAO,aACL,OACXH,UAAWnB,KAAKM,aAKxBE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as s,h as a,a as r,t as e}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{m as i,b as n,l as o}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:inherit}.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-tertiary);font-size:var(--typography-fontsize-xs)}.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 s{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 s=this.height-l.top-l.bottom;const e=i(this.data,(t=>t.value))??0;const h=n().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=o().domain([0,e||1]).range([s,0]).nice();const b=d.ticks(4);return a(r,{key:"a3d5ae10d50bf6f3c967a11bf71eb9cc82d98257",class:"chart-bar"},a("svg",{key:"e91a4db78ba3f0a373f7540ec1461461732a7ca9",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(", ")},a("g",{key:"af84bc2e91e00c3e370033ee7ae9ecb55933576c",transform:`translate(${l.left}, ${l.top})`},b.map((s=>a("g",{key:`grid-${s}`,transform:`translate(0, ${d(s)})`},a("line",{class:"chart-bar__gridline",x1:0,x2:t}),a("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},s)))),this.data.map(((t,r)=>{const e=h.bandwidth();const i=h(t.label)??0;const n=d(t.value);return a("g",{key:t.label},a("rect",{class:"chart-bar__bar",x:i,y:n,width:e,height:s-n,fill:t.color??c(r)}),a("text",{class:"chart-bar__axis-label",x:i+e/2,y:s+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};
+import{p as t,H as s,h as a,a as r,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as n,l as o}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:inherit}.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-tertiary);font-size:var(--typography-fontsize-xs)}.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 s{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 s=this.height-l.top-l.bottom;const e=c(this.data,(t=>t.value))??0;const h=n().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=o().domain([0,e||1]).range([s,0]).nice();const b=d.ticks(4);return a(r,{key:"27810bb9287894e533e4e8238cd369066c8e6a82",class:"chart-bar"},a("svg",{key:"f2604aef9a243f008e670e8fb92b54956990a47e",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(", ")},a("g",{key:"3d7e56ee676bf21f5045b5d0c7723a5f1f02d43a",transform:`translate(${l.left}, ${l.top})`},b.map((s=>a("g",{key:`grid-${s}`,transform:`translate(0, ${d(s)})`},a("line",{class:"chart-bar__gridline",x1:0,x2:t}),a("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},s)))),this.data.map(((t,r)=>{const e=h.bandwidth();const c=h(t.label)??0;const n=d(t.value);return a("g",{key:t.label},a("rect",{class:"chart-bar__bar",x:c,y:n,width:e,height:s-n,fill:t.color??i(r)}),a("text",{class:"chart-bar__axis-label",x:c+e/2,y:s+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: inherit;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n.chart-bar__axis-label {\n  fill: var(--color-foreground-tertiary);\n  font-size: var(--typography-fontsize-xs);\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":"4IAAA,MAAMA,EAAc,IAAM,0UCM1B,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","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: inherit;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n.chart-bar__axis-label {\n  fill: var(--color-foreground-tertiary);\n  font-size: var(--typography-fontsize-xs);\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,0UCM1B,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":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as n,c as e,h as s,a as i,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as c}from"./p-bDf6yBQd.js";import{r as a}from"./p-BWUTr_XN.js";import{w as u,c as f,a as h}from"./p-CrCGIx8s.js";import{f as l}from"./p-DEpLlQZK.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let s=0;let i=n.length;while(s<i){const r=Math.ceil((s+i)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){s=r}else{i=r-1}}return s>0?`${n.slice(0,s)}…`:"…"}const p=Math.abs;const y=Math.atan2;const v=Math.cos;const g=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const k=2*_;function $(t){return t>1?0:t<-1?_:Math.acos(t)}function A(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function j(t){return t.innerRadius}function z(t){return t.outerRadius}function C(t){return t.startAngle}function E(t){return t.endAngle}function B(t){return t&&t.padAngle}function L(t,n,e,s,i,r,o,c){var a=e-t,u=s-n,f=o-i,h=c-r,l=h*a-f*u;if(l*l<M)return;l=(f*(n-r)-h*(t-i))/l;return[t+l*a,n+l*u]}function N(t,n,e,s,i,r,o){var c=t-e,a=n-s,u=(o?r:-r)/x(c*c+a*a),f=u*a,h=-u*c,l=t+f,d=n+h,p=e+f,y=s+h,v=(l+p)/2,m=(d+y)/2,b=p-l,M=y-d,_=b*b+M*M,w=i-r,k=l*y-p*d,$=(M<0?-1:1)*x(g(0,w*w*_-k*k)),A=(k*M-b*$)/_,j=(-k*b-M*$)/_,z=(k*M+b*$)/_,C=(-k*b+M*$)/_,E=A-v,B=j-m,L=z-v,N=C-m;if(E*E+B*B>L*L+N*N)A=z,j=C;return{cx:A,cy:j,x01:-f,y01:-h,x11:A*(i/w-1),y11:j*(i/w-1)}}function T(){var t=j,n=z,e=f(0),s=null,i=C,r=E,o=B,c=null,a=u(h);function h(){var u,f,h=+t.apply(this,arguments),l=+n.apply(this,arguments),d=i.apply(this,arguments)-w,g=r.apply(this,arguments)-w,j=p(g-d),z=g>d;if(!c)c=u=a();if(l<h)f=l,l=h,h=f;if(!(l>M))c.moveTo(0,0);else if(j>k-M){c.moveTo(l*v(d),l*b(d));c.arc(0,0,l,d,g,!z);if(h>M){c.moveTo(h*v(g),h*b(g));c.arc(0,0,h,g,d,z)}}else{var C=d,E=g,B=d,T=g,D=j,F=j,H=o.apply(this,arguments)/2,Q=H>M&&(s?+s.apply(this,arguments):x(h*h+l*l)),R=m(p(l-h)/2,+e.apply(this,arguments)),V=R,G=R,I,K;if(Q>M){var S=A(Q/h*b(H)),U=A(Q/l*b(H));if((D-=S*2)>M)S*=z?1:-1,B+=S,T-=S;else D=0,B=T=(d+g)/2;if((F-=U*2)>M)U*=z?1:-1,C+=U,E-=U;else F=0,C=E=(d+g)/2}var W=l*v(C),X=l*b(C),Z=h*v(T),q=h*b(T);if(R>M){var J=l*v(E),O=l*b(E),P=h*v(B),Y=h*b(B),tt;if(j<_){if(tt=L(W,X,P,Y,J,O,Z,q)){var nt=W-tt[0],et=X-tt[1],st=J-tt[0],it=O-tt[1],rt=1/b($((nt*st+et*it)/(x(nt*nt+et*et)*x(st*st+it*it)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);V=m(R,(h-ot)/(rt-1));G=m(R,(l-ot)/(rt+1))}else{V=G=0}}}if(!(F>M))c.moveTo(W,X);else if(G>M){I=N(P,Y,W,X,l,G,z);K=N(J,O,Z,q,l,G,z);c.moveTo(I.cx+I.x01,I.cy+I.y01);if(G<R)c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,l,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),!z);c.arc(K.cx,K.cy,G,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.moveTo(W,X),c.arc(0,0,l,C,E,!z);if(!(h>M)||!(D>M))c.lineTo(Z,q);else if(V>M){I=N(Z,q,J,O,h,-V,z);K=N(W,X,P,Y,h,-V,z);c.lineTo(I.cx+I.x01,I.cy+I.y01);if(V<R)c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,h,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),z);c.arc(K.cx,K.cy,V,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.arc(0,0,h,T,B,z)}c.closePath();if(u)return c=null,u+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[v(s)*e,b(s)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function F(t){return t}function H(){var t=F,n=D,e=null,s=f(0),i=f(k),r=f(0);function o(o){var c,a=(o=h(o)).length,u,f,l=0,d=new Array(a),p=new Array(a),y=+s.apply(this,arguments),v=Math.min(k,Math.max(-k,i.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/a,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(c=0;c<a;++c){if((x=p[d[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(c=0,f=l?(v-a*b)/l:0;c<a;++c,y=g){u=d[c],x=p[u],g=y+(x>0?x*f:0)+b,p[u]={data:o[u],index:c,value:x,startAngle:y,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+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?(s=typeof t==="function"?t:f(+t),o):s};o.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const Q=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;user-select:none}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:pointer;transition:opacity var(--effect-motion-short-2)}.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-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const R=.25;const V=0;const G=.82;const I=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.size=175;this.thickness=c.size200;this.cornerRadius=c.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText=""}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=t-n;const s=e*2*G;const i=this.data.reduce(((t,n)=>t+n.value),0);const r=this.centerValue??l(i);if(this.valueTextEl){const t=d(this.valueTextEl,r,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const o=this.centerCaption??"";if(this.captionTextEl&&o){const t=d(this.captionTextEl,o,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=a(this.cornerRadius,c.radius025);const r=t-n;const u=this.data.reduce(((t,n)=>t+n.value),0);const f=u<=0;const h=this.activeLabel??this.hoveredLabel;const d=T().innerRadius(r).outerRadius(t).cornerRadius(e).padAngle(this.gap*Math.PI/180);const p=f?[]:H().value((t=>t.value)).sort(null)(this.data);const y=f?T().innerRadius(r).outerRadius(t)({startAngle:0,endAngle:Math.PI*2}):null;const v=a(c.lineheightXl,32);const g=a(c.lineheightMd,20);const m=this.centerCaption?t-(V+g)/2:t;const b=t+(v+V)/2;const x=this.centerValue??l(u);const M=this.centerCaption??"";return s(i,{key:"334f7c40e714304872549b5a677353c5c88af4b2",class:"chart-donut"},s("div",{key:"27e87ee038ddae37a2198837e0a0aff4955e18d0",class:"chart-donut__wrapper",style:{width:`${this.size}px`,height:`${this.size}px`}},s("svg",{key:"03d4e8b4a96767adc01583145f5959c3c478f1e5",class:"chart-donut__svg",viewBox:`0 0 ${this.size} ${this.size}`,width:this.size,height:this.size},s("g",{key:"d6c87aafc09e67b0a38e9879fedd213eab896c6b",transform:`translate(${t}, ${t})`},f?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):p.map(((t,n)=>{const e=this.data[n];const i=h!=null&&e.label!==h;return s("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:i?R:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),s("text",{key:"076e6a1d4b6099a7c5f3367abfa9dd4f4bbb0f9d",class:"chart-donut__center-value",x:t,y:m,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||x),M&&s("text",{key:"349dc60e9cd4507f307fbce297940814b3d43593",class:"chart-donut__center-caption",x:t,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M))))}static get style(){return Q()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32]}]);function K(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),I)}break}}))}K();const S=I;const U=K;export{S as DsChartDonut,U as defineCustomElement};
+import{p as t,H as n,c as e,h as s,a as i,t as o}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{d as c}from"./p-DRqxVEye.js";import{d as a}from"./p-BZIOTcnM.js";import{T as u}from"./p-B9dHCgY-.js";import{r as l}from"./p-BWUTr_XN.js";import{w as f,c as h,a as d}from"./p-CrCGIx8s.js";import{f as p}from"./p-DEpLlQZK.js";function v(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let s=0;let i=n.length;while(s<i){const o=Math.ceil((s+i)/2);t.textContent=`${n.slice(0,o)}…`;if(t.getComputedTextLength()<=e){s=o}else{i=o-1}}return s>0?`${n.slice(0,s)}…`:"…"}const y=Math.abs;const m=Math.atan2;const g=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const _=Math.sqrt;const k=1e-12;const w=Math.PI;const $=w/2;const j=2*w;function z(t){return t>1?0:t<-1?w:Math.acos(t)}function E(t){return t>=1?$:t<=-1?-$:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function T(t){return t.startAngle}function B(t){return t.endAngle}function L(t){return t&&t.padAngle}function N(t,n,e,s,i,o,r,c){var a=e-t,u=s-n,l=r-i,f=c-o,h=f*a-l*u;if(h*h<k)return;h=(l*(n-o)-f*(t-i))/h;return[t+h*a,n+h*u]}function D(t,n,e,s,i,o,r){var c=t-e,a=n-s,u=(r?o:-o)/_(c*c+a*a),l=u*a,f=-u*c,h=t+l,d=n+f,p=e+l,v=s+f,y=(h+p)/2,m=(d+v)/2,g=p-h,x=v-d,M=g*g+x*x,k=i-o,w=h*v-p*d,$=(x<0?-1:1)*_(b(0,k*k*M-w*w)),j=(w*x-g*$)/M,z=(-w*g-x*$)/M,E=(w*x+g*$)/M,A=(-w*g+x*$)/M,C=j-y,T=z-m,B=E-y,L=A-m;if(C*C+T*T>B*B+L*L)j=E,z=A;return{cx:j,cy:z,x01:-l,y01:-f,x11:j*(i/k-1),y11:z*(i/k-1)}}function H(){var t=A,n=C,e=h(0),s=null,i=T,o=B,r=L,c=null,a=f(u);function u(){var u,l,f=+t.apply(this,arguments),h=+n.apply(this,arguments),d=i.apply(this,arguments)-$,p=o.apply(this,arguments)-$,v=y(p-d),b=p>d;if(!c)c=u=a();if(h<f)l=h,h=f,f=l;if(!(h>k))c.moveTo(0,0);else if(v>j-k){c.moveTo(h*g(d),h*M(d));c.arc(0,0,h,d,p,!b);if(f>k){c.moveTo(f*g(p),f*M(p));c.arc(0,0,f,p,d,b)}}else{var A=d,C=p,T=d,B=p,L=v,H=v,R=r.apply(this,arguments)/2,V=R>k&&(s?+s.apply(this,arguments):_(f*f+h*h)),F=x(y(h-f)/2,+e.apply(this,arguments)),I=F,S=F,Z,q;if(V>k){var G=E(V/f*M(R)),K=E(V/h*M(R));if((L-=G*2)>k)G*=b?1:-1,T+=G,B-=G;else L=0,T=B=(d+p)/2;if((H-=K*2)>k)K*=b?1:-1,A+=K,C-=K;else H=0,A=C=(d+p)/2}var O=h*g(A),Q=h*M(A),U=f*g(B),W=f*M(B);if(F>k){var X=h*g(C),Y=h*M(C),J=f*g(T),P=f*M(T),tt;if(v<w){if(tt=N(O,Q,J,P,X,Y,U,W)){var nt=O-tt[0],et=Q-tt[1],st=X-tt[0],it=Y-tt[1],ot=1/M(z((nt*st+et*it)/(_(nt*nt+et*et)*_(st*st+it*it)))/2),rt=_(tt[0]*tt[0]+tt[1]*tt[1]);I=x(F,(f-rt)/(ot-1));S=x(F,(h-rt)/(ot+1))}else{I=S=0}}}if(!(H>k))c.moveTo(O,Q);else if(S>k){Z=D(J,P,O,Q,h,S,b);q=D(X,Y,U,W,h,S,b);c.moveTo(Z.cx+Z.x01,Z.cy+Z.y01);if(S<F)c.arc(Z.cx,Z.cy,S,m(Z.y01,Z.x01),m(q.y01,q.x01),!b);else{c.arc(Z.cx,Z.cy,S,m(Z.y01,Z.x01),m(Z.y11,Z.x11),!b);c.arc(0,0,h,m(Z.cy+Z.y11,Z.cx+Z.x11),m(q.cy+q.y11,q.cx+q.x11),!b);c.arc(q.cx,q.cy,S,m(q.y11,q.x11),m(q.y01,q.x01),!b)}}else c.moveTo(O,Q),c.arc(0,0,h,A,C,!b);if(!(f>k)||!(L>k))c.lineTo(U,W);else if(I>k){Z=D(U,W,X,Y,f,-I,b);q=D(O,Q,J,P,f,-I,b);c.lineTo(Z.cx+Z.x01,Z.cy+Z.y01);if(I<F)c.arc(Z.cx,Z.cy,I,m(Z.y01,Z.x01),m(q.y01,q.x01),!b);else{c.arc(Z.cx,Z.cy,I,m(Z.y01,Z.x01),m(Z.y11,Z.x11),!b);c.arc(0,0,f,m(Z.cy+Z.y11,Z.cx+Z.x11),m(q.cy+q.y11,q.cx+q.x11),b);c.arc(q.cx,q.cy,I,m(q.y11,q.x11),m(q.y01,q.x01),!b)}}else c.arc(0,0,f,B,T,b)}c.closePath();if(u)return c=null,u+""||null}u.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +o.apply(this,arguments))/2-w/2;return[g(s)*e,M(s)*e]};u.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),u):t};u.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),u):n};u.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:h(+t),u):e};u.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:h(+t),u):s};u.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:h(+t),u):i};u.endAngle=function(t){return arguments.length?(o=typeof t==="function"?t:h(+t),u):o};u.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:h(+t),u):r};u.context=function(t){return arguments.length?(c=t==null?null:t,u):c};return u}function R(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function V(t){return t}function F(){var t=V,n=R,e=null,s=h(0),i=h(j),o=h(0);function r(r){var c,a=(r=d(r)).length,u,l,f=0,h=new Array(a),p=new Array(a),v=+s.apply(this,arguments),y=Math.min(j,Math.max(-j,i.apply(this,arguments)-v)),m,g=Math.min(Math.abs(y)/a,o.apply(this,arguments)),b=g*(y<0?-1:1),x;for(c=0;c<a;++c){if((x=p[h[c]=c]=+t(r[c],c,r))>0){f+=x}}if(n!=null)h.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)h.sort((function(t,n){return e(r[t],r[n])}));for(c=0,l=f?(y-a*b)/f:0;c<a;++c,v=m){u=h[c],x=p[u],m=v+(x>0?x*l:0)+b,p[u]={data:r[u],index:c,value:x,startAngle:v,endAngle:m,padAngle:g}}return p}r.value=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),r):t};r.sortValues=function(t){return arguments.length?(n=t,e=null,r):n};r.sort=function(t){return arguments.length?(e=t,n=null,r):e};r.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:h(+t),r):s};r.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:h(+t),r):i};r.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:h(+t),r):o};return r}const I=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;user-select:none}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.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-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const S=.25;const Z=0;const q=.82;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.size=175;this.thickness=u.size200;this.cornerRadius=u.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.tooltip=null;this.displayedValueText="";this.displayedCaptionText=""}handleHover(t,n){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t);if(!t){this.tooltip=null;return}this.updateTooltip(t,n)}handleSliceMove(t,n){if(this.hoveredLabel!==t.label)return;this.updateTooltip(t,n)}updateTooltip(t,n){const e=this.wrapperEl;if(!e)return;const s=e.getBoundingClientRect();const i=n?n.clientX-s.left:this.size/2;const o=n?n.clientY-s.top:this.size/2;this.tooltip={datum:t,x:i,y:o}}componentDidRender(){const t=this.size/2;const n=l(this.thickness,u.size200);const e=t-n;const s=e*2*q;const i=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??p(i);if(this.valueTextEl){const t=v(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const r=this.centerCaption??"";if(this.captionTextEl&&r){const t=v(this.captionTextEl,r,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.size/2;const n=l(this.thickness,u.size200);const e=l(this.cornerRadius,u.radius025);const o=t-n;const c=this.data.reduce(((t,n)=>t+n.value),0);const a=c<=0;const f=this.activeLabel??this.hoveredLabel;const h=H().innerRadius(o).outerRadius(t).cornerRadius(e).padAngle(this.gap*Math.PI/180);const d=a?[]:F().value((t=>t.value)).sort(null)(this.data);const v=a?H().innerRadius(o).outerRadius(t)({startAngle:0,endAngle:Math.PI*2}):null;const y=l(u.lineheightXl,32);const m=l(u.lineheightMd,20);const g=this.centerCaption?t-(Z+m)/2:t;const b=t+(y+Z)/2;const x=this.centerValue??p(c);const M=this.centerCaption??"";const _=this.tooltip;return s(i,{key:"3229a2966f1ab31df55dc4bd66ed9488428eeeac",class:"chart-donut"},s("div",{key:"0c0e6720bc8dd2acb4fb3aeef2345cfd2b251060",class:"chart-donut__wrapper",style:{width:`${this.size}px`,height:`${this.size}px`},ref:t=>{this.wrapperEl=t??undefined}},s("svg",{key:"931d183c4a1bc5ccb9934e740d427fe84625b4a9",class:"chart-donut__svg",viewBox:`0 0 ${this.size} ${this.size}`,width:this.size,height:this.size},s("g",{key:"1e476464f375ee1887573656c848bcac8b68a5f5",transform:`translate(${t}, ${t})`},a?s("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):d.map(((t,n)=>{const e=this.data[n];const i=f!=null&&e.label!==f;return s("path",{key:e.label,d:h(t)??undefined,fill:e.color??r(n),opacity:i?S:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:t=>this.handleHover(e,t),onMouseMove:t=>this.handleSliceMove(e,t),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),s("text",{key:"a5e165c231ed64e212cdd5be06fa71f991962042",class:"chart-donut__center-value",x:t,y:g,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||x),M&&s("text",{key:"c6b9c72efaf16b3d2eb97f234f8852aa9e56f2e5",class:"chart-donut__center-caption",x:t,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M)),_&&s("ds-tooltip-data-viz",{key:_.datum.label,label:_.datum.label,value:p(_.datum.value),x:_.x,y:_.y})))}static get style(){return I()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],tooltip:[32],displayedValueText:[32],displayedCaptionText:[32]}]);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(o(t))){customElements.define(o(t),G)}break;case"ds-text":if(!customElements.get(o(t))){c()}break;case"ds-tooltip-data-viz":if(!customElements.get(o(t))){a()}break}}))}K();const O=G;const Q=K;export{O as DsChartDonut,Q as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","DIMMED_OPACITY","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","size","thickness","TOKEN_DEFAULTS","size200","radius025","gap","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","handleHover","datum","label","dsSliceHover","emit","componentDidRender","radius","thicknessPx","resolveCssLengthPx","total","reduce","fullValueText","centerValue","formatCompactNumber","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","h","Host","key","class","style","width","height","viewBox","transform","undefined","fill","map","isDimmed","color","categoryColor","opacity","tabindex","role","onMouseEnter","onMouseLeave","onFocus","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}…`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 * pi;\n\nexport function acos(x) {\n  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n  return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n  return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n  return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n  return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n  return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n  var x10 = x1 - x0, y10 = y1 - y0,\n      x32 = x3 - x2, y32 = y3 - y2,\n      t = y32 * x10 - x32 * y10;\n  if (t * t < epsilon) return;\n  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n  return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n  var x01 = x0 - x1,\n      y01 = y0 - y1,\n      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n      ox = lo * y01,\n      oy = -lo * x01,\n      x11 = x0 + ox,\n      y11 = y0 + oy,\n      x10 = x1 + ox,\n      y10 = y1 + oy,\n      x00 = (x11 + x10) / 2,\n      y00 = (y11 + y10) / 2,\n      dx = x10 - x11,\n      dy = y10 - y11,\n      d2 = dx * dx + dy * dy,\n      r = r1 - rc,\n      D = x11 * y10 - x10 * y11,\n      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n      cx0 = (D * dy - dx * d) / d2,\n      cy0 = (-D * dx - dy * d) / d2,\n      cx1 = (D * dy + dx * d) / d2,\n      cy1 = (-D * dx + dy * d) / d2,\n      dx0 = cx0 - x00,\n      dy0 = cy0 - y00,\n      dx1 = cx1 - x00,\n      dy1 = cy1 - y00;\n\n  // Pick the closer of the two intersection points.\n  // TODO Is there a faster way to determine which intersection to use?\n  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n  return {\n    cx: cx0,\n    cy: cy0,\n    x01: -ox,\n    y01: -oy,\n    x11: cx0 * (r1 / r - 1),\n    y11: cy0 * (r1 / r - 1)\n  };\n}\n\nexport default function() {\n  var innerRadius = arcInnerRadius,\n      outerRadius = arcOuterRadius,\n      cornerRadius = constant(0),\n      padRadius = null,\n      startAngle = arcStartAngle,\n      endAngle = arcEndAngle,\n      padAngle = arcPadAngle,\n      context = null,\n      path = withPath(arc);\n\n  function arc() {\n    var buffer,\n        r,\n        r0 = +innerRadius.apply(this, arguments),\n        r1 = +outerRadius.apply(this, arguments),\n        a0 = startAngle.apply(this, arguments) - halfPi,\n        a1 = endAngle.apply(this, arguments) - halfPi,\n        da = abs(a1 - a0),\n        cw = a1 > a0;\n\n    if (!context) context = buffer = path();\n\n    // Ensure that the outer radius is always larger than the inner radius.\n    if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n    // Is it a point?\n    if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n    // Or is it a circle or annulus?\n    else if (da > tau - epsilon) {\n      context.moveTo(r1 * cos(a0), r1 * sin(a0));\n      context.arc(0, 0, r1, a0, a1, !cw);\n      if (r0 > epsilon) {\n        context.moveTo(r0 * cos(a1), r0 * sin(a1));\n        context.arc(0, 0, r0, a1, a0, cw);\n      }\n    }\n\n    // Or is it a circular or annular sector?\n    else {\n      var a01 = a0,\n          a11 = a1,\n          a00 = a0,\n          a10 = a1,\n          da0 = da,\n          da1 = da,\n          ap = padAngle.apply(this, arguments) / 2,\n          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n          rc0 = rc,\n          rc1 = rc,\n          t0,\n          t1;\n\n      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n      if (rp > epsilon) {\n        var p0 = asin(rp / r0 * sin(ap)),\n            p1 = asin(rp / r1 * sin(ap));\n        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n        else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n        else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n      }\n\n      var x01 = r1 * cos(a01),\n          y01 = r1 * sin(a01),\n          x10 = r0 * cos(a10),\n          y10 = r0 * sin(a10);\n\n      // Apply rounded corners?\n      if (rc > epsilon) {\n        var x11 = r1 * cos(a11),\n            y11 = r1 * sin(a11),\n            x00 = r0 * cos(a00),\n            y00 = r0 * sin(a00),\n            oc;\n\n        // Restrict the corner radius according to the sector angle. If this\n        // intersection fails, it’s probably because the arc is too small, so\n        // disable the corner radius entirely.\n        if (da < pi) {\n          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n            var ax = x01 - oc[0],\n                ay = y01 - oc[1],\n                bx = x11 - oc[0],\n                by = y11 - oc[1],\n                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n            rc0 = min(rc, (r0 - lc) / (kc - 1));\n            rc1 = min(rc, (r1 - lc) / (kc + 1));\n          } else {\n            rc0 = rc1 = 0;\n          }\n        }\n      }\n\n      // Is the sector collapsed to a line?\n      if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n      // Does the sector’s outer ring have rounded corners?\n      else if (rc1 > epsilon) {\n        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the outer ring just a circular arc?\n      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n      // Is there no inner ring, and it’s a circular sector?\n      // Or perhaps it’s an annular sector collapsed due to padding?\n      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n      // Does the sector’s inner ring (or point) have rounded corners?\n      else if (rc0 > epsilon) {\n        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the inner ring just a circular arc?\n      else context.arc(0, 0, r0, a10, a00, cw);\n    }\n\n    context.closePath();\n\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  arc.centroid = function() {\n    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n    return [cos(a) * r, sin(a) * r];\n  };\n\n  arc.innerRadius = function(_) {\n    return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n  };\n\n  arc.outerRadius = function(_) {\n    return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n  };\n\n  arc.cornerRadius = function(_) {\n    return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n  };\n\n  arc.padRadius = function(_) {\n    return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n  };\n\n  arc.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n  };\n\n  arc.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n  };\n\n  arc.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n  };\n\n  arc.context = function(_) {\n    return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n  };\n\n  return arc;\n}\n","export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n  return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n  var value = identity,\n      sortValues = descending,\n      sort = null,\n      startAngle = constant(0),\n      endAngle = constant(tau),\n      padAngle = constant(0);\n\n  function pie(data) {\n    var i,\n        n = (data = array(data)).length,\n        j,\n        k,\n        sum = 0,\n        index = new Array(n),\n        arcs = new Array(n),\n        a0 = +startAngle.apply(this, arguments),\n        da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n        a1,\n        p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n        pa = p * (da < 0 ? -1 : 1),\n        v;\n\n    for (i = 0; i < n; ++i) {\n      if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n        sum += v;\n      }\n    }\n\n    // Optionally sort the arcs by previously-computed values or by data.\n    if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n    else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n    // Compute the arcs! They are stored in the original data's order.\n    for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n      j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n        data: data[j],\n        index: i,\n        value: v,\n        startAngle: a0,\n        endAngle: a1,\n        padAngle: p\n      };\n    }\n\n    return arcs;\n  }\n\n  pie.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n  };\n\n  pie.sortValues = function(_) {\n    return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n  };\n\n  pie.sort = function(_) {\n    return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n  };\n\n  pie.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n  };\n\n  pie.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n  };\n\n  pie.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n  };\n\n  return pie;\n}\n",":host {\n  display: inline-block;\n  font-family: inherit;\n  user-select: none;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n}\n\n.chart-donut__svg path {\n  cursor: pointer;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: 2;\n}\n\n/* Matches ds-text's text-title-large variant. */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-size: var(--typography-fontsize-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n}\n\n/* Matches ds-text's text-body-medium variant. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-size: var(--typography-fontsize-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst DIMMED_OPACITY = 0.25;\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() size: number = 175;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n\n  private handleHover(datum: ChartDatum | null) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n  }\n\n  componentDidRender() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    const fullCaptionText = this.centerCaption ?? '';\n\n    return (\n      <Host class=\"chart-donut\">\n        <div class=\"chart-donut__wrapper\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${this.size} ${this.size}`}\n            width={this.size}\n            height={this.size}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-label=\"No data\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  return (\n                    <path\n                      key={datum.label}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      opacity={isDimmed ? DIMMED_OPACITY : 1}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={() => this.handleHover(datum)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={() => this.handleHover(datum)}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6QAQgBA,EAAuBC,EAAoBC,EAAcC,GACvEF,EAAGG,YAAcF,EACjB,GAAIC,GAAY,GAAKF,EAAGI,yBAA2BF,EAAU,OAAOD,EAEpE,IAAII,EAAK,EACT,IAAIC,EAAKL,EAAKM,OACd,MAAOF,EAAKC,EAAI,CACd,MAAME,EAAMC,KAAKC,MAAML,EAAKC,GAAM,GAClCN,EAAGG,YAAc,GAAGF,EAAKU,MAAM,EAAGH,MAClC,GAAIR,EAAGI,yBAA2BF,EAAU,CAC1CG,EAAKG,C,KACA,CACLF,EAAKE,EAAM,C,EAGf,OAAOH,EAAK,EAAI,GAAGJ,EAAKU,MAAM,EAAGN,MAAS,GAC5C,CCxBO,MAAMO,EAAMH,KAAKG,IACjB,MAAMC,EAAQJ,KAAKI,MACnB,MAAMC,EAAML,KAAKK,IACjB,MAAMC,EAAMN,KAAKM,IACjB,MAAMC,EAAMP,KAAKO,IACjB,MAAMC,EAAMR,KAAKQ,IACjB,MAAMC,EAAOT,KAAKS,KAElB,MAAMC,EAAU,MAChB,MAAMC,EAAKX,KAAKY,GAChB,MAAMC,EAASF,EAAK,EACpB,MAAMG,EAAM,EAAIH,EAEhB,SAASI,EAAKC,GACnB,OAAOA,EAAI,EAAI,EAAIA,GAAI,EAAKL,EAAKX,KAAKe,KAAKC,EAC7C,CAEO,SAASC,EAAKD,GACnB,OAAOA,GAAK,EAAIH,EAASG,IAAK,GAAMH,EAASb,KAAKiB,KAAKD,EACzD,CCfA,SAASE,EAAeC,GACtB,OAAOA,EAAEC,WACX,CAEA,SAASC,EAAeF,GACtB,OAAOA,EAAEG,WACX,CAEA,SAASC,EAAcJ,GACrB,OAAOA,EAAEK,UACX,CAEA,SAASC,EAAYN,GACnB,OAAOA,EAAEO,QACX,CAEA,SAASC,EAAYR,GACnB,OAAOA,GAAKA,EAAES,QAChB,CAEA,SAASC,EAAUC,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,GAC7C,IAAIC,EAAMN,EAAKF,EAAIS,EAAMN,EAAKF,EAC1BS,EAAMJ,EAAKF,EAAIO,EAAMJ,EAAKF,EAC1BO,EAAID,EAAMH,EAAME,EAAMD,EAC1B,GAAIG,EAAIA,EAAIhC,EAAS,OACrBgC,GAAKF,GAAOT,EAAKI,GAAMM,GAAOX,EAAKI,IAAOQ,EAC1C,MAAO,CAACZ,EAAKY,EAAIJ,EAAKP,EAAKW,EAAIH,EACjC,CAIA,SAASI,EAAeb,EAAIC,EAAIC,EAAIC,EAAIW,EAAIC,EAAIC,GAC9C,IAAIC,EAAMjB,EAAKE,EACXgB,EAAMjB,EAAKE,EACXrC,GAAMkD,EAAKD,GAAMA,GAAMpC,EAAKsC,EAAMA,EAAMC,EAAMA,GAC9CC,EAAKrD,EAAKoD,EACVE,GAAMtD,EAAKmD,EACXI,EAAMrB,EAAKmB,EACXG,EAAMrB,EAAKmB,EACXZ,EAAMN,EAAKiB,EACXV,EAAMN,EAAKiB,EACXG,GAAOF,EAAMb,GAAO,EACpBgB,GAAOF,EAAMb,GAAO,EACpBgB,EAAKjB,EAAMa,EACXK,EAAKjB,EAAMa,EACXK,EAAKF,EAAKA,EAAKC,EAAKA,EACpBE,EAAId,EAAKC,EACTc,EAAIR,EAAMZ,EAAMD,EAAMc,EACtBjC,GAAKqC,EAAK,GAAI,EAAK,GAAK/C,EAAKH,EAAI,EAAGoD,EAAIA,EAAID,EAAKE,EAAIA,IACrDC,GAAOD,EAAIH,EAAKD,EAAKpC,GAAKsC,EAC1BI,IAAQF,EAAIJ,EAAKC,EAAKrC,GAAKsC,EAC3BK,GAAOH,EAAIH,EAAKD,EAAKpC,GAAKsC,EAC1BM,IAAQJ,EAAIJ,EAAKC,EAAKrC,GAAKsC,EAC3BO,EAAMJ,EAAMP,EACZY,EAAMJ,EAAMP,EACZY,EAAMJ,EAAMT,EACZc,EAAMJ,EAAMT,EAIhB,GAAIU,EAAMA,EAAMC,EAAMA,EAAMC,EAAMA,EAAMC,EAAMA,EAAKP,EAAME,EAAKD,EAAME,EAEpE,MAAO,CACLK,GAAIR,EACJS,GAAIR,EACJd,KAAME,EACND,KAAME,EACNC,IAAKS,GAAOhB,EAAKc,EAAI,GACrBN,IAAKS,GAAOjB,EAAKc,EAAI,GAEzB,CAEe,SAAAY,IACb,IAAIlD,EAAcF,EACdI,EAAcD,EACdkD,EAAeC,EAAS,GACxBC,EAAY,KACZjD,EAAaD,EACbG,EAAWD,EACXG,EAAWD,EACX+C,EAAU,KACVC,EAAOC,EAASN,GAEpB,SAASA,IACP,IAAIO,EACAnB,EACAoB,GAAM1D,EAAY2D,MAAMC,KAAMC,WAC9BrC,GAAMtB,EAAYyD,MAAMC,KAAMC,WAC9BC,EAAK1D,EAAWuD,MAAMC,KAAMC,WAAapE,EACzCsE,EAAKzD,EAASqD,MAAMC,KAAMC,WAAapE,EACvCuE,EAAKjF,EAAIgF,EAAKD,GACdpC,EAAKqC,EAAKD,EAEd,IAAKR,EAASA,EAAUG,EAASF,IAGjC,GAAI/B,EAAKkC,EAAIpB,EAAId,EAAIA,EAAKkC,EAAIA,EAAKpB,EAGnC,KAAMd,EAAKlC,GAAUgE,EAAQW,OAAO,EAAG,QAGlC,GAAID,EAAKtE,EAAMJ,EAAS,CAC3BgE,EAAQW,OAAOzC,EAAKvC,EAAI6E,GAAKtC,EAAKpC,EAAI0E,IACtCR,EAAQJ,IAAI,EAAG,EAAG1B,EAAIsC,EAAIC,GAAKrC,GAC/B,GAAIgC,EAAKpE,EAAS,CAChBgE,EAAQW,OAAOP,EAAKzE,EAAI8E,GAAKL,EAAKtE,EAAI2E,IACtCT,EAAQJ,IAAI,EAAG,EAAGQ,EAAIK,EAAID,EAAIpC,EACtC,CACA,KAGS,CACH,IAAIwC,EAAMJ,EACNK,EAAMJ,EACNK,EAAMN,EACNO,EAAMN,EACNO,EAAMN,EACNO,EAAMP,EACNQ,EAAKhE,EAASmD,MAAMC,KAAMC,WAAa,EACvCY,EAAMD,EAAKlF,IAAa+D,GAAaA,EAAUM,MAAMC,KAAMC,WAAaxE,EAAKqE,EAAKA,EAAKlC,EAAKA,IAC5FC,EAAKtC,EAAIJ,EAAIyC,EAAKkC,GAAM,GAAIP,EAAaQ,MAAMC,KAAMC,YACrDa,EAAMjD,EACNkD,EAAMlD,EACNmD,EACAC,EAGJ,GAAIJ,EAAKnF,EAAS,CAChB,IAAIwF,EAAKjF,EAAK4E,EAAKf,EAAKtE,EAAIoF,IACxBO,EAAKlF,EAAK4E,EAAKjD,EAAKpC,EAAIoF,IAC5B,IAAKF,GAAOQ,EAAK,GAAKxF,EAASwF,GAAOpD,EAAK,GAAI,EAAK0C,GAAOU,EAAIT,GAAOS,OACjER,EAAM,EAAGF,EAAMC,GAAOP,EAAKC,GAAM,EACtC,IAAKQ,GAAOQ,EAAK,GAAKzF,EAASyF,GAAOrD,EAAK,GAAI,EAAKwC,GAAOa,EAAIZ,GAAOY,OACjER,EAAM,EAAGL,EAAMC,GAAOL,EAAKC,GAAM,CAC9C,CAEM,IAAIpC,EAAMH,EAAKvC,EAAIiF,GACftC,EAAMJ,EAAKpC,EAAI8E,GACfhD,EAAMwC,EAAKzE,EAAIoF,GACflD,EAAMuC,EAAKtE,EAAIiF,GAGnB,GAAI5C,EAAKnC,EAAS,CAChB,IAAIyC,EAAMP,EAAKvC,EAAIkF,GACfnC,EAAMR,EAAKpC,EAAI+E,GACflC,EAAMyB,EAAKzE,EAAImF,GACflC,EAAMwB,EAAKtE,EAAIgF,GACfY,GAKJ,GAAIhB,EAAKzE,EAAI,CACX,GAAIyF,GAAKvE,EAAUkB,EAAKC,EAAKK,EAAKC,EAAKH,EAAKC,EAAKd,EAAKC,GAAM,CAC1D,IAAI8D,GAAKtD,EAAMqD,GAAG,GACdE,GAAKtD,EAAMoD,GAAG,GACdG,GAAKpD,EAAMiD,GAAG,GACdI,GAAKpD,EAAMgD,GAAG,GACdK,GAAK,EAAIjG,EAAIO,GAAMsF,GAAKE,GAAKD,GAAKE,KAAO/F,EAAK4F,GAAKA,GAAKC,GAAKA,IAAM7F,EAAK8F,GAAKA,GAAKC,GAAKA,MAAQ,GAC/FE,GAAKjG,EAAK2F,GAAG,GAAKA,GAAG,GAAKA,GAAG,GAAKA,GAAG,IACzCN,EAAMvF,EAAIsC,GAAKiC,EAAK4B,KAAOD,GAAK,IAChCV,EAAMxF,EAAIsC,GAAKD,EAAK8D,KAAOD,GAAK,GAC5C,KAAiB,CACLX,EAAMC,EAAM,CACxB,CACA,CACA,CAGM,KAAMJ,EAAMjF,GAAUgE,EAAQW,OAAOtC,EAAKC,QAGrC,GAAI+C,EAAMrF,EAAS,CACtBsF,EAAKrD,EAAeU,EAAKC,EAAKP,EAAKC,EAAKJ,EAAImD,EAAKjD,GACjDmD,EAAKtD,EAAeQ,EAAKC,EAAKd,EAAKC,EAAKK,EAAImD,EAAKjD,GAEjD4B,EAAQW,OAAOW,EAAG5B,GAAK4B,EAAGjD,IAAKiD,EAAG3B,GAAK2B,EAAGhD,KAG1C,GAAI+C,EAAMlD,EAAI6B,EAAQJ,IAAI0B,EAAG5B,GAAI4B,EAAG3B,GAAI0B,EAAK3F,EAAM4F,EAAGhD,IAAKgD,EAAGjD,KAAM3C,EAAM6F,EAAGjD,IAAKiD,EAAGlD,MAAOD,OAGvF,CACH4B,EAAQJ,IAAI0B,EAAG5B,GAAI4B,EAAG3B,GAAI0B,EAAK3F,EAAM4F,EAAGhD,IAAKgD,EAAGjD,KAAM3C,EAAM4F,EAAG5C,IAAK4C,EAAG7C,MAAOL,GAC9E4B,EAAQJ,IAAI,EAAG,EAAG1B,EAAIxC,EAAM4F,EAAG3B,GAAK2B,EAAG5C,IAAK4C,EAAG5B,GAAK4B,EAAG7C,KAAM/C,EAAM6F,EAAG5B,GAAK4B,EAAG7C,IAAK6C,EAAG7B,GAAK6B,EAAG9C,MAAOL,GACrG4B,EAAQJ,IAAI2B,EAAG7B,GAAI6B,EAAG5B,GAAI0B,EAAK3F,EAAM6F,EAAG7C,IAAK6C,EAAG9C,KAAM/C,EAAM6F,EAAGjD,IAAKiD,EAAGlD,MAAOD,EACxF,CACA,MAGW4B,EAAQW,OAAOtC,EAAKC,GAAM0B,EAAQJ,IAAI,EAAG,EAAG1B,EAAI0C,EAAKC,GAAMzC,GAIhE,KAAMgC,EAAKpE,MAAcgF,EAAMhF,GAAUgE,EAAQiC,OAAOrE,EAAKC,QAGxD,GAAIuD,EAAMpF,EAAS,CACtBsF,EAAKrD,EAAeL,EAAKC,EAAKY,EAAKC,EAAK0B,GAAKgB,EAAKhD,GAClDmD,EAAKtD,EAAeI,EAAKC,EAAKK,EAAKC,EAAKwB,GAAKgB,EAAKhD,GAElD4B,EAAQiC,OAAOX,EAAG5B,GAAK4B,EAAGjD,IAAKiD,EAAG3B,GAAK2B,EAAGhD,KAG1C,GAAI8C,EAAMjD,EAAI6B,EAAQJ,IAAI0B,EAAG5B,GAAI4B,EAAG3B,GAAIyB,EAAK1F,EAAM4F,EAAGhD,IAAKgD,EAAGjD,KAAM3C,EAAM6F,EAAGjD,IAAKiD,EAAGlD,MAAOD,OAGvF,CACH4B,EAAQJ,IAAI0B,EAAG5B,GAAI4B,EAAG3B,GAAIyB,EAAK1F,EAAM4F,EAAGhD,IAAKgD,EAAGjD,KAAM3C,EAAM4F,EAAG5C,IAAK4C,EAAG7C,MAAOL,GAC9E4B,EAAQJ,IAAI,EAAG,EAAGQ,EAAI1E,EAAM4F,EAAG3B,GAAK2B,EAAG5C,IAAK4C,EAAG5B,GAAK4B,EAAG7C,KAAM/C,EAAM6F,EAAG5B,GAAK4B,EAAG7C,IAAK6C,EAAG7B,GAAK6B,EAAG9C,KAAML,GACpG4B,EAAQJ,IAAI2B,EAAG7B,GAAI6B,EAAG5B,GAAIyB,EAAK1F,EAAM6F,EAAG7C,IAAK6C,EAAG9C,KAAM/C,EAAM6F,EAAGjD,IAAKiD,EAAGlD,MAAOD,EACxF,CACA,MAGW4B,EAAQJ,IAAI,EAAG,EAAGQ,EAAIW,EAAKD,EAAK1C,EAC3C,CAEI4B,EAAQkC,YAER,GAAI/B,EAAQ,OAAOH,EAAU,KAAMG,EAAS,IAAM,IACtD,CAEEP,EAAIuC,SAAW,WACb,IAAInD,IAAMtC,EAAY2D,MAAMC,KAAMC,aAAc3D,EAAYyD,MAAMC,KAAMC,YAAc,EAClF6B,IAAMtF,EAAWuD,MAAMC,KAAMC,aAAcvD,EAASqD,MAAMC,KAAMC,YAAc,EAAItE,EAAK,EAC3F,MAAO,CAACN,EAAIyG,GAAKpD,EAAGlD,EAAIsG,GAAKpD,EACjC,EAEEY,EAAIlD,YAAc,SAAS2F,GACzB,OAAO9B,UAAUnF,QAAUsB,SAAqB2F,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAOlD,CAChG,EAEEkD,EAAIhD,YAAc,SAASyF,GACzB,OAAO9B,UAAUnF,QAAUwB,SAAqByF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAOhD,CAChG,EAEEgD,EAAIC,aAAe,SAASwC,GAC1B,OAAO9B,UAAUnF,QAAUyE,SAAsBwC,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAOC,CACjG,EAEED,EAAIG,UAAY,SAASsC,GACvB,OAAO9B,UAAUnF,QAAU2E,EAAYsC,GAAK,KAAO,YAAcA,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAOG,CACjH,EAEEH,EAAI9C,WAAa,SAASuF,GACxB,OAAO9B,UAAUnF,QAAU0B,SAAoBuF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAO9C,CAC/F,EAEE8C,EAAI5C,SAAW,SAASqF,GACtB,OAAO9B,UAAUnF,QAAU4B,SAAkBqF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAO5C,CAC7F,EAEE4C,EAAI1C,SAAW,SAASmF,GACtB,OAAO9B,UAAUnF,QAAU8B,SAAkBmF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIzC,GAAO1C,CAC7F,EAEE0C,EAAII,QAAU,SAASqC,GACrB,OAAO9B,UAAUnF,QAAW4E,EAAUqC,GAAK,KAAO,KAAOA,EAAIzC,GAAOI,CACxE,EAEE,OAAOJ,CACT,CC3Qe,SAAA0C,EAASF,EAAGG,GACzB,OAAOA,EAAIH,GAAI,EAAKG,EAAIH,EAAI,EAAIG,GAAKH,EAAI,EAAII,GAC/C,CCFe,SAAAC,EAAShG,GACtB,OAAOA,CACT,CCIe,SAAAiG,IACb,IAAIC,EAAQF,EACRG,EAAaN,EACbO,EAAO,KACP/F,EAAagD,EAAS,GACtB9C,EAAW8C,EAAS1D,GACpBc,EAAW4C,EAAS,GAExB,SAAS4C,EAAII,GACX,IAAIC,EACAC,GAAKF,EAAOG,EAAMH,IAAO1H,OACzB8H,EACAC,EACAC,EAAM,EACNC,EAAQ,IAAIC,MAAMN,GAClBO,EAAO,IAAID,MAAMN,GACjBxC,GAAM1D,EAAWuD,MAAMC,KAAMC,WAC7BG,EAAKpF,KAAKO,IAAIO,EAAKd,KAAKM,KAAKQ,EAAKY,EAASqD,MAAMC,KAAMC,WAAaC,IACpEC,EACA+C,EAAIlI,KAAKO,IAAIP,KAAKG,IAAIiF,GAAMsC,EAAG9F,EAASmD,MAAMC,KAAMC,YACpDkD,EAAKD,GAAK9C,EAAK,GAAI,EAAK,GACxBgD,EAEJ,IAAKX,EAAI,EAAGA,EAAIC,IAAKD,EAAG,CACtB,IAAKW,EAAIH,EAAKF,EAAMN,GAAKA,IAAMJ,EAAMG,EAAKC,GAAIA,EAAGD,IAAS,EAAG,CAC3DM,GAAOM,CACf,CACA,CAGI,GAAId,GAAc,KAAMS,EAAMR,MAAK,SAASE,EAAGG,GAAK,OAAON,EAAWW,EAAKR,GAAIQ,EAAKL,GAAI,SACnF,GAAIL,GAAQ,KAAMQ,EAAMR,MAAK,SAASE,EAAGG,GAAK,OAAOL,EAAKC,EAAKC,GAAID,EAAKI,GAAI,IAGjF,IAAKH,EAAI,EAAGI,EAAIC,GAAO1C,EAAKsC,EAAIS,GAAML,EAAM,EAAGL,EAAIC,IAAKD,EAAGvC,EAAKC,EAAI,CAClEyC,EAAIG,EAAMN,GAAIW,EAAIH,EAAKL,GAAIzC,EAAKD,GAAMkD,EAAI,EAAIA,EAAIP,EAAI,GAAKM,EAAIF,EAAKL,GAAK,CACvEJ,KAAMA,EAAKI,GACXG,MAAON,EACPJ,MAAOe,EACP5G,WAAY0D,EACZxD,SAAUyD,EACVvD,SAAUsG,EAElB,CAEI,OAAOD,CACX,CAEEb,EAAIC,MAAQ,SAASN,GACnB,OAAO9B,UAAUnF,QAAUuH,SAAeN,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIK,GAAOC,CAC1F,EAEED,EAAIE,WAAa,SAASP,GACxB,OAAO9B,UAAUnF,QAAUwH,EAAaP,EAAGQ,EAAO,KAAMH,GAAOE,CACnE,EAEEF,EAAIG,KAAO,SAASR,GAClB,OAAO9B,UAAUnF,QAAUyH,EAAOR,EAAGO,EAAa,KAAMF,GAAOG,CACnE,EAEEH,EAAI5F,WAAa,SAASuF,GACxB,OAAO9B,UAAUnF,QAAU0B,SAAoBuF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIK,GAAO5F,CAC/F,EAEE4F,EAAI1F,SAAW,SAASqF,GACtB,OAAO9B,UAAUnF,QAAU4B,SAAkBqF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIK,GAAO1F,CAC7F,EAEE0F,EAAIxF,SAAW,SAASmF,GACtB,OAAO9B,UAAUnF,QAAU8B,SAAkBmF,IAAM,WAAaA,EAAIvC,GAAUuC,GAAIK,GAAOxF,CAC7F,EAEE,OAAOwF,CACT,CC/EA,MAAMiB,EAAgB,IAAM,83BCM5B,MAAMC,EAAiB,IAEvB,MAAMC,EAAgB,EAEtB,MAAMC,EAA+B,I,MAOxBC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,qFAOU7D,KAAAwC,KAAqB,GACrBxC,KAAA8D,KAAe,IAEf9D,KAAA+D,UAA6BC,EAAeC,QAE5CjE,KAAAT,aAAgCyE,EAAeE,UAE/ClE,KAAAmE,IAAc,EAUdnE,KAAAoE,YAA6B,KAEpBpE,KAAAqE,aAA8B,KAE9BrE,KAAAsE,mBAA6B,GAC7BtE,KAAAuE,qBAA+B,EA8IjD,CAtIS,WAAAC,CAAYC,GAClBzE,KAAKqE,aAAeI,GAAOC,OAAS,KACpC1E,KAAK2E,aAAaC,KAAKH,E,CAGzB,kBAAAI,GACE,MAAMC,EAAS9E,KAAK8D,KAAO,EAC3B,MAAMiB,EAAcC,EAAmBhF,KAAK+D,UAAWC,EAAeC,SACtE,MAAM7H,EAAc0I,EAASC,EAC7B,MAAMtK,EAAW2B,EAAc,EAAIoH,EACnC,MAAMyB,EAAQjF,KAAKwC,KAAK0C,QAAO,CAACpC,EAAK3G,IAAM2G,EAAM3G,EAAEkG,OAAO,GAE1D,MAAM8C,EAAgBnF,KAAKoF,aAAeC,EAAoBJ,GAC9D,GAAIjF,KAAKsF,YAAa,CACpB,MAAMC,EAAYjL,EAAuB0F,KAAKsF,YAAaH,EAAe1K,GAC1E,GAAI8K,IAAcvF,KAAKsE,mBAAoBtE,KAAKsE,mBAAqBiB,OAChEvF,KAAKsF,YAAY5K,YAAc6K,C,CAGtC,MAAMC,EAAkBxF,KAAKyF,eAAiB,GAC9C,GAAIzF,KAAK0F,eAAiBF,EAAiB,CACzC,MAAMD,EAAYjL,EAAuB0F,KAAK0F,cAAeF,EAAiB/K,GAC9E,GAAI8K,IAAcvF,KAAKuE,qBAAsBvE,KAAKuE,qBAAuBgB,OACpEvF,KAAK0F,cAAchL,YAAc6K,C,EAI1C,MAAAI,GACE,MAAMb,EAAS9E,KAAK8D,KAAO,EAC3B,MAAMiB,EAAcC,EAAmBhF,KAAK+D,UAAWC,EAAeC,SACtE,MAAM2B,EAAiBZ,EAAmBhF,KAAKT,aAAcyE,EAAeE,WAC5E,MAAM9H,EAAc0I,EAASC,EAC7B,MAAME,EAAQjF,KAAKwC,KAAK0C,QAAO,CAACpC,EAAK3G,IAAM2G,EAAM3G,EAAEkG,OAAO,GAG1D,MAAMwD,EAAUZ,GAAS,EAGzB,MAAMa,EAAiB9F,KAAKoE,aAAepE,KAAKqE,aAEhD,MAAM0B,EAAezG,IAClBlD,YAAYA,GACZE,YAAYwI,GACZvF,aAAaqG,GACbhJ,SAAUoD,KAAKmE,IAAMnJ,KAAKY,GAAM,KAEnC,MAAMoK,EAASH,EACX,GACAzD,IACGC,OAAMlG,GAAKA,EAAEkG,QACbE,KAAK,KAFRH,CAEcpC,KAAKwC,MAEvB,MAAMyD,EAAgBJ,EAClBvG,IACGlD,YAAYA,GACZE,YAAYwI,EAFfxF,CAEuB,CAAE9C,WAAY,EAAGE,SAAU1B,KAAKY,GAAK,IAC5D,KAIJ,MAAMsK,EAAkBlB,EAAmBhB,EAAemC,aAAc,IACxE,MAAMC,EAAoBpB,EAAmBhB,EAAeqC,aAAc,IAC1E,MAAMC,EAAetG,KAAKyF,cAAgBX,GAAUvB,EAAgB6C,GAAqB,EAAItB,EAC7F,MAAMyB,EAAiBzB,GAAUoB,EAAkB3C,GAAiB,EAGpE,MAAM4B,EAAgBnF,KAAKoF,aAAeC,EAAoBJ,GAC9D,MAAMO,EAAkBxF,KAAKyF,eAAiB,GAE9C,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBAAuBC,MAAO,CAAEC,MAAO,GAAG7G,KAAK8D,SAAUgD,OAAQ,GAAG9G,KAAK8D,WAClF0C,EAAA,OAAAE,IAAA,2CACEC,MAAM,mBACNI,QAAS,OAAO/G,KAAK8D,QAAQ9D,KAAK8D,OAClC+C,MAAO7G,KAAK8D,KACZgD,OAAQ9G,KAAK8D,MAEb0C,EAAA,KAAAE,IAAA,2CAAGM,UAAW,aAAalC,MAAWA,MACnCe,EACCW,EAAA,QAAMrK,EAAG8J,GAAiBgB,UAAWC,KAAK,wCAAuC,aAAY,YAE7FlB,EAAOmB,KAAI,CAACjM,EAAOuH,KACjB,MAAMgC,EAAQzE,KAAKwC,KAAKC,GACxB,MAAM2E,EAAWtB,GAAkB,MAAQrB,EAAMC,QAAUoB,EAC3D,OACEU,EAAA,QACEE,IAAKjC,EAAMC,MACXvI,EAAG4J,EAAa7K,IAAU+L,UAC1BC,KAAMzC,EAAM4C,OAASC,EAAc7E,GACnC8E,QAASH,EAAW9D,EAAiB,EACrCkE,SAAU,EACVC,KAAK,MAAK,aACE,GAAGhD,EAAMC,UAAUD,EAAMpC,QACrCqF,aAAc,IAAM1H,KAAKwE,YAAYC,GACrCkD,aAAc,IAAM3H,KAAKwE,YAAY,MACrCoD,QAAS,IAAM5H,KAAKwE,YAAYC,GAChCoD,OAAQ,IAAM7H,KAAKwE,YAAY,OAC/B,KAKVgC,EAAA,QAAAE,IAAA,2CACEC,MAAM,4BACN3K,EAAG8I,EACHgD,EAAGxB,EAAY,cACH,SAAQ,oBACF,UAClByB,IAAKxN,IACHyF,KAAKsF,YAAe/K,GAAyB0M,SAAS,GAGvDjH,KAAKsE,oBAAsBa,GAE7BK,GACCgB,EAAA,QAAAE,IAAA,2CACEC,MAAM,8BACN3K,EAAG8I,EACHgD,EAAGvB,EAAc,cACL,SAAQ,oBACF,UAClBwB,IAAKxN,IACHyF,KAAK0F,cAAiBnL,GAAyB0M,SAAS,GAGzDjH,KAAKuE,sBAAwBiB,K","ignoreList":[]}
+{"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","DIMMED_OPACITY","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","size","thickness","TOKEN_DEFAULTS","size200","radius025","gap","activeLabel","hoveredLabel","tooltip","displayedValueText","displayedCaptionText","handleHover","datum","event","label","dsSliceHover","emit","updateTooltip","handleSliceMove","wrapper","wrapperEl","rect","getBoundingClientRect","clientX","left","y","clientY","top","componentDidRender","radius","thicknessPx","resolveCssLengthPx","total","reduce","fullValueText","centerValue","formatCompactNumber","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","tip","h","Host","key","class","style","width","height","ref","undefined","viewBox","transform","fill","map","isDimmed","color","categoryColor","opacity","tabindex","role","onMouseEnter","e","onMouseMove","onMouseLeave","onFocus","onBlur"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}…`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 * pi;\n\nexport function acos(x) {\n  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n  return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n  return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n  return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n  return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n  return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n  var x10 = x1 - x0, y10 = y1 - y0,\n      x32 = x3 - x2, y32 = y3 - y2,\n      t = y32 * x10 - x32 * y10;\n  if (t * t < epsilon) return;\n  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n  return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n  var x01 = x0 - x1,\n      y01 = y0 - y1,\n      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n      ox = lo * y01,\n      oy = -lo * x01,\n      x11 = x0 + ox,\n      y11 = y0 + oy,\n      x10 = x1 + ox,\n      y10 = y1 + oy,\n      x00 = (x11 + x10) / 2,\n      y00 = (y11 + y10) / 2,\n      dx = x10 - x11,\n      dy = y10 - y11,\n      d2 = dx * dx + dy * dy,\n      r = r1 - rc,\n      D = x11 * y10 - x10 * y11,\n      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n      cx0 = (D * dy - dx * d) / d2,\n      cy0 = (-D * dx - dy * d) / d2,\n      cx1 = (D * dy + dx * d) / d2,\n      cy1 = (-D * dx + dy * d) / d2,\n      dx0 = cx0 - x00,\n      dy0 = cy0 - y00,\n      dx1 = cx1 - x00,\n      dy1 = cy1 - y00;\n\n  // Pick the closer of the two intersection points.\n  // TODO Is there a faster way to determine which intersection to use?\n  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n  return {\n    cx: cx0,\n    cy: cy0,\n    x01: -ox,\n    y01: -oy,\n    x11: cx0 * (r1 / r - 1),\n    y11: cy0 * (r1 / r - 1)\n  };\n}\n\nexport default function() {\n  var innerRadius = arcInnerRadius,\n      outerRadius = arcOuterRadius,\n      cornerRadius = constant(0),\n      padRadius = null,\n      startAngle = arcStartAngle,\n      endAngle = arcEndAngle,\n      padAngle = arcPadAngle,\n      context = null,\n      path = withPath(arc);\n\n  function arc() {\n    var buffer,\n        r,\n        r0 = +innerRadius.apply(this, arguments),\n        r1 = +outerRadius.apply(this, arguments),\n        a0 = startAngle.apply(this, arguments) - halfPi,\n        a1 = endAngle.apply(this, arguments) - halfPi,\n        da = abs(a1 - a0),\n        cw = a1 > a0;\n\n    if (!context) context = buffer = path();\n\n    // Ensure that the outer radius is always larger than the inner radius.\n    if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n    // Is it a point?\n    if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n    // Or is it a circle or annulus?\n    else if (da > tau - epsilon) {\n      context.moveTo(r1 * cos(a0), r1 * sin(a0));\n      context.arc(0, 0, r1, a0, a1, !cw);\n      if (r0 > epsilon) {\n        context.moveTo(r0 * cos(a1), r0 * sin(a1));\n        context.arc(0, 0, r0, a1, a0, cw);\n      }\n    }\n\n    // Or is it a circular or annular sector?\n    else {\n      var a01 = a0,\n          a11 = a1,\n          a00 = a0,\n          a10 = a1,\n          da0 = da,\n          da1 = da,\n          ap = padAngle.apply(this, arguments) / 2,\n          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n          rc0 = rc,\n          rc1 = rc,\n          t0,\n          t1;\n\n      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n      if (rp > epsilon) {\n        var p0 = asin(rp / r0 * sin(ap)),\n            p1 = asin(rp / r1 * sin(ap));\n        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n        else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n        else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n      }\n\n      var x01 = r1 * cos(a01),\n          y01 = r1 * sin(a01),\n          x10 = r0 * cos(a10),\n          y10 = r0 * sin(a10);\n\n      // Apply rounded corners?\n      if (rc > epsilon) {\n        var x11 = r1 * cos(a11),\n            y11 = r1 * sin(a11),\n            x00 = r0 * cos(a00),\n            y00 = r0 * sin(a00),\n            oc;\n\n        // Restrict the corner radius according to the sector angle. If this\n        // intersection fails, it’s probably because the arc is too small, so\n        // disable the corner radius entirely.\n        if (da < pi) {\n          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n            var ax = x01 - oc[0],\n                ay = y01 - oc[1],\n                bx = x11 - oc[0],\n                by = y11 - oc[1],\n                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n            rc0 = min(rc, (r0 - lc) / (kc - 1));\n            rc1 = min(rc, (r1 - lc) / (kc + 1));\n          } else {\n            rc0 = rc1 = 0;\n          }\n        }\n      }\n\n      // Is the sector collapsed to a line?\n      if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n      // Does the sector’s outer ring have rounded corners?\n      else if (rc1 > epsilon) {\n        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the outer ring just a circular arc?\n      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n      // Is there no inner ring, and it’s a circular sector?\n      // Or perhaps it’s an annular sector collapsed due to padding?\n      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n      // Does the sector’s inner ring (or point) have rounded corners?\n      else if (rc0 > epsilon) {\n        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the inner ring just a circular arc?\n      else context.arc(0, 0, r0, a10, a00, cw);\n    }\n\n    context.closePath();\n\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  arc.centroid = function() {\n    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n    return [cos(a) * r, sin(a) * r];\n  };\n\n  arc.innerRadius = function(_) {\n    return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n  };\n\n  arc.outerRadius = function(_) {\n    return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n  };\n\n  arc.cornerRadius = function(_) {\n    return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n  };\n\n  arc.padRadius = function(_) {\n    return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n  };\n\n  arc.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n  };\n\n  arc.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n  };\n\n  arc.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n  };\n\n  arc.context = function(_) {\n    return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n  };\n\n  return arc;\n}\n","export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n  return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n  var value = identity,\n      sortValues = descending,\n      sort = null,\n      startAngle = constant(0),\n      endAngle = constant(tau),\n      padAngle = constant(0);\n\n  function pie(data) {\n    var i,\n        n = (data = array(data)).length,\n        j,\n        k,\n        sum = 0,\n        index = new Array(n),\n        arcs = new Array(n),\n        a0 = +startAngle.apply(this, arguments),\n        da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n        a1,\n        p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n        pa = p * (da < 0 ? -1 : 1),\n        v;\n\n    for (i = 0; i < n; ++i) {\n      if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n        sum += v;\n      }\n    }\n\n    // Optionally sort the arcs by previously-computed values or by data.\n    if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n    else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n    // Compute the arcs! They are stored in the original data's order.\n    for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n      j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n        data: data[j],\n        index: i,\n        value: v,\n        startAngle: a0,\n        endAngle: a1,\n        padAngle: p\n      };\n    }\n\n    return arcs;\n  }\n\n  pie.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n  };\n\n  pie.sortValues = function(_) {\n    return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n  };\n\n  pie.sort = function(_) {\n    return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n  };\n\n  pie.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n  };\n\n  pie.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n  };\n\n  pie.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n  };\n\n  return pie;\n}\n",":host {\n  display: inline-block;\n  font-family: inherit;\n  user-select: none;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  /* Allow cursor-following tooltip to paint past the chart box. */\n  overflow: visible;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: 2;\n}\n\n/* Matches ds-text's text-title-large variant. */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-size: var(--typography-fontsize-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n}\n\n/* Matches ds-text's text-body-medium variant. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-size: var(--typography-fontsize-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst DIMMED_OPACITY = 0.25;\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n\ntype DonutTooltipState = {\n  datum: ChartDatum;\n  x: number;\n  y: number;\n};\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() size: number = 175;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   * External sync dims slices only — the data-viz tooltip is reserved for this\n   * component's own pointer/keyboard interaction.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Own-hover tooltip (cursor-following). Cleared on leave; not driven by `activeLabel`. */\n  @State() private tooltip: DonutTooltipState | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n  private wrapperEl?: HTMLDivElement;\n\n  private handleHover(datum: ChartDatum | null, event?: MouseEvent) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n    if (!datum) {\n      this.tooltip = null;\n      return;\n    }\n    this.updateTooltip(datum, event);\n  }\n\n  private handleSliceMove(datum: ChartDatum, event: MouseEvent) {\n    if (this.hoveredLabel !== datum.label) return;\n    this.updateTooltip(datum, event);\n  }\n\n  private updateTooltip(datum: ChartDatum, event?: MouseEvent) {\n    const wrapper = this.wrapperEl;\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    const x = event ? event.clientX - rect.left : this.size / 2;\n    const y = event ? event.clientY - rect.top : this.size / 2;\n    this.tooltip = { datum, x, y };\n  }\n\n  componentDidRender() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    const fullCaptionText = this.centerCaption ?? '';\n    const tip = this.tooltip;\n\n    return (\n      <Host class=\"chart-donut\">\n        <div\n          class=\"chart-donut__wrapper\"\n          style={{ width: `${this.size}px`, height: `${this.size}px` }}\n          ref={el => {\n            this.wrapperEl = (el as HTMLDivElement) ?? undefined;\n          }}\n        >\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${this.size} ${this.size}`}\n            width={this.size}\n            height={this.size}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-label=\"No data\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  return (\n                    <path\n                      key={datum.label}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      opacity={isDimmed ? DIMMED_OPACITY : 1}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={(e: MouseEvent) => this.handleHover(datum, e)}\n                      onMouseMove={(e: MouseEvent) => this.handleSliceMove(datum, e)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={() => this.handleHover(datum)}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n          {tip && (\n            <ds-tooltip-data-viz\n              key={tip.datum.label}\n              label={tip.datum.label}\n              value={formatCompactNumber(tip.datum.value)}\n              x={tip.x}\n              y={tip.y}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as i,a as n,t as a}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{d as c}from"./p-DOU4cbpc.js";import{f as d}from"./p-DEpLlQZK.js";const l=()=>`.sc-ds-chart-legend-h{display:block;font-family:inherit;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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.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}.chart-legend__item.sc-ds-chart-legend{position:relative;z-index:0;box-sizing:border-box;height:var(--dimension-size-400);align-items:center;padding:0 var(--dimension-space-075);border-radius:var(--dimension-radius-025);text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:transparent;pointer-events:none}.chart-legend__item.sc-ds-chart-legend:hover::after{background:var(--color-interaction-hover)}.chart-legend__item--interactive.sc-ds-chart-legend:active::after{background:var(--color-interaction-pressed)}.chart-legend__item--interactive.sc-ds-chart-legend:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:-2px}.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;margin-right:var(--dimension-space-075)}.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{padding:0 var(--dimension-space-025);margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--dimension-space-025);text-align:right;line-height:var(--typography-lineheight-md)}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--dimension-space-025);margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}`;const o=.25;const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=s(this,"dsItemHover");this.dsItemClick=s(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,t)=>{this.dsItemClick.emit({item:e,originalEvent:t})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,t)=>e+(t.value??0)),0);const t=this.activeLabel??this.hoveredLabel;return i(n,{key:"5f404737cd0957a3850023f57b0f5fb46c0984dc",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},i("ul",{key:"1b0b222ce902a0b89aa7c28981b48918552fdbbc",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((s,n)=>{const a=t!=null&&s.label!==t;const c=s.href?"a":"div";return i("li",{class:"chart-legend__list-item",key:s.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!s.href},style:{opacity:a?String(o):"1"},href:s.href,onClick:s.href?e=>this.handleClick(s,e):undefined,onMouseEnter:()=>this.handleHover(s),onFocus:()=>this.handleHover(s),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:s.color??r(n)}})),i("span",{class:"chart-legend__label",title:s.label},i("ds-text",{as:"span",variant:"text-body-medium",color:"secondary"},s.label)),s.value!=null&&i("span",{class:"chart-legend__value",title:String(s.value)},i("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},d(s.value))),s.value!=null&&this.showPercentage&&i("span",{class:"chart-legend__percentage"},i("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},(e?s.value/e*100:0).toFixed(1),"%"))))}))))}static get style(){return l()}},[2,"ds-chart-legend",{items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-text":if(!customElements.get(a(e))){c()}break}}))}g();const m=h;const p=g;export{m as DsChartLegend,p as defineCustomElement};
+import{p as e,H as n,c as i,h as t,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-DRqxVEye.js";import{f as d}from"./p-DEpLlQZK.js";const c=()=>`.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.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);--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-tertiary)}.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-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-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: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{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:focus-visible{outline:none}.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{outline:none}.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:inherit;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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.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}.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)}.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;margin-right:var(--dimension-space-075)}.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{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));text-align:right;line-height:var(--typography-lineheight-md)}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}`;const l=.25;const h=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover");this.dsItemClick=i(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;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 t(s,{key:"b2b8ac64a4782b50152b769e53a39fd84f4a8c41",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},t("ul",{key:"b8dbad6b334e5aabb6128bb90d7f57df0df1ce60",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((i,s)=>{const r=n!=null&&i.label!==n;const a=i.href?"a":"div";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!i.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!i.href},style:{opacity:r?String(l):"1"},href:i.href,onClick:i.href?e=>this.handleClick(i,e):undefined,onMouseEnter:()=>this.handleHover(i),onFocus:()=>this.handleHover(i),onBlur:()=>this.handleHover(null)},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(s)}})),t("span",{class:"chart-legend__label",title:i.label},t("ds-text",{as:"span",variant:"text-body-medium",color:"secondary"},i.label)),i.value!=null&&t("span",{class:"chart-legend__value",title:String(i.value)},t("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},d(i.value))),i.value!=null&&this.showPercentage&&t("span",{class:"chart-legend__percentage"},t("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},(e?i.value/e*100:0).toFixed(1),"%"))))}))))}static get style(){return c()}},[2,"ds-chart-legend",{items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){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),h)}break;case"ds-text":if(!customElements.get(r(e))){a()}break}}))}g();const v=h;const f=g;export{v as DsChartLegend,f as defineCustomElement};
 //# sourceMappingURL=ds-chart-legend.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","title","as","variant","formatCompactNumber","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: inherit;\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/*\n * Vertical: list is the grid; each item spans it via subgrid so the data columns line up.\n * Label always gets at least 50% of the row (minmax floor) and grows via 1fr if the other\n * columns need less; value/percentage are `auto` — sized to their own content — so this holds\n * up whether there are 1, 2, or more data columns, instead of hardcoding a fixed split.\n */\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(50%, 1fr) auto auto;\n  row-gap: var(--dimension-space-050);\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}\n\n/*\n * 32px tall via a fixed `height` + `align-items: center` — same recipe as PanelNav's and BarNav's\n * items — rather than deriving it from padding + line-height math. That math broke once text\n * moved into a wrapped <ds-text>: the row's height ends up depending on whatever line-height a\n * plain wrapper span happens to inherit, which is fragile. A fixed height sidesteps that\n * entirely — content is centered regardless of its own font metrics. Padding is horizontal-only\n * (matches PanelNav) since the fixed height already handles vertical spacing.\n * Column spacing is per-pair via margins (not a uniform column-gap): the swatch-box+label read as\n * one unit (8px between them), while label→percentage→value are separate data points (16px between each).\n */\n.chart-legend__item {\n  /* z-index (any non-auto value) is required, not just position:relative, to make this row its\n     own stacking context — otherwise the ::after fill's z-index:-1 below escapes past this row\n     and can paint behind some ancestor's opaque background instead of just behind this row's text. */\n  position: relative;\n  z-index: 0;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  align-items: center;\n  padding: 0 var(--dimension-space-075);\n  border-radius: var(--dimension-radius-025);\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Same interaction-fill pattern as our buttons: an absolutely-positioned pseudo-layer using the\n   semantic --color-interaction-* tokens, painted behind the row's own content (negative z-index),\n   instead of setting background-color directly on the row. */\n.chart-legend__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n.chart-legend__item:hover::after {\n  background: var(--color-interaction-hover);\n}\n\n.chart-legend__item--interactive:active::after {\n  background: var(--color-interaction-pressed);\n}\n\n.chart-legend__item--interactive:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: -2px;\n}\n\n/* 20px box balances the 12px swatch against the row's 20px text line-height; also carries the\n   6px gap to the label, since box+swatch+label read as a single \"series\" unit. */\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  margin-right: var(--dimension-space-075);\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/*\n * Typography (color/size/weight/letter-spacing) now comes from the nested <ds-text\n * variant=\"text-body-medium\">; these classes only own layout — grid participation, spacing,\n * and truncation. <ds-text>'s host is `display: contents` (no box of its own), so classes\n * placed directly on <ds-text> would silently no-op for anything box-model related — that's\n * why the layout class lives on this wrapping <span> instead of on <ds-text> itself.\n *\n * .chart-legend__item's fixed height (not this line-height) is what keeps the row itself at\n * exactly 32px. line-height is still set here so this wrapper's own box tightly hugs its actual\n * text — without it, the wrapper inherits the browser's default line-height (~24px, since\n * nothing sets its own font-size), and `align-items: center` would then center an oversized\n * wrapper whose text isn't necessarily centered within it, not the text itself.\n */\n.chart-legend__label {\n  padding: 0 var(--dimension-space-025);\n  margin-right: var(--dimension-space-200);\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n\n.chart-legend__percentage {\n  padding: 0 var(--dimension-space-025);\n  text-align: right;\n  line-height: var(--typography-lineheight-md);\n}\n\n/* Value and percentage read as equal-weight data (see the nested <ds-text>, same variant for\n   both) — percentage sits last since it's inherently bounded (never exceeds \"100.0%\"), so its\n   content-sized column never needs more room than that. */\n.chart-legend__value {\n  padding: 0 var(--dimension-space-025);\n  margin-right: var(--dimension-space-200);\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\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  /** 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  /**\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 class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\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\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                  }}\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                  <span class=\"chart-legend__label\" title={item.label}>\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                      {item.label}\n                    </ds-text>\n                  </span>\n                  {item.value != null && (\n                    <span class=\"chart-legend__value\" title={String(item.value)}>\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {formatCompactNumber(item.value)}\n                      </ds-text>\n                    </span>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <span class=\"chart-legend__percentage\">\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n                      </ds-text>\n                    </span>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,koFCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAOUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA+DjD,CArES,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,MAE5CC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOnC,EAAKK,OAC5CQ,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,aACjDjC,EAAKK,QAGTL,EAAKW,OAAS,MACbE,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOV,OAAOzB,EAAKW,QACnDE,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,WACjDK,EAAoBtC,EAAKW,SAI/BX,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,QAAMG,MAAM,4BACVH,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,YAChDzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAG+B,QAAQ,GAC1C,OAIb,K","ignoreList":[]}
+{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","title","as","variant","formatCompactNumber","toFixed"],"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: inherit;\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(50%, 1fr) auto auto;\n  row-gap: var(--dimension-space-050);\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}\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.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  margin-right: var(--dimension-space-075);\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  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n\n.chart-legend__percentage {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  text-align: right;\n  line-height: var(--typography-lineheight-md);\n}\n\n.chart-legend__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\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  /** 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  /**\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 class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\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\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                  <span class=\"chart-legend__label\" title={item.label}>\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                      {item.label}\n                    </ds-text>\n                  </span>\n                  {item.value != null && (\n                    <span class=\"chart-legend__value\" title={String(item.value)}>\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {formatCompactNumber(item.value)}\n                      </ds-text>\n                    </span>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <span class=\"chart-legend__percentage\">\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n                      </ds-text>\n                    </span>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,+7QCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAOUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CAkEjD,CAxES,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBtB,EAAKsB,MAEhCC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOnC,EAAKK,OAC5CQ,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,aACjDjC,EAAKK,QAGTL,EAAKW,OAAS,MACbE,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOV,OAAOzB,EAAKW,QACnDE,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,WACjDK,EAAoBtC,EAAKW,SAI/BX,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,QAAMG,MAAM,4BACVH,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,YAChDzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAG+B,QAAQ,GAC1C,OAIb,K","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as n,h as i,a as s,t as e}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as c,p as a,l as o}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function m(t){return t[1]}function y(t,n){var i=h(true),s=null,e=d,r=null,c=l(a);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?m:h(n);function a(a){var o,l=(a=f(a)).length,h,u=false,d;if(s==null)r=e(d=c());for(o=0;o<=l;++o){if(!(o<l&&i(h=a[o],o,a))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,o,a),+n(h,o,a))}if(d)return r=null,d+""||null}a.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),a):t};a.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),a):n};a.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),a):i};a.curve=function(t){return arguments.length?(e=t,s!=null&&(r=e(s)),a):e};a.context=function(t){return arguments.length?(t==null?s=r=null:r=e(s=t),a):s};return a}const _=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:inherit}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-tertiary);font-size:var(--typography-fontsize-xs)}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const x={top:16,right:16,bottom:24,left:32};const k=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-x.left-x.right;const n=this.height-x.top-x.bottom;const e=this.series.flatMap((t=>t.data));const l=c(e)??0;const h=a().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=o().domain([0,l||1]).range([n,0]).nice();const u=y().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(s,{key:"345bed782323807628b6489c280618a205dce8c4",class:"chart-line"},i("svg",{key:"38234fbf8a17d7c2e89f8f2d09962bcad6c519a2",class:"chart-line__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"93e3cfde16e4740a0af75990f43d4d5b4935ae38",transform:`translate(${x.left}, ${x.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,s)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(s)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const s=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:s}),this.showPoints&&t.data.map(((n,e)=>i("circle",{key:`${t.name}-${e}`,class:"chart-line__point",cx:h(e)??0,cy:f(n),r:3,fill:s}))))})))))}static get style(){return _()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(e(t))){customElements.define(e(t),k)}break}}))}b();const g=k;const v=b;export{g as DsChartLine,v as defineCustomElement};
+import{p as t,H as n,h as i,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as a,p as o,l as c}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function b(t){return t[1]}function m(t,n){var i=h(true),e=null,s=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?b:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(e==null)r=s(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const y=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:inherit}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-tertiary);font-size:var(--typography-fontsize-xs)}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const _={top:16,right:16,bottom:24,left:32};const x=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-_.left-_.right;const n=this.height-_.top-_.bottom;const s=this.series.flatMap((t=>t.data));const l=a(s)??0;const h=o().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=c().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(e,{key:"1197b1b39a03e466ab72519b098af7b29d385a43",class:"chart-line"},i("svg",{key:"d1104d0d8f59a4ea58ba8d09ad1ee892d6d3515a",class:"chart-line__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"69ebe145bbd0be9d9d21deebe94466e1ba291f76",transform:`translate(${_.left}, ${_.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(e)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const e=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:e}),this.showPoints&&t.data.map(((n,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:h(s)??0,cy:f(n),r:3,fill:e}))))})))))}static get style(){return y()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),x)}break}}))}k();const g=x;const v=k;export{g as DsChartLine,v as defineCustomElement};
 //# sourceMappingURL=ds-chart-line.js.map