@joanroucoux/cairn-ui 0.1.0

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -0,0 +1,806 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, output, inject, ElementRef, effect, afterRenderEffect, Directive, model, viewChildren, booleanAttribute } from '@angular/core';
+
+/** Available avatar sizes. `AvatarSize` is derived from this tuple. */
+const AVATAR_SIZES = ['sm', 'md'];
+const BASE_CLASSES$4 = 'inline-flex items-center justify-center rounded-full border border-(--primary) bg-(--soft) font-semibold tabular-nums text-(--primary)';
+const SIZE_CLASSES$1 = {
+    sm: 'size-8 text-xs',
+    md: 'size-11 text-sm',
+};
+/**
+ * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
+ *
+ * @example
+ * <ui-avatar initials="JR" label="My account" />
+ */
+class UiAvatar {
+    initials = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$4} ${SIZE_CLASSES$1[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: UiAvatar, isStandalone: true, selector: "ui-avatar", inputs: { initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "label()", "class": "classes()" } }, ngImport: i0, template: '<span aria-hidden="true">{{ initials() }}</span>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiAvatar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-avatar',
+                    template: '<span aria-hidden="true">{{ initials() }}</span>',
+                    host: {
+                        role: 'img',
+                        '[attr.aria-label]': 'label()',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/** Available badge variants. `BadgeVariant` is derived from this tuple. */
+const BADGE_VARIANTS = ['primary', 'secondary', 'destructive', 'outline'];
+const BASE_CLASSES$3 = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium';
+const VARIANT_CLASSES$2 = {
+    primary: 'bg-(--primary) text-(--primary-foreground)',
+    secondary: 'bg-(--secondary) text-(--secondary-foreground)',
+    destructive: 'bg-(--destructive) text-(--destructive-foreground)',
+    outline: 'border border-(--border) text-(--foreground)',
+};
+/**
+ * Small status descriptor for counts, states or labels.
+ *
+ * @example
+ * <ui-badge variant="secondary">Draft</ui-badge>
+ */
+class UiBadge {
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: UiBadge, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-badge',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/** Available button variants. `ButtonVariant` is derived from this tuple. */
+const BUTTON_VARIANTS = ['primary', 'secondary', 'outline', 'destructive', 'ghost'];
+/** Available button sizes. `md` is the 44px touch target Cairn asks for everywhere. */
+const BUTTON_SIZES = ['sm', 'md', 'lg'];
+const BASE_CLASSES$2 = 
+// Tailwind's preflight sets buttons to cursor: default (matching the native element) since v3.4:
+// cursor-pointer restores the hand cursor consumers expect from a clickable control.
+'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) disabled:pointer-events-none disabled:opacity-50';
+const VARIANT_CLASSES$1 = {
+    primary: 'bg-(--primary) bg-linear-135 from-(--primary) to-(--primary-to) text-(--primary-foreground) hover:opacity-90',
+    secondary: 'bg-(--secondary) text-(--secondary-foreground) hover:bg-(--secondary)/80',
+    outline: 'border border-(--border) bg-transparent hover:bg-(--soft)',
+    destructive: 'bg-(--destructive) text-(--destructive-foreground) hover:bg-(--destructive)/90',
+    ghost: 'hover:bg-(--accent) hover:text-(--accent-foreground)',
+};
+const SIZE_CLASSES = {
+    sm: 'h-9 px-3 text-[13px]',
+    md: 'h-11 px-4 text-sm',
+    lg: 'h-12 px-6 text-base',
+};
+/**
+ * Styled native button. Applied as an attribute so the host keeps every native
+ * button behavior (type, disabled, form submission, accessibility) for free.
+ *
+ * Also applies to an anchor, for the one case where the action really is a navigation:
+ * a download the browser has to perform itself. The element stays a link, and so does
+ * its role - never use this to make an ordinary link look like a form control.
+ *
+ * @example
+ * <button ui-button variant="destructive" size="sm">Delete</button>
+ * <a ui-button variant="outline" href="/api/holdings/export" download>Export</a>
+ */
+class UiButton {
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$2} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: UiButton, isStandalone: true, selector: "button[ui-button], a[ui-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[ui-button], a[ui-button]',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/** Available card variants. `CardVariant` is derived from this tuple. */
+const CARD_VARIANTS = ['default', 'elevated'];
+/** Available card paddings. `CardPadding` is derived from this tuple. */
+const CARD_PADDINGS = ['none', 'sm', 'md'];
+const BASE_CLASSES$1 = 'block rounded-xl border';
+const VARIANT_CLASSES = {
+    default: 'bg-(--card) border-(--border) text-(--card-foreground)',
+    elevated: 'bg-(--elevated) border-(--hairline) text-(--foreground)',
+};
+const PADDING_CLASSES = {
+    none: 'p-0',
+    sm: 'p-3',
+    md: 'p-5',
+};
+/**
+ * Surface that groups related content: a summary block, a table, a side panel.
+ *
+ * @example
+ * <ui-card variant="elevated" padding="sm">Total</ui-card>
+ */
+class UiCard {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    padding = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$1} ${VARIANT_CLASSES[this.variant()]} ${PADDING_CLASSES[this.padding()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
+/** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
+const DELTA_EMPHASES = ['text', 'pill'];
+const BASE_CLASSES = 'inline-flex items-center gap-1 font-semibold tabular-nums';
+const PILL_CLASSES = 'rounded-md px-2.5 py-1';
+const TEXT_CLASSES = {
+    positive: 'text-(--positive)',
+    negative: 'text-(--negative)',
+    neutral: 'text-(--muted-foreground)',
+    unknown: 'text-(--subtle-foreground)',
+};
+const PILL_BACKGROUND_CLASS = 'bg-(--muted)';
+/**
+ * Signed amount whose sign carries meaning: a gain, a loss, or an unknown.
+ *
+ * A null value is not a zero: a holding with no cost basis exists, and showing 0 would falsely
+ * claim a known gain of zero. Color never carries the sign on its own: the projected text must
+ * already contain a + or a minus sign.
+ *
+ * @example
+ * <ui-delta [value]="holding.dayChangeEur" unknownLabel="Not available">
+ *   {{ holding.dayChangeEur | signedMoney }}
+ * </ui-delta>
+ */
+class UiDelta {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    unknownLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unknownLabel" }] : /* istanbul ignore next */ []));
+    emphasis = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []));
+    sign = computed(() => {
+        const value = this.value();
+        if (value === null || value === undefined) {
+            return 'unknown';
+        }
+        if (value > 0) {
+            return 'positive';
+        }
+        if (value < 0) {
+            return 'negative';
+        }
+        return 'neutral';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sign" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const sign = this.sign();
+        const background = this.emphasis() === 'pill' ? `${PILL_CLASSES} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
+        return `${BASE_CLASSES} ${TEXT_CLASSES[sign]} ${background}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiDelta, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UiDelta, isStandalone: true, selector: "ui-delta", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unknownLabel: { classPropertyName: "unknownLabel", publicName: "unknownLabel", isSignal: true, isRequired: true, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    @if (sign() === 'unknown') {
+      <span aria-hidden="true">&mdash;</span>
+      <span class="sr-only">{{ unknownLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiDelta, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-delta',
+                    template: `
+    @if (sign() === 'unknown') {
+      <span aria-hidden="true">&mdash;</span>
+      <span class="sr-only">{{ unknownLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unknownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unknownLabel", required: true }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }] } });
+
+/** Available dialog widths. `DialogWidth` is derived from this tuple. */
+const DIALOG_WIDTHS = ['md', 'lg'];
+const WIDTH_CLASSES = {
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+};
+const nextId$1 = (() => {
+    let count = 0;
+    return () => `ui-dialog-${++count}`;
+})();
+/**
+ * Modal dialog on the native <dialog>: focus trap, focus return, Escape and the top layer
+ * come from the platform. Two projection slots - the body, and [dialogActions] for the footer.
+ *
+ * @example
+ * <ui-dialog heading="Delete this holding?" [open]="confirming()" (dismissed)="confirming.set(false)">
+ *   <p>This cannot be undone.</p>
+ *   <button dialogActions ui-button variant="outline" (click)="confirming.set(false)">Cancel</button>
+ * </ui-dialog>
+ */
+class UiDialog {
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    width = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    open = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    headingId = nextId$1();
+    descriptionId = `${this.headingId}-description`;
+    classes = computed(() => `w-full ${WIDTH_CLASSES[this.width()]} rounded-xl border border-(--border) bg-(--card) p-6 text-(--foreground) backdrop:bg-black/60`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            // viewChild.required can't target a #private field (NG1053); safe because the template has exactly one <dialog>.
+            const dialog = this.#host.nativeElement.querySelector('dialog');
+            if (this.open() && !dialog.open) {
+                dialog.showModal();
+            }
+            else if (!this.open() && dialog.open) {
+                dialog.close();
+            }
+        });
+    }
+    onNativeClose() {
+        // The owner already knows about a close it asked for; only a close it did not ask for is news.
+        if (this.open()) {
+            this.dismissed.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    <dialog
+      [attr.aria-describedby]="description() ? descriptionId : null"
+      [attr.aria-labelledby]="headingId"
+      [class]="classes()"
+      (close)="onNativeClose()"
+    >
+      <h2 class="text-lg font-semibold tracking-tight" [id]="headingId">{{ heading() }}</h2>
+
+      @if (description()) {
+        <p class="mt-2 text-sm text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+      }
+
+      <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
+      <div class="mt-4 flex flex-col gap-4 empty:hidden">
+        <ng-content />
+      </div>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <ng-content select="[dialogActions]" />
+      </div>
+    </dialog>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-dialog',
+                    template: `
+    <dialog
+      [attr.aria-describedby]="description() ? descriptionId : null"
+      [attr.aria-labelledby]="headingId"
+      [class]="classes()"
+      (close)="onNativeClose()"
+    >
+      <h2 class="text-lg font-semibold tracking-tight" [id]="headingId">{{ heading() }}</h2>
+
+      @if (description()) {
+        <p class="mt-2 text-sm text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+      }
+
+      <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
+      <div class="mt-4 flex flex-col gap-4 empty:hidden">
+        <ng-content />
+      </div>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <ng-content select="[dialogActions]" />
+      </div>
+    </dialog>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-field-${++count}`;
+})();
+/**
+ * Label, control, hint and error as one unit. The control stays a plain native element:
+ * the field finds it in its own projected content and wires the ARIA attributes onto it.
+ *
+ * @example
+ * <ui-field label="Quantity" hint="Leave empty if unknown">
+ *   <input uiInput type="number" />
+ * </ui-field>
+ */
+class UiField {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    #id = nextId();
+    hintId = `${this.#id}-hint`;
+    errorId = `${this.#id}-error`;
+    #host = inject(ElementRef);
+    constructor() {
+        afterRenderEffect(() => {
+            // querySelector, not viewChild.required, so the "no control found" guard below stays reachable and testable.
+            const control = this.#host.nativeElement.querySelector('input, select, textarea');
+            if (!control) {
+                return;
+            }
+            control.id ||= this.#id;
+            this.#host.nativeElement.querySelector('label').htmlFor = control.id;
+            const describedBy = [this.hint() ? this.hintId : null, this.error() ? this.errorId : null].filter(Boolean);
+            if (describedBy.length > 0) {
+                control.setAttribute('aria-describedby', describedBy.join(' '));
+            }
+            else {
+                control.removeAttribute('aria-describedby');
+            }
+            if (this.error()) {
+                control.setAttribute('aria-invalid', 'true');
+            }
+            else {
+                control.removeAttribute('aria-invalid');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UiField, isStandalone: true, selector: "ui-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="flex flex-col gap-1.5">
+      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- htmlFor is wired at runtime, once the projected control's id is known -->
+      <label class="text-[13px] font-medium text-(--foreground)">{{ label() }}</label>
+
+      <ng-content />
+
+      @if (hint()) {
+        <span class="text-[11.5px] text-(--subtle-foreground)" [id]="hintId">{{ hint() }}</span>
+      }
+
+      @if (error()) {
+        <p class="text-[11.5px] text-(--negative)" role="alert" [id]="errorId">{{ error() }}</p>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-field',
+                    template: `
+    <div class="flex flex-col gap-1.5">
+      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- htmlFor is wired at runtime, once the projected control's id is known -->
+      <label class="text-[13px] font-medium text-(--foreground)">{{ label() }}</label>
+
+      <ng-content />
+
+      @if (hint()) {
+        <span class="text-[11.5px] text-(--subtle-foreground)" [id]="hintId">{{ hint() }}</span>
+      }
+
+      @if (error()) {
+        <p class="text-[11.5px] text-(--negative)" role="alert" [id]="errorId">{{ error() }}</p>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
+/** Available control sizes. `md` is the 44px touch target. */
+const CONTROL_SIZES = ['sm', 'md'];
+const CONTROL_BASE_CLASSES = 'w-full rounded-md border border-(--border) bg-transparent px-3 text-sm text-(--foreground) transition-colors placeholder:text-(--muted-foreground) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) disabled:cursor-not-allowed disabled:opacity-50';
+const CONTROL_SIZE_CLASSES = {
+    sm: 'h-9',
+    md: 'h-11',
+};
+/**
+ * Styled native text input. A directive (not a wrapper component) so the host
+ * stays a plain <input>: every forms flavor (ngModel, reactive, signal forms)
+ * and every native attribute keep working without any plumbing.
+ *
+ * @example
+ * <input uiInput type="email" placeholder="you@example.com" />
+ */
+class UiInput {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${CONTROL_BASE_CLASSES} ${CONTROL_SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: UiInput, isStandalone: true, selector: "input[uiInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[uiInput]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/**
+ * Styled native textarea. Lives beside the input because it shares every one of its
+ * classes; it takes no size, since a textarea grows from a floor instead of sitting
+ * at a fixed height.
+ *
+ * @example
+ * <textarea uiTextarea maxlength="280"></textarea>
+ */
+class UiTextarea {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: UiTextarea, isStandalone: true, selector: "textarea[uiTextarea]", host: { classAttribute: "w-full rounded-md border border-(--border) bg-transparent px-3 text-sm text-(--foreground) transition-colors placeholder:text-(--muted-foreground) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) disabled:cursor-not-allowed disabled:opacity-50 min-h-24 py-2" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTextarea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[uiTextarea]',
+                    host: {
+                        class: `${CONTROL_BASE_CLASSES} min-h-24 py-2`,
+                    },
+                }]
+        }] });
+
+/** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
+const METER_TONES = [1, 2, 3, 4, 5, 6];
+const TONE_CLASSES = {
+    1: 'bg-(--ramp-1)',
+    2: 'bg-(--ramp-2)',
+    3: 'bg-(--ramp-3)',
+    4: 'bg-(--ramp-4)',
+    5: 'bg-(--ramp-5)',
+    6: 'bg-(--ramp-6)',
+};
+/**
+ * Proportion of a whole, drawn as a single bar. One bar per category, never a stacked
+ * strip: without hue to separate segments, length has to do the work alone.
+ *
+ * @example
+ * <ui-meter [value]="0.463" label="Funds" valueText="46.3% - 128,656.00 EUR" [tone]="1" />
+ */
+class UiMeter {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    valueText = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    tone = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    fillClasses = computed(() => `h-full rounded-sm ${TONE_CLASSES[this.tone()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: UiMeter, isStandalone: true, selector: "ui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="h-2.5 w-full overflow-hidden rounded-sm bg-(--elevated)"
+      role="meter"
+      [attr.aria-label]="label()"
+      [attr.aria-valuemax]="1"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuetext]="valueText()"
+    >
+      <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiMeter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-meter',
+                    template: `
+    <div
+      class="h-2.5 w-full overflow-hidden rounded-sm bg-(--elevated)"
+      role="meter"
+      [attr.aria-label]="label()"
+      [attr.aria-valuemax]="1"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuetext]="valueText()"
+    >
+      <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+const OPTION_CLASSES = 'min-h-11 flex-1 cursor-pointer rounded-md px-3 text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
+const SELECTED_CLASSES = 'bg-(--primary) bg-linear-135 from-(--primary) to-(--primary-to) text-(--primary-foreground)';
+const UNSELECTED_CLASSES = 'bg-(--elevated) text-(--muted-foreground) hover:text-(--foreground)';
+/**
+ * Exclusive choice within a small, known set: a time range, a unit, a mode.
+ *
+ * @example
+ * <ui-segmented [options]="ranges" label="Time range" [(value)]="range" />
+ */
+class UiSegmented {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    radios = viewChildren('radio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
+    optionClasses(optionValue) {
+        return `${OPTION_CLASSES} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
+    }
+    tabIndexFor(optionValue) {
+        const opts = this.options();
+        const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;
+        return optionValue === tabStopValue ? 0 : -1;
+    }
+    select(optionValue) {
+        this.value.set(optionValue);
+    }
+    onKeydown(event) {
+        const delta = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+        if (delta === undefined) {
+            return;
+        }
+        event.preventDefault();
+        const opts = this.options();
+        const currentIndex = opts.findIndex((option) => option.value === this.value());
+        const nextIndex = (currentIndex + delta + opts.length) % opts.length;
+        const next = opts[nextIndex];
+        this.value.set(next.value);
+        this.radios()[nextIndex]?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UiSegmented, isStandalone: true, selector: "ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex gap-1" role="radiogroup" [attr.aria-label]="label()">
+      @for (option of options(); track option.value) {
+        <button
+          #radio
+          role="radio"
+          type="button"
+          [attr.aria-checked]="option.value === value()"
+          [attr.tabindex]="tabIndexFor(option.value)"
+          [class]="optionClasses(option.value)"
+          (click)="select(option.value)"
+          (keydown)="onKeydown($event)"
+        >
+          {{ option.label }}
+        </button>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSegmented, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-segmented',
+                    template: `
+    <div class="flex gap-1" role="radiogroup" [attr.aria-label]="label()">
+      @for (option of options(); track option.value) {
+        <button
+          #radio
+          role="radio"
+          type="button"
+          [attr.aria-checked]="option.value === value()"
+          [attr.tabindex]="tabIndexFor(option.value)"
+          [class]="optionClasses(option.value)"
+          (click)="select(option.value)"
+          (keydown)="onKeydown($event)"
+        >
+          {{ option.label }}
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
+
+const SELECT_CLASSES = 'bg-(--elevated) pr-8';
+/**
+ * Styled native select. Deliberately keeps the platform's own chevron and picker:
+ * they are what makes the control usable on a phone.
+ *
+ * @example
+ * <select uiSelect><option value="pea">PEA</option></select>
+ */
+class UiSelect {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${CONTROL_BASE_CLASSES} ${SELECT_CLASSES} ${CONTROL_SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: UiSelect, isStandalone: true, selector: "select[uiSelect]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[uiSelect]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const LAST_LINE_WIDTH = '62%';
+/**
+ * Decorative placeholder for content that is still loading. Deliberately hidden from
+ * assistive technology: the calling screen keeps its own role="status" sentence.
+ *
+ * @example
+ * <ui-skeleton [lines]="3" />
+ * <ui-skeleton [height]="196" />
+ */
+class UiSkeleton {
+    lines = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    height = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    bars = computed(() => {
+        const count = Math.max(1, this.lines());
+        return Array.from({ length: count }, (_, index) => (index === count - 1 && count > 1 ? LAST_LINE_WIDTH : '100%'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: `
+    @for (line of bars(); track $index) {
+      <span
+        class="block rounded bg-(--soft) motion-safe:animate-pulse"
+        [style.height.px]="height()"
+        [style.width]="line"
+      ></span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-skeleton',
+                    template: `
+    @for (line of bars(); track $index) {
+      <span
+        class="block rounded bg-(--soft) motion-safe:animate-pulse"
+        [style.height.px]="height()"
+        [style.width]="line"
+      ></span>
+    }
+  `,
+                    host: {
+                        'aria-hidden': 'true',
+                        class: 'flex flex-col gap-2',
+                    },
+                }]
+        }], propDecorators: { lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/** Breakpoints a secondary column can be held back until. */
+const CELL_BREAKPOINTS = ['md', 'lg'];
+const FROM_CLASSES = {
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+};
+const TH_CLASSES = 'px-3 py-2 align-bottom text-[11px] font-medium uppercase tracking-[0.05em] text-(--subtle-foreground)';
+const TD_CLASSES = 'border-t border-(--hairline) px-3 py-2.5 align-middle text-sm';
+const NUMERIC_CLASSES = 'text-right tabular-nums';
+const TEXTUAL_CLASSES = 'text-left';
+/** Styled native table. The rows and cells stay plain <tr> and <td>. */
+class UiTable {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: UiTable, isStandalone: true, selector: "table[uiTable]", host: { classAttribute: "w-full border-collapse" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[uiTable]',
+                    host: {
+                        class: 'w-full border-collapse',
+                    },
+                }]
+        }] });
+const cellClasses = (base, numeric, from) => [base, numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES, from ? FROM_CLASSES[from] : ''].filter(Boolean).join(' ');
+/**
+ * Column header. `numeric` right-aligns and lines the digits up; `from` holds a
+ * secondary column back until the viewport is wide enough for it.
+ *
+ * @example
+ * <th uiTh numeric from="md">Prix de revient</th>
+ */
+class UiTh {
+    numeric = input(false, { ...(ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    from = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cellClasses(TH_CLASSES, this.numeric(), this.from()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: UiTh, isStandalone: true, selector: "th[uiTh]", inputs: { numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTh, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[uiTh]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }] } });
+/** Body cell. Same two inputs as `UiTh`, and they must be set on both to match. */
+class UiTd {
+    numeric = input(false, { ...(ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    from = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cellClasses(TD_CLASSES, this.numeric(), this.from()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: UiTd, isStandalone: true, selector: "td[uiTd]", inputs: { numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: UiTd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[uiTd]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }] } });
+
+/*
+ * Public API surface of the ui library.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMeter, UiSegmented, UiSelect, UiSkeleton, UiTable, UiTd, UiTextarea, UiTh };
+//# sourceMappingURL=joanroucoux-cairn-ui.mjs.map