@ds-mo/ui 12.7.0 → 12.9.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","LOADING_PLACEHOLDER_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","layout","periodLabel","comparisonLabel","metrics","metricMinWidth","isLoading","overviewLabel","focusedMetricIndex","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","hasScore","score","undefined","scoreErrorMessage","visibleMetrics","slice","rovingIndex","first","findIndex","metric","isInactive","current","selectMetric","dsMetricSelect","emit","from","step","count","length","offset","next","cells","el","querySelectorAll","focus","bar","textVariant","width","className","h","class","background","renderTrend","trend","emphasis","as","tone","color","fontFeature","direction","value","renderScore","compact","part","role","name","size","label","band","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","hasHeader","Boolean","Host","style","controlSize"],"sources":["src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n/*\n * A permanently dark surface, independent of the page theme, so the summary bar\n * reads the same on every product surface. Every foreground, border, and\n * interaction token below therefore comes from the always-dark family rather\n * than the theme-reactive one.\n */\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  /* Drives the narrow layout below from the card's own width, not the viewport's. */\n  container-type: inline-size;\n  /* A summary is read, not copied; stray selection while clicking cells is noise. */\n  -webkit-user-select: none;\n  user-select: none;\n  /* Width a metric may shrink to before the grid drops a column. */\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider-width: var(--dimension-stroke-width-012);\n  --ds-card-overview-divider-color: var(--color-always-dark-border-tertiary);\n  --ds-card-overview-divider: var(--ds-card-overview-divider-width) solid\n    var(--ds-card-overview-divider-color);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  /*\n   * Clips the square-cornered metric washes to the card radius. The outer\n   * elevation shadow is painted outside the border box and is unaffected, and\n   * the inset highlight is meant to sit exactly on this edge.\n   */\n  overflow: hidden;\n}\n\n.card-overview__layout {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n  align-items: stretch;\n  min-width: 0;\n}\n\n.card-overview__layout--has-score {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n/*\n * Transparent at regular widths so the score and header participate in the\n * inner layout grid directly. At the narrow breakpoint it becomes the unified\n * summary block above the metrics.\n */\n.card-overview__summary {\n  display: contents;\n}\n\n/* ── Score ────────────────────────────────────────────────────────────────── */\n\n/*\n * Hugs its content and never shrinks, so the headline figure keeps its size and\n * the metric grid absorbs the remaining width.\n */\n/*\n * Top aligned rather than centred, and padded to match the header, so the score\n * label sits in the same 32px box at the same offset as the period text beside\n * it. Both use the same type variant, so their baselines land together.\n */\n.card-overview__score {\n  display: flex;\n  grid-row: 1 / span 2;\n  grid-column: 1;\n  flex: 0 0 auto;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n}\n\n.card-overview__score--resolved {\n  min-inline-size: max-content;\n}\n\n/* The control-height box that aligns this label with the period text. */\n.card-overview__score-label-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--ds-control-height);\n}\n\n/*\n * The score is its own column, so its rows cannot baseline-align with the measure\n * rows through flex or grid — those only align items that share a line. These two\n * offsets pull the column onto the measure baselines instead.\n *\n * They are compensation for how much lower a display-scale figure sits in its line\n * box than the body text it aligns to, so they are coupled to the type pairing:\n * change the score or measure variants and both need re-measuring.\n */\n.card-overview__score-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  margin-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n}\n\n.card-overview__score-value {\n  flex: 0 0 auto;\n}\n\n/* Second half of the baseline compensation described above the score figure. */\n.card-overview__score-band {\n  margin-block-start: calc(-1 * var(--dimension-space-025));\n}\n\n/*\n * A skeleton bar is a solid block, so in a baseline-aligned row it aligns on its\n * bottom edge while the text it stands in for aligns on its baseline. Next to a\n * display-scale figure that difference is the descent under the figure's\n * baseline, which drops the bar below where the resolved trend sits.\n *\n * The offset is applied with relative positioning rather than a margin: a margin\n * is not part of a synthesized baseline, so it grows the figure instead of moving\n * the bar, which then pushes the band below it out of place.\n *\n * Only needed beside the score figure; the measure rows pair body variants whose\n * bottom edge and baseline already agree.\n */\n.card-overview__skeleton-baseline {\n  position: relative;\n  inset-block-start: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score--error {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  color: var(--color-always-dark-foreground-negative);\n}\n\n/* ── Body ─────────────────────────────────────────────────────────────────── */\n\n/*\n * Takes the remaining inline space. The minimum is what makes the host wrap: once\n * the score and roughly two measure columns no longer fit side by side, the body\n * drops below the score instead of squeezing it. `min()` keeps that from becoming\n * an overflow floor on very narrow viewports.\n */\n.card-overview__body {\n  display: flex;\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__body--has-score {\n  grid-column: 2;\n}\n\n/*\n * One control row: 8px of padding on every side around a 32px md control, so the\n * bar is 8 + 32 + 8. Both ends of the bar are control-shaped boxes — the period\n * text on the left and the slotted control on the right — so the row reads\n * balanced rather than text on one side and a control on the other.\n */\n.card-overview__header {\n  display: flex;\n  grid-row: 1;\n  grid-column: 1;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n.card-overview__header--has-score {\n  grid-column: 2;\n}\n\n/*\n * Matches the control's box on the opposite end, including its inline padding, so\n * the text lands at the same optical inset the slotted control does:\n * 8 from the bar + 6 from this box + 2 from the label inset = 16.\n *\n * Nowrap keeps the row at the control height; the period truncates rather than\n * growing the bar to two lines.\n */\n.card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--ds-control-height);\n  min-width: 0;\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The period control is slotted, so only reserve space for it. */\n.card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n}\n\n/* ── Metrics ──────────────────────────────────────────────────────────────── */\n\n/*\n * `auto-fit` gives every occupied track an equal share while all metrics fit on\n * one row. Once wrapping creates another row, its cells stay on those same\n * tracks, so a partial final row leaves empty space instead of stretching one\n * measure wider than its peers.\n *\n * Dividers are painted outward from each cell and clipped by this grid. That\n * leaves only the lines between cells: anything emitted from the final column or\n * final row lands outside the grid and is clipped without needing to detect the\n * number of tracks.\n *\n * `flex: 1 1 auto` makes the grid absorb whatever height the body has\n * left, so cells reach the card bottom and their hover wash has no dead strip.\n */\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)\n  );\n  align-content: stretch;\n  min-width: 0;\n  overflow: clip;\n}\n\n/*\n * Square by design. Cells tile edge to edge against their dividers, so a radius\n * would break the seam; the card's own radius clips the outer corners instead.\n *\n * Padding is plain rather than control-derived: a cell is a block of content, not\n * a control box that has to optically match something on the far side.\n */\n.card-overview__metric {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding: var(--dimension-space-175) var(--dimension-space-200);\n  border-radius: 0;\n  box-shadow:\n    var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),\n    0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);\n}\n\n.card-overview__metric[role='button'] {\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n/* ── Trend ────────────────────────────────────────────────────────────────── */\n\n/*\n * Tone arrives resolved from the caller: the arrow direction and the sentiment\n * are independent, so a falling metric can read positive or neutral. The arrow is\n * a glyph inside this text node, so it always matches the surrounding weight.\n */\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card becomes a full stack. The summary\n * wrapper owns one block above the metrics: score label, figure, and trend stay\n * together at the start; the period control sits at the upper end; and the period\n * copy follows the score instead of becoming a separate divided row.\n */\n/*\n * Selectors are host-qualified purely for specificity: the compiled sheet places\n * these rules ahead of the base ones, so a plain class here would only ever add\n * properties and never override them.\n */\n@container (max-width: 480px) {\n  :host .card-overview__layout {\n    grid-template-rows: auto minmax(0, 1fr);\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :host .card-overview__summary {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: auto;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  :host .card-overview__score {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-rows: auto auto;\n    grid-template-columns: auto auto;\n    justify-content: start;\n    column-gap: var(--dimension-space-100);\n    width: auto;\n    padding-block-end: var(--dimension-space-100);\n    padding-inline-end: var(--dimension-space-100);\n    border-inline-end: none;\n  }\n\n  :host .card-overview__score-label-row {\n    grid-row: 1;\n    grid-column: 1 / -1;\n    min-height: var(--ds-control-height);\n  }\n\n  /*\n   * The wide score uses optical offsets to meet the neighbouring metric\n   * baselines. In the stacked summary those neighbours are gone, so natural\n   * document flow keeps the label, figure, band, and period clearly ordered.\n   */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    grid-row: 2;\n    margin-block-start: 0;\n  }\n\n  :host .card-overview__score-figure {\n    grid-column: 1;\n    align-self: baseline;\n    gap: var(--dimension-space-100);\n  }\n\n  :host .card-overview__score-band {\n    grid-column: 2;\n    align-self: baseline;\n    display: none;\n  }\n\n  :host .card-overview__header {\n    display: grid;\n    grid-row: 1;\n    grid-column: 2;\n    grid-template-rows: auto auto;\n    align-content: start;\n    gap: 0;\n    padding: 0;\n    border-block-end: none;\n  }\n\n  :host .card-overview__filter {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: start;\n    justify-self: end;\n    padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n  }\n\n  :host .card-overview__period {\n    grid-row: 2;\n    grid-column: 1;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-self: stretch;\n    gap: 0;\n    min-height: 0;\n    padding-block: var(--dimension-space-150) var(--dimension-space-100);\n    padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n    overflow: visible;\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  :host .card-overview__body {\n    grid-row: 2;\n    grid-column: 1;\n  }\n}\n\n/*\n * Page shells may enter a responsive mode before this card itself becomes\n * narrow. The explicit stacked layout applies the same composition without\n * coupling CardOverview to a viewport breakpoint.\n */\n:host(.card-overview--stacked) .card-overview__layout {\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--stacked) .card-overview__summary {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto;\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n:host(.card-overview--stacked) .card-overview__score {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-rows: auto auto;\n  grid-template-columns: auto auto;\n  justify-content: start;\n  column-gap: var(--dimension-space-100);\n  width: auto;\n  padding-block-end: var(--dimension-space-100);\n  padding-inline-end: var(--dimension-space-100);\n  border-inline-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__score-label-row {\n  grid-row: 1;\n  grid-column: 1 / -1;\n  min-height: var(--ds-control-height);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band,\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-row: 2;\n  margin-block-start: 0;\n}\n\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-column: 1;\n  align-self: baseline;\n  gap: var(--dimension-space-100);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band {\n  grid-column: 2;\n  align-self: baseline;\n  display: none;\n}\n\n:host(.card-overview--stacked) .card-overview__header {\n  display: grid;\n  grid-row: 1;\n  grid-column: 2;\n  grid-template-rows: auto auto;\n  align-content: start;\n  gap: 0;\n  padding: 0;\n  border-block-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__filter {\n  grid-row: 1;\n  grid-column: 1;\n  align-self: start;\n  justify-self: end;\n  padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n}\n\n:host(.card-overview--stacked) .card-overview__period {\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-self: stretch;\n  gap: 0;\n  min-height: 0;\n  padding-block: var(--dimension-space-150) var(--dimension-space-100);\n  padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n  overflow: visible;\n  text-align: end;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__body {\n  grid-row: 2;\n  grid-column: 1;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n/* ── Compact presentation ───────────────────────────────────────────────── */\n\n/*\n * Matches the shared 48px bar contract: one 32px control row with 8px above\n * and below. The score remains a distinct leading cell, while reporting copy\n * absorbs the available width and the application-owned control never shrinks.\n */\n:host(.card-overview--compact) {\n  height: var(--dimension-size-600);\n  min-height: var(--dimension-size-600);\n}\n\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: auto;\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__score-label-row {\n  display: contents;\n  min-height: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-label,\n:host(.card-overview--compact) .card-overview__score-figure,\n:host(.card-overview--compact) .card-overview__trend {\n  flex: 0 0 auto;\n}\n\n:host(.card-overview--compact) .card-overview__score-figure {\n  display: flex;\n  align-self: center;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  margin-block-start: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-band {\n  display: none;\n}\n\n:host(.card-overview--compact) .card-overview__header {\n  display: flex;\n  flex: 1 1 auto;\n  grid-row: auto;\n  grid-column: auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: none;\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  text-align: start;\n  white-space: nowrap;\n}\n\n:host(.card-overview--compact) .card-overview__period-current,\n:host(.card-overview--compact) .card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host(.card-overview--compact) .card-overview__period-current {\n  flex: 0 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__period-comparison {\n  flex: 1 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  padding: 0;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\n\n/** Metric cells below this width drop a grid column rather than compress further. */\nconst DEFAULT_METRIC_MIN_WIDTH = 'var(--dimension-menu-width-xs)';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst LOADING_PLACEHOLDER_COUNT = 4;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 6;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Leading summary block. Omit to render the bar without a headline figure. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */\n  @Prop() periodLabel: string = '';\n\n  /** Comparison caption, for example `vs Previous period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first six are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * reflows and then stacks from this alone, so no measurement is required.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n\n  private get hasScore(): boolean {\n    return this.score !== undefined || this.scoreErrorMessage !== undefined || this.isLoading;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    const first = this.visibleMetrics.findIndex(metric => !metric.isInactive);\n    if (first < 0) return -1;\n    const current = this.visibleMetrics[this.focusedMetricIndex];\n    return current && !current.isInactive ? this.focusedMetricIndex : first;\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const count = metrics.length;\n    if (count === 0) return;\n\n    for (let offset = 1; offset <= count; offset += 1) {\n      // Positive modulo so a backwards step from the first metric wraps to the last.\n      const next = (((from + step * offset) % count) + count) % count;\n      if (metrics[next]?.isInactive) continue;\n\n      this.focusedMetricIndex = next;\n      const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric');\n      cells[next]?.focus();\n      return;\n    }\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed: the default base is the theme's quaternary\n   * foreground, which is black and therefore invisible on this permanently dark\n   * surface.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant, emphasis = false) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore(compact: boolean) {\n    if (this.isLoading) {\n      if (compact) {\n        return (\n          <div class=\"card-overview__score ds-control--md\" part=\"score\">\n            {this.bar('text-body-medium', '40px', 'card-overview__score-label')}\n            <div class=\"card-overview__score-figure\">\n              {this.bar('text-body-medium', '24px')}\n              {this.bar('text-body-medium', '32px')}\n            </div>\n          </div>\n        );\n      }\n\n      return (\n        <div class=\"card-overview__score ds-control--md\" part=\"score\">\n          {/*\n           * The label row is kept but left empty. It carries the control-height\n           * box that aligns the score block with the period control, so dropping\n           * it would shift the whole block up; a bar inside it would collide with\n           * the figure, which sits under the label by design.\n           */}\n          <div class=\"card-overview__score-label-row\" />\n          <div class=\"card-overview__score-figure\">\n            {this.bar('text-display-medium', '56px')}\n            {this.bar('text-body-small', '24px', 'card-overview__skeleton-baseline')}\n          </div>\n          {/*\n           * Class goes on the skeleton itself, matching the resolved band. In a\n           * wrapper the bar picks up inline leading and drops below the resolved\n           * band position.\n           */}\n          {this.bar(\n            'text-caption',\n            '80px',\n            'card-overview__score-band card-overview__score-band--loading'\n          )}\n        </div>\n      );\n    }\n\n    if (this.scoreErrorMessage) {\n      return (\n        <div class=\"card-overview__score card-overview__score--error\" part=\"score\" role=\"alert\">\n          <ds-icon name=\"CircleExclamation\" size=\"sm\" color=\"inherit\" aria-hidden=\"true\" />\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n            {this.scoreErrorMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score card-overview__score--resolved ds-control--md\" part=\"score\">\n        <div class=\"card-overview__score-label-row\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-label\"\n            variant=\"text-body-medium\"\n            emphasis={!compact}\n            color={ALWAYS_DARK_SECONDARY}\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-value\"\n            variant={compact ? 'text-body-medium' : 'text-display-medium'}\n            emphasis\n            color={ALWAYS_DARK_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {score.value}\n          </ds-text>\n          {this.renderTrend(\n            score.trend,\n            compact ? 'text-body-medium' : 'text-body-small',\n            !compact\n          )}\n        </div>\n        {score.band && !compact && (\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-band\"\n            variant=\"text-caption\"\n            color={ALWAYS_DARK_SECONDARY}\n          >\n            {score.band}\n          </ds-text>\n        )}\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div\n        class={{\n          'card-overview__metric': true,\n          'card-overview__metric--inactive': !selectable,\n          // Selection targets get the shared wash; press scaling is not used here\n          // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n          'ds-interaction-fill': selectable,\n          // The card is permanently dark, so interaction tokens come from that family.\n          'ds-interaction-fill--on-always-dark': selectable,\n          'ds-focus-ring-inset': selectable,\n        }}\n        part=\"metric\"\n        role={selectable ? 'button' : undefined}\n        tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n        onClick={() => this.selectMetric(metric, index)}\n        onKeyDown={event => this.handleMetricKeyDown(event, index)}\n        onFocusin={() => {\n          if (selectable) this.focusedMetricIndex = index;\n        }}\n      >\n        {metric.labelTooltip ? (\n          <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n            {label}\n          </ds-tooltip>\n        ) : (\n          label\n        )}\n        <div class=\"card-overview__metric-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__metric-value\"\n            variant=\"text-body-medium\"\n            color={ALWAYS_DARK_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {metric.value}\n          </ds-text>\n          {this.renderTrend(metric.trend, 'text-body-medium')}\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n        <div class=\"card-overview__metric\" key={`loading-${index}`}>\n          {this.bar('text-body-small', '70%', 'card-overview__metric-label')}\n          <div class=\"card-overview__metric-figure\">\n            {this.bar('text-body-medium', '36px')}\n            {/* text-body-medium, matching renderTrend for a metric — a smaller\n             * variant here leaves the trend bar short of the value beside it. */}\n            {this.bar('text-body-medium', '40px')}\n          </div>\n        </div>\n      ));\n    }\n\n    return this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\n    const compact = this.variant === 'compact';\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--has-score': this.hasScore,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          // Split shadow and inset highlight, so the opaque surface cannot cover\n          // the highlight the way a combined elevation shadow would.\n          'ds-control-elevation': true,\n          'ds-control-elevation--sm': !compact,\n          'ds-control-elevation--floating': compact,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{ '--ds-card-overview-metric-min': this.metricMinWidth }}\n      >\n        <div\n          class={{\n            'card-overview__layout': true,\n            'card-overview__layout--has-score': this.hasScore,\n          }}\n        >\n          <div class=\"card-overview__summary\">\n            {this.hasScore && this.renderScore(compact)}\n\n            {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n            <div\n              class={{\n                'card-overview__header': true,\n                'card-overview__header--has-score': this.hasScore,\n                'ds-control--md': true,\n              }}\n            >\n              {this.isLoading ? (\n                <div class=\"card-overview__period ds-control-label-box\">\n                  {this.bar('text-body-medium', '184px')}\n                  {this.bar('text-body-medium', '248px')}\n                </div>\n              ) : (\n                hasHeader && (\n                  <div class=\"card-overview__period ds-control-label-box\">\n                    {this.periodLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-current ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        emphasis\n                        color={ALWAYS_DARK_PRIMARY}\n                      >\n                        {this.periodLabel}\n                      </ds-text>\n                    )}\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                )\n              )}\n              <div class=\"card-overview__filter\">\n                {/*\n                  Period control is application owned: it varies by product surface.\n                  While loading it is stood in for by a control-shaped skeleton so the\n                  header keeps its resolved proportions.\n                */}\n                {this.isLoading ? (\n                  <ds-skeleton\n                    variant=\"control\"\n                    controlSize=\"md\"\n                    width=\"128px\"\n                    background=\"always-dark\"\n                  />\n                ) : (\n                  <slot name=\"filter\" />\n                )}\n              </div>\n            </div>\n          </div>\n\n          {!compact && (\n            <div\n              class={{\n                'card-overview__body': true,\n                'card-overview__body--has-score': this.hasScore,\n              }}\n            >\n              <div class=\"card-overview__metrics\" part=\"metrics\">\n                {this.renderMetrics()}\n              </div>\n\n              <slot name=\"footer\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-BT5hgg5i.js";import{d as c}from"./p-De7NquTI.js";import{d as n}from"./p-BuiZcSga.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as m}from"./p-k0Hmj1KV.js";const g=()=>`.ds-chrome-space--sm.sc-ds-card-setting-h,.ds-chrome-space--sm.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-card-setting-h,.ds-chrome-space--md.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-card-setting-h,.ds-chrome-space--lg.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting,.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting,.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting{flex-direction:column}.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:grid;align-items:center}.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{justify-content:space-between;height:var(--dimension-size-600);flex:0 0 auto;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const h={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const b={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const u="var(--color-foreground-faint-brand)";const p=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"27cba83733ef02f62682856172542f5504baca42",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":h[this.cardWidth],"--_card-setting-min-height":b[this.cardWidth]}},t("header",{key:"8ba499d78873045108a73ef6d3d90c0e64997f2a",class:"card-setting__header ds-chrome-row ds-chrome-space--md"},t("ds-text",{key:"46c5a3b34d63712ef0a64b85a4b864a55d8bebd4",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:s?u:"primary",as:"h2"},this.heading),t("div",{key:"34b2c1cc055e865050176b614ed86c3fc47edcf2",class:"card-setting__actions"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"2abcebb64fad1513d97ea91035272d2185be0c07",class:"card-setting__body"},t("slot",{key:"2768274324d07a4d158e9d701fb97b492c53cfa1"})))}static get style(){return g()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(r(s))){customElements.define(r(s),p)}break;case"ds-badge":if(!customElements.get(r(s))){a()}break;case"ds-button-filled":if(!customElements.get(r(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){n()}break;case"ds-icon":if(!customElements.get(r(s))){o()}break;case"ds-loader":if(!customElements.get(r(s))){l()}break;case"ds-text":if(!customElements.get(r(s))){m()}break}}))}f();const v=p;const k=f;export{v as DsCardSetting,k as defineCustomElement};
+import{p as s,H as e,c as d,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-CIiBpjCn.js";import{d as c}from"./p-B5tMlca-.js";import{d as n}from"./p-8GK7B7K4.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as m}from"./p-Cr3tEx7o.js";const g=()=>`.ds-chrome-space--sm.sc-ds-card-setting-h,.ds-chrome-space--sm.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-card-setting-h,.ds-chrome-space--md.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-card-setting-h,.ds-chrome-space--lg.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting,.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting,.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting{flex-direction:column}.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:grid;align-items:center}.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{justify-content:space-between;height:var(--dimension-size-600);flex:0 0 auto;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const h={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const b={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const p="var(--color-foreground-faint-brand)";const u=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"3203aafe6bbce61f70c188c88a0b2746154d15e6",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":h[this.cardWidth],"--_card-setting-min-height":b[this.cardWidth]}},t("header",{key:"f775364222c3d08a38dfc16887d25a7902919acd",class:"card-setting__header ds-chrome-row ds-chrome-space--md"},t("ds-text",{key:"107c59a4a68de22986a723c8d047e47244e299cc",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:s?p:"primary",as:"h2"},this.heading),t("div",{key:"ee211e85086a0b41fe1b5eb50f333e2363f439b0",class:"card-setting__actions"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"c9faf0dd3939a58cdf7e60ec00c1e610a8f2f26e",class:"card-setting__body"},t("slot",{key:"8a6e44353077a8736a0248bd63fe741893ca07ff"})))}static get style(){return g()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(r(s))){customElements.define(r(s),u)}break;case"ds-badge":if(!customElements.get(r(s))){a()}break;case"ds-button-filled":if(!customElements.get(r(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){n()}break;case"ds-icon":if(!customElements.get(r(s))){o()}break;case"ds-loader":if(!customElements.get(r(s))){l()}break;case"ds-text":if(!customElements.get(r(s))){m()}break}}))}f();const v=u;const k=f;export{v as DsCardSetting,k as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["chartBarStackedCss","MARGIN","top","right","bottom","left","PERCENTAGE_TICKS","ChartBarStacked","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","series","categories","variant","width","height","valuesForCategory","categoryIndex","map","Math","max","data","accessibleLabel","category","values","total","reduce","sum","value","details","seriesIndex","visibleValue","formatPercentage","String","name","join","render","innerWidth","innerHeight","categoryValues","_","index","totals","yMax","xScale","scaleBand","domain","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","transform","tick","x1","x2","x","barWidth","bandwidth","barX","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","fill","color","categoryColor","isTopSegment","hasRoundedTop","squareBaseY","squareBaseHeight","y","y1","y2"],"sources":["src/wc/components/ChartBarStacked/ChartBarStacked.css?tag=ds-chart-bar-stacked&encapsulation=scoped","src/wc/components/ChartBarStacked/ChartBarStacked.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.chart-bar-stacked__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar-stacked__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue = this.variant === 'percentage'\n              ? formatPercentage(total ? value / total : 0, 1)\n              : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n    const categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__axis-label\"\n                  x={-8}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {this.variant === 'percentage' ? `${tick}%` : tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((category, categoryIndex) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(category) ?? 0;\n              const values = categoryValues[categoryIndex];\n              const total = totals[categoryIndex];\n              const topSeriesIndex = values.reduce(\n                (topIndex, value, seriesIndex) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = this.variant === 'percentage'\n                      ? total\n                        ? (rawValue / total) * 100\n                        : 0\n                      : rawValue;\n                    const segmentStart = cumulativeValue;\n                    const segmentEnd = cumulativeValue + value;\n                    cumulativeValue = segmentEnd;\n\n                    const segmentY = yScale(segmentEnd);\n                    const segmentBottom = yScale(segmentStart);\n                    const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                    if (!segmentHeight) return null;\n\n                    const fill = series.color ?? categoryColor(seriesIndex);\n                    const isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__segment-shape--rounded': hasRoundedTop,\n                          }}\n                          x={barX}\n                          y={segmentY}\n                          width={barWidth}\n                          height={segmentHeight}\n                          fill={fill}\n                        />\n                        {hasRoundedTop ? (\n                          <rect\n                            class=\"chart-bar-stacked__segment-square-base\"\n                            x={barX}\n                            y={squareBaseY}\n                            width={barWidth}\n                            height={squareBaseHeight}\n                            fill={fill}\n                          />\n                        ) : null}\n                        {segmentStart > 0 ? (\n                          <line\n                            class=\"chart-bar-stacked__segment-separator\"\n                            x1={barX}\n                            x2={barX + barWidth}\n                            y1={segmentBottom}\n                            y2={segmentBottom}\n                            vector-effect=\"non-scaling-stroke\"\n                          />\n                        ) : null}\n                      </g>\n                    );\n                  })}\n                  <text\n                    class=\"chart-bar-stacked__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {category}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["chartBarStackedCss","PERCENTAGE_TICKS","ChartBarStacked","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","series","categories","variant","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","valuesForCategory","categoryIndex","map","Math","max","data","accessibleLabel","category","values","total","reduce","sum","value","details","seriesIndex","visibleValue","formatPercentage","String","name","join","render","viewportWidth","viewportHeight","margin","axisLabelGap","categoryLabelOffset","resolveCartesianChartLayout","innerWidth","left","right","innerHeight","top","bottom","categoryValues","_","index","totals","yMax","xScale","scaleBand","domain","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","ref","element","role","transform","tick","x1","x2","x","barWidth","bandwidth","barX","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","fill","color","categoryColor","isTopSegment","hasRoundedTop","squareBaseY","squareBaseHeight","y","y1","y2"],"sources":["src/wc/components/ChartBarStacked/ChartBarStacked.css?tag=ds-chart-bar-stacked&encapsulation=scoped","src/wc/components/ChartBarStacked/ChartBarStacked.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar-stacked__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar-stacked__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue = this.variant === 'percentage'\n              ? formatPercentage(total ? value / total : 0, 1)\n              : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__axis-label\"\n                  x={-axisLabelGap}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {this.variant === 'percentage' ? `${tick}%` : tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((category, categoryIndex) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(category) ?? 0;\n              const values = categoryValues[categoryIndex];\n              const total = totals[categoryIndex];\n              const topSeriesIndex = values.reduce(\n                (topIndex, value, seriesIndex) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = this.variant === 'percentage'\n                      ? total\n                        ? (rawValue / total) * 100\n                        : 0\n                      : rawValue;\n                    const segmentStart = cumulativeValue;\n                    const segmentEnd = cumulativeValue + value;\n                    cumulativeValue = segmentEnd;\n\n                    const segmentY = yScale(segmentEnd);\n                    const segmentBottom = yScale(segmentStart);\n                    const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                    if (!segmentHeight) return null;\n\n                    const fill = series.color ?? categoryColor(seriesIndex);\n                    const isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__segment-shape--rounded': hasRoundedTop,\n                          }}\n                          x={barX}\n                          y={segmentY}\n                          width={barWidth}\n                          height={segmentHeight}\n                          fill={fill}\n                        />\n                        {hasRoundedTop ? (\n                          <rect\n                            class=\"chart-bar-stacked__segment-square-base\"\n                            x={barX}\n                            y={squareBaseY}\n                            width={barWidth}\n                            height={squareBaseHeight}\n                            fill={fill}\n                          />\n                        ) : null}\n                        {segmentStart > 0 ? (\n                          <line\n                            class=\"chart-bar-stacked__segment-separator\"\n                            x1={barX}\n                            x2={barX + barWidth}\n                            y1={segmentBottom}\n                            y2={segmentBottom}\n                            vector-effect=\"non-scaling-stroke\"\n                          />\n                        ) : null}\n                      </g>\n                    );\n                  })}\n                  <text\n                    class=\"chart-bar-stacked__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + categoryLabelOffset}\n                    text-anchor=\"middle\"\n                  >\n                    {category}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as a,h as r,a as s,t as e}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{m as i}from"./p-CH3w-P2H.js";import{b as o,l as n}from"./p-C_ewSXTT.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const a=this.height-l.top-l.bottom;const e=i(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const b=d.ticks(4);return r(s,{key:"140358b6d7f66c37c2c3c2f971f0c6d8ce2eaa7e",class:"chart-bar"},r("svg",{key:"dad8cd48e6eb964687a262358de46e350ba12948",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},r("g",{key:"daa9e6c1babf6833f2e5bd34d0f49906b66d6266",transform:`translate(${l.left}, ${l.top})`},b.map((a=>r("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,s)=>{const e=h.bandwidth();const i=h(t.label)??0;const o=d(t.value);const n=a-o;const l=o+n/2;const b=n/2;const f=t.color??c(s);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:i,y:o,width:e,height:n,fill:f}),r("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:i,y:l,width:e,height:b,fill:f}),r("text",{class:"chart-bar__axis-label",x:i+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}b();const f=d;const m=b;export{f as DsChartBar,m as defineCustomElement};
+import{p as t,H as s,h as a,a as e,t as r}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{C as n,r as c,b as h,l as o}from"./p-2foAUsDN.js";import{m as l}from"./p-CH3w-P2H.js";const d=()=>`.sc-ds-chart-bar-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-bar__svg.sc-ds-chart-bar{display:block;width:100%;height:100%}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}`;const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240;this.viewportController=null;this.svgEl=null}componentDidLoad(){this.connectViewportController()}connectedCallback(){if(this.svgEl&&!this.viewportController)this.connectViewportController()}componentDidRender(){if(!this.viewportController)this.connectViewportController()}connectViewportController(){if(!this.svgEl)return;this.viewportController=new n(this.svgEl,(t=>{if(t.width!==this.viewport?.width||t.height!==this.viewport?.height){this.viewport=t}}));this.viewportController.connect()}disconnectedCallback(){this.viewportController?.disconnect();this.viewportController=null}handleIntrinsicSizeChange(){this.viewport=undefined;if(typeof requestAnimationFrame==="function"){requestAnimationFrame((()=>this.viewportController?.measure()))}}render(){const t=this.viewport?.width??this.width;const s=this.viewport?.height??this.height;const{margin:r,axisLabelGap:n,categoryLabelOffset:d}=c();const f=Math.max(0,t-r.left-r.right);const b=Math.max(0,s-r.top-r.bottom);const m=l(this.data,(t=>t.value))??0;const g=h().domain(this.data.map((t=>t.label))).range([0,f]).padding(.35);const p=o().domain([0,m||1]).range([b,0]).nice();const y=p.ticks(4);return a(e,{key:"06ce00b9ec57f37e230279baf85086f6f7b8f137",class:"chart-bar"},a("svg",{key:"a1ddeecf915d5bcbf95b2c0ef864100c73b546e8",class:"chart-bar__svg",ref:t=>{this.svgEl=t??null},width:t,height:s,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},a("g",{key:"65c55750302a8b24f120eee3d4c5959376cb41c8",transform:`translate(${r.left}, ${r.top})`},y.map((t=>a("g",{key:`grid-${t}`,transform:`translate(0, ${p(t)})`},a("line",{class:"chart-bar__gridline",x1:0,x2:f}),a("text",{class:"chart-bar__axis-label",x:-n,"text-anchor":"end","dominant-baseline":"middle"},t)))),this.data.map(((t,s)=>{const e=g.bandwidth();const r=g(t.label)??0;const n=p(t.value);const c=b-n;const h=n+c/2;const o=c/2;const l=t.color??i(s);return a("g",{key:t.label},a("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:r,y:n,width:e,height:c,fill:l}),a("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:r,y:h,width:e,height:o,fill:l}),a("text",{class:"chart-bar__axis-label",x:r+e/2,y:b+d,"text-anchor":"middle"},t.label))})))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return d()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(r(t))){customElements.define(r(t),f)}break}}))}b();const m=f;const g=b;export{m as DsChartBar,g 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","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAc,IAAM,ihBCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAkF1B,CAhFC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,MAAM8B,EAAYlC,EAAciC,EAChC,MAAME,EAAcF,EAAOC,EAAY,EACvC,MAAME,EAAmBF,EAAY,EACrC,MAAMG,EAAOlC,EAAEmC,OAASC,EAAcV,GACtC,OACEZ,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,yCACNQ,EAAGI,EACHQ,EAAGP,EACHrC,MAAOkC,EACPjC,OAAQqC,EACRG,KAAMA,IAERpB,EAAA,QACEG,MAAM,6CACNQ,EAAGI,EACHQ,EAAGL,EACHvC,MAAOkC,EACPjC,OAAQuC,EACRC,KAAMA,IAERpB,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBU,EAAGxC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}
+{"version":3,"names":["chartBarCss","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","render","viewportWidth","viewportHeight","margin","axisLabelGap","categoryLabelOffset","resolveCartesianChartLayout","innerWidth","Math","max","left","right","innerHeight","top","bottom","yMax","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","ref","element","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum } from '../../utils/chart-types';\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  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - 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          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\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\n                  class=\"chart-bar__axis-label\"\n                  x={-axisLabelGap}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + categoryLabelOffset}\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":"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","ignoreList":[]}

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

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