@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-stack.mjs

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Stack arranges its children along the block axis and separates them by one
+ * step of the space scale. It paints nothing and adds no semantics: the element
+ * is the one the consumer wrote, so a list stays a list and a form stays a form.
+ *
+ * An axis reaches the stylesheet only when someone decided it. The base rule
+ * already carries the family default, and a layout is the most numerous element
+ * in a document.
+ *
+ * There is no input that reverses the children. The order they are written in
+ * is the order they are read in, by a screen reader and by the Tab key alike.
+ */
+class SlStack {
+    /** Positions children across the flow. Absent, they stretch. */
+    align = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Separation between children, as a step on the space scale. */
+    gap = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Positions children along the flow; needs a block size to distribute. */
+    justify = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "justify" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlStack, isStandalone: true, selector: "[slStack]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "stack", "data-part": "root" }, properties: { "attr.data-gap": "gap() ?? null", "attr.data-align": "align() ?? null", "attr.align": "null", "attr.data-justify": "justify() ?? null" } }, exportAs: ["slStack"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=stack]{--_gap: var(--slotted-space-6, 1rem);display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0}[data-ui=stack][data-gap=\"0\"]{--_gap: 0}[data-ui=stack][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=stack][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui=stack][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=stack][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui=stack][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=stack][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui=stack][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui=stack][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui=stack][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui=stack][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui=stack][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui=stack][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui=stack][data-align=start]{align-items:start}[data-ui=stack][data-align=center]{align-items:center}[data-ui=stack][data-align=end]{align-items:end}[data-ui=stack][data-align=stretch]{align-items:stretch}[data-ui=stack][data-justify=start]{justify-content:start}[data-ui=stack][data-justify=center]{justify-content:center}[data-ui=stack][data-justify=end]{justify-content:end}[data-ui=stack][data-justify=between]{justify-content:space-between}[data-ui=stack][data-justify=around]{justify-content:space-around}[data-ui=stack][data-justify=evenly]{justify-content:space-evenly}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStack, decorators: [{
+            type: Component,
+            args: [{ selector: '[slStack]', standalone: true, exportAs: 'slStack', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'stack',
+                        'data-part': 'root',
+                        '[attr.data-gap]': 'gap() ?? null',
+                        '[attr.data-align]': 'align() ?? null',
+                        /* `align` is also an obsolete HTML attribute a browser still honours on a
+                           div, centring its text; written statically for the input it would stay. */
+                        '[attr.align]': 'null',
+                        '[attr.data-justify]': 'justify() ?? null',
+                    }, styles: ["@layer slotted.components{[data-ui=stack]{--_gap: var(--slotted-space-6, 1rem);display:flex;flex-direction:column;gap:var(--_gap);min-inline-size:0}[data-ui=stack][data-gap=\"0\"]{--_gap: 0}[data-ui=stack][data-gap=\"1\"]{--_gap: var(--slotted-space-1, .125rem)}[data-ui=stack][data-gap=\"2\"]{--_gap: var(--slotted-space-2, .25rem)}[data-ui=stack][data-gap=\"3\"]{--_gap: var(--slotted-space-3, .375rem)}[data-ui=stack][data-gap=\"4\"]{--_gap: var(--slotted-space-4, .5rem)}[data-ui=stack][data-gap=\"5\"]{--_gap: var(--slotted-space-5, .75rem)}[data-ui=stack][data-gap=\"6\"]{--_gap: var(--slotted-space-6, 1rem)}[data-ui=stack][data-gap=\"7\"]{--_gap: var(--slotted-space-7, 1.25rem)}[data-ui=stack][data-gap=\"8\"]{--_gap: var(--slotted-space-8, 1.5rem)}[data-ui=stack][data-gap=\"9\"]{--_gap: var(--slotted-space-9, 2rem)}[data-ui=stack][data-gap=\"10\"]{--_gap: var(--slotted-space-10, 2.5rem)}[data-ui=stack][data-gap=\"11\"]{--_gap: var(--slotted-space-11, 3rem)}[data-ui=stack][data-gap=\"12\"]{--_gap: var(--slotted-space-12, 4rem)}[data-ui=stack][data-align=start]{align-items:start}[data-ui=stack][data-align=center]{align-items:center}[data-ui=stack][data-align=end]{align-items:end}[data-ui=stack][data-align=stretch]{align-items:stretch}[data-ui=stack][data-justify=start]{justify-content:start}[data-ui=stack][data-justify=center]{justify-content:center}[data-ui=stack][data-justify=end]{justify-content:end}[data-ui=stack][data-justify=between]{justify-content:space-between}[data-ui=stack][data-justify=around]{justify-content:space-around}[data-ui=stack][data-justify=evenly]{justify-content:space-evenly}}\n"] }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlStack };
+//# sourceMappingURL=slotted-angular-stack.mjs.map

package/fesm2022/slotted-angular-stack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-stack.mjs","sources":["../../stack/src/stack.ts","../../stack/src/slotted-angular-stack.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\n/**\n * A step on the space scale. Separation is chosen from the scale rather than\n * stated as a length, so a theme retunes every layout at once and no component\n * invents a rhythm of its own. `0` is the absence of separation.\n */\nexport type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\n/** Across the flow, which for a stack is the inline axis. */\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/** Along the flow, which for a stack is the block axis. */\nexport type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Stack arranges its children along the block axis and separates them by one\n * step of the space scale. It paints nothing and adds no semantics: the element\n * is the one the consumer wrote, so a list stays a list and a form stays a form.\n *\n * An axis reaches the stylesheet only when someone decided it. The base rule\n * already carries the family default, and a layout is the most numerous element\n * in a document.\n *\n * There is no input that reverses the children. The order they are written in\n * is the order they are read in, by a screen reader and by the Tab key alike.\n */\n@Component({\n  selector: '[slStack]',\n  standalone: true,\n  exportAs: 'slStack',\n  template: '<ng-content></ng-content>',\n  styleUrl: '../../../styles/src/stack/stack.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'stack',\n    'data-part': 'root',\n    '[attr.data-gap]': 'gap() ?? null',\n    '[attr.data-align]': 'align() ?? null',\n    /* `align` is also an obsolete HTML attribute a browser still honours on a\n       div, centring its text; written statically for the input it would stay. */\n    '[attr.align]': 'null',\n    '[attr.data-justify]': 'justify() ?? null',\n  },\n})\nexport class SlStack {\n  /** Positions children across the flow. Absent, they stretch. */\n  readonly align = input<StackAlign>();\n  /** Separation between children, as a step on the space scale. */\n  readonly gap = input<StackGap>();\n  /** Positions children along the flow; needs a block size to distribute. */\n  readonly justify = input<StackJustify>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAeA;;;;;;;;;;;AAWG;MAoBU,OAAO,CAAA;;AAET,IAAA,KAAK,GAAG,KAAK;yFAAc;;AAE3B,IAAA,GAAG,GAAG,KAAK;uFAAY;;AAEvB,IAAA,OAAO,GAAG,KAAK;2FAAgB;uGAN7B,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,2qBAfR,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6lDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAe1B,OAAO,EAAA,UAAA,EAAA,CAAA;kBAnBnB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,QAAA,EACN,SAAS,YACT,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,OAAO;AAClB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,mBAAmB,EAAE,iBAAiB;AACtC;AAC6E;AAC7E,wBAAA,cAAc,EAAE,MAAM;AACtB,wBAAA,qBAAqB,EAAE,mBAAmB;AAC3C,qBAAA,EAAA,MAAA,EAAA,CAAA,6lDAAA,CAAA,EAAA;;;AC5CH;;AAEG;;"}

package/fesm2022/slotted-angular-stat-card.mjs

@@ -0,0 +1,478 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, HostAttributeToken, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, Directive } from '@angular/core';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { statCardMessages } from '@slotted/core/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+
+const STAT_CARD_DEFAULTS_TOKEN = new InjectionToken('slotted stat-card defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An explicit input is never overridden by the token. The words and the locale
+ * come from the language in force (`provideSlotted`).
+ */
+function provideStatCardDefaults(defaults) {
+    return { provide: STAT_CARD_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectStatCardDefaults() {
+    return inject(STAT_CARD_DEFAULTS_TOKEN);
+}
+
+/** The direction of a change, from its sign. */
+function trendOf(value) {
+    if (value === undefined || Number.isNaN(value) || value === 0)
+        return 'flat';
+    return value > 0 ? 'up' : 'down';
+}
+/**
+ * The tone of a change, from what the metric means and never from the sign:
+ * a rise is good when up is good and bad when down is; a fall is the reverse;
+ * a flat change, or a metric with no valence, is neutral.
+ */
+function toneOf(trend, goodWhen) {
+    if (trend === 'flat' || goodWhen === 'none')
+        return 'neutral';
+    return (trend === 'up') === (goodWhen === 'up') ? 'success' : 'danger';
+}
+
+let nextId = 0;
+/**
+ * A metric with its name, its change and its trend, in a frame.
+ *
+ * The root holds the facts the parts read — which way is good, the change,
+ * the status, whether it is loading — and derives the one thing two parts
+ * have to agree on: the tone of the change, which the delta wears and the
+ * trend hands to its sparkline. It is derived here, from `delta` and
+ * `goodWhen`, so the first render already carries it.
+ *
+ * The root is a group named by its label, so a reader who lands on the
+ * action inside it hears which metric it belongs to; an `aria-label` or
+ * `aria-labelledby` the consumer wrote on the element wins. It carries
+ * `aria-busy` while loading; the placeholders are `skeleton`s, and a
+ * consumer who wants one announcement for a whole dashboard wraps it in a
+ * `slSkeletonRegion`.
+ */
+class SlStatCard {
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fill = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    layout = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Whether there is a value to show, and if not, why. */
+    status = input('ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** The value is still on its way: every part stands in with a placeholder. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Which way is good for this metric. The delta's tone is derived from it, never from the sign. */
+    goodWhen = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "goodWhen" }] : /* istanbul ignore next */ []));
+    /**
+     * The change since the comparison period, as the first delta inside reads
+     * it: a fraction for a percentage (`0.124` is +12.4%), or a number.
+     */
+    delta = input(undefined, { ...(ngDevMode ? { debugName: "delta" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** The tone the card hands to its trend. Unset, it is the delta's. */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** The locale numbers are written in; the language in force when absent. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** How the value, the delta and the comparison read numbers. */
+    formatOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: what a
+     * screen reader hears beside a change (`up`, `down`, `flat`, read before the
+     * number because a sign is a glyph some readers skip) and what stands in for
+     * a value that is not there (`empty`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    defaults = injectStatCardDefaults();
+    appLocale = injectLocale();
+    ownLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    ownLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    /** The id the label takes, and the root is named by. */
+    labelId = `slotted-stat-card-label-${nextId++}`;
+    resolvedSize = computed(() => this.size() ?? this.defaults.size ?? 'md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedFill = computed(() => this.fill() ?? this.defaults.fill ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFill" }] : /* istanbul ignore next */ []));
+    resolvedLayout = computed(() => this.layout() ?? this.defaults.layout ?? 'inline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedGoodWhen = computed(() => this.goodWhen() ?? this.defaults.goodWhen ?? 'up', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedGoodWhen" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    resolvedFormatOptions = computed(() => this.formatOptions() ?? this.defaults.formatOptions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFormatOptions" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this card's `messages` laid over them. */
+    t = injectMessages(statCardMessages, this.messages);
+    resolvedTone = computed(() => {
+        const explicit = this.tone();
+        if (explicit !== undefined)
+            return explicit;
+        const delta = this.delta();
+        return delta === undefined ? undefined : toneOf(trendOf(delta), this.resolvedGoodWhen());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.ownLabel !== null ? null : (this.ownLabelledBy ?? this.labelId), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlStatCard, isStandalone: true, selector: "[slStatCard]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, goodWhen: { classPropertyName: "goodWhen", publicName: "goodWhen", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "stat-card", "data-part": "root", "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.data-size": "resolvedSize()", "attr.data-fill": "resolvedFill()", "attr.data-layout": "resolvedLayout()", "attr.data-status": "status()", "attr.data-good-when": "resolvedGoodWhen()", "attr.data-tone": "resolvedTone() ?? null", "attr.data-loading": "loading() ? \"\" : null" } }, exportAs: ["slStatCard"], ngImport: i0, template: '<div data-part="body"><ng-content /></div>', isInline: true, styles: ["@layer slotted.components{[data-ui=stat-card]{--_edge-width: var(--slotted-stat-card-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-stat-card-radius, var(--slotted-radius-lg, 8px));--_inset-block: var(--slotted-stat-card-padding-block, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-stat-card-padding-inline, var(--slotted-space-6, 1rem));--_region-gap: var(--slotted-stat-card-region-gap, var(--slotted-space-3, .375rem));--_trend-gap: var(--slotted-stat-card-trend-gap, var(--slotted-space-6, 1rem));--_trend-size: var( --slotted-stat-card-trend-inline-size, calc(var(--slotted-space-12, 4rem) * 1.5) );--_surface: var(--slotted-stat-card-background, var(--slotted-surface-raised, Canvas));--_edge: var(--slotted-stat-card-border-color, var(--slotted-border-subtle, ButtonBorder));--_shadow: var(--slotted-stat-card-shadow, none);--_ink: var(--slotted-stat-card-color, var(--slotted-text, CanvasText));--_ink-muted: var(--slotted-stat-card-color-muted, var(--slotted-text-muted, GrayText));--_value-size: var(--slotted-stat-card-value-font-size, var(--slotted-font-size-3xl, 1.5rem));--_value-line: var(--slotted-stat-card-value-line-height, var(--slotted-line-height-3xl, 1.3));--_label-size: var(--slotted-stat-card-label-font-size, var(--slotted-font-size-sm, .8125rem));--_label-line: var(--slotted-stat-card-label-line-height, var(--slotted-line-height-sm, 1.45));--_delta-size: var(--slotted-stat-card-delta-font-size, var(--slotted-font-size-sm, .8125rem));--_prose-size: var(--slotted-stat-card-prose-font-size, var(--slotted-font-size-xs, .75rem));--_prose-line: var(--slotted-stat-card-prose-line-height, var(--slotted-line-height-xs, 1.4));--_indicator-size: var( --slotted-stat-card-indicator-size, var(--slotted-control-icon-size-sm, 14px) );--_value-size-narrow: var(--slotted-font-size-2xl, 1.25rem);--_value-line-narrow: var(--slotted-line-height-2xl, 1.4);--_tone-text: var(--_ink-muted);background-color:var(--_surface);border:none;border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_ink);container-name:stat-card;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:var( --slotted-stat-card-min-inline-size, calc(var(--slotted-space-12, 4rem) * 2.5) );padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative}[data-ui=stat-card]:before{border:var(--_edge-width) solid var(--_edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}[data-ui=stat-card][data-size=sm]{--_inset-block: var(--slotted-stat-card-padding-block-sm, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-stat-card-padding-inline-sm, var(--slotted-space-5, .75rem));--_region-gap: var(--slotted-stat-card-region-gap-sm, var(--slotted-space-2, .25rem));--_trend-gap: var(--slotted-stat-card-trend-gap-sm, var(--slotted-space-5, .75rem));--_trend-size: var(--slotted-stat-card-trend-inline-size-sm, var(--slotted-space-12, 4rem));--_value-size: var( --slotted-stat-card-value-font-size-sm, var(--slotted-font-size-2xl, 1.25rem) );--_value-line: var( --slotted-stat-card-value-line-height-sm, var(--slotted-line-height-2xl, 1.4) );--_label-size: var( --slotted-stat-card-label-font-size-sm, var(--slotted-font-size-xs, .75rem) );--_label-line: var( --slotted-stat-card-label-line-height-sm, var(--slotted-line-height-xs, 1.4) );--_delta-size: var( --slotted-stat-card-delta-font-size-sm, var(--slotted-font-size-xs, .75rem) );--_value-size-narrow: var(--slotted-font-size-xl, 1.125rem);--_value-line-narrow: var(--slotted-line-height-xl, 1.45)}[data-ui=stat-card][data-size=lg]{--_inset-block: var(--slotted-stat-card-padding-block-lg, var(--slotted-space-8, 1.5rem));--_inset-inline: var(--slotted-stat-card-padding-inline-lg, var(--slotted-space-8, 1.5rem));--_region-gap: var(--slotted-stat-card-region-gap-lg, var(--slotted-space-4, .5rem));--_trend-gap: var(--slotted-stat-card-trend-gap-lg, var(--slotted-space-8, 1.5rem));--_trend-size: var( --slotted-stat-card-trend-inline-size-lg, calc(var(--slotted-space-12, 4rem) * 2) );--_value-size: var(--slotted-stat-card-value-font-size-lg, var(--slotted-font-size-4xl, 2rem));--_value-line: var( --slotted-stat-card-value-line-height-lg, var(--slotted-line-height-4xl, 1.2) );--_label-size: var( --slotted-stat-card-label-font-size-lg, var(--slotted-font-size-md, .875rem) );--_label-line: var( --slotted-stat-card-label-line-height-lg, var(--slotted-line-height-md, 1.5) );--_delta-size: var( --slotted-stat-card-delta-font-size-lg, var(--slotted-font-size-md, .875rem) );--_prose-size: var( --slotted-stat-card-prose-font-size-lg, var(--slotted-font-size-sm, .8125rem) );--_prose-line: var( --slotted-stat-card-prose-line-height-lg, var(--slotted-line-height-sm, 1.45) );--_indicator-size: var( --slotted-stat-card-indicator-size-lg, var(--slotted-control-icon-size-md, 16px) );--_value-size-narrow: var(--slotted-font-size-3xl, 1.5rem);--_value-line-narrow: var(--slotted-line-height-3xl, 1.3)}[data-ui=stat-card][data-fill=elevated]{--_shadow: var(--slotted-stat-card-shadow-elevated, var(--slotted-shadow-md))}[data-ui=stat-card][data-fill=subtle]{--_surface: var(--slotted-stat-card-background-subtle, var(--slotted-surface-sunken, Canvas))}[data-ui=stat-card][data-fill=plain]{--_surface: transparent;--_edge: transparent;--_shadow: none;--_inset-block: 0;--_inset-inline: 0;--_radius: var(--slotted-radius-none, 0px)}[data-ui=stat-card] [data-part=body]{column-gap:var(--_trend-gap);display:grid;flex:1 1 auto;grid-template-areas:\"header header\" \"figure trend\" \"message message\";grid-template-columns:minmax(min-content,1fr) minmax(0,var(--_trend-size));grid-template-rows:auto minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_region-gap)}[data-ui=stat-card][data-layout=stacked] [data-part=body]{grid-template-areas:\"header\" \"figure\" \"trend\" \"message\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}[data-ui=stat-card] [data-part=header]{contain:inline-size;grid-area:header}[data-ui=stat-card] [data-part=figure]{align-self:start;grid-area:figure;min-inline-size:0}[data-ui=stat-card] [data-part=trend]{--slotted-sparkline-ring-color: var(--_surface);align-self:center;container-name:stat-card-trend;container-type:inline-size;grid-area:trend;inline-size:100%;min-inline-size:0}@container stat-card-trend (max-width: 39px){[data-ui=stat-card] [data-part=trend]>*{visibility:hidden}}[data-ui=stat-card][data-layout=stacked] [data-part=trend]{align-self:end;margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=message]{contain:inline-size;grid-area:message}@container stat-card (max-width: 219px){[data-ui=stat-card] [data-part=body]{grid-template-areas:\"header\" \"figure\" \"trend\" \"message\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}[data-ui=stat-card] [data-part=trend]{align-self:end;margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=value]{font-size:var(--_value-size-narrow);line-height:var(--_value-line-narrow)}[data-ui=stat-card][data-loading] [data-part=value]{min-block-size:calc(var(--_value-size-narrow) * var(--_value-line-narrow))}}[data-ui=stat-card] [data-part=header]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:flex;flex-wrap:wrap;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=label]{color:var(--_ink-muted);flex:1 1 0%;font-size:var(--_label-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_label-line);margin:0;min-inline-size:min(100%,10rem);overflow-wrap:break-word}[data-ui=stat-card] [data-part=status]{display:inline-flex;flex:none}[data-ui=stat-card] [data-part=action]{flex:none;font-size:var(--_label-size);line-height:var(--_label-line);margin-inline-start:auto}[data-ui=stat-card] [data-part=figure]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:flex;flex-wrap:wrap;row-gap:0}[data-ui=stat-card] [data-part=comparison]{contain:inline-size;flex:1 1 100%}[data-ui=stat-card] [data-part=value]{align-items:baseline;color:var(--_ink);display:inline-flex;flex-wrap:wrap;gap:.15em;font-size:var(--_value-size);font-variant-numeric:proportional-nums;font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:-.02em;unicode-bidi:plaintext;line-height:var(--_value-line);margin:0;min-inline-size:0;overflow-wrap:break-word}[data-ui=stat-card] [data-part=unit]{color:var(--_ink-muted);font-size:var(--_delta-size);font-weight:var(--slotted-font-weight-medium, 500);letter-spacing:0}[data-ui=stat-card] [data-part=delta]{align-items:center;color:var(--_tone-text);column-gap:var(--slotted-space-1, .125rem);display:inline-flex;font-size:var(--_delta-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:1;unicode-bidi:plaintext;white-space:nowrap}[data-ui=stat-card] [data-part=delta][data-tone=neutral]{--_tone-text: var(--_ink-muted)}[data-ui=stat-card] [data-part=delta][data-tone=accent]{--_tone-text: var(--slotted-tone-accent-text)}[data-ui=stat-card] [data-part=delta][data-tone=secondary]{--_tone-text: var(--slotted-tone-secondary-text)}[data-ui=stat-card] [data-part=delta][data-tone=success]{--_tone-text: var(--slotted-tone-success-text)}[data-ui=stat-card] [data-part=delta][data-tone=warning]{--_tone-text: var(--slotted-tone-warning-text)}[data-ui=stat-card] [data-part=delta][data-tone=danger]{--_tone-text: var(--slotted-tone-danger-text)}[data-ui=stat-card] [data-part=indicator]{--slotted-icon-size: var(--_indicator-size);display:inline-flex;flex:none}[data-ui=stat-card] [data-part=delta][data-trend=down] [data-part=indicator]>[data-ui=icon]{rotate:x 180deg}[data-ui=stat-card] [data-part=comparison]{color:var(--_ink-muted);font-size:var(--_prose-size);line-height:var(--_prose-line);margin-block-start:var(--_region-gap);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=stat-card] [data-part=period]{color:var(--_ink-muted)}[data-ui=stat-card] [data-part=trend]{align-self:center;display:flex}[data-ui=stat-card][data-tone=success] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-success-text)}[data-ui=stat-card][data-tone=danger] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-danger-text)}[data-ui=stat-card][data-tone=warning] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-warning-text)}[data-ui=stat-card][data-tone=accent] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-accent-text)}[data-ui=stat-card][data-tone=secondary] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-secondary-text)}[data-ui=stat-card][data-fill=plain] [data-part=trend]{--slotted-sparkline-ring-color: var(--slotted-surface-raised, Canvas)}[data-ui=stat-card] [data-part=message]{color:var(--_ink-muted);font-size:var(--_prose-size);line-height:var(--_prose-line);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=stat-card][data-status=error] [data-part=message]{color:var(--slotted-tone-danger-text)}[data-ui=stat-card][data-status=empty] [data-part=value],[data-ui=stat-card][data-status=error] [data-part=value]{color:var(--_ink-muted)}[data-ui=stat-card][data-loading] [data-part=value]{min-block-size:calc(var(--_value-size) * var(--_value-line))}[data-ui=stat-card][data-loading] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size, var(--slotted-space-9, 2rem) )}[data-ui=stat-card][data-loading][data-size=sm] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size-sm, var(--slotted-space-7, 1.25rem) )}[data-ui=stat-card][data-loading][data-size=lg] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size-lg, var(--slotted-space-11, 3rem) )}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCard, decorators: [{
+            type: Component,
+            args: [{ selector: '[slStatCard]', standalone: true, template: '<div data-part="body"><ng-content /></div>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slStatCard', host: {
+                        'data-ui': 'stat-card',
+                        'data-part': 'root',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-fill]': 'resolvedFill()',
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-status]': 'status()',
+                        '[attr.data-good-when]': 'resolvedGoodWhen()',
+                        '[attr.data-tone]': 'resolvedTone() ?? null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                    }, styles: ["@layer slotted.components{[data-ui=stat-card]{--_edge-width: var(--slotted-stat-card-border-width, var(--slotted-border-width-thin, 1px));--_radius: var(--slotted-stat-card-radius, var(--slotted-radius-lg, 8px));--_inset-block: var(--slotted-stat-card-padding-block, var(--slotted-space-6, 1rem));--_inset-inline: var(--slotted-stat-card-padding-inline, var(--slotted-space-6, 1rem));--_region-gap: var(--slotted-stat-card-region-gap, var(--slotted-space-3, .375rem));--_trend-gap: var(--slotted-stat-card-trend-gap, var(--slotted-space-6, 1rem));--_trend-size: var( --slotted-stat-card-trend-inline-size, calc(var(--slotted-space-12, 4rem) * 1.5) );--_surface: var(--slotted-stat-card-background, var(--slotted-surface-raised, Canvas));--_edge: var(--slotted-stat-card-border-color, var(--slotted-border-subtle, ButtonBorder));--_shadow: var(--slotted-stat-card-shadow, none);--_ink: var(--slotted-stat-card-color, var(--slotted-text, CanvasText));--_ink-muted: var(--slotted-stat-card-color-muted, var(--slotted-text-muted, GrayText));--_value-size: var(--slotted-stat-card-value-font-size, var(--slotted-font-size-3xl, 1.5rem));--_value-line: var(--slotted-stat-card-value-line-height, var(--slotted-line-height-3xl, 1.3));--_label-size: var(--slotted-stat-card-label-font-size, var(--slotted-font-size-sm, .8125rem));--_label-line: var(--slotted-stat-card-label-line-height, var(--slotted-line-height-sm, 1.45));--_delta-size: var(--slotted-stat-card-delta-font-size, var(--slotted-font-size-sm, .8125rem));--_prose-size: var(--slotted-stat-card-prose-font-size, var(--slotted-font-size-xs, .75rem));--_prose-line: var(--slotted-stat-card-prose-line-height, var(--slotted-line-height-xs, 1.4));--_indicator-size: var( --slotted-stat-card-indicator-size, var(--slotted-control-icon-size-sm, 14px) );--_value-size-narrow: var(--slotted-font-size-2xl, 1.25rem);--_value-line-narrow: var(--slotted-line-height-2xl, 1.4);--_tone-text: var(--_ink-muted);background-color:var(--_surface);border:none;border-radius:var(--_radius);box-shadow:var(--_shadow);box-sizing:border-box;color:var(--_ink);container-name:stat-card;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:var( --slotted-stat-card-min-inline-size, calc(var(--slotted-space-12, 4rem) * 2.5) );padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative}[data-ui=stat-card]:before{border:var(--_edge-width) solid var(--_edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}[data-ui=stat-card][data-size=sm]{--_inset-block: var(--slotted-stat-card-padding-block-sm, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-stat-card-padding-inline-sm, var(--slotted-space-5, .75rem));--_region-gap: var(--slotted-stat-card-region-gap-sm, var(--slotted-space-2, .25rem));--_trend-gap: var(--slotted-stat-card-trend-gap-sm, var(--slotted-space-5, .75rem));--_trend-size: var(--slotted-stat-card-trend-inline-size-sm, var(--slotted-space-12, 4rem));--_value-size: var( --slotted-stat-card-value-font-size-sm, var(--slotted-font-size-2xl, 1.25rem) );--_value-line: var( --slotted-stat-card-value-line-height-sm, var(--slotted-line-height-2xl, 1.4) );--_label-size: var( --slotted-stat-card-label-font-size-sm, var(--slotted-font-size-xs, .75rem) );--_label-line: var( --slotted-stat-card-label-line-height-sm, var(--slotted-line-height-xs, 1.4) );--_delta-size: var( --slotted-stat-card-delta-font-size-sm, var(--slotted-font-size-xs, .75rem) );--_value-size-narrow: var(--slotted-font-size-xl, 1.125rem);--_value-line-narrow: var(--slotted-line-height-xl, 1.45)}[data-ui=stat-card][data-size=lg]{--_inset-block: var(--slotted-stat-card-padding-block-lg, var(--slotted-space-8, 1.5rem));--_inset-inline: var(--slotted-stat-card-padding-inline-lg, var(--slotted-space-8, 1.5rem));--_region-gap: var(--slotted-stat-card-region-gap-lg, var(--slotted-space-4, .5rem));--_trend-gap: var(--slotted-stat-card-trend-gap-lg, var(--slotted-space-8, 1.5rem));--_trend-size: var( --slotted-stat-card-trend-inline-size-lg, calc(var(--slotted-space-12, 4rem) * 2) );--_value-size: var(--slotted-stat-card-value-font-size-lg, var(--slotted-font-size-4xl, 2rem));--_value-line: var( --slotted-stat-card-value-line-height-lg, var(--slotted-line-height-4xl, 1.2) );--_label-size: var( --slotted-stat-card-label-font-size-lg, var(--slotted-font-size-md, .875rem) );--_label-line: var( --slotted-stat-card-label-line-height-lg, var(--slotted-line-height-md, 1.5) );--_delta-size: var( --slotted-stat-card-delta-font-size-lg, var(--slotted-font-size-md, .875rem) );--_prose-size: var( --slotted-stat-card-prose-font-size-lg, var(--slotted-font-size-sm, .8125rem) );--_prose-line: var( --slotted-stat-card-prose-line-height-lg, var(--slotted-line-height-sm, 1.45) );--_indicator-size: var( --slotted-stat-card-indicator-size-lg, var(--slotted-control-icon-size-md, 16px) );--_value-size-narrow: var(--slotted-font-size-3xl, 1.5rem);--_value-line-narrow: var(--slotted-line-height-3xl, 1.3)}[data-ui=stat-card][data-fill=elevated]{--_shadow: var(--slotted-stat-card-shadow-elevated, var(--slotted-shadow-md))}[data-ui=stat-card][data-fill=subtle]{--_surface: var(--slotted-stat-card-background-subtle, var(--slotted-surface-sunken, Canvas))}[data-ui=stat-card][data-fill=plain]{--_surface: transparent;--_edge: transparent;--_shadow: none;--_inset-block: 0;--_inset-inline: 0;--_radius: var(--slotted-radius-none, 0px)}[data-ui=stat-card] [data-part=body]{column-gap:var(--_trend-gap);display:grid;flex:1 1 auto;grid-template-areas:\"header header\" \"figure trend\" \"message message\";grid-template-columns:minmax(min-content,1fr) minmax(0,var(--_trend-size));grid-template-rows:auto minmax(0,1fr) auto;min-inline-size:0;row-gap:var(--_region-gap)}[data-ui=stat-card][data-layout=stacked] [data-part=body]{grid-template-areas:\"header\" \"figure\" \"trend\" \"message\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}[data-ui=stat-card] [data-part=header]{contain:inline-size;grid-area:header}[data-ui=stat-card] [data-part=figure]{align-self:start;grid-area:figure;min-inline-size:0}[data-ui=stat-card] [data-part=trend]{--slotted-sparkline-ring-color: var(--_surface);align-self:center;container-name:stat-card-trend;container-type:inline-size;grid-area:trend;inline-size:100%;min-inline-size:0}@container stat-card-trend (max-width: 39px){[data-ui=stat-card] [data-part=trend]>*{visibility:hidden}}[data-ui=stat-card][data-layout=stacked] [data-part=trend]{align-self:end;margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=message]{contain:inline-size;grid-area:message}@container stat-card (max-width: 219px){[data-ui=stat-card] [data-part=body]{grid-template-areas:\"header\" \"figure\" \"trend\" \"message\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}[data-ui=stat-card] [data-part=trend]{align-self:end;margin-block-start:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=value]{font-size:var(--_value-size-narrow);line-height:var(--_value-line-narrow)}[data-ui=stat-card][data-loading] [data-part=value]{min-block-size:calc(var(--_value-size-narrow) * var(--_value-line-narrow))}}[data-ui=stat-card] [data-part=header]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:flex;flex-wrap:wrap;min-inline-size:0;row-gap:var(--slotted-space-2, .25rem)}[data-ui=stat-card] [data-part=label]{color:var(--_ink-muted);flex:1 1 0%;font-size:var(--_label-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_label-line);margin:0;min-inline-size:min(100%,10rem);overflow-wrap:break-word}[data-ui=stat-card] [data-part=status]{display:inline-flex;flex:none}[data-ui=stat-card] [data-part=action]{flex:none;font-size:var(--_label-size);line-height:var(--_label-line);margin-inline-start:auto}[data-ui=stat-card] [data-part=figure]{align-items:baseline;column-gap:var(--slotted-space-3, .375rem);display:flex;flex-wrap:wrap;row-gap:0}[data-ui=stat-card] [data-part=comparison]{contain:inline-size;flex:1 1 100%}[data-ui=stat-card] [data-part=value]{align-items:baseline;color:var(--_ink);display:inline-flex;flex-wrap:wrap;gap:.15em;font-size:var(--_value-size);font-variant-numeric:proportional-nums;font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:-.02em;unicode-bidi:plaintext;line-height:var(--_value-line);margin:0;min-inline-size:0;overflow-wrap:break-word}[data-ui=stat-card] [data-part=unit]{color:var(--_ink-muted);font-size:var(--_delta-size);font-weight:var(--slotted-font-weight-medium, 500);letter-spacing:0}[data-ui=stat-card] [data-part=delta]{align-items:center;color:var(--_tone-text);column-gap:var(--slotted-space-1, .125rem);display:inline-flex;font-size:var(--_delta-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:1;unicode-bidi:plaintext;white-space:nowrap}[data-ui=stat-card] [data-part=delta][data-tone=neutral]{--_tone-text: var(--_ink-muted)}[data-ui=stat-card] [data-part=delta][data-tone=accent]{--_tone-text: var(--slotted-tone-accent-text)}[data-ui=stat-card] [data-part=delta][data-tone=secondary]{--_tone-text: var(--slotted-tone-secondary-text)}[data-ui=stat-card] [data-part=delta][data-tone=success]{--_tone-text: var(--slotted-tone-success-text)}[data-ui=stat-card] [data-part=delta][data-tone=warning]{--_tone-text: var(--slotted-tone-warning-text)}[data-ui=stat-card] [data-part=delta][data-tone=danger]{--_tone-text: var(--slotted-tone-danger-text)}[data-ui=stat-card] [data-part=indicator]{--slotted-icon-size: var(--_indicator-size);display:inline-flex;flex:none}[data-ui=stat-card] [data-part=delta][data-trend=down] [data-part=indicator]>[data-ui=icon]{rotate:x 180deg}[data-ui=stat-card] [data-part=comparison]{color:var(--_ink-muted);font-size:var(--_prose-size);line-height:var(--_prose-line);margin-block-start:var(--_region-gap);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=stat-card] [data-part=period]{color:var(--_ink-muted)}[data-ui=stat-card] [data-part=trend]{align-self:center;display:flex}[data-ui=stat-card][data-tone=success] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-success-text)}[data-ui=stat-card][data-tone=danger] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-danger-text)}[data-ui=stat-card][data-tone=warning] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-warning-text)}[data-ui=stat-card][data-tone=accent] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-accent-text)}[data-ui=stat-card][data-tone=secondary] [data-part=trend]{--slotted-sparkline-color: var(--slotted-tone-secondary-text)}[data-ui=stat-card][data-fill=plain] [data-part=trend]{--slotted-sparkline-ring-color: var(--slotted-surface-raised, Canvas)}[data-ui=stat-card] [data-part=message]{color:var(--_ink-muted);font-size:var(--_prose-size);line-height:var(--_prose-line);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=stat-card][data-status=error] [data-part=message]{color:var(--slotted-tone-danger-text)}[data-ui=stat-card][data-status=empty] [data-part=value],[data-ui=stat-card][data-status=error] [data-part=value]{color:var(--_ink-muted)}[data-ui=stat-card][data-loading] [data-part=value]{min-block-size:calc(var(--_value-size) * var(--_value-line))}[data-ui=stat-card][data-loading] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size, var(--slotted-space-9, 2rem) )}[data-ui=stat-card][data-loading][data-size=sm] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size-sm, var(--slotted-space-7, 1.25rem) )}[data-ui=stat-card][data-loading][data-size=lg] [data-part=trend]{--slotted-skeleton-block-size: var( --slotted-sparkline-block-size-lg, var(--slotted-space-11, 3rem) )}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], goodWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "goodWhen", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+function optionalNumber(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    return numberAttribute(value);
+}
+function optionalBoolean(value) {
+    return value === undefined ? undefined : booleanAttribute(value);
+}
+
+/**
+ * The change, with the mark that says which way and the word a screen reader
+ * hears before the number. `value` is the root's `delta` unless the part
+ * states its own, so a second delta on one card — month over month beside
+ * year over year — is one more part with one more value.
+ *
+ * `percent` reads the value as a fraction, which is what a division gives;
+ * the sign is always shown except on nought. The tone is derived from the
+ * direction and from `goodWhen`, never from the sign, and an explicit `tone`
+ * wins.
+ */
+class SlStatCardDelta {
+    /** The change. Unset, the root's `delta`. */
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** `percent` reads the value as a fraction; `decimal` reads it as it is. */
+    format = input('percent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    formatOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    /** Unset, the root's. */
+    goodWhen = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "goodWhen" }] : /* istanbul ignore next */ []));
+    /** An explicit tone, which wins over the one derived from `goodWhen`. */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    card = inject(SlStatCard);
+    change = computed(() => this.value() ?? this.card.delta(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []));
+    trend = computed(() => trendOf(this.change()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    resolvedTone = computed(() => this.tone() ?? toneOf(this.trend(), this.goodWhen() ?? this.card.resolvedGoodWhen()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.card.loading() || this.card.status() === 'ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    formatted = computed(() => {
+        const change = this.change();
+        if (typeof change !== 'number')
+            return '';
+        return new Intl.NumberFormat(this.card.resolvedLocale(), {
+            signDisplay: 'exceptZero',
+            ...(this.format() === 'percent' ? { style: 'percent', maximumFractionDigits: 1 } : {}),
+            ...this.card.resolvedFormatOptions(),
+            ...this.formatOptions(),
+        }).format(change);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardDelta, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlStatCardDelta, isStandalone: true, selector: "[slStatCardDelta]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null }, goodWhen: { classPropertyName: "goodWhen", publicName: "goodWhen", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "delta" }, properties: { "attr.data-trend": "card.loading() ? \"flat\" : trend()", "attr.data-tone": "card.loading() ? \"neutral\" : resolvedTone()", "attr.hidden": "shown() ? null : \"\"" } }, exportAs: ["slStatCardDelta"], ngImport: i0, template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="3.5em"></span>
+    } @else {
+      <span data-part="indicator" aria-hidden="true"
+        ><span slIcon [directional]="trend() !== 'flat'"
+          ><svg slGlyph [name]="trend() === 'flat' ? 'minus' : 'trending-up'"></svg></span></span
+      ><span slVisuallyHidden>{{ card.t(trend()) }} </span>{{ formatted() }}<ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlVisuallyHidden, selector: "[slVisuallyHidden]", inputs: ["focusable"], exportAs: ["slVisuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardDelta, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slStatCardDelta]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon, SlSkeleton, SlVisuallyHidden],
+                    /* One glyph for a rise and a fall, turned over by the sheet for a fall. */
+                    template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="3.5em"></span>
+    } @else {
+      <span data-part="indicator" aria-hidden="true"
+        ><span slIcon [directional]="trend() !== 'flat'"
+          ><svg slGlyph [name]="trend() === 'flat' ? 'minus' : 'trending-up'"></svg></span></span
+      ><span slVisuallyHidden>{{ card.t(trend()) }} </span>{{ formatted() }}<ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'slStatCardDelta',
+                    host: {
+                        'data-part': 'delta',
+                        '[attr.data-trend]': 'card.loading() ? "flat" : trend()',
+                        '[attr.data-tone]': 'card.loading() ? "neutral" : resolvedTone()',
+                        '[attr.hidden]': 'shown() ? null : ""',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }], goodWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "goodWhen", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+/** The row with the name, a status beside it and an action at the end. */
+class SlStatCardHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardHeader, isStandalone: true, selector: "[slStatCardHeader]", host: { attributes: { "data-part": "header" } }, exportAs: ["slStatCardHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardHeader]',
+                    standalone: true,
+                    exportAs: 'slStatCardHeader',
+                    host: { 'data-part': 'header' },
+                }]
+        }] });
+/**
+ * The name of the metric. It is the element the root is named by, so it
+ * carries the id the root points at; an `id` the consumer wrote wins, and
+ * the root then names nothing, which is the consumer's decision to make.
+ */
+class SlStatCardLabel {
+    card = inject(SlStatCard);
+    ownId = inject(new HostAttributeToken('id'), { optional: true });
+    id = this.ownId ?? this.card.labelId;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardLabel, isStandalone: true, selector: "[slStatCardLabel]", host: { attributes: { "data-part": "label" }, properties: { "attr.id": "id" } }, exportAs: ["slStatCardLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardLabel]',
+                    standalone: true,
+                    exportAs: 'slStatCardLabel',
+                    host: { 'data-part': 'label', '[attr.id]': 'id' },
+                }]
+        }] });
+/** A slot beside the name for a badge or a status indicator. */
+class SlStatCardStatus {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardStatus, isStandalone: true, selector: "[slStatCardStatus]", host: { attributes: { "data-part": "status" } }, exportAs: ["slStatCardStatus"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardStatus]',
+                    standalone: true,
+                    exportAs: 'slStatCardStatus',
+                    host: { 'data-part': 'status' },
+                }]
+        }] });
+/** The place at the end of the header for the consumer's link or button. */
+class SlStatCardAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardAction, isStandalone: true, selector: "[slStatCardAction]", host: { attributes: { "data-part": "action" } }, exportAs: ["slStatCardAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardAction]',
+                    standalone: true,
+                    exportAs: 'slStatCardAction',
+                    host: { 'data-part': 'action' },
+                }]
+        }] });
+/** The value with its unit and its delta on one line, and the comparison under them. */
+class SlStatCardFigure {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardFigure, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardFigure, isStandalone: true, selector: "[slStatCardFigure]", host: { attributes: { "data-part": "figure" } }, exportAs: ["slStatCardFigure"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardFigure, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardFigure]',
+                    standalone: true,
+                    exportAs: 'slStatCardFigure',
+                    host: { 'data-part': 'figure' },
+                }]
+        }] });
+/** The unit, wherever the consumer puts it inside the value: `$` before, `%` after. */
+class SlStatCardUnit {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardUnit, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardUnit, isStandalone: true, selector: "[slStatCardUnit]", host: { attributes: { "data-part": "unit" } }, exportAs: ["slStatCardUnit"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardUnit, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardUnit]',
+                    standalone: true,
+                    exportAs: 'slStatCardUnit',
+                    host: { 'data-part': 'unit' },
+                }]
+        }] });
+class SlStatCardPeriod {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardPeriod, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardPeriod, isStandalone: true, selector: "[slStatCardPeriod]", host: { attributes: { "data-part": "period" } }, exportAs: ["slStatCardPeriod"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardPeriod, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardPeriod]',
+                    standalone: true,
+                    exportAs: 'slStatCardPeriod',
+                    host: { 'data-part': 'period' },
+                }]
+        }] });
+/**
+ * The prose under the figure: what the value was, and the period. Shown
+ * only while there is a value to compare; a placeholder while loading.
+ */
+class SlStatCardComparison {
+    card = inject(SlStatCard);
+    shown = computed(() => this.card.loading() || this.card.status() === 'ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardComparison, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlStatCardComparison, isStandalone: true, selector: "[slStatCardComparison]", host: { attributes: { "data-part": "comparison" }, properties: { "attr.hidden": "shown() ? null : \"\"" } }, exportAs: ["slStatCardComparison"], ngImport: i0, template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="10em"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardComparison, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slStatCardComparison]',
+                    standalone: true,
+                    imports: [SlSkeleton],
+                    template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="10em"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'slStatCardComparison',
+                    host: { 'data-part': 'comparison', '[attr.hidden]': 'shown() ? null : ""' },
+                }]
+        }] });
+/**
+ * Where a sparkline goes. The stylesheet hands it the card's tone and the
+ * card's ground; while loading it holds a block the sparkline's height, so
+ * the card does not change size when the line arrives.
+ */
+class SlStatCardTrend {
+    card = inject(SlStatCard);
+    shown = computed(() => this.card.loading() || this.card.status() === 'ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardTrend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlStatCardTrend, isStandalone: true, selector: "[slStatCardTrend]", host: { attributes: { "data-part": "trend" }, properties: { "attr.hidden": "shown() ? null : \"\"" } }, exportAs: ["slStatCardTrend"], ngImport: i0, template: `@if (card.loading()) {
+      <span slSkeleton shape="block"></span>
+    } @else {
+      <ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardTrend, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slStatCardTrend]',
+                    standalone: true,
+                    imports: [SlSkeleton],
+                    template: `@if (card.loading()) {
+      <span slSkeleton shape="block"></span>
+    } @else {
+      <ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'slStatCardTrend',
+                    host: { 'data-part': 'trend', '[attr.hidden]': 'shown() ? null : ""' },
+                }]
+        }] });
+/** What is said in place of a value that is missing or failed. Shown only then. */
+class SlStatCardMessage {
+    card = inject(SlStatCard);
+    shown = computed(() => !this.card.loading() && this.card.status() !== 'ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlStatCardMessage, isStandalone: true, selector: "[slStatCardMessage]", host: { attributes: { "data-part": "message" }, properties: { "attr.hidden": "shown() ? null : \"\"" } }, exportAs: ["slStatCardMessage"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardMessage, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slStatCardMessage]',
+                    standalone: true,
+                    exportAs: 'slStatCardMessage',
+                    host: { 'data-part': 'message', '[attr.hidden]': 'shown() ? null : ""' },
+                }]
+        }] });
+
+/**
+ * The number. A numeric `value` is formatted with the card's locale and
+ * `formatOptions` — `notation: 'compact'` is how 12,900 becomes 12.9K — and
+ * projected content is the consumer's own rendering, unit and all, after
+ * it. A missing or failed value is the `empty` message, a dash; a loading
+ * one is a placeholder five figures wide, on the value's own line.
+ */
+class SlStatCardValue {
+    /** A number, formatted with the card's locale and `formatOptions`; the text otherwise. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    formatOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    card = inject(SlStatCard);
+    formatted = computed(() => {
+        const value = this.value();
+        if (typeof value !== 'number')
+            return value ?? '';
+        return new Intl.NumberFormat(this.card.resolvedLocale(), this.formatOptions() ?? this.card.resolvedFormatOptions()).format(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlStatCardValue, isStandalone: true, selector: "[slStatCardValue]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "value" } }, exportAs: ["slStatCardValue"], ngImport: i0, template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="5ch"></span>
+    } @else if (card.status() !== 'ready') {
+      {{ card.t('empty') }}
+    } @else {
+      {{ formatted() }}<ng-content />
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlStatCardValue, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slStatCardValue]',
+                    standalone: true,
+                    imports: [SlSkeleton],
+                    template: `@if (card.loading()) {
+      <span slSkeleton inlineSize="5ch"></span>
+    } @else if (card.status() !== 'ready') {
+      {{ card.t('empty') }}
+    } @else {
+      {{ formatted() }}<ng-content />
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'slStatCardValue',
+                    host: { 'data-part': 'value' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STAT_CARD_DEFAULTS_TOKEN, SlStatCard, SlStatCardAction, SlStatCardComparison, SlStatCardDelta, SlStatCardFigure, SlStatCardHeader, SlStatCardLabel, SlStatCardMessage, SlStatCardPeriod, SlStatCardStatus, SlStatCardTrend, SlStatCardUnit, SlStatCardValue, injectStatCardDefaults, provideStatCardDefaults, toneOf, trendOf };
+//# sourceMappingURL=slotted-angular-stat-card.mjs.map