npm - @ds-mo/ui - Versions diffs - 15.3.0 → 15.4.0 - Mend

@ds-mo/ui 15.3.0 → 15.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (430) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","fittingColumns","availableWidth","columns","rows","ceil","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","DEFAULT_LOADING_METRIC_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","disconnect","layoutResizeFrame","undefined","cancelAnimationFrame","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","requestAnimationFrame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","el","style","setProperty","String","removeProperty","forceUpdate","rovingIndex","selectMetric","dsMetricSelect","emit","cells","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","as","tone","color","fontFeature","direction","value","renderScore","part","size","unavailableMessage","scoreErrorMessage","score","role","level","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","compact","collapse","customProperties","Host","ref","element","name","emphasis"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport { resolveSafetyScoreLevel } from '../Score/score-model';\n\nexport interface CardOverviewCollapseGeometry {\n active: boolean;\n expandedHeight: number;\n offset: number;\n visibleHeight: number;\n}\n\n/*\n Choose the column count for the metric grid.\n \n Cells that all fit across one row stay on one row: a full row is already\n * balanced, so there is nothing to distribute.\n \n Once the width forces a wrap, prefer equal rows — the widest column count\n * that divides the total exactly. Eight cells therefore step 8 → 4+4 → 2+2+2+2\n * as the width narrows, never trading an equal split for a shorter grid.\n \n Totals with no equal split available fall back to the fewest rows that fit,\n * spread as evenly as possible, which leaves one short final row: five cells at\n * a four-cell width are 3+2, seven are 4+3.\n \n Width is the only ceiling. There is deliberately no column cap: a wide card\n * showing six cells that each clear `minCellWidth` renders all six across.\n /\nexport function resolveOverviewGridColumns(options: {\n cellCount: number;\n availableWidth: number;\n minCellWidth: number;\n}): number {\n const cellCount = Math.max(1, Math.floor(options.cellCount));\n const minCellWidth = Math.max(1, options.minCellWidth);\n const fittingColumns = Math.max(\n 1,\n Math.floor(Math.max(0, options.availableWidth) / minCellWidth)\n );\n\n if (fittingColumns >= cellCount) return cellCount;\n\n for (let columns = fittingColumns; columns >= 2; columns -= 1) {\n if (cellCount % columns === 0) return columns;\n }\n\n const rows = Math.ceil(cellCount / fittingColumns);\n return Math.ceil(cellCount / rows);\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n variant: CardOverviewVariant;\n progress: number;\n expandedHeight: number;\n compactHeight: number;\n}): CardOverviewCollapseGeometry {\n const compactHeight = Math.max(0, options.compactHeight);\n const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n const progress =\n options.variant === 'compact' \|\| !Number.isFinite(options.progress)\n ? 0\n : Math.min(1, Math.max(0, options.progress));\n const distance = Math.max(0, expandedHeight - compactHeight);\n const offset = distance progress;\n\n return {\n active: progress > 0 && distance > 0,\n expandedHeight,\n offset,\n visibleHeight: expandedHeight - offset,\n };\n}\n\nexport function resolveOverviewRovingIndex(\n metrics: readonly OverviewMetric[],\n focusedIndex: number\n): number {\n const first = metrics.findIndex(metric => !metric.isInactive);\n if (first < 0) return -1;\n return metrics[focusedIndex] && !metrics[focusedIndex].isInactive ? focusedIndex : first;\n}\n\nexport function findNextOverviewMetricIndex(\n metrics: readonly OverviewMetric[],\n from: number,\n step: -1 \| 1\n): number {\n for (let offset = 1; offset <= metrics.length; offset += 1) {\n const next = (((from + step * offset) % metrics.length) + metrics.length) % metrics.length;\n if (!metrics[next]?.isInactive) return next;\n }\n return -1;\n}\n","@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n container-type: inline-size;\n -webkit-user-select: none;\n user-select: none;\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 color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--ds-radius-card);\n background: var(--color-always-dark-background);\n color: var(--color-always-dark-foreground-primary);\n overflow-anchor: none;\n}\n\n.card-overview__clip {\n height: 100%;\n min-width: 0;\n border-radius: inherit;\n background: inherit;\n overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n height: var(--ds-card-overview-expanded-height);\n pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n height: var(--ds-card-overview-visible-height);\n pointer-events: auto;\n will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__body {\n transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n will-change: transform;\n}\n\n.card-overview__layout {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.card-overview__summary {\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n min-width: 0;\n background: var(--color-always-dark-background);\n}\n\n.card-overview__header {\n display: flex;\n position: relative;\n align-items: center;\n gap: 0;\n width: 100%;\n height: var(--dimension-size-600);\n min-width: 0;\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n.card-overview__header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--ds-card-overview-divider-width);\n background: var(--ds-card-overview-divider-color);\n pointer-events: none;\n}\n\n.card-overview__period {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: 0;\n min-width: 0;\n min-height: var(--ds-control-height);\n overflow: hidden;\n white-space: nowrap;\n}\n\n.card-overview__period-current,\n.card-overview__period-comparison {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-overview__period-current {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n}\n\n.card-overview__period-fixed {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.card-overview__period-comparison {\n flex: 0 0 auto;\n}\n\n.card-overview__filter {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n min-width: 0;\n}\n\n.card-overview__body {\n display: flex;\n position: relative;\n z-index: 0;\n flex-direction: column;\n min-width: 0;\n transform: translateY(0);\n}\n\n.card-overview__metrics {\n display: grid;\n flex: 1 1 auto;\n grid-template-columns: repeat(\n var(--ds-card-overview-grid-columns, 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.card-overview__score,\n.card-overview__metric {\n display: flex;\n min-width: 0;\n padding: var(--dimension-space-100);\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 box-sizing: border-box;\n}\n\n.card-overview__score-content,\n.card-overview__metric-action {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: var(--dimension-space-075);\n border-radius: var(--dimension-radius-025);\n box-sizing: border-box;\n}\n\n.card-overview__score-content {\n align-items: center;\n justify-content: flex-start;\n /\n Sits the fill 16px from the cell's left edge, on top of the 8px cell padding.\n * Metric cells keep the shared inner inset because their content is text; the\n * fill is a filled box and needs more room around it to read as inset.\n /\n padding-inline-start: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n}\n\n/ Mirrors .card-overview__metric-content so labels and trends line up across cells. /\n.card-overview__score-copy {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.card-overview__score-label-spacer {\n visibility: hidden;\n}\n\n.card-overview__score-content--error {\n align-items: center;\n justify-content: center;\n / No fill to align, so this box keeps the metric cells' inner inset. /\n padding-inline-start: var(--dimension-space-075);\n border: var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);\n background: transparent;\n color: var(--color-always-dark-foreground-negative);\n text-align: center;\n}\n\n.card-overview__metric-action {\n flex-direction: column;\n justify-content: center;\n gap: var(--dimension-space-050);\n}\n\n.card-overview__metric-action[role='button'] {\n cursor: default;\n}\n\n.card-overview__metric-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n gap: var(--dimension-space-050);\n min-width: 0;\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-050);\n min-width: 0;\n}\n\n.card-overview__trend {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n grid-template-columns: minmax(0, 1fr);\n}\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__surface,\n:host(.card-overview--compact) .card-overview__clip,\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n width: 100%;\n height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__header::after {\n display: none;\n}\n\n@media (forced-colors: active) {\n .card-overview__header::after {\n background: var(--ds-forced-color-content);\n }\n\n .card-overview__score-content--error {\n border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n background: var(--ds-forced-color-surface);\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\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';\nimport {\n findNextOverviewMetricIndex,\n resolveCardOverviewCollapseGeometry,\n resolveOverviewGridColumns,\n resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/\n Metric cells below this width drop a grid column rather than compress further.\n \n A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n /\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/* Skeleton cells rendered while loading with no metrics supplied yet. /\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/* Maximum number of comparable measures the summary bar presents at once. /\nconst MAX_METRIC_COUNT = 7;\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 /* Optional nonselectable safety score rendered as the first grid cell. /\n @Prop() score: OverviewScore \| undefined;\n\n /* Fixed current date or range. Replaced by content in the `period` slot. /\n @Prop() periodLabel: string = '';\n\n /* Copy between the current period and comparison control, usually `vs.`. /\n @Prop() comparisonLabel: string = '';\n\n /* Measures rendered in the responsive grid. Only the first seven 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 * uses this threshold while choosing an evenly distributed column count.\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 /\n Page-controlled visual collapse from the full card (`0`) toward its 48px\n * compact handoff height (`1`). The component preserves its expanded flow\n * height, keeps the period bar stationary, and moves/clips the grid beneath\n * it. The page still owns sticky positioning and the final compact handoff.\n /\n @Prop() scrollCollapseProgress: number = 0;\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 @State() private expandedHeight: number = 0;\n @State() private gridColumns: number \| undefined;\n\n private layoutEl?: HTMLElement;\n private layoutResizeObserver: ResizeObserver \| null = null;\n private layoutResizeFrame: number \| undefined;\n /* The node the observer is bound to, which a later render can replace. /\n private observedLayoutEl?: HTMLElement;\n\n componentDidLoad() {\n this.observeLayout();\n }\n\n componentDidRender() {\n // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n // render swapped the layout node out from under the observer: the ref points\n // at the new node while the observer still watches the detached one, which\n // never resizes again. The grid would then keep its first measured column\n // count for the life of the component.\n if (!this.layoutResizeObserver \|\| this.observedLayoutEl !== this.layoutEl) {\n this.observeLayout();\n } else {\n this.updateLayoutGeometry();\n }\n }\n\n disconnectedCallback() {\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = null;\n if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = undefined;\n this.observedLayoutEl = undefined;\n }\n\n private get visibleMetrics(): OverviewMetric[] {\n return this.metrics.slice(0, MAX_METRIC_COUNT);\n }\n\n private get visibleCellCount(): number {\n const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n return 1 + metricCount;\n }\n\n /* Preserve an authored data shape while loading, or use the standard six-cell grid. /\n private get loadingMetricCount(): number {\n return this.visibleMetrics.length \|\| DEFAULT_LOADING_METRIC_COUNT;\n }\n\n private get resolvedScrollCollapseProgress(): number {\n if (this.variant === 'compact' \|\| !Number.isFinite(this.scrollCollapseProgress)) return 0;\n return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n }\n\n private get scrollCollapseGeometry() {\n const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n return resolveCardOverviewCollapseGeometry({\n variant: this.variant,\n progress: this.resolvedScrollCollapseProgress,\n expandedHeight: this.expandedHeight,\n compactHeight,\n });\n }\n\n private observeLayout() {\n const layout = this.layoutEl;\n if (!layout) return;\n\n const bounds = layout.getBoundingClientRect();\n this.updateLayoutGeometry(bounds.width, bounds.height);\n if (typeof ResizeObserver === 'undefined') return;\n\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = new ResizeObserver(entries => {\n const rect = entries[0]?.contentRect;\n if (!rect) return;\n if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = requestAnimationFrame(() => {\n this.layoutResizeFrame = undefined;\n this.updateLayoutGeometry(rect.width, rect.height);\n });\n });\n this.layoutResizeObserver.observe(layout);\n this.observedLayoutEl = layout;\n }\n\n private updateLayoutGeometry(width?: number, height?: number) {\n const layout = this.layoutEl;\n if (!layout) return;\n\n const bounds =\n width === undefined \|\| height === undefined ? layout.getBoundingClientRect() : null;\n const resolvedWidth = width ?? bounds?.width ?? 0;\n const resolvedHeight = height ?? bounds?.height ?? 0;\n\n let changed = false;\n\n if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n this.expandedHeight = resolvedHeight;\n changed = true;\n }\n\n const columns = resolveOverviewGridColumns({\n cellCount: this.visibleCellCount,\n availableWidth: resolvedWidth,\n minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n });\n if (columns !== this.gridColumns) {\n this.gridColumns = columns;\n changed = true;\n }\n\n // The column count is written straight to the host rather than through the\n // rendered style object. Measurement happens in `componentDidLoad` and in the\n // ResizeObserver callback, both outside a render cycle, and the host's style\n // is not patched again after the first render — so a rendered value would stay\n // pinned to whatever the first paint produced, before any width was known.\n if (this.gridColumns) {\n this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n } else {\n this.el.style.removeProperty('--ds-card-overview-grid-columns');\n }\n\n if (changed) forceUpdate(this);\n }\n\n /* Index of the roving tab stop, skipping inactive metrics. /\n private get rovingIndex(): number {\n return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\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 next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n if (next < 0) return;\n\n this.focusedMetricIndex = next;\n const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n cells[next]?.focus();\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 so the base and shimmer follow the card's\n * permanently dark surface in both themes.\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) {\n if (!trend) return null;\n return (\n <ds-text\n as=\"span\"\n class={{\n 'card-overview__trend': true,\n 'ds-control-label-box': true,\n [`card-overview__trend--${trend.tone}`]: true,\n }}\n variant={variant}\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() {\n if (this.isLoading) {\n return (\n <div class=\"card-overview__score\" part=\"score\">\n <div class=\"card-overview__score-content\">\n <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n <div class=\"card-overview__score-copy\">\n {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n {this.bar('text-body-medium', '28px')}\n </div>\n </div>\n </div>\n );\n }\n\n const unavailableMessage =\n this.scoreErrorMessage \|\| (!this.score ? 'Score unavailable' : undefined);\n if (unavailableMessage) {\n return (\n / eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. /\n <div class=\"card-overview__score\" part=\"score\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-content card-overview__score-content--error\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n role=\"alert\"\n >\n {unavailableMessage}\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\" part=\"score\">\n <div class=\"card-overview__score-content\">\n <ds-score\n size=\"lg\"\n variant=\"dense\"\n value={score.value}\n level={score.level}\n label=\"Safety score\"\n />\n <div class=\"card-overview__score-copy\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-label-spacer ds-control-label-box\"\n variant=\"text-body-small\"\n color={ALWAYS_DARK_SECONDARY}\n aria-hidden=\"true\"\n >\n  \n </ds-text>\n {this.renderTrend(score.trend, 'text-body-medium')}\n </div>\n </div>\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 ds-control-label-box\"\n variant=\"text-body-small\"\n color={ALWAYS_DARK_SECONDARY}\n >\n {metric.label}\n </ds-text>\n );\n\n return (\n <div class=\"card-overview__metric\" part=\"metric\">\n <div\n class={{\n 'card-overview__metric-action': true,\n 'card-overview__metric-action--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 'ds-interaction-fill--on-always-dark': selectable,\n 'ds-focus-ring-inset': selectable,\n }}\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 <div class=\"ds-interaction-fill__content card-overview__metric-content\">\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 ds-control-label-box\"\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 </div>\n </div>\n );\n }\n\n private renderMetrics() {\n if (this.isLoading) {\n return [\n this.renderScore(),\n ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n <div class=\"card-overview__metric\" key={`loading-${index}`}>\n <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n <div class=\"card-overview__metric-content\">\n {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n <div class=\"card-overview__metric-figure\">\n {this.bar('text-body-medium', '40px')}\n {/ Match renderTrend's type canvas and the score trend's 28px width. /}\n {this.bar('text-body-medium', '28px')}\n </div>\n </div>\n </div>\n </div>\n )),\n ];\n }\n\n return [\n this.renderScore(),\n ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n ];\n }\n\n render() {\n const compact = this.variant === 'compact';\n const collapse = this.scrollCollapseGeometry;\n\n // Omit absent custom properties rather than handing them an undefined value.\n // Stencil serialises undefined to the string \"undefined\", which is invalid in\n // `repeat()` and voids the whole grid-template-columns declaration — the grid\n // then collapses to one implicit column instead of using the `auto-fit`\n // fallback baked into the stylesheet.\n const customProperties: Record<string, string> = {\n '--ds-card-overview-metric-min': this.metricMinWidth,\n };\n if (this.gridColumns) {\n customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n }\n if (collapse.active) {\n customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n }\n\n return (\n <Host\n class={{\n 'card-overview': true,\n 'card-overview--compact': compact,\n 'card-overview--stacked': !compact && this.layout === 'stacked',\n 'card-overview--scroll-collapsing': collapse.active,\n }}\n role=\"region\"\n aria-label={this.overviewLabel}\n aria-busy={this.isLoading ? 'true' : undefined}\n style={customProperties}\n >\n <div\n class={{\n 'card-overview__surface': true,\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 >\n <div class=\"card-overview__clip\">\n <div\n ref={element => {\n this.layoutEl = (element as HTMLElement) ?? undefined;\n }}\n class={{\n 'card-overview__layout': true,\n }}\n >\n <div class=\"card-overview__summary\">\n <div class=\"card-overview__header ds-control--md\">\n <div class=\"card-overview__period\">\n <div class=\"card-overview__period-current\">\n <slot name=\"period\">\n {this.periodLabel && (\n / eslint-disable-next-line compomo/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n <div class=\"card-overview__period-fixed ds-control-frame\">\n <ds-text\n as=\"span\"\n class=\"ds-control-label-box\"\n variant=\"text-body-medium\"\n emphasis\n color={ALWAYS_DARK_PRIMARY}\n >\n {this.periodLabel}\n </ds-text>\n </div>\n )}\n </slot>\n </div>\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 <div class=\"card-overview__filter\">\n <slot name=\"filter\" />\n </div>\n </div>\n </div>\n\n {!compact && (\n <div class=\"card-overview__body\">\n <div class=\"card-overview__metrics\" part=\"metrics\">\n {this.renderMetrics()}\n </div>\n\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4RA4BM,SAAUA,EAA2BC,GAKzC,MAAMC,EAAYC,KAAKC,IAAI,EAAGD,KAAKE,MAAMJ,EAAQC,YACjD,MAAMI,EAAeH,KAAKC,IAAI,EAAGH,EAAQK,cACzC,MAAMC,EAAiBJ,KAAKC,IAC1B,EACAD,KAAKE,MAAMF,KAAKC,IAAI,EAAGH,EAAQO,gBAAkBF,IAGnD,GAAIC,GAAkBL,EAAW,OAAOA,EAExC,IAAK,IAAIO,EAAUF,EAAgBE,GAAW,EAAGA,GAAW,EAAG,CAC7D,GAAIP,EAAYO,IAAY,EAAG,OAAOA,C,CAGxC,MAAMC,EAAOP,KAAKQ,KAAKT,EAAYK,GACnC,OAAOJ,KAAKQ,KAAKT,EAAYQ,EAC/B,CAEM,SAAUE,EAAoCX,GAMlD,MAAMY,EAAgBV,KAAKC,IAAI,EAAGH,EAAQY,eAC1C,MAAMC,EAAiBX,KAAKC,IAAIH,EAAQa,eAAgBD,GACxD,MAAME,EACJd,EAAQe,UAAY,YAAcC,OAAOC,SAASjB,EAAQc,UACtD,EACAZ,KAAKgB,IAAI,EAAGhB,KAAKC,IAAI,EAAGH,EAAQc,WACtC,MAAMK,EAAWjB,KAAKC,IAAI,EAAGU,EAAiBD,GAC9C,MAAMQ,EAASD,EAAWL,EAE1B,MAAO,CACLO,OAAQP,EAAW,GAAKK,EAAW,EACnCN,iBACAO,SACAE,cAAeT,EAAiBO,EAEpC,CAEM,SAAUG,EACdC,EACAC,GAEA,MAAMC,EAAQF,EAAQG,WAAUC,IAAWA,EAAOC,aAClD,GAAIH,EAAQ,EAAG,OAAO,EACtB,OAAOF,EAAQC,KAAkBD,EAAQC,GAAcI,WAAaJ,EAAeC,CACrF,C,SAEgBI,EACdN,EACAO,EACAC,GAEA,IAAK,IAAIZ,EAAS,EAAGA,GAAUI,EAAQS,OAAQb,GAAU,EAAG,CAC1D,MAAMc,IAAUH,EAAOC,EAAOZ,GAAUI,EAAQS,OAAUT,EAAQS,QAAUT,EAAQS,OACpF,IAAKT,EAAQU,IAAOL,WAAY,OAAOK,C,CAEzC,OAAO,CACT,CC5FA,MAAMC,EAAkB,IAAM,+xsBCoC9B,MAAMC,EAA2B,QAGjC,MAAMC,EAA+B,EAGrC,MAAMC,EAAmB,EAEzB,MAAMC,EAAuD,CAC3DC,SAAU,+CACVC,SAAU,+CACVC,QAAS,iDAGX,MAAMC,EAAiC,8CACvC,MAAMC,EAAmC,gD,MAO5BC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2FASUC,KAAAnC,QAA+B,UAG/BmC,KAAAC,OAA6B,OAM7BD,KAAAE,YAAsB,GAGtBF,KAAAG,gBAA0B,GAG1BH,KAAA1B,QAA4B,GAM5B0B,KAAAI,eAAyBlB,EAGzBc,KAAAK,UAAqB,MAMrBL,KAAAM,cAAwB,WAQxBN,KAAAO,uBAAiC,EAMxBP,KAAAQ,mBAA6B,EAC7BR,KAAArC,eAAyB,EAIlCqC,KAAAS,qBAA8C,KA+I9CT,KAAAU,oBAAsB,CAACC,EAAsBC,KACnD,OAAQD,EAAME,KACZ,IAAK,aACL,IAAK,YACHF,EAAMG,iBACNd,KAAKe,UAAUH,EAAO,GACtB,MACF,IAAK,YACL,IAAK,UACHD,EAAMG,iBACNd,KAAKe,UAAUH,GAAO,GACtB,M,CAqTP,CA1cC,gBAAAI,GACEhB,KAAKiB,e,CAGP,kBAAAC,GAME,IAAKlB,KAAKS,sBAAwBT,KAAKmB,mBAAqBnB,KAAKoB,SAAU,CACzEpB,KAAKiB,e,KACA,CACLjB,KAAKqB,sB,EAIT,oBAAAC,GACEtB,KAAKS,sBAAsBc,aAC3BvB,KAAKS,qBAAuB,KAC5B,GAAIT,KAAKwB,oBAAsBC,UAAWC,qBAAqB1B,KAAKwB,mBACpExB,KAAKwB,kBAAoBC,UACzBzB,KAAKmB,iBAAmBM,S,CAG1B,kBAAYE,GACV,OAAO3B,KAAK1B,QAAQsD,MAAM,EAAGxC,E,CAG/B,oBAAYyC,GACV,MAAMC,EAAc9B,KAAKK,UAAYL,KAAK+B,mBAAqB/B,KAAK2B,eAAe5C,OACnF,OAAO,EAAI+C,C,CAIb,sBAAYC,GACV,OAAO/B,KAAK2B,eAAe5C,QAAUI,C,CAGvC,kCAAY6C,GACV,GAAIhC,KAAKnC,UAAY,YAAcC,OAAOC,SAASiC,KAAKO,wBAAyB,OAAO,EACxF,OAAOvD,KAAKgB,IAAI,EAAGhB,KAAKC,IAAI,EAAG+C,KAAKO,wB,CAGtC,0BAAY0B,GACV,MAAMvE,EAAgBwE,EAAmBC,EAAeC,QAAS,IACjE,OAAO3E,EAAoC,CACzCI,QAASmC,KAAKnC,QACdD,SAAUoC,KAAKgC,+BACfrE,eAAgBqC,KAAKrC,eACrBD,iB,CAII,aAAAuD,GACN,MAAMhB,EAASD,KAAKoB,SACpB,IAAKnB,EAAQ,OAEb,MAAMoC,EAASpC,EAAOqC,wBACtBtC,KAAKqB,qBAAqBgB,EAAOE,MAAOF,EAAOG,QAC/C,UAAWC,iBAAmB,YAAa,OAE3CzC,KAAKS,sBAAsBc,aAC3BvB,KAAKS,qBAAuB,IAAIgC,gBAAeC,IAC7C,MAAMC,EAAOD,EAAQ,IAAIE,YACzB,IAAKD,EAAM,OACX,GAAI3C,KAAKwB,oBAAsBC,UAAWC,qBAAqB1B,KAAKwB,mBACpExB,KAAKwB,kBAAoBqB,uBAAsB,KAC7C7C,KAAKwB,kBAAoBC,UACzBzB,KAAKqB,qBAAqBsB,EAAKJ,MAAOI,EAAKH,OAAO,GAClD,IAEJxC,KAAKS,qBAAqBqC,QAAQ7C,GAClCD,KAAKmB,iBAAmBlB,C,CAGlB,oBAAAoB,CAAqBkB,EAAgBC,GAC3C,MAAMvC,EAASD,KAAKoB,SACpB,IAAKnB,EAAQ,OAEb,MAAMoC,EACJE,IAAUd,WAAae,IAAWf,UAAYxB,EAAOqC,wBAA0B,KACjF,MAAMS,EAAgBR,GAASF,GAAQE,OAAS,EAChD,MAAMS,EAAiBR,GAAUH,GAAQG,QAAU,EAEnD,IAAIS,EAAU,MAEd,GAAID,EAAiB,GAAKhG,KAAKkG,IAAIF,EAAiBhD,KAAKrC,iBAAmB,GAAK,CAC/EqC,KAAKrC,eAAiBqF,EACtBC,EAAU,I,CAGZ,MAAM3F,EAAUT,EAA2B,CACzCE,UAAWiD,KAAK6B,iBAChBxE,eAAgB0F,EAChB5F,aAAc+E,EAAmBlC,KAAKI,eAAgBlB,KAExD,GAAI5B,IAAY0C,KAAKmD,YAAa,CAChCnD,KAAKmD,YAAc7F,EACnB2F,EAAU,I,CAQZ,GAAIjD,KAAKmD,YAAa,CACpBnD,KAAKoD,GAAGC,MAAMC,YAAY,kCAAmCC,OAAOvD,KAAKmD,a,KACpE,CACLnD,KAAKoD,GAAGC,MAAMG,eAAe,kC,CAG/B,GAAIP,EAASQ,EAAYzD,K,CAI3B,eAAY0D,GACV,OAAOrF,EAA2B2B,KAAK2B,eAAgB3B,KAAKQ,mB,CAGtD,YAAAmD,CAAajF,EAAwBkC,GAC3C,GAAIlC,EAAOC,WAAY,OACvBqB,KAAKQ,mBAAqBI,EAC1BZ,KAAK4D,eAAeC,KAAKnF,E,CAInB,SAAAqC,CAAUlC,EAAcC,GAC9B,MAAMR,EAAU0B,KAAK2B,eACrB,MAAM3C,EAAOJ,EAA4BN,EAASO,EAAMC,EAAO,GAAI,EAAK,GACxE,GAAIE,EAAO,EAAG,OAEdgB,KAAKQ,mBAAqBxB,EAC1B,MAAM8E,EAAQ9D,KAAKoD,GAAGW,iBAA8B,iCACpDD,EAAM9E,IAAOgF,O,CA2BP,GAAAC,CAAIC,EAA0B3B,EAAe4B,GACnD,OACEC,EAAA,eACEC,MAAOF,EACPtG,QAAQ,OACRqG,YAAaA,EACb3B,MAAOA,EACP+B,WAAW,e,CAcT,WAAAC,CAAYC,EAAgC3G,GAClD,IAAK2G,EAAO,OAAO,KACnB,OACEJ,EAAA,WACEK,GAAG,OACHJ,MAAO,CACL,uBAAwB,KACxB,uBAAwB,KACxB,CAAC,yBAAyBG,EAAME,QAAS,MAE3C7G,QAASA,EACT8G,MAAOtF,EAAamF,EAAME,MAC1BE,YAAY,gBAEXJ,EAAMK,YAAc,KAAO,IAAM,IAAG,IAAGL,EAAMM,M,CAK5C,WAAAC,GACN,GAAI/E,KAAKK,UAAW,CAClB,OACE+D,EAAA,OAAKC,MAAM,uBAAuBW,KAAK,SACrCZ,EAAA,OAAKC,MAAM,gCACTD,EAAA,YAAUa,KAAK,KAAKpH,QAAQ,QAAQwC,UAAS,OAC7C+D,EAAA,OAAKC,MAAM,6BACRrE,KAAKiE,IAAI,kBAAmB,OAAQ,qCACpCjE,KAAKiE,IAAI,mBAAoB,U,CAOxC,MAAMiB,EACJlF,KAAKmF,qBAAuBnF,KAAKoF,MAAQ,oBAAsB3D,WACjE,GAAIyD,EAAoB,CACtB,OAEEd,EAAA,OAAKC,MAAM,uBAAuBW,KAAK,SACrCZ,EAAA,WACEK,GAAG,OACHJ,MAAM,mEACNxG,QAAQ,mBACR8G,MAAM,UACNU,KAAK,SAEJH,G,CAMT,MAAME,EAAQpF,KAAKoF,MACnB,IAAKA,EAAO,OAAO,KAEnB,OACEhB,EAAA,OAAKC,MAAM,uBAAuBW,KAAK,SACrCZ,EAAA,OAAKC,MAAM,gCACTD,EAAA,YACEa,KAAK,KACLpH,QAAQ,QACRiH,MAAOM,EAAMN,MACbQ,MAAOF,EAAME,MACbC,MAAM,iBAERnB,EAAA,OAAKC,MAAM,6BACTD,EAAA,WACEK,GAAG,OACHJ,MAAM,yDACNxG,QAAQ,kBACR8G,MAAOjF,EAAqB,cAChB,QAAM,KAInBM,KAAKuE,YAAYa,EAAMZ,MAAO,sB,CAOjC,YAAAgB,CAAa9G,EAAwBkC,GAC3C,MAAM6E,GAAc/G,EAAOC,WAC3B,MAAM4G,EACJnB,EAAA,WACEK,GAAG,OACHJ,MAAM,mDACNxG,QAAQ,kBACR8G,MAAOjF,GAENhB,EAAO6G,OAIZ,OACEnB,EAAA,OAAKC,MAAM,wBAAwBW,KAAK,UACtCZ,EAAA,OACEC,MAAO,CACL,+BAAgC,KAChC,0CAA2CoB,EAG3C,sBAAuBA,EACvB,sCAAuCA,EACvC,sBAAuBA,GAEzBJ,KAAMI,EAAa,SAAWhE,UAC9BiE,SAAUD,GAAc7E,IAAUZ,KAAK0D,YAAc,GAAI,EACzDiC,QAAS,IAAM3F,KAAK2D,aAAajF,EAAQkC,GACzCgF,UAAWjF,GAASX,KAAKU,oBAAoBC,EAAOC,GACpDiF,UAAW,KACT,GAAIJ,EAAYzF,KAAKQ,mBAAqBI,CAAK,GAGjDwD,EAAA,OAAKC,MAAM,8DACR3F,EAAOoH,aACN1B,EAAA,cAAYmB,MAAO7G,EAAOoH,aAAcC,KAAK,MAAMd,KAAK,MACrDM,GACU,EAIfnB,EAAA,OAAKC,MAAM,gCACTD,EAAA,WACEK,GAAG,OACHJ,MAAM,mDACNxG,QAAQ,mBACR8G,MAAOlF,EACPmF,YAAY,gBAEXlG,EAAOoG,OAET9E,KAAKuE,YAAY7F,EAAO8F,MAAO,uB,CAQpC,aAAAwB,GACN,GAAIhG,KAAKK,UAAW,CAClB,MAAO,CACLL,KAAK+E,iBACFkB,MAAMpH,KAAK,CAAEE,OAAQiB,KAAK+B,qBAAsB,CAACmE,EAAGtF,IACrDwD,EAAA,OAAKC,MAAM,wBAAwBxD,IAAK,WAAWD,KACjDwD,EAAA,OAAKC,MAAM,uEACTD,EAAA,OAAKC,MAAM,iCACRrE,KAAKiE,IAAI,kBAAmB,MAAO,+BACpCG,EAAA,OAAKC,MAAM,gCACRrE,KAAKiE,IAAI,mBAAoB,QAE7BjE,KAAKiE,IAAI,mBAAoB,c,CAS5C,MAAO,CACLjE,KAAK+E,iBACF/E,KAAK2B,eAAewE,KAAI,CAACzH,EAAQkC,IAAUZ,KAAKwF,aAAa9G,EAAQkC,K,CAI5E,MAAAwF,GACE,MAAMC,EAAUrG,KAAKnC,UAAY,UACjC,MAAMyI,EAAWtG,KAAKiC,uBAOtB,MAAMsE,EAA2C,CAC/C,gCAAiCvG,KAAKI,gBAExC,GAAIJ,KAAKmD,YAAa,CACpBoD,EAAiB,mCAAqChD,OAAOvD,KAAKmD,Y,CAEpE,GAAImD,EAASnI,OAAQ,CACnBoI,EAAiB,sCAAwC,GAAGD,EAAS3I,mBACrE4I,EAAiB,qCAAuC,GAAGD,EAASlI,kBACpEmI,EAAiB,qCAAuC,GAAGD,EAASpI,U,CAGtE,OACEkG,EAACoC,EAAI,CAAA3F,IAAA,2CACHwD,MAAO,CACL,gBAAiB,KACjB,yBAA0BgC,EAC1B,0BAA2BA,GAAWrG,KAAKC,SAAW,UACtD,mCAAoCqG,EAASnI,QAE/CkH,KAAK,SAAQ,aACDrF,KAAKM,cAAa,YACnBN,KAAKK,UAAY,OAASoB,UACrC4B,MAAOkD,GAEPnC,EAAA,OAAAvD,IAAA,2CACEwD,MAAO,CACL,yBAA0B,KAG1B,uBAAwB,KACxB,4BAA6BgC,EAC7B,iCAAkCA,IAGpCjC,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,uBACTD,EAAA,OAAAvD,IAAA,2CACE4F,IAAKC,IACH1G,KAAKoB,SAAYsF,GAA2BjF,SAAS,EAEvD4C,MAAO,CACL,wBAAyB,OAG3BD,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,0BACTD,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,wCACTD,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,yBACTD,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,iCACTD,EAAA,QAAAvD,IAAA,2CAAM8F,KAAK,UACR3G,KAAKE,aAEJkE,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,gDACTD,EAAA,WAAAvD,IAAA,2CACE4D,GAAG,OACHJ,MAAM,uBACNxG,QAAQ,mBACR+I,SAAQ,KACRjC,MAAOlF,GAENO,KAAKE,gBAMfF,KAAKG,iBACJiE,EAAA,WAAAvD,IAAA,2CACE4D,GAAG,OACHJ,MAAM,wDACNxG,QAAQ,mBACR8G,MAAOjF,GAENM,KAAKG,kBAIZiE,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,yBACTD,EAAA,QAAAvD,IAAA,2CAAM8F,KAAK,eAKfN,GACAjC,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,uBACTD,EAAA,OAAAvD,IAAA,2CAAKwD,MAAM,yBAAyBW,KAAK,WACtChF,KAAKgG,iBAGR5B,EAAA,QAAAvD,IAAA,2CAAM8F,KAAK,e","ignoreList":[]}
1	+ {"version":3,"names":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","fittingColumns","availableWidth","columns","rows","ceil","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","DEFAULT_LOADING_METRIC_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","disconnect","layoutResizeFrame","undefined","cancelAnimationFrame","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","requestAnimationFrame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","el","style","setProperty","String","removeProperty","forceUpdate","rovingIndex","selectMetric","dsMetricSelect","emit","cells","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","as","tone","color","fontFeature","direction","value","renderScore","part","size","unavailableMessage","scoreErrorMessage","score","role","level","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","compact","collapse","customProperties","Host","ref","element","name","emphasis"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport { resolveSafetyScoreLevel } from '../Score/score-model';\n\nexport interface CardOverviewCollapseGeometry {\n active: boolean;\n expandedHeight: number;\n offset: number;\n visibleHeight: number;\n}\n\n/*\n Choose the column count for the metric grid.\n \n Cells that all fit across one row stay on one row: a full row is already\n * balanced, so there is nothing to distribute.\n \n Once the width forces a wrap, prefer equal rows — the widest column count\n * that divides the total exactly. Eight cells therefore step 8 → 4+4 → 2+2+2+2\n * as the width narrows, never trading an equal split for a shorter grid.\n \n Totals with no equal split available fall back to the fewest rows that fit,\n * spread as evenly as possible, which leaves one short final row: five cells at\n * a four-cell width are 3+2, seven are 4+3.\n \n Width is the only ceiling. There is deliberately no column cap: a wide card\n * showing six cells that each clear `minCellWidth` renders all six across.\n /\nexport function resolveOverviewGridColumns(options: {\n cellCount: number;\n availableWidth: number;\n minCellWidth: number;\n}): number {\n const cellCount = Math.max(1, Math.floor(options.cellCount));\n const minCellWidth = Math.max(1, options.minCellWidth);\n const fittingColumns = Math.max(\n 1,\n Math.floor(Math.max(0, options.availableWidth) / minCellWidth)\n );\n\n if (fittingColumns >= cellCount) return cellCount;\n\n for (let columns = fittingColumns; columns >= 2; columns -= 1) {\n if (cellCount % columns === 0) return columns;\n }\n\n const rows = Math.ceil(cellCount / fittingColumns);\n return Math.ceil(cellCount / rows);\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n variant: CardOverviewVariant;\n progress: number;\n expandedHeight: number;\n compactHeight: number;\n}): CardOverviewCollapseGeometry {\n const compactHeight = Math.max(0, options.compactHeight);\n const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n const progress =\n options.variant === 'compact' \|\| !Number.isFinite(options.progress)\n ? 0\n : Math.min(1, Math.max(0, options.progress));\n const distance = Math.max(0, expandedHeight - compactHeight);\n const offset = distance progress;\n\n return {\n active: progress > 0 && distance > 0,\n expandedHeight,\n offset,\n visibleHeight: expandedHeight - offset,\n };\n}\n\nexport function resolveOverviewRovingIndex(\n metrics: readonly OverviewMetric[],\n focusedIndex: number\n): number {\n const first = metrics.findIndex(metric => !metric.isInactive);\n if (first < 0) return -1;\n return metrics[focusedIndex] && !metrics[focusedIndex].isInactive ? focusedIndex : first;\n}\n\nexport function findNextOverviewMetricIndex(\n metrics: readonly OverviewMetric[],\n from: number,\n step: -1 \| 1\n): number {\n for (let offset = 1; offset <= metrics.length; offset += 1) {\n const next = (((from + step * offset) % metrics.length) + metrics.length) % metrics.length;\n if (!metrics[next]?.isInactive) return next;\n }\n return -1;\n}\n","@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n container-type: inline-size;\n -webkit-user-select: none;\n user-select: none;\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 color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--ds-radius-card);\n background: var(--color-always-dark-background);\n color: var(--color-always-dark-foreground-primary);\n overflow-anchor: none;\n}\n\n.card-overview__clip {\n height: 100%;\n min-width: 0;\n border-radius: inherit;\n background: inherit;\n overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n height: var(--ds-card-overview-expanded-height);\n pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n height: var(--ds-card-overview-visible-height);\n pointer-events: auto;\n will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__body {\n transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n will-change: transform;\n}\n\n.card-overview__layout {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.card-overview__summary {\n position: relative;\n z-index: 1;\n flex: 0 0 auto;\n min-width: 0;\n background: var(--color-always-dark-background);\n}\n\n.card-overview__header {\n display: flex;\n position: relative;\n align-items: center;\n gap: 0;\n width: 100%;\n height: var(--dimension-size-600);\n min-width: 0;\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n.card-overview__header::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n height: var(--ds-card-overview-divider-width);\n background: var(--ds-card-overview-divider-color);\n pointer-events: none;\n}\n\n.card-overview__period {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: 0;\n min-width: 0;\n min-height: var(--ds-control-height);\n overflow: hidden;\n white-space: nowrap;\n}\n\n.card-overview__period-current,\n.card-overview__period-comparison {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-overview__period-current {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n}\n\n.card-overview__period-fixed {\n flex: 0 1 auto;\n min-width: 0;\n}\n\n.card-overview__period-comparison {\n flex: 0 0 auto;\n}\n\n.card-overview__filter {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n min-width: 0;\n}\n\n.card-overview__body {\n display: flex;\n position: relative;\n z-index: 0;\n flex-direction: column;\n min-width: 0;\n transform: translateY(0);\n}\n\n.card-overview__metrics {\n display: grid;\n flex: 1 1 auto;\n grid-template-columns: repeat(\n var(--ds-card-overview-grid-columns, 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.card-overview__score,\n.card-overview__metric {\n display: flex;\n min-width: 0;\n padding: var(--dimension-space-100);\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 box-sizing: border-box;\n}\n\n.card-overview__score-content,\n.card-overview__metric-action {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: var(--dimension-space-075);\n border-radius: var(--dimension-radius-025);\n box-sizing: border-box;\n}\n\n.card-overview__score-content {\n align-items: center;\n justify-content: flex-start;\n /\n Sits the fill 16px from the cell's left edge, on top of the 8px cell padding.\n * Metric cells keep the shared inner inset because their content is text; the\n * fill is a filled box and needs more room around it to read as inset.\n /\n padding-inline-start: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n}\n\n/ Mirrors .card-overview__metric-content so labels and trends line up across cells. /\n.card-overview__score-copy {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: var(--dimension-space-050);\n min-width: 0;\n}\n\n.card-overview__score-label-spacer {\n visibility: hidden;\n}\n\n.card-overview__score-content--error {\n align-items: center;\n justify-content: center;\n / No fill to align, so this box keeps the metric cells' inner inset. /\n padding-inline-start: var(--dimension-space-075);\n border: var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);\n background: transparent;\n color: var(--color-always-dark-foreground-negative);\n text-align: center;\n}\n\n.card-overview__metric-action {\n flex-direction: column;\n justify-content: center;\n gap: var(--dimension-space-050);\n}\n\n.card-overview__metric-action[role='button'] {\n cursor: default;\n}\n\n.card-overview__metric-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n gap: var(--dimension-space-050);\n min-width: 0;\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-050);\n min-width: 0;\n}\n\n.card-overview__trend {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n grid-template-columns: minmax(0, 1fr);\n}\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__surface,\n:host(.card-overview--compact) .card-overview__clip,\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n width: 100%;\n height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__header::after {\n display: none;\n}\n\n@media (forced-colors: active) {\n .card-overview__header::after {\n background: var(--ds-forced-color-content);\n }\n\n .card-overview__score-content--error {\n border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n background: var(--ds-forced-color-surface);\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\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';\nimport {\n findNextOverviewMetricIndex,\n resolveCardOverviewCollapseGeometry,\n resolveOverviewGridColumns,\n resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/\n Metric cells below this width drop a grid column rather than compress further.\n \n A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n /\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/* Skeleton cells rendered while loading with no metrics supplied yet. /\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/* Maximum number of comparable measures the summary bar presents at once. /\nconst MAX_METRIC_COUNT = 7;\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 /* Optional nonselectable safety score rendered as the first grid cell. /\n @Prop() score: OverviewScore \| undefined;\n\n /* Fixed current date or range. Replaced by content in the `period` slot. /\n @Prop() periodLabel: string = '';\n\n /* Copy between the current period and comparison control, usually `vs.`. /\n @Prop() comparisonLabel: string = '';\n\n /* Measures rendered in the responsive grid. Only the first seven 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 * uses this threshold while choosing an evenly distributed column count.\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 /\n Page-controlled visual collapse from the full card (`0`) toward its 48px\n * compact handoff height (`1`). The component preserves its expanded flow\n * height, keeps the period bar stationary, and moves/clips the grid beneath\n * it. The page still owns sticky positioning and the final compact handoff.\n /\n @Prop() scrollCollapseProgress: number = 0;\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 @State() private expandedHeight: number = 0;\n @State() private gridColumns: number \| undefined;\n\n private layoutEl?: HTMLElement;\n private layoutResizeObserver: ResizeObserver \| null = null;\n private layoutResizeFrame: number \| undefined;\n /* The node the observer is bound to, which a later render can replace. /\n private observedLayoutEl?: HTMLElement;\n\n componentDidLoad() {\n this.observeLayout();\n }\n\n componentDidRender() {\n // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n // render swapped the layout node out from under the observer: the ref points\n // at the new node while the observer still watches the detached one, which\n // never resizes again. The grid would then keep its first measured column\n // count for the life of the component.\n if (!this.layoutResizeObserver \|\| this.observedLayoutEl !== this.layoutEl) {\n this.observeLayout();\n } else {\n this.updateLayoutGeometry();\n }\n }\n\n disconnectedCallback() {\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = null;\n if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = undefined;\n this.observedLayoutEl = undefined;\n }\n\n private get visibleMetrics(): OverviewMetric[] {\n return this.metrics.slice(0, MAX_METRIC_COUNT);\n }\n\n private get visibleCellCount(): number {\n const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n return 1 + metricCount;\n }\n\n /* Preserve an authored data shape while loading, or use the standard six-cell grid. /\n private get loadingMetricCount(): number {\n return this.visibleMetrics.length \|\| DEFAULT_LOADING_METRIC_COUNT;\n }\n\n private get resolvedScrollCollapseProgress(): number {\n if (this.variant === 'compact' \|\| !Number.isFinite(this.scrollCollapseProgress)) return 0;\n return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n }\n\n private get scrollCollapseGeometry() {\n const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n return resolveCardOverviewCollapseGeometry({\n variant: this.variant,\n progress: this.resolvedScrollCollapseProgress,\n expandedHeight: this.expandedHeight,\n compactHeight,\n });\n }\n\n private observeLayout() {\n const layout = this.layoutEl;\n if (!layout) return;\n\n const bounds = layout.getBoundingClientRect();\n this.updateLayoutGeometry(bounds.width, bounds.height);\n if (typeof ResizeObserver === 'undefined') return;\n\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = new ResizeObserver(entries => {\n const rect = entries[0]?.contentRect;\n if (!rect) return;\n if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = requestAnimationFrame(() => {\n this.layoutResizeFrame = undefined;\n this.updateLayoutGeometry(rect.width, rect.height);\n });\n });\n this.layoutResizeObserver.observe(layout);\n this.observedLayoutEl = layout;\n }\n\n private updateLayoutGeometry(width?: number, height?: number) {\n const layout = this.layoutEl;\n if (!layout) return;\n\n const bounds =\n width === undefined \|\| height === undefined ? layout.getBoundingClientRect() : null;\n const resolvedWidth = width ?? bounds?.width ?? 0;\n const resolvedHeight = height ?? bounds?.height ?? 0;\n\n let changed = false;\n\n if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n this.expandedHeight = resolvedHeight;\n changed = true;\n }\n\n const columns = resolveOverviewGridColumns({\n cellCount: this.visibleCellCount,\n availableWidth: resolvedWidth,\n minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n });\n if (columns !== this.gridColumns) {\n this.gridColumns = columns;\n changed = true;\n }\n\n // The column count is written straight to the host rather than through the\n // rendered style object. Measurement happens in `componentDidLoad` and in the\n // ResizeObserver callback, both outside a render cycle, and the host's style\n // is not patched again after the first render — so a rendered value would stay\n // pinned to whatever the first paint produced, before any width was known.\n if (this.gridColumns) {\n this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n } else {\n this.el.style.removeProperty('--ds-card-overview-grid-columns');\n }\n\n if (changed) forceUpdate(this);\n }\n\n /* Index of the roving tab stop, skipping inactive metrics. /\n private get rovingIndex(): number {\n return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\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 next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n if (next < 0) return;\n\n this.focusedMetricIndex = next;\n const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n cells[next]?.focus();\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 so the base and shimmer follow the card's\n * permanently dark surface in both themes.\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) {\n if (!trend) return null;\n return (\n <ds-text\n as=\"span\"\n class={{\n 'card-overview__trend': true,\n 'ds-control-label-box': true,\n [`card-overview__trend--${trend.tone}`]: true,\n }}\n variant={variant}\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() {\n if (this.isLoading) {\n return (\n <div class=\"card-overview__score\" part=\"score\">\n <div class=\"card-overview__score-content\">\n <ds-score size=\"lg\" variant=\"dense\" isLoading></ds-score>\n <div class=\"card-overview__score-copy\">\n {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n {this.bar('text-body-medium', '28px')}\n </div>\n </div>\n </div>\n );\n }\n\n const unavailableMessage =\n this.scoreErrorMessage \|\| (!this.score ? 'Score unavailable' : undefined);\n if (unavailableMessage) {\n return (\n / eslint-disable-next-line compomo/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. /\n <div class=\"card-overview__score\" part=\"score\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-content card-overview__score-content--error\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n role=\"alert\"\n >\n {unavailableMessage}\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\" part=\"score\">\n <div class=\"card-overview__score-content\">\n <ds-score\n size=\"lg\"\n variant=\"dense\"\n value={score.value}\n level={score.level}\n label=\"Safety score\"\n />\n <div class=\"card-overview__score-copy\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-label-spacer ds-control-label-box\"\n variant=\"text-body-small\"\n color={ALWAYS_DARK_SECONDARY}\n aria-hidden=\"true\"\n >\n  \n </ds-text>\n {this.renderTrend(score.trend, 'text-body-medium')}\n </div>\n </div>\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 ds-control-label-box\"\n variant=\"text-body-small\"\n color={ALWAYS_DARK_SECONDARY}\n >\n {metric.label}\n </ds-text>\n );\n\n return (\n <div class=\"card-overview__metric\" part=\"metric\">\n <div\n class={{\n 'card-overview__metric-action': true,\n 'card-overview__metric-action--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 'ds-interaction-fill--on-always-dark': selectable,\n 'ds-focus-ring-inset': selectable,\n }}\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 <div class=\"ds-interaction-fill__content card-overview__metric-content\">\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 ds-control-label-box\"\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 </div>\n </div>\n );\n }\n\n private renderMetrics() {\n if (this.isLoading) {\n return [\n this.renderScore(),\n ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n <div class=\"card-overview__metric\" key={`loading-${index}`}>\n <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n <div class=\"card-overview__metric-content\">\n {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n <div class=\"card-overview__metric-figure\">\n {this.bar('text-body-medium', '40px')}\n {/ Match renderTrend's type canvas and the score trend's 28px width. /}\n {this.bar('text-body-medium', '28px')}\n </div>\n </div>\n </div>\n </div>\n )),\n ];\n }\n\n return [\n this.renderScore(),\n ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n ];\n }\n\n render() {\n const compact = this.variant === 'compact';\n const collapse = this.scrollCollapseGeometry;\n\n // Omit absent custom properties rather than handing them an undefined value.\n // Stencil serialises undefined to the string \"undefined\", which is invalid in\n // `repeat()` and voids the whole grid-template-columns declaration — the grid\n // then collapses to one implicit column instead of using the `auto-fit`\n // fallback baked into the stylesheet.\n const customProperties: Record<string, string> = {\n '--ds-card-overview-metric-min': this.metricMinWidth,\n };\n if (this.gridColumns) {\n customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n }\n if (collapse.active) {\n customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n }\n\n return (\n <Host\n class={{\n 'card-overview': true,\n 'card-overview--compact': compact,\n 'card-overview--stacked': !compact && this.layout === 'stacked',\n 'card-overview--scroll-collapsing': collapse.active,\n }}\n role=\"region\"\n aria-label={this.overviewLabel}\n aria-busy={this.isLoading ? 'true' : undefined}\n style={customProperties}\n >\n <div\n class={{\n 'card-overview__surface': true,\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 >\n <div class=\"card-overview__clip\">\n <div\n ref={element => {\n this.layoutEl = (element as HTMLElement) ?? undefined;\n }}\n class={{\n 'card-overview__layout': true,\n }}\n >\n <div class=\"card-overview__summary\">\n <div class=\"card-overview__header ds-control--md\">\n <div class=\"card-overview__period\">\n <div class=\"card-overview__period-current\">\n <slot name=\"period\">\n {this.periodLabel && (\n / eslint-disable-next-line compomo/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n <div class=\"card-overview__period-fixed ds-control-frame\">\n <ds-text\n as=\"span\"\n class=\"ds-control-label-box\"\n variant=\"text-body-medium\"\n emphasis\n color={ALWAYS_DARK_PRIMARY}\n >\n {this.periodLabel}\n </ds-text>\n </div>\n )}\n </slot>\n </div>\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 <div class=\"card-overview__filter\">\n <slot name=\"filter\" />\n </div>\n </div>\n </div>\n\n {!compact && (\n <div class=\"card-overview__body\">\n <div class=\"card-overview__metrics\" part=\"metrics\">\n {this.renderMetrics()}\n </div>\n\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as i,a as t,t as r}from"./index.js";import{d as a}from"./p-D0KD-Nr_.js";import{d as n}from"./p-iGNHXFZA.js";import{d as o}from"./p-CI7c9kp-.js";import{d as c}from"./p-DjkUFlDW.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-Cihjy4WY.js";import{d as m}from"./p-BXSHN1OK.js";const h=()=>`.sc-ds-card-setting-h,.sc-ds-card-setting:where(.ds-table),.sc-ds-card-setting:where(.tooltip-popup),.sc-ds-card-setting:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;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;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.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--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;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{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.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(--ds-radius-card) var(--ds-radius-card)}.card-setting--immediate.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{padding-block:var(--dimension-space-100)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--ds-radius-card)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const v="var(--color-foreground-faint-brand)";const f=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction",7);this.cardWidth="md";this.variant="editable";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.variant==="editable"&&this.editing;return i(t,{key:"31f885ba415189726c96eb1a674eeb460c683728",class:{"card-setting":true,"card-setting--editing":s,"card-setting--immediate":this.variant==="immediate"},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":this.variant==="immediate"?"0":p[this.cardWidth]}},i("header",{key:"ebf9ddc650926cf5a4582eb54c1b9233a9e72708",class:"card-setting__header ds-chrome-header"},i("div",{key:"2cd39354a86e05ed9d0941dc5754d9a35782fc47",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},i("ds-text",{key:"4eff971167f0d15528d5341d19ae2ba2803fe060",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?v:"primary",as:"h2"},this.heading)),this.variant==="editable"&&i("div",{key:"74df976183c86eb7a8554bd39d795aef9b7aa264",class:"card-setting__actions ds-chrome-header__trailing"},!s?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),i("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)})])),i("div",{key:"c1cdf136d3ccb15db19ab28b3b028adf3179ee2f",class:"card-setting__body"},i("slot",{key:"a0a2ede55b471c5b8f6bd4bdc45fffcc813186ab"})))}static get style(){return h()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],variant:[1],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function u(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(r(s))){customElements.define(r(s),f)}break;case"ds-badge":if(!customElements.get(r(s))){a()}break;case"ds-button-filled":if(!customElements.get(r(s))){n()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){o()}break;case"ds-icon":if(!customElements.get(r(s))){c()}break;case"ds-loader":if(!customElements.get(r(s))){l()}break;case"ds-text":if(!customElements.get(r(s))){g()}break;case"ds-tooltip":if(!customElements.get(r(s))){m()}break}}))}u();const _=f;const x=u;export{_ as DsCardSetting,x as defineCustomElement};
+import{p as s,H as e,c as t,h as d,a as i,t as n}from"./index.js";import{d as a}from"./p-CwdRaJER.js";import{d as r}from"./p-MOJmB6vX.js";import{d as o}from"./p-D6FRqNhN.js";import{d as c}from"./p-DjkUFlDW.js";import{d as l}from"./p-0XTyQNRG.js";import{d as h}from"./p-D8OWhnID.js";import{d as g}from"./p-DIQiHX0q.js";const m=()=>`.sc-ds-card-setting-h,.sc-ds-card-setting:where(.ds-table),.sc-ds-card-setting:where(.tooltip-popup),.sc-ds-card-setting:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;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;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.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--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;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{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.card-setting__panel.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(--ds-radius-card) var(--ds-radius-card)}.card-setting--editing.sc-ds-card-setting-h .card-setting__panel.sc-ds-card-setting{border-radius:var(--ds-radius-card)}.card-setting__banner.sc-ds-card-setting{flex:0 0 auto;min-width:0}.card-setting__banner--empty.sc-ds-card-setting{display:none}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;padding-block:var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const u=s=>{if(s.nodeType===Node.ELEMENT_NODE){return s.tagName!=="SLOT"}return s.nodeType===Node.TEXT_NODE&&Boolean(s.textContent?.trim())};const v=s=>s.nodeType===Node.ELEMENT_NODE?s.getAttribute("slot"):null;const _=s=>u(s)&&!v(s);const x=s=>u(s)&&v(s)==="banner";const y=s=>Boolean(s?.assignedNodes({flatten:true}).some(u));const w=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=t(this,"dsAction",7);this.cardWidth="md";this.variant="editable";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save";this.hasBannerContent=false;this.hasBodyContent=false;this.syncBannerContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__banner > slot",":scope > .card-setting__panel > .card-setting__banner");if(e!==this.hasBannerContent)this.hasBannerContent=e};this.syncBodyContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__body > slot",":scope > .card-setting__panel > .card-setting__body");if(e!==this.hasBodyContent)this.hasBodyContent=e}}componentWillLoad(){const s=Array.from(this.el.childNodes);this.hasBannerContent=s.some(x);this.hasBodyContent=s.some(_)}componentDidLoad(){this.syncBannerContent();this.syncBodyContent()}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}readSlotContent(s,e,t){const d=s?.target instanceof HTMLSlotElement?s.target:this.el.querySelector(e);if(y(d))return true;const i=this.el.querySelector(t);return Array.from(i?.childNodes??[]).some(u)}get hugContent(){return this.variant==="immediate"||this.hasBannerContent||this.hasBodyContent}render(){const s=this.variant==="editable"&&this.editing;return d(i,{key:"62b8b32d795d552f9f08bc654b2f6d5de6237ecf",class:{"card-setting":true,"card-setting--editing":s,"card-setting--immediate":this.variant==="immediate","card-setting--empty":!this.hugContent},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":this.hugContent?"0":p[this.cardWidth]}},d("header",{key:"1dd6d8df696a6897f2f6864179f23f5f1168b442",class:"card-setting__header ds-chrome-header"},d("div",{key:"5fdc1638d06432ad895bc599f918b0ca19c15054",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},d("ds-text",{key:"0bdf27a9bdfb216cd12cf1a36c01a938a980e76d",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading)),this.variant==="editable"&&d("div",{key:"a4a57e5ee56d5624a70284d76746cbdac09fcd2e",class:"card-setting__actions ds-chrome-header__trailing"},!s?d("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[d("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),d("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)})])),d("div",{key:"298389178d058c95cfc17029768ff8293aa4a401",class:"card-setting__panel"},d("div",{key:"91620dab81b8466ee2531ad3039929f5668c6777",class:{"card-setting__banner":true,"card-setting__banner--empty":!this.hasBannerContent}},d("slot",{key:"59d2f66aef4d54f79ed2c10c68a4d052471d042a",name:"banner",onSlotchange:this.syncBannerContent})),d("div",{key:"313cb7c2dfdb1107a0f0d57eff4e3b884dc79679",class:"card-setting__body"},d("slot",{key:"4dcb41b1fc8e39a0ef5ced1f8487fd25f37517a5",onSlotchange:this.syncBodyContent}))))}get el(){return this}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],variant:[1],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"],hasBannerContent:[32],hasBodyContent:[32]}]);function k(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(n(s))){customElements.define(n(s),w)}break;case"ds-badge":if(!customElements.get(n(s))){a()}break;case"ds-button-filled":if(!customElements.get(n(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){o()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-text":if(!customElements.get(n(s))){h()}break;case"ds-tooltip":if(!customElements.get(n(s))){g()}break}}))}k();const E=w;const z=k;export{E as DsCardSetting,z as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","variant","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-setting-width);\n min-height: var(--_card-setting-min-height);\n max-width: 100%;\n overflow: hidden;\n border: none;\n border-radius: var(--ds-radius-card);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 4;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-sm);\n pointer-events: none;\n}\n\n:host(.card-setting--editing) {\n background-color: var(--color-background-bold-brand);\n box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n box-shadow: none;\n}\n\n.card-setting__header {\n flex: 0 0 auto;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n align-items: center;\n}\n\nds-text.card-setting__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-setting__actions {\n flex-shrink: 0;\n}\n\n.card-setting__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n:host(.card-setting--immediate) .card-setting__body {\n padding-block: var(--dimension-space-100);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n border-radius: var(--ds-radius-card);\n}\n\n@media (forced-colors: active) {\n :host {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n\n :host::after {\n box-shadow: none;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingVariant = 'editable' \| 'immediate';\nexport type CardSettingWidth = 'sm' \| 'md' \| 'lg';\nexport type CardSettingAction = 'edit' \| 'save' \| 'cancel';\n\nexport interface CardSettingActionDetail {\n action: CardSettingAction;\n originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n tag: 'ds-card-setting',\n styleUrl: 'CardSetting.css',\n scoped: true,\n})\nexport class CardSetting {\n /** Section heading shown in the card header. /\n @Prop() heading!: string;\n\n /\n Card width token (`sm` / `md` / `lg`). Editable cards also use the matching\n * minimum-height token; immediate cards fit their content.\n /\n @Prop() cardWidth: CardSettingWidth = 'md';\n\n /* Immediate settings omit edit actions and apply changes through their own controls. /\n @Prop() variant: CardSettingVariant = 'editable';\n\n /* Controlled edit state — parent owns single-edit orchestration. /\n @Prop() editing = false;\n @Prop() editLabel: string = 'Edit';\n @Prop() cancelLabel: string = 'Cancel';\n @Prop() saveLabel: string = 'Save';\n\n /* Emits a controlled edit, save, or cancel request. /\n @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n this.dsAction.emit({ action, originalEvent });\n }\n\n render() {\n const editing = this.variant === 'editable' && this.editing;\n\n return (\n <Host\n class={{\n 'card-setting': true,\n 'card-setting--editing': editing,\n 'card-setting--immediate': this.variant === 'immediate',\n }}\n style={{\n '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-setting-min-height':\n this.variant === 'immediate' ? '0' : CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card-setting__header ds-chrome-header\">\n {/ eslint-disable-next-line compomo/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n <div class=\"card-setting__copy ds-chrome-header__copy ds-control--md\">\n <ds-text\n class=\"card-setting__title ds-chrome-header__heading\"\n variant=\"text-title-small\"\n emphasis\n color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n </div>\n {this.variant === 'editable' && (\n <div class=\"card-setting__actions ds-chrome-header__trailing\">\n {!editing ? (\n <ds-button-unfilled\n variant=\"icon\"\n type=\"button\"\n icon=\"Pencil\"\n aria-label={this.editLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('edit', event.detail)\n }\n />\n ) : (\n [\n <ds-button-unfilled\n key=\"cancel\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Cross\"\n background=\"bold\"\n aria-label={this.cancelLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('cancel', event.detail)\n }\n />,\n <ds-button-filled\n key=\"save\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Check\"\n intent=\"brand\"\n contrast=\"faint\"\n aria-label={this.saveLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('save', event.detail)\n }\n />,\n ]\n )}\n </div>\n )}\n </header>\n <div class=\"card-setting__body\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8TAAA,MAAMA,EAAiB,IAAM,o0LCW7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,+EAaUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAA8B,WAG9BF,KAAAG,QAAU,MACVH,KAAAI,UAAoB,OACpBJ,KAAAK,YAAsB,SACtBL,KAAAM,UAAoB,MAsF7B,CAjFS,UAAAC,CAAWC,EAA2BC,GAC5CT,KAAKU,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUH,KAAKE,UAAY,YAAcF,KAAKG,QAEpD,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,EACzB,0BAA2BH,KAAKE,UAAY,aAE9Ce,MAAO,CACL,wBAAyB5B,EAAgBW,KAAKC,WAC9C,6BACED,KAAKE,UAAY,YAAc,IAAMT,EAAiBO,KAAKC,aAG/DY,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yCAEZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4DACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,gDACNd,QAAQ,mBACRgB,SAAQ,KACRC,MAAOhB,EAAUT,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,UAGTrB,KAAKE,UAAY,YAChBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qDACPb,EACAU,EAAA,sBACEX,QAAQ,OACRoB,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKI,UACjBoB,UAAYC,GACVzB,KAAKO,WAAW,OAAQkB,EAAMC,UAEhC,CAGAb,EAAA,sBACEE,IAAI,SACJb,QAAQ,OACRoB,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKK,YACjBmB,UAAYC,GACVzB,KAAKO,WAAW,SAAUkB,EAAMC,UAGpCb,EAAA,oBACEE,IAAI,OACJb,QAAQ,OACRoB,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKM,UACjBkB,UAAYC,GACVzB,KAAKO,WAAW,OAAQkB,EAAMC,aAQ5Cb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
1	+ {"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","isRenderableNode","node","nodeType","Node","ELEMENT_NODE","tagName","TEXT_NODE","Boolean","textContent","trim","slotName","getAttribute","isDefaultSlottedNode","isBannerSlottedNode","slotHasRenderableContent","slot","assignedNodes","flatten","some","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","variant","editing","editLabel","cancelLabel","saveLabel","hasBannerContent","hasBodyContent","syncBannerContent","event","hasContent","readSlotContent","syncBodyContent","componentWillLoad","nodes","Array","from","el","childNodes","componentDidLoad","emitAction","action","originalEvent","dsAction","emit","slotSelector","containerSelector","target","HTMLSlotElement","querySelector","container","hugContent","render","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","detail","background","intent","contrast","name","onSlotchange"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-setting-width);\n min-height: var(--_card-setting-min-height);\n max-width: 100%;\n overflow: hidden;\n border: none;\n border-radius: var(--ds-radius-card);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 4;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-sm);\n pointer-events: none;\n}\n\n:host(.card-setting--editing) {\n background-color: var(--color-background-bold-brand);\n box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n:host(.card-setting--editing)::after {\n box-shadow: none;\n}\n\n.card-setting__header {\n flex: 0 0 auto;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n border-bottom-color: transparent;\n}\n\n.card-setting__copy {\n align-items: center;\n}\n\nds-text.card-setting__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-setting__actions {\n flex-shrink: 0;\n}\n\n.card-setting__panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n}\n\n:host(.card-setting--editing) .card-setting__panel {\n border-radius: var(--ds-radius-card);\n}\n\n.card-setting__banner {\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.card-setting__banner--empty {\n display: none;\n}\n\n.card-setting__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n box-sizing: border-box;\n padding-block: var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n :host {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n\n :host::after {\n box-shadow: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardSettingVariant = 'editable' \| 'immediate';\nexport type CardSettingWidth = 'sm' \| 'md' \| 'lg';\nexport type CardSettingAction = 'edit' \| 'save' \| 'cancel';\n\nexport interface CardSettingActionDetail {\n action: CardSettingAction;\n originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\nconst isRenderableNode = (node: Node): boolean => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return (node as Element).tagName !== 'SLOT';\n }\n return node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim());\n};\n\nconst slotName = (node: Node): string \| null =>\n node.nodeType === Node.ELEMENT_NODE ? (node as Element).getAttribute('slot') : null;\n\nconst isDefaultSlottedNode = (node: Node): boolean => isRenderableNode(node) && !slotName(node);\n\nconst isBannerSlottedNode = (node: Node): boolean =>\n isRenderableNode(node) && slotName(node) === 'banner';\n\nconst slotHasRenderableContent = (slot: HTMLSlotElement \| null): boolean =>\n Boolean(slot?.assignedNodes({ flatten: true }).some(isRenderableNode));\n\n@Component({\n tag: 'ds-card-setting',\n styleUrl: 'CardSetting.css',\n scoped: true,\n})\nexport class CardSetting {\n @Element() el!: HTMLElement;\n\n /** Section heading shown in the card header. /\n @Prop() heading!: string;\n\n /\n Card width token (`sm` / `md` / `lg`). Empty editable cards use the matching\n * minimum-height token. Cards with body content, and immediate cards, fit\n * that content.\n /\n @Prop() cardWidth: CardSettingWidth = 'md';\n\n /* Immediate settings omit edit actions and apply changes through their own controls. /\n @Prop() variant: CardSettingVariant = 'editable';\n\n /* Controlled edit state — parent owns single-edit orchestration. /\n @Prop() editing = false;\n @Prop() editLabel: string = 'Edit';\n @Prop() cancelLabel: string = 'Cancel';\n @Prop() saveLabel: string = 'Save';\n\n /* Emits a controlled edit, save, or cancel request. /\n @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n @State() private hasBannerContent = false;\n @State() private hasBodyContent = false;\n\n componentWillLoad() {\n const nodes = Array.from(this.el.childNodes);\n this.hasBannerContent = nodes.some(isBannerSlottedNode);\n this.hasBodyContent = nodes.some(isDefaultSlottedNode);\n }\n\n componentDidLoad() {\n this.syncBannerContent();\n this.syncBodyContent();\n }\n\n private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n this.dsAction.emit({ action, originalEvent });\n }\n\n private readSlotContent(\n event: Event \| undefined,\n slotSelector: string,\n containerSelector: string\n ): boolean {\n const slot =\n event?.target instanceof HTMLSlotElement\n ? event.target\n : this.el.querySelector<HTMLSlotElement>(slotSelector);\n if (slotHasRenderableContent(slot)) return true;\n const container = this.el.querySelector(containerSelector);\n return Array.from(container?.childNodes ?? []).some(isRenderableNode);\n }\n\n private syncBannerContent = (event?: Event) => {\n const hasContent = this.readSlotContent(\n event,\n ':scope > .card-setting__panel > .card-setting__banner > slot',\n ':scope > .card-setting__panel > .card-setting__banner'\n );\n if (hasContent !== this.hasBannerContent) this.hasBannerContent = hasContent;\n };\n\n private syncBodyContent = (event?: Event) => {\n const hasContent = this.readSlotContent(\n event,\n ':scope > .card-setting__panel > .card-setting__body > slot',\n ':scope > .card-setting__panel > .card-setting__body'\n );\n if (hasContent !== this.hasBodyContent) this.hasBodyContent = hasContent;\n };\n\n private get hugContent(): boolean {\n return this.variant === 'immediate' \|\| this.hasBannerContent \|\| this.hasBodyContent;\n }\n\n render() {\n const editing = this.variant === 'editable' && this.editing;\n\n return (\n <Host\n class={{\n 'card-setting': true,\n 'card-setting--editing': editing,\n 'card-setting--immediate': this.variant === 'immediate',\n 'card-setting--empty': !this.hugContent,\n }}\n style={{\n '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-setting-min-height': this.hugContent ? '0' : CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card-setting__header ds-chrome-header\">\n {/ eslint-disable-next-line compomo/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n <div class=\"card-setting__copy ds-chrome-header__copy ds-control--md\">\n <ds-text\n class=\"card-setting__title ds-chrome-header__heading\"\n variant=\"text-title-small\"\n emphasis\n color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n </div>\n {this.variant === 'editable' && (\n <div class=\"card-setting__actions ds-chrome-header__trailing\">\n {!editing ? (\n <ds-button-unfilled\n variant=\"icon\"\n type=\"button\"\n icon=\"Pencil\"\n aria-label={this.editLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('edit', event.detail)\n }\n />\n ) : (\n [\n <ds-button-unfilled\n key=\"cancel\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Cross\"\n background=\"bold\"\n aria-label={this.cancelLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('cancel', event.detail)\n }\n />,\n <ds-button-filled\n key=\"save\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Check\"\n intent=\"brand\"\n contrast=\"faint\"\n aria-label={this.saveLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('save', event.detail)\n }\n />,\n ]\n )}\n </div>\n )}\n </header>\n <div class=\"card-setting__panel\">\n <div\n class={{\n 'card-setting__banner': true,\n 'card-setting__banner--empty': !this.hasBannerContent,\n }}\n >\n <slot name=\"banner\" onSlotchange={this.syncBannerContent} />\n </div>\n <div class=\"card-setting__body\">\n <slot onSlotchange={this.syncBodyContent} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-card-settings-scope.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as o,h as t,a as i,t as r}from"./index.js";import{d as c}from"./p-Cihjy4WY.js";const d=()=>`.sc-ds-card-settings-scope:where(.ds-text-decoration,.ds-text-action).sc-ds-card-settings-scope{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-card-settings-scope:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-card-settings-scope{text-decoration-line:underline;text-decoration-color:currentcolor}}@media (forced-colors: active){.sc-ds-card-settings-scope:root,.sc-ds-card-settings-scope-h,.ds-forced-colors-scope.sc-ds-card-settings-scope{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-settings-scope-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-settings-scope-h,.ds-focus-ring.sc-ds-card-settings-scope,.ds-focus-ring-inset.sc-ds-card-settings-scope-h,.ds-focus-ring-inset.sc-ds-card-settings-scope{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-settings-scope-h:focus-visible,.ds-focus-ring.sc-ds-card-settings-scope:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-settings-scope-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-settings-scope{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-settings-scope-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-settings-scope:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-settings-scope-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-settings-scope:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-settings-scope-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.sc-ds-card-settings-scope-h,.sc-ds-card-settings-scope:where(.ds-table),.sc-ds-card-settings-scope:where(.tooltip-popup),.sc-ds-card-settings-scope:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control-elevation.sc-ds-card-settings-scope-h,.ds-control-elevation.sc-ds-card-settings-scope{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-settings-scope-h::after,.ds-control-elevation.sc-ds-card-settings-scope::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-settings-scope-h,.ds-control-elevation--sm.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-settings-scope-h,.ds-control-elevation--md.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-settings-scope-h,.ds-control-elevation--floating.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-settings-scope{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-settings-scope{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-settings-scope,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-settings-scope{scale:none;transition:none}}.sc-ds-card-settings-scope-h{display:block;min-width:0;width:var(--dimension-card-width-md);max-width:100%}.card-settings-scope.sc-ds-card-settings-scope{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--dimension-space-050);box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);border-radius:var(--ds-radius-card);background:var(--color-background-primary);color:var(--color-foreground-primary)}.card-settings-scope__action.sc-ds-card-settings-scope{display:inline-flex;align-items:center;min-height:var(--dimension-size-400);max-width:100%;margin:0;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer}.card-settings-scope__action.sc-ds-card-settings-scope ds-text.sc-ds-card-settings-scope{overflow-wrap:anywhere;text-align:start}@media (forced-colors: active){.card-settings-scope.sc-ds-card-settings-scope{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsScopeRequest=o(this,"dsScopeRequest",7);this.areaLabel="All settings";this.profileLabel="Organization";this.managingLabel="Managing";this.settingsLabel="";this.forLabel="for";this.scopeLabel="Settings scope";this.areaExpanded=false;this.profileExpanded=false;this.profilePopup="menu"}request(s,e){this.dsScopeRequest.emit({scope:s,anchor:e.currentTarget,originalEvent:e})}render(){return t(i,{key:"4c7ce65dfeebb01de79c3aaf575c7cfec22468b5"},t("div",{key:"2e580a929fc926055ffea03c241cb00ecd72643a",class:"card-settings-scope ds-control-elevation ds-control-elevation--sm",role:"region","aria-label":this.scopeLabel},t("ds-text",{key:"223a810dac9f449d84e83dff57571a3596fa4cc6",as:"span",variant:"text-body-medium",color:"primary"},this.managingLabel),t("button",{key:"2535cb5350d0cdb038121c307a8e5068f001ccf4",type:"button",class:"card-settings-scope__action ds-text-action ds-focus-ring","aria-haspopup":"menu","aria-controls":this.areaControls,"aria-expanded":String(this.areaExpanded),onClick:s=>this.request("area",s)},t("ds-text",{key:"33cf438920475d83e9a22673f7ca2a1ee0012734",as:"span",variant:"text-body-medium",color:"inherit"},this.areaLabel)),this.settingsLabel.trim()?t("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},this.settingsLabel):null,t("ds-text",{key:"f173e75ce02757430bbe6c741ac014949bef60d6",as:"span",variant:"text-body-medium",color:"primary"},this.forLabel),t("button",{key:"6551bcd0df3e314600ce2cc2430814b4c73b1b3a",type:"button",class:"card-settings-scope__action ds-text-action ds-focus-ring","aria-haspopup":this.profilePopup,"aria-controls":this.profileControls,"aria-expanded":String(this.profileExpanded),onClick:s=>this.request("profile",s)},t("ds-text",{key:"634a0d077eff071221d0a38c584351001d18280c",as:"span",variant:"text-body-medium",color:"inherit"},this.profileLabel))))}static get style(){return d()}},[2,"ds-card-settings-scope",{areaLabel:[1,"area-label"],profileLabel:[1,"profile-label"],managingLabel:[1,"managing-label"],settingsLabel:[1,"settings-label"],forLabel:[1,"for-label"],scopeLabel:[1,"scope-label"],areaControls:[1,"area-controls"],profileControls:[1,"profile-controls"],areaExpanded:[4,"area-expanded"],profileExpanded:[4,"profile-expanded"],profilePopup:[1,"profile-popup"]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-card-settings-scope","ds-text"];s.forEach((s=>{switch(s){case"ds-card-settings-scope":if(!customElements.get(r(s))){customElements.define(r(s),n)}break;case"ds-text":if(!customElements.get(r(s))){c()}break}}))}a();const l=n;const g=a;export{l as DsCardSettingsScope,g as defineCustomElement};
+import{p as s,H as e,c as o,h as t,a as i,t as r}from"./index.js";import{d}from"./p-D8OWhnID.js";const c=()=>`.sc-ds-card-settings-scope:where(.ds-text-decoration,.ds-text-action).sc-ds-card-settings-scope{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-card-settings-scope{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-card-settings-scope:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-card-settings-scope{text-decoration-line:underline;text-decoration-color:currentcolor}}@media (forced-colors: active){.sc-ds-card-settings-scope:root,.sc-ds-card-settings-scope-h,.ds-forced-colors-scope.sc-ds-card-settings-scope{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-settings-scope-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-settings-scope-h,.ds-focus-ring.sc-ds-card-settings-scope,.ds-focus-ring-inset.sc-ds-card-settings-scope-h,.ds-focus-ring-inset.sc-ds-card-settings-scope{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-settings-scope-h:focus-visible,.ds-focus-ring.sc-ds-card-settings-scope:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-settings-scope-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-settings-scope{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-settings-scope-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-settings-scope:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-settings-scope-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-settings-scope:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-settings-scope::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-settings-scope-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.sc-ds-card-settings-scope-h,.sc-ds-card-settings-scope:where(.ds-table),.sc-ds-card-settings-scope:where(.tooltip-popup),.sc-ds-card-settings-scope:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control-elevation.sc-ds-card-settings-scope-h,.ds-control-elevation.sc-ds-card-settings-scope{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-settings-scope-h::after,.ds-control-elevation.sc-ds-card-settings-scope::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-settings-scope-h,.ds-control-elevation--sm.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-settings-scope-h,.ds-control-elevation--md.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-settings-scope-h,.ds-control-elevation--floating.sc-ds-card-settings-scope{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-settings-scope{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-settings-scope{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-settings-scope,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-settings-scope{scale:none;transition:none}}.sc-ds-card-settings-scope-h{display:block;min-width:0;width:var(--dimension-card-width-md);max-width:100%}.card-settings-scope.sc-ds-card-settings-scope{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--dimension-space-050);box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100) var(--dimension-space-200);border-radius:var(--ds-radius-card);background:var(--color-background-primary);color:var(--color-foreground-primary)}.card-settings-scope__action.sc-ds-card-settings-scope{display:inline-flex;align-items:center;min-height:var(--dimension-size-400);max-width:100%;margin:0;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer}.card-settings-scope__action.sc-ds-card-settings-scope ds-text.sc-ds-card-settings-scope{overflow-wrap:anywhere;text-align:start}@media (forced-colors: active){.card-settings-scope.sc-ds-card-settings-scope{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsScopeRequest=o(this,"dsScopeRequest",7);this.areaLabel="All settings";this.profileLabel="Organization";this.managingLabel="Managing";this.settingsLabel="";this.forLabel="for";this.scopeLabel="Settings scope";this.areaExpanded=false;this.profileExpanded=false;this.profilePopup="menu"}request(s,e){this.dsScopeRequest.emit({scope:s,anchor:e.currentTarget,originalEvent:e})}render(){return t(i,{key:"3af7db3ece0c026c217540d71b11388a6b0aca06"},t("div",{key:"f12198f816dab42be3bbbebef5744d259359a9ba",class:"card-settings-scope ds-control-elevation ds-control-elevation--sm",role:"region","aria-label":this.scopeLabel},t("ds-text",{key:"ebbcb1b14d20360c445798ccd32c4bdeee2a22b2",as:"span",variant:"text-body-medium",color:"primary"},this.managingLabel),t("button",{key:"369491d25758b5bbc2ca97c458279f5e1d316c64",type:"button",class:"card-settings-scope__action ds-text-action ds-focus-ring","aria-haspopup":"menu","aria-controls":this.areaControls,"aria-expanded":String(this.areaExpanded),onClick:s=>this.request("area",s)},t("ds-text",{key:"a61f9e2fdf272b0d084ebb5c872e79bec1d3631e",as:"span",variant:"text-body-medium",color:"inherit"},this.areaLabel)),this.settingsLabel.trim()?t("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},this.settingsLabel):null,t("ds-text",{key:"9ee9f83d0ea9762606f680679641d92fe5005577",as:"span",variant:"text-body-medium",color:"primary"},this.forLabel),t("button",{key:"cfdd021099047f1bc249fba88f99d5f242747d96",type:"button",class:"card-settings-scope__action ds-text-action ds-focus-ring","aria-haspopup":this.profilePopup,"aria-controls":this.profileControls,"aria-expanded":String(this.profileExpanded),onClick:s=>this.request("profile",s)},t("ds-text",{key:"dd03c0cc16a4d7165c6db697f9a2e0dcef8d9669",as:"span",variant:"text-body-medium",color:"inherit"},this.profileLabel))))}static get style(){return c()}},[2,"ds-card-settings-scope",{areaLabel:[1,"area-label"],profileLabel:[1,"profile-label"],managingLabel:[1,"managing-label"],settingsLabel:[1,"settings-label"],forLabel:[1,"for-label"],scopeLabel:[1,"scope-label"],areaControls:[1,"area-controls"],profileControls:[1,"profile-controls"],areaExpanded:[4,"area-expanded"],profileExpanded:[4,"profile-expanded"],profilePopup:[1,"profile-popup"]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-card-settings-scope","ds-text"];s.forEach((s=>{switch(s){case"ds-card-settings-scope":if(!customElements.get(r(s))){customElements.define(r(s),n)}break;case"ds-text":if(!customElements.get(r(s))){d()}break}}))}a();const l=n;const g=a;export{l as DsCardSettingsScope,g as defineCustomElement};
 //# sourceMappingURL=ds-card-settings-scope.js.map

package/dist/components/ds-card-settings-scope.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["cardSettingsScopeCss","CardSettingsScope","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","areaLabel","profileLabel","managingLabel","settingsLabel","forLabel","scopeLabel","areaExpanded","profileExpanded","profilePopup","request","scope","event","dsScopeRequest","emit","anchor","currentTarget","originalEvent","render","h","Host","key","class","role","as","variant","color","type","areaControls","String","onClick","trim","profileControls"],"sources":["src/wc/components/CardSettingsScope/CardSettingsScope.css?tag=ds-card-settings-scope&encapsulation=scoped","src/wc/components/CardSettingsScope/CardSettingsScope.tsx"],"sourcesContent":["@import '../../utils/text-decoration.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n min-width: 0;\n width: var(--dimension-card-width-md);\n max-width: 100%;\n}\n\n.card-settings-scope {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0 var(--dimension-space-050);\n box-sizing: border-box;\n min-height: var(--dimension-size-600);\n padding: var(--dimension-space-100) var(--dimension-space-200);\n border-radius: var(--ds-radius-card);\n background: var(--color-background-primary);\n color: var(--color-foreground-primary);\n}\n\n.card-settings-scope__action {\n display: inline-flex;\n align-items: center;\n min-height: var(--dimension-size-400);\n max-width: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n cursor: pointer;\n}\n\n.card-settings-scope__action ds-text {\n overflow-wrap: anywhere;\n text-align: start;\n}\n\n@media (forced-colors: active) {\n .card-settings-scope {\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport interface SettingsScopeRequest {\n scope: 'area' \| 'profile';\n anchor: HTMLButtonElement;\n originalEvent: MouseEvent;\n}\n\n@Component({\n tag: 'ds-card-settings-scope',\n styleUrl: 'CardSettingsScope.css',\n scoped: true,\n})\nexport class CardSettingsScope {\n /** Current product area or complete combined-view label in the sentence trigger. /\n @Prop() areaLabel: string = 'All settings';\n /* Current organization or settings profile. /\n @Prop() profileLabel: string = 'Organization';\n /* Sentence prefix, supplied separately for localization. /\n @Prop() managingLabel: string = 'Managing';\n /* Optional sentence noun after an area-only trigger label, supplied separately for localization. /\n @Prop() settingsLabel: string = '';\n /* Sentence connector, supplied separately for localization. /\n @Prop() forLabel: string = 'for';\n /* Accessible name for this context region. /\n @Prop() scopeLabel: string = 'Settings scope';\n /* ID of the application-owned product-area menu. /\n @Prop() areaControls: string \| undefined;\n /* ID of the application-owned profiles popup. /\n @Prop() profileControls: string \| undefined;\n /* Whether the product-area menu is open. /\n @Prop() areaExpanded: boolean = false;\n /* Whether the profiles popup is open. /\n @Prop() profileExpanded: boolean = false;\n /* Empty informational profile popups use dialog semantics instead of a menu. /\n @Prop() profilePopup: 'menu' \| 'dialog' = 'menu';\n\n /* Requests a popup; the owner supplies choices, open state, and selection. */\n @Event() dsScopeRequest!: EventEmitter<SettingsScopeRequest>;\n\n private request(scope: SettingsScopeRequest['scope'], event: MouseEvent) {\n this.dsScopeRequest.emit({\n scope,\n anchor: event.currentTarget as HTMLButtonElement,\n originalEvent: event,\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"card-settings-scope ds-control-elevation ds-control-elevation--sm\"\n role=\"region\"\n aria-label={this.scopeLabel}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.managingLabel}\n </ds-text>\n <button\n type=\"button\"\n class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n aria-haspopup=\"menu\"\n aria-controls={this.areaControls}\n aria-expanded={String(this.areaExpanded)}\n onClick={event => this.request('area', event)}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.areaLabel}\n </ds-text>\n </button>\n {this.settingsLabel.trim() ? (\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.settingsLabel}\n </ds-text>\n ) : null}\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.forLabel}\n </ds-text>\n <button\n type=\"button\"\n class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n aria-haspopup={this.profilePopup}\n aria-controls={this.profileControls}\n aria-expanded={String(this.profileExpanded)}\n onClick={event => this.request('profile', event)}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.profileLabel}\n </ds-text>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"~~sGAAA~~,MAAMA,EAAuB,IAAM,q7N,MCatBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,2FAOUC,KAAAC,UAAoB,eAEpBD,KAAAE,aAAuB,eAEvBF,KAAAG,cAAwB,WAExBH,KAAAI,cAAwB,GAExBJ,KAAAK,SAAmB,MAEnBL,KAAAM,WAAqB,iBAMrBN,KAAAO,aAAwB,MAExBP,KAAAQ,gBAA2B,MAE3BR,KAAAS,aAAkC,MA4D3C,CAvDS,OAAAC,CAAQC,EAAsCC,GACpDZ,KAAKa,eAAeC,KAAK,CACvBH,QACAI,OAAQH,EAAMI,cACdC,cAAeL,G,CAInB,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,oEACNC,KAAK,SAAQ,aACDvB,KAAKM,YAEjBa,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKG,eAERgB,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,2DAA0D,gBAClD,OAAM,gBACLtB,KAAK4B,aAAY,gBACjBC,OAAO7B,KAAKO,cAC3BuB,QAASlB,GAASZ,KAAKU,QAAQ,OAAQE,IAEvCO,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKC,YAGTD,KAAKI,cAAc2B,OAClBZ,EAAA,WAASK,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKI,eAEN,KACJe,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKK,UAERc,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,2DAA0D,gBACjDtB,KAAKS,aAAY,gBACjBT,KAAKgC,gBAAe,gBACpBH,OAAO7B,KAAKQ,iBAC3BsB,QAASlB,GAASZ,KAAKU,QAAQ,UAAWE,IAE1CO,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKE,gB","ignoreList":[]}
1	+ {"version":3,"names":["cardSettingsScopeCss","CardSettingsScope","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","areaLabel","profileLabel","managingLabel","settingsLabel","forLabel","scopeLabel","areaExpanded","profileExpanded","profilePopup","request","scope","event","dsScopeRequest","emit","anchor","currentTarget","originalEvent","render","h","Host","key","class","role","as","variant","color","type","areaControls","String","onClick","trim","profileControls"],"sources":["src/wc/components/CardSettingsScope/CardSettingsScope.css?tag=ds-card-settings-scope&encapsulation=scoped","src/wc/components/CardSettingsScope/CardSettingsScope.tsx"],"sourcesContent":["@import '../../utils/text-decoration.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n min-width: 0;\n width: var(--dimension-card-width-md);\n max-width: 100%;\n}\n\n.card-settings-scope {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0 var(--dimension-space-050);\n box-sizing: border-box;\n min-height: var(--dimension-size-600);\n padding: var(--dimension-space-100) var(--dimension-space-200);\n border-radius: var(--ds-radius-card);\n background: var(--color-background-primary);\n color: var(--color-foreground-primary);\n}\n\n.card-settings-scope__action {\n display: inline-flex;\n align-items: center;\n min-height: var(--dimension-size-400);\n max-width: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n cursor: pointer;\n}\n\n.card-settings-scope__action ds-text {\n overflow-wrap: anywhere;\n text-align: start;\n}\n\n@media (forced-colors: active) {\n .card-settings-scope {\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport interface SettingsScopeRequest {\n scope: 'area' \| 'profile';\n anchor: HTMLButtonElement;\n originalEvent: MouseEvent;\n}\n\n@Component({\n tag: 'ds-card-settings-scope',\n styleUrl: 'CardSettingsScope.css',\n scoped: true,\n})\nexport class CardSettingsScope {\n /** Current product area or complete combined-view label in the sentence trigger. /\n @Prop() areaLabel: string = 'All settings';\n /* Current organization or settings profile. /\n @Prop() profileLabel: string = 'Organization';\n /* Sentence prefix, supplied separately for localization. /\n @Prop() managingLabel: string = 'Managing';\n /* Optional sentence noun after an area-only trigger label, supplied separately for localization. /\n @Prop() settingsLabel: string = '';\n /* Sentence connector, supplied separately for localization. /\n @Prop() forLabel: string = 'for';\n /* Accessible name for this context region. /\n @Prop() scopeLabel: string = 'Settings scope';\n /* ID of the application-owned product-area menu. /\n @Prop() areaControls: string \| undefined;\n /* ID of the application-owned profiles popup. /\n @Prop() profileControls: string \| undefined;\n /* Whether the product-area menu is open. /\n @Prop() areaExpanded: boolean = false;\n /* Whether the profiles popup is open. /\n @Prop() profileExpanded: boolean = false;\n /* Empty informational profile popups use dialog semantics instead of a menu. /\n @Prop() profilePopup: 'menu' \| 'dialog' = 'menu';\n\n /* Requests a popup; the owner supplies choices, open state, and selection. */\n @Event() dsScopeRequest!: EventEmitter<SettingsScopeRequest>;\n\n private request(scope: SettingsScopeRequest['scope'], event: MouseEvent) {\n this.dsScopeRequest.emit({\n scope,\n anchor: event.currentTarget as HTMLButtonElement,\n originalEvent: event,\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"card-settings-scope ds-control-elevation ds-control-elevation--sm\"\n role=\"region\"\n aria-label={this.scopeLabel}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.managingLabel}\n </ds-text>\n <button\n type=\"button\"\n class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n aria-haspopup=\"menu\"\n aria-controls={this.areaControls}\n aria-expanded={String(this.areaExpanded)}\n onClick={event => this.request('area', event)}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.areaLabel}\n </ds-text>\n </button>\n {this.settingsLabel.trim() ? (\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.settingsLabel}\n </ds-text>\n ) : null}\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {this.forLabel}\n </ds-text>\n <button\n type=\"button\"\n class=\"card-settings-scope__action ds-text-action ds-focus-ring\"\n aria-haspopup={this.profilePopup}\n aria-controls={this.profileControls}\n aria-expanded={String(this.profileExpanded)}\n onClick={event => this.request('profile', event)}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.profileLabel}\n </ds-text>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iGAAA,MAAMA,EAAuB,IAAM,q7N,MCatBC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,2FAOUC,KAAAC,UAAoB,eAEpBD,KAAAE,aAAuB,eAEvBF,KAAAG,cAAwB,WAExBH,KAAAI,cAAwB,GAExBJ,KAAAK,SAAmB,MAEnBL,KAAAM,WAAqB,iBAMrBN,KAAAO,aAAwB,MAExBP,KAAAQ,gBAA2B,MAE3BR,KAAAS,aAAkC,MA4D3C,CAvDS,OAAAC,CAAQC,EAAsCC,GACpDZ,KAAKa,eAAeC,KAAK,CACvBH,QACAI,OAAQH,EAAMI,cACdC,cAAeL,G,CAInB,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,oEACNC,KAAK,SAAQ,aACDvB,KAAKM,YAEjBa,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKG,eAERgB,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,2DAA0D,gBAClD,OAAM,gBACLtB,KAAK4B,aAAY,gBACjBC,OAAO7B,KAAKO,cAC3BuB,QAASlB,GAASZ,KAAKU,QAAQ,OAAQE,IAEvCO,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKC,YAGTD,KAAKI,cAAc2B,OAClBZ,EAAA,WAASK,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKI,eAEN,KACJe,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKK,UAERc,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,2DAA0D,gBACjDtB,KAAKS,aAAY,gBACjBT,KAAKgC,gBAAe,gBACpBH,OAAO7B,KAAKQ,iBAC3BsB,QAASlB,GAASZ,KAAKU,QAAQ,UAAWE,IAE1CO,EAAA,WAAAE,IAAA,2CAASG,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD1B,KAAKE,gB","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as i,h as t,a as r,t as s}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d}from"./p-Cihjy4WY.js";import{r as c}from"./p-rCeztgVn.js";const a=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function l(e,n){if(n){return new Intl.NumberFormat(n,{notation:"compact",compactDisplay:"short",maximumFractionDigits:1}).format(e)}const i=e<0?"-":"";const t=Math.abs(e);if(t<1e3)return String(e);for(let e=0;e<a.length;e++){const n=a[e];if(t<n.threshold)continue;let r=Math.round(t/n.threshold*10)/10;if(r>=1e3&&e>0){const n=a[e-1];r=Math.round(t/n.threshold*10)/10;return`${i}${r}${n.suffix}`}return`${i}${r}${n.suffix}`}return String(e)}function h(e,n=1,i){const t=n===2?2:1;const r=Number.isFinite(e)?e:0;return new Intl.NumberFormat(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(r)}const g=()=>`.sc-ds-chart-legend-h,.sc-ds-chart-legend:where(.ds-table),.sc-ds-chart-legend:where(.tooltip-popup),.sc-ds-chart-legend:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chart-legend-h::after,.ds-interaction-fill--grouped.sc-ds-chart-legend::after,.ds-interaction-fill--grouped.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chart-legend-h,.ds-interaction-fill--grouped.sc-ds-chart-legend{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family-ui);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const f=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover",7);this.dsItemClick=i(this,"dsItemClick",7);this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return t(r,{key:"fc6cae96b35a5f543902ab4fe8d3c49e93d89191",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},t("ul",{key:"05c73d710792cd11eb7fe037d4215feb3d547e7a",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((i,r)=>{const s=n!=null&&i.label!==n;const d=c(i.href);const a=d?"a":"div";const g=i.value!=null?h(e?i.value/e:0,this.percentageDecimals,this.locale):"";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!d,"chart-legend__item--dimmed":s,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!d,"ds-focus-ring-inset":!!d},href:d,onClick:d?e=>this.handleClick(i,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(i):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(i):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(r)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(i.value)},l(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return g()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(s(e))){customElements.define(s(e),f)}break;case"ds-text":if(!customElements.get(s(e))){d()}break}}))}v();const u=f;const m=v;export{u as DsChartLegend,m as defineCustomElement};
+import{p as e,H as n,c as i,h as t,a as r,t as s}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d}from"./p-D8OWhnID.js";import{r as c}from"./p-rCeztgVn.js";const a=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function l(e,n){if(n){return new Intl.NumberFormat(n,{notation:"compact",compactDisplay:"short",maximumFractionDigits:1}).format(e)}const i=e<0?"-":"";const t=Math.abs(e);if(t<1e3)return String(e);for(let e=0;e<a.length;e++){const n=a[e];if(t<n.threshold)continue;let r=Math.round(t/n.threshold*10)/10;if(r>=1e3&&e>0){const n=a[e-1];r=Math.round(t/n.threshold*10)/10;return`${i}${r}${n.suffix}`}return`${i}${r}${n.suffix}`}return String(e)}function h(e,n=1,i){const t=n===2?2:1;const r=Number.isFinite(e)?e:0;return new Intl.NumberFormat(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(r)}const g=()=>`.sc-ds-chart-legend-h,.sc-ds-chart-legend:where(.ds-table),.sc-ds-chart-legend:where(.tooltip-popup),.sc-ds-chart-legend:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chart-legend-h::after,.ds-interaction-fill--grouped.sc-ds-chart-legend::after,.ds-interaction-fill--grouped.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chart-legend-h,.ds-interaction-fill--grouped.sc-ds-chart-legend{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-chart-legend-h,.ds-interaction-fill--on-chrome.sc-ds-chart-legend{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family-ui);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const f=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover",7);this.dsItemClick=i(this,"dsItemClick",7);this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return t(r,{key:"a3dcf7594995fb201a1d2c20f71620c5174de7cf",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},t("ul",{key:"aff54637220ff16f5a885d03ce0c125aa5a41db9",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((i,r)=>{const s=n!=null&&i.label!==n;const d=c(i.href);const a=d?"a":"div";const g=i.value!=null?h(e?i.value/e:0,this.percentageDecimals,this.locale):"";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!d,"chart-legend__item--dimmed":s,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!d,"ds-focus-ring-inset":!!d},href:d,onClick:d?e=>this.handleClick(i,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(i):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(i):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(r)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(i.value)},l(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return g()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(s(e))){customElements.define(s(e),f)}break;case"ds-text":if(!customElements.get(s(e))){d()}break}}))}v();const u=f;const m=v;export{u as DsChartLegend,m as defineCustomElement};
 //# sourceMappingURL=ds-chart-legend.js.map