@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-stat.mjs

@@ -0,0 +1,579 @@
+import * as i0 from '@angular/core';
+import { Directive, input, booleanAttribute, viewChild, signal, inject, Injector, afterRenderEffect, computed, ChangeDetectionStrategy, Component, contentChild } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { tv } from 'tailwind-variants';
+import { SkeletonComponent } from '@cdevhub/ngx-tw/skeleton';
+
+// ── Slot marker directives (DOM projection) ───────────────────────────
+/** Label slot — short caption ("Revenue", "Active users"). Projected into `<dt>`. */
+class StatLabelDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StatLabelDirective, isStandalone: true, selector: "[twStatLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twStatLabel]' }]
+        }] });
+/** Value slot — the dominant numeric/text element. Projected into `<dd>`. */
+class StatValueDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StatValueDirective, isStandalone: true, selector: "[twStatValue]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatValueDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twStatValue]' }]
+        }] });
+/** Description slot — optional secondary text under the value. Projected into a second `<dd>`. */
+class StatDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StatDescriptionDirective, isStandalone: true, selector: "[twStatDescription]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twStatDescription]' }]
+        }] });
+/** Icon slot — optional leading icon. Triggers the icon-leading layout. */
+class StatIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StatIconDirective, isStandalone: true, selector: "[twStatIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twStatIcon]' }]
+        }] });
+/** Footer slot — optional auxiliary region (sparklines, tags, metadata). Always renders, even during loading. */
+class StatFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: StatFooterDirective, isStandalone: true, selector: "[twStatFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twStatFooter]' }]
+        }] });
+// ── Stat tile tv() config ─────────────────────────────────────────────
+const statTile = tv({
+    slots: {
+        root: 'block text-fg',
+        iconFlex: 'flex items-start gap-3',
+        iconWrapper: 'shrink-0 text-fg-muted',
+        contentStack: 'min-w-0 flex-1',
+        dl: 'flex flex-col',
+        label: 'text-fg-muted font-medium',
+        valueRow: 'flex items-baseline gap-2 flex-wrap',
+        value: 'text-fg block tabular-nums font-semibold',
+        description: 'text-fg-muted',
+        delta: 'inline-flex items-center',
+        footer: 'mt-3 pt-3 border-t border-border',
+    },
+    variants: {
+        variant: {
+            plain: { root: 'bg-transparent' },
+            outlined: { root: 'bg-surface border border-border rounded-lg' },
+            elevated: {
+                root: 'bg-surface-raised border border-border rounded-lg shadow hover:shadow-md transition-shadow duration-200 motion-reduce:transition-none',
+            },
+            filled: { root: 'bg-surface-muted rounded-lg' },
+        },
+        size: {
+            xs: {
+                root: 'p-2',
+                dl: 'gap-1',
+                label: 'text-2xs',
+                value: 'text-xs',
+                description: 'text-2xs',
+                delta: 'mt-1',
+            },
+            sm: {
+                root: 'p-3',
+                dl: 'gap-1',
+                label: 'text-xs',
+                value: 'text-sm',
+                description: 'text-xs',
+                delta: 'mt-1',
+            },
+            md: {
+                root: 'p-4',
+                dl: 'gap-1.5',
+                label: 'text-xs',
+                value: 'text-base',
+                description: 'text-xs',
+                delta: 'mt-1',
+            },
+            // lg/xl `value` uses `text-base` per the KPI-value carve-out
+            // (CLAUDE.md typography). The dominant numeric needs to outrank the
+            // `text-sm` label/description in visual hierarchy.
+            lg: {
+                root: 'p-6',
+                dl: 'gap-2',
+                label: 'text-sm',
+                value: 'text-base font-bold',
+                description: 'text-sm',
+                delta: 'mt-2',
+            },
+            xl: {
+                root: 'p-8',
+                dl: 'gap-2',
+                label: 'text-sm',
+                value: 'text-base font-extrabold',
+                description: 'text-sm',
+                delta: 'mt-2',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'outlined',
+        size: 'md',
+    },
+}, { twMerge: true });
+// ── Delta tv() config ─────────────────────────────────────────────────
+const statDelta = tv({
+    slots: {
+        root: 'relative inline-flex items-center gap-1 font-medium tabular-nums',
+        icon: 'shrink-0',
+        text: 'inline-flex items-center',
+        comparison: 'text-fg-muted',
+    },
+    variants: {
+        variant: {
+            badge: {
+                root: 'px-2 py-0.5 rounded-md text-xs',
+            },
+            inline: {
+                root: 'text-xs',
+            },
+            'icon-only': {
+                // size-6 (24px) — square interactive-target scale at xs density per
+                // CLAUDE.md icon sub-scale; here it just centres the chevron.
+                root: 'justify-center size-6 rounded-md',
+                // Text and comparison stay in the DOM so the composed aria-label
+                // still picks them up; `sr-only` removes them visually.
+                text: 'sr-only',
+                comparison: 'sr-only',
+            },
+        },
+        effectiveColor: {
+            success: {},
+            error: {},
+            neutral: {},
+        },
+    },
+    compoundVariants: [
+        // ===== badge (soft chip) =====
+        {
+            variant: 'badge',
+            effectiveColor: 'success',
+            class: { root: 'bg-success-soft text-success-soft-fg' },
+        },
+        {
+            variant: 'badge',
+            effectiveColor: 'error',
+            class: { root: 'bg-error-soft text-error-soft-fg' },
+        },
+        // Neutral pinned explicitly to surface/fg tokens (advisor: never use
+        // `text-neutral-700` or template through neutral via -soft-fg chain).
+        {
+            variant: 'badge',
+            effectiveColor: 'neutral',
+            class: { root: 'bg-surface-muted text-fg-muted' },
+        },
+        // ===== inline (no chip) =====
+        {
+            variant: 'inline',
+            effectiveColor: 'success',
+            class: { root: 'text-success-700' },
+        },
+        {
+            variant: 'inline',
+            effectiveColor: 'error',
+            class: { root: 'text-error-700' },
+        },
+        {
+            variant: 'inline',
+            effectiveColor: 'neutral',
+            class: { root: 'text-fg-muted' },
+        },
+        // ===== icon-only =====
+        {
+            variant: 'icon-only',
+            effectiveColor: 'success',
+            class: { root: 'bg-success-soft text-success-soft-fg' },
+        },
+        {
+            variant: 'icon-only',
+            effectiveColor: 'error',
+            class: { root: 'bg-error-soft text-error-soft-fg' },
+        },
+        {
+            variant: 'icon-only',
+            effectiveColor: 'neutral',
+            class: { root: 'bg-surface-muted text-fg-muted' },
+        },
+    ],
+    defaultVariants: {
+        variant: 'badge',
+        effectiveColor: 'neutral',
+    },
+}, { twMerge: true });
+// ── Stat delta component ──────────────────────────────────────────────
+/**
+ * Compact trend indicator — direction + projected delta text + optional
+ * comparison label. Usable standalone or projected into a `<tw-stat>` tile.
+ *
+ * Sentiment is conveyed by both icon direction and color; consumers running
+ * "lower is better" metrics (bounce rate, latency, churn) set `inverted` to
+ * swap the success/error color mapping without changing the literal direction
+ * or the announced verb.
+ */
+class StatDeltaComponent {
+    /** Direction of change. `'up'` renders an up-chevron and (by default) the `success` color; `'down'` renders a down-chevron and the `error` color; `'neutral'` renders a horizontal-line glyph and the neutral color. Defaults to `'neutral'`. */
+    direction = input('neutral', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** When true, swaps success/error semantics so `down` reads as success and `up` reads as error — use for metrics where lower is better (bounce rate, error rate, latency, churn). `neutral` direction is unaffected. Defaults to `false`. */
+    inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Display style. `'badge'` (default) wraps the delta in a pill chip; `'inline'` is icon + text only with no chip; `'icon-only'` shows just the chevron for ultra-dense layouts. */
+    variant = input('badge', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Optional comparison label rendered next to the delta value (e.g. `"vs last week"`, `"since launch"`). Defaults to `undefined`. */
+    comparisonLabel = input(...(ngDevMode ? [undefined, { debugName: "comparisonLabel" }] : /* istanbul ignore next */ []));
+    /** Explicit accessible label. When omitted, the component composes one from `direction` + projected text + `comparisonLabel`. Override when projected content is purely symbolic or already localized. Defaults to `undefined`. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    textEl = viewChild('textEl', ...(ngDevMode ? [{ debugName: "textEl" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    projectedText = signal('', ...(ngDevMode ? [{ debugName: "projectedText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const injector = inject(Injector);
+        // Read the projected text via the wrapper span's textContent. textContent
+        // is recursive across projected children, so this resolves the consumer's
+        // string even when wrapped in arbitrary markup. afterRenderEffect runs
+        // after each render so projection changes are captured.
+        afterRenderEffect(() => {
+            const el = this.textEl()?.nativeElement;
+            if (!el) {
+                this.projectedText.set('');
+                return;
+            }
+            const text = (el.textContent ?? '').trim();
+            this.projectedText.set(text);
+        }, { injector });
+    }
+    /** @internal */
+    effectiveColor = computed(() => {
+        const dir = this.direction();
+        if (dir === 'neutral')
+            return 'neutral';
+        const inv = this.inverted();
+        if (dir === 'up')
+            return inv ? 'error' : 'success';
+        return inv ? 'success' : 'error';
+    }, ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    iconSizeClass = computed(() => {
+        // Glyph sub-scale: size-3 (12px) at the badge/inline xs/sm density,
+        // size-4 (16px) at md+. The delta lives inside text-xs, so size-3 holds.
+        // Larger contexts (md / lg / xl on the parent tile) get size-4.
+        return this.variant() === 'icon-only' ? 'size-4' : 'size-3';
+    }, ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    composedAriaLabel = computed(() => {
+        const explicit = this.ariaLabel();
+        if (explicit)
+            return explicit;
+        const dir = this.direction();
+        const verb = dir === 'up' ? 'increased' : dir === 'down' ? 'decreased' : 'unchanged';
+        const text = this.projectedText();
+        const comp = this.comparisonLabel();
+        const parts = [];
+        if (text) {
+            parts.push(`${verb} by ${text}`);
+        }
+        else {
+            parts.push(verb);
+        }
+        if (comp)
+            parts.push(comp);
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "composedAriaLabel" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => statDelta({ variant: this.variant(), effectiveColor: this.effectiveColor() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    textClasses = computed(() => this.variantResult().text(), ...(ngDevMode ? [{ debugName: "textClasses" }] : /* istanbul ignore next */ []));
+    comparisonClasses = computed(() => this.variantResult().comparison(), ...(ngDevMode ? [{ debugName: "comparisonClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StatDeltaComponent, isStandalone: true, selector: "tw-stat-delta", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, comparisonLabel: { classPropertyName: "comparisonLabel", publicName: "comparisonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "rootClasses()", "attr.aria-label": "composedAriaLabel()" } }, viewQueries: [{ propertyName: "textEl", first: true, predicate: ["textEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <svg
+      [class]="iconClasses() + ' ' + iconSizeClass()"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      @switch (direction()) {
+        @case ('up') { <path d="M4 10l4-4 4 4" /> }
+        @case ('down') { <path d="M4 6l4 4 4-4" /> }
+        @default { <path d="M3 8h10" /> }
+      }
+    </svg>
+    <span #textEl [class]="textClasses()"><ng-content /></span>
+    @if (comparisonLabel(); as comp) {
+      <span [class]="comparisonClasses()">{{ comp }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatDeltaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-stat-delta',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'img',
+                        '[class]': 'rootClasses()',
+                        '[attr.aria-label]': 'composedAriaLabel()',
+                    },
+                    template: `
+    <svg
+      [class]="iconClasses() + ' ' + iconSizeClass()"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      @switch (direction()) {
+        @case ('up') { <path d="M4 10l4-4 4 4" /> }
+        @case ('down') { <path d="M4 6l4 4 4-4" /> }
+        @default { <path d="M3 8h10" /> }
+      }
+    </svg>
+    <span #textEl [class]="textClasses()"><ng-content /></span>
+    @if (comparisonLabel(); as comp) {
+      <span [class]="comparisonClasses()">{{ comp }}</span>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], comparisonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], textEl: [{ type: i0.ViewChild, args: ['textEl', { isSignal: true }] }] } });
+// ── Stat tile component ───────────────────────────────────────────────
+/**
+ * KPI tile — a compact display tile surfacing a single key performance
+ * indicator with an optional trend delta. Composes a `<dl>` / `<dt>` / `<dd>`
+ * definition list internally so the label-to-value pairing is announced
+ * naturally by assistive technology.
+ *
+ * Slots:
+ * - `[twStatLabel]` — caption (rendered as `<dt>`).
+ * - `[twStatValue]` — dominant value (rendered as `<dd>`).
+ * - `[twStatDescription]` — optional secondary text (second `<dd>`).
+ * - `[twStatIcon]` — optional leading icon (switches to icon-leading layout).
+ * - `[twStatFooter]` — optional auxiliary region (sparklines, tags).
+ * - `<tw-stat-delta>` — projected trend indicator alongside the value.
+ *
+ * Loading state replaces label/value/delta with `<tw-skeleton>` placeholders
+ * sized to match the density. Footer always renders during loading so
+ * consumers can compose their own skeleton charts.
+ */
+class StatComponent {
+    /** Surface treatment. `'plain'` removes border and background; `'outlined'` (default) adds a border on the surface token; `'elevated'` adds shadow and uses the raised surface; `'filled'` uses the muted surface with no border. */
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Density scale — drives padding, internal gaps, value/label typography, and the skeleton placeholder dimensions. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, replaces label, value, and delta regions with `<tw-skeleton>` placeholders and toggles `aria-busy="true"` on the host. Projected footer content still renders. Defaults to `false`. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** @internal */
+    labelSlot = contentChild(StatLabelDirective, ...(ngDevMode ? [{ debugName: "labelSlot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    valueSlot = contentChild(StatValueDirective, ...(ngDevMode ? [{ debugName: "valueSlot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    descriptionSlot = contentChild(StatDescriptionDirective, ...(ngDevMode ? [{ debugName: "descriptionSlot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    iconSlot = contentChild(StatIconDirective, ...(ngDevMode ? [{ debugName: "iconSlot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    footerSlot = contentChild(StatFooterDirective, ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    deltaSlot = contentChild(StatDeltaComponent, ...(ngDevMode ? [{ debugName: "deltaSlot" }] : /* istanbul ignore next */ []));
+    hasLabel = computed(() => !!this.labelSlot(), ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => !!this.valueSlot(), ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    hasDescription = computed(() => !!this.descriptionSlot(), ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    hasIcon = computed(() => !!this.iconSlot(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    hasFooter = computed(() => !!this.footerSlot(), ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    hasDelta = computed(() => !!this.deltaSlot(), ...(ngDevMode ? [{ debugName: "hasDelta" }] : /* istanbul ignore next */ []));
+    iconLeading = computed(() => this.hasIcon(), ...(ngDevMode ? [{ debugName: "iconLeading" }] : /* istanbul ignore next */ []));
+    /** Skeleton width during loading state — scales with the size axis. */
+    loadingValueWidth = computed(() => {
+        switch (this.size()) {
+            case 'xs': return '4rem';
+            case 'sm': return '5rem';
+            case 'md': return '6rem';
+            case 'lg': return '8rem';
+            case 'xl': return '10rem';
+        }
+    }, ...(ngDevMode ? [{ debugName: "loadingValueWidth" }] : /* istanbul ignore next */ []));
+    /** Skeleton height during loading state — matches the value font size. */
+    loadingValueHeight = computed(() => {
+        switch (this.size()) {
+            case 'xs': return '0.75rem';
+            case 'sm': return '0.875rem';
+            case 'md': return '1rem';
+            case 'lg': return '1rem';
+            case 'xl': return '1rem';
+        }
+    }, ...(ngDevMode ? [{ debugName: "loadingValueHeight" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => statTile({ variant: this.variant(), size: this.size() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    iconFlexClasses = computed(() => this.variantResult().iconFlex(), ...(ngDevMode ? [{ debugName: "iconFlexClasses" }] : /* istanbul ignore next */ []));
+    iconWrapperClasses = computed(() => this.variantResult().iconWrapper(), ...(ngDevMode ? [{ debugName: "iconWrapperClasses" }] : /* istanbul ignore next */ []));
+    contentStackClasses = computed(() => this.variantResult().contentStack(), ...(ngDevMode ? [{ debugName: "contentStackClasses" }] : /* istanbul ignore next */ []));
+    dlClasses = computed(() => this.variantResult().dl(), ...(ngDevMode ? [{ debugName: "dlClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => this.variantResult().label(), ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    valueRowClasses = computed(() => this.variantResult().valueRow(), ...(ngDevMode ? [{ debugName: "valueRowClasses" }] : /* istanbul ignore next */ []));
+    valueClasses = computed(() => this.variantResult().value(), ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
+    descriptionClasses = computed(() => this.variantResult().description(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    deltaClasses = computed(() => this.variantResult().delta(), ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => this.variantResult().footer(), ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StatComponent, isStandalone: true, selector: "tw-stat", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite" }, properties: { "class": "rootClasses()", "attr.aria-busy": "loading() ? \"true\" : null" } }, queries: [{ propertyName: "labelSlot", first: true, predicate: StatLabelDirective, descendants: true, isSignal: true }, { propertyName: "valueSlot", first: true, predicate: StatValueDirective, descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: StatDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "iconSlot", first: true, predicate: StatIconDirective, descendants: true, isSignal: true }, { propertyName: "footerSlot", first: true, predicate: StatFooterDirective, descendants: true, isSignal: true }, { propertyName: "deltaSlot", first: true, predicate: StatDeltaComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (iconLeading()) {
+      <div [class]="iconFlexClasses()">
+        <div [class]="iconWrapperClasses()">
+          <ng-content select="[twStatIcon]" />
+        </div>
+        <div [class]="contentStackClasses()">
+          <ng-container [ngTemplateOutlet]="dlBlock" />
+        </div>
+      </div>
+    } @else {
+      <ng-container [ngTemplateOutlet]="dlBlock" />
+    }
+
+    @if (hasFooter()) {
+      <div [class]="footerClasses()">
+        <ng-content select="[twStatFooter]" />
+      </div>
+    }
+
+    <ng-template #dlBlock>
+      <dl [class]="dlClasses()">
+        @if (loading()) {
+          <dt [class]="labelClasses()">
+            <tw-skeleton width="40%" height="0.75rem" />
+          </dt>
+        } @else if (hasLabel()) {
+          <dt [class]="labelClasses()">
+            <ng-content select="[twStatLabel]" />
+          </dt>
+        }
+
+        <dd [class]="valueRowClasses()">
+          @if (loading()) {
+            <tw-skeleton [width]="loadingValueWidth()" [height]="loadingValueHeight()" />
+          } @else if (hasValue()) {
+            <span [class]="valueClasses()">
+              <ng-content select="[twStatValue]" />
+            </span>
+          }
+
+          @if (loading()) {
+            <span [class]="deltaClasses()">
+              <tw-skeleton width="3rem" height="1.25rem" />
+            </span>
+          } @else if (hasDelta()) {
+            <span [class]="deltaClasses()">
+              <ng-content select="tw-stat-delta" />
+            </span>
+          }
+        </dd>
+
+        @if (!loading() && hasDescription()) {
+          <dd [class]="descriptionClasses()">
+            <ng-content select="[twStatDescription]" />
+          </dd>
+        }
+      </dl>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkeletonComponent, selector: "tw-skeleton", inputs: ["shape", "animation", "width", "height", "lines", "announce"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-stat',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SkeletonComponent, NgTemplateOutlet],
+                    host: {
+                        '[class]': 'rootClasses()',
+                        // Permanent live region — `aria-busy` toggle alone signals state change
+                        // so assistive tech announces the resolved content on loading→loaded
+                        // without the live region being torn down mid-transition.
+                        'aria-live': 'polite',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    },
+                    template: `
+    @if (iconLeading()) {
+      <div [class]="iconFlexClasses()">
+        <div [class]="iconWrapperClasses()">
+          <ng-content select="[twStatIcon]" />
+        </div>
+        <div [class]="contentStackClasses()">
+          <ng-container [ngTemplateOutlet]="dlBlock" />
+        </div>
+      </div>
+    } @else {
+      <ng-container [ngTemplateOutlet]="dlBlock" />
+    }
+
+    @if (hasFooter()) {
+      <div [class]="footerClasses()">
+        <ng-content select="[twStatFooter]" />
+      </div>
+    }
+
+    <ng-template #dlBlock>
+      <dl [class]="dlClasses()">
+        @if (loading()) {
+          <dt [class]="labelClasses()">
+            <tw-skeleton width="40%" height="0.75rem" />
+          </dt>
+        } @else if (hasLabel()) {
+          <dt [class]="labelClasses()">
+            <ng-content select="[twStatLabel]" />
+          </dt>
+        }
+
+        <dd [class]="valueRowClasses()">
+          @if (loading()) {
+            <tw-skeleton [width]="loadingValueWidth()" [height]="loadingValueHeight()" />
+          } @else if (hasValue()) {
+            <span [class]="valueClasses()">
+              <ng-content select="[twStatValue]" />
+            </span>
+          }
+
+          @if (loading()) {
+            <span [class]="deltaClasses()">
+              <tw-skeleton width="3rem" height="1.25rem" />
+            </span>
+          } @else if (hasDelta()) {
+            <span [class]="deltaClasses()">
+              <ng-content select="tw-stat-delta" />
+            </span>
+          }
+        </dd>
+
+        @if (!loading() && hasDescription()) {
+          <dd [class]="descriptionClasses()">
+            <ng-content select="[twStatDescription]" />
+          </dd>
+        }
+      </dl>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], labelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatLabelDirective), { isSignal: true }] }], valueSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatValueDirective), { isSignal: true }] }], descriptionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatDescriptionDirective), { isSignal: true }] }], iconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatIconDirective), { isSignal: true }] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatFooterDirective), { isSignal: true }] }], deltaSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StatDeltaComponent), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatComponent, StatDeltaComponent, StatDescriptionDirective, StatFooterDirective, StatIconDirective, StatLabelDirective, StatValueDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-stat.mjs.map