@joanroucoux/cairn-ui 0.7.1 → 0.8.0

package/fesm2022/joanroucoux-cairn-ui-row.mjs

@@ -0,0 +1,164 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, inject, ElementRef, DestroyRef, Component, Directive } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'];
+const ROW_PADDINGS = ['md', 'sm', 'none'];
+const ROW_GAPS = ['default', 'sm'];
+const SIZE_CLASSES = {
+    md: 'min-h-14',
+    lg: 'min-h-15',
+    xl: 'min-h-18 pointer-fine:min-h-17',
+    card: 'min-h-17',
+    dense: 'min-h-14 lg:min-h-12',
+};
+const SIZE_GAPS = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };
+const PADDING_CLASSES = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };
+const BASE_CLASSES = 'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const INTERACTIVE_CLASSES = 'transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)';
+const UNAVAILABLE_CLASSES = 'opacity-50 cursor-not-allowed';
+const SELECTED_CLASSES = 'bg-(--soft)';
+/**
+ * Clickable row of a list: a holding, an account, a search result.
+ *
+ * @example
+ * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
+ *   {{ holding.name }}
+ * </a>
+ */
+class UiRow {
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    unavailable = input(false, { ...(ngDevMode ? { debugName: "unavailable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    padding = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    gap = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${INTERACTIVE_CLASSES}`}${this.selected() ? ` ${SELECTED_CLASSES}` : ''}${this.busy() ? ' pointer-events-none' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+        const host = inject(ElementRef).nativeElement;
+        const guard = (event) => {
+            if (this.busy() || this.unavailable()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        host.addEventListener('click', guard, { capture: true });
+        inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiRow, isStandalone: true, selector: "a[ui-row], button[ui-row]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, unavailable: { classPropertyName: "unavailable", publicName: "unavailable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "busy() || null", "attr.aria-disabled": "busy() || unavailable() ? 'true' : null", "attr.aria-current": "selected() ? 'true' : null" } }, ngImport: i0, template: `
+    <ng-content />
+    @if (busy()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent"
+      ></span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-row], button[ui-row]',
+                    template: `
+    <ng-content />
+    @if (busy()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent"
+      ></span>
+    }
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-busy]': 'busy() || null',
+                        '[attr.aria-disabled]': "busy() || unavailable() ? 'true' : null",
+                        '[attr.aria-current]': "selected() ? 'true' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], unavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+/**
+ * Lays out a `ui-row` with a trailing action beside it, such as a "more" icon button: the row takes
+ * the room the action leaves and the action keeps its own size.
+ *
+ * @example
+ * <div uiRowItem>
+ *   <a ui-row size="xl" padding="sm" routerLink="/accounts/1">...</a>
+ *   <button ui-button variant="quiet" size="icon-sm" aria-label="Account actions">...</button>
+ * </div>
+ */
+class UiRowItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiRowItem, isStandalone: true, selector: "[uiRowItem]", host: { classAttribute: "flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiRowItem]',
+                    host: {
+                        class: 'flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none',
+                    },
+                }]
+        }] });
+/**
+ * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete
+ * button, a device, a setting. It is a 72px row (68px from 64rem) with a 12px gap; put it on an
+ * `li` or a `div`. Use `ui-row` instead when the whole row is a link or an action.
+ *
+ * @example
+ * <ul>
+ *   <li uiListRow>
+ *     <span class="flex-1">MacBook Air</span>
+ *     <button ui-button variant="quiet-destructive" size="icon-sm" aria-label="Delete MacBook Air">...</button>
+ *   </li>
+ * </ul>
+ */
+class UiListRow {
+    ruled = input(true, { ...(ngDevMode ? { debugName: "ruled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => this.ruled()
+        ? 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]'
+        : 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiListRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiListRow, isStandalone: true, selector: "[uiListRow]", inputs: { ruled: { classPropertyName: "ruled", publicName: "ruled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiListRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiListRow]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { ruled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruled", required: false }] }] } });
+/**
+ * The 36px filled tile that leads a row: an icon on a muted square with the control radius. Put it on
+ * a `span` as the first child of a `ui-row` or a `uiListRow`.
+ *
+ * @example
+ * <a ui-row size="xl" padding="sm" href="/export">
+ *   <span uiRowTile><svg lucideDownload [size]="18" /></span>
+ *   Export
+ * </a>
+ */
+class UiRowTile {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowTile, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiRowTile, isStandalone: true, selector: "[uiRowTile]", host: { classAttribute: "rounded-control grid size-9 flex-none place-items-center bg-(--muted)" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowTile, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiRowTile]',
+                    host: { class: 'rounded-control grid size-9 flex-none place-items-center bg-(--muted)' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ROW_GAPS, ROW_PADDINGS, ROW_SIZES, UiListRow, UiRow, UiRowItem, UiRowTile };
+//# sourceMappingURL=joanroucoux-cairn-ui-row.mjs.map

package/fesm2022/joanroucoux-cairn-ui-row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-row.mjs","sources":["../../../projects/ui/row/row.ts","../../../projects/ui/row/joanroucoux-cairn-ui-row.ts"],"sourcesContent":["import { Component, DestroyRef, Directive, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nexport const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'] as const;\nexport type RowSize = (typeof ROW_SIZES)[number];\n\nexport const ROW_PADDINGS = ['md', 'sm', 'none'] as const;\nexport type RowPadding = (typeof ROW_PADDINGS)[number];\n\nexport const ROW_GAPS = ['default', 'sm'] as const;\nexport type RowGap = (typeof ROW_GAPS)[number];\n\nconst SIZE_CLASSES: Record<RowSize, string> = {\n  md: 'min-h-14',\n  lg: 'min-h-15',\n  xl: 'min-h-18 pointer-fine:min-h-17',\n  card: 'min-h-17',\n  dense: 'min-h-14 lg:min-h-12',\n};\n\nconst SIZE_GAPS: Record<RowSize, string> = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };\n\nconst PADDING_CLASSES: Record<RowPadding, string> = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };\n\nconst BASE_CLASSES =\n  'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INTERACTIVE_CLASSES =\n  'transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)';\n\nconst UNAVAILABLE_CLASSES = 'opacity-50 cursor-not-allowed';\n\nconst SELECTED_CLASSES = 'bg-(--soft)';\n\n/**\n * Clickable row of a list: a holding, an account, a search result.\n *\n * @example\n * <a ui-row [selected]=\"holding.id === openId()\" [routerLink]=\"['/holdings', holding.id]\">\n *   {{ holding.name }}\n * </a>\n */\n@Component({\n  selector: 'a[ui-row], button[ui-row]',\n  template: `\n    <ng-content />\n    @if (busy()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent\"\n      ></span>\n    }\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'busy() || null',\n    '[attr.aria-disabled]': \"busy() || unavailable() ? 'true' : null\",\n    '[attr.aria-current]': \"selected() ? 'true' : null\",\n  },\n})\nexport class UiRow {\n  readonly selected = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n  readonly unavailable = input(false, { transform: booleanAttribute });\n  readonly size = input<RowSize>('md');\n  readonly padding = input<RowPadding>('md');\n  readonly gap = input<RowGap>('default');\n\n  protected readonly classes = computed(\n    () =>\n      `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${INTERACTIVE_CLASSES}`}${this.selected() ? ` ${SELECTED_CLASSES}` : ''}${this.busy() ? ' pointer-events-none' : ''}`,\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.busy() || this.unavailable()) {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n      }\n    };\n\n    host.addEventListener('click', guard, { capture: true });\n    inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));\n  }\n}\n\n/**\n * Lays out a `ui-row` with a trailing action beside it, such as a \"more\" icon button: the row takes\n * the room the action leaves and the action keeps its own size.\n *\n * @example\n * <div uiRowItem>\n *   <a ui-row size=\"xl\" padding=\"sm\" routerLink=\"/accounts/1\">...</a>\n *   <button ui-button variant=\"quiet\" size=\"icon-sm\" aria-label=\"Account actions\">...</button>\n * </div>\n */\n@Directive({\n  selector: '[uiRowItem]',\n  host: {\n    class:\n      'flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none',\n  },\n})\nexport class UiRowItem {}\n\n/**\n * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete\n * button, a device, a setting. It is a 72px row (68px from 64rem) with a 12px gap; put it on an\n * `li` or a `div`. Use `ui-row` instead when the whole row is a link or an action.\n *\n * @example\n * <ul>\n *   <li uiListRow>\n *     <span class=\"flex-1\">MacBook Air</span>\n *     <button ui-button variant=\"quiet-destructive\" size=\"icon-sm\" aria-label=\"Delete MacBook Air\">...</button>\n *   </li>\n * </ul>\n */\n@Directive({\n  selector: '[uiListRow]',\n  host: { '[class]': 'classes()' },\n})\nexport class UiListRow {\n  readonly ruled = input(true, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    this.ruled()\n      ? 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]'\n      : 'flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17',\n  );\n}\n\n/**\n * The 36px filled tile that leads a row: an icon on a muted square with the control radius. Put it on\n * a `span` as the first child of a `ui-row` or a `uiListRow`.\n *\n * @example\n * <a ui-row size=\"xl\" padding=\"sm\" href=\"/export\">\n *   <span uiRowTile><svg lucideDownload [size]=\"18\" /></span>\n *   Export\n * </a>\n */\n@Directive({\n  selector: '[uiRowTile]',\n  host: { class: 'rounded-control grid size-9 flex-none place-items-center bg-(--muted)' },\n})\nexport class UiRowTile {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-segmented.mjs

@@ -0,0 +1,165 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, viewChildren, computed, Component } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-segmented-${++count}`;
+})();
+const OPTION_CLASSES = "relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)";
+const SEGMENTED_SIZES = ['md', 'sm'];
+const SIZE_CLASSES = {
+    md: 'h-10 pointer-fine:h-8',
+    sm: 'h-10 pointer-fine:h-[30px]',
+};
+const SELECTED_CLASSES = 'text-(--foreground)';
+const UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';
+/**
+ * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's
+ * background is a single thumb that slides under it in `transform`, instead of being redrawn.
+ *
+ * @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 */ []));
+    showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    labelId = nextId();
+    value = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    radios = viewChildren('radio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
+    thumbIndex = computed(() => {
+        const index = this.options().findIndex((option) => option.value === this.value());
+        return index === -1 ? 0 : index + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
+    optionClasses(optionValue) {
+        return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${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.7", ngImport: i0, type: UiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
+      @if (showLabel()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
+      }
+      <div
+        class="rounded-control relative grid bg-(--muted) p-0.5"
+        role="radiogroup"
+        [attr.aria-label]="showLabel() ? null : label()"
+        [attr.aria-labelledby]="showLabel() ? labelId : null"
+        [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
+      >
+        @if (thumbIndex(); as index) {
+          <span
+            aria-hidden="true"
+            class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
+            data-thumb
+            [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
+            [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
+          ></span>
+        }
+
+        @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>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSegmented, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-segmented',
+                    template: `
+    <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
+      @if (showLabel()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
+      }
+      <div
+        class="rounded-control relative grid bg-(--muted) p-0.5"
+        role="radiogroup"
+        [attr.aria-label]="showLabel() ? null : label()"
+        [attr.aria-labelledby]="showLabel() ? labelId : null"
+        [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
+      >
+        @if (thumbIndex(); as index) {
+          <span
+            aria-hidden="true"
+            class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
+            data-thumb
+            [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
+            [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
+          ></span>
+        }
+
+        @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>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SEGMENTED_SIZES, UiSegmented };
+//# sourceMappingURL=joanroucoux-cairn-ui-segmented.mjs.map

package/fesm2022/joanroucoux-cairn-ui-segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-segmented.mjs","sources":["../../../projects/ui/segmented/segmented.ts","../../../projects/ui/segmented/joanroucoux-cairn-ui-segmented.ts"],"sourcesContent":["import { Component, ElementRef, booleanAttribute, computed, input, model, viewChildren } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst nextId = (() => {\n  let count = 0;\n\n  return () => `ui-segmented-${++count}`;\n})();\n\nexport type SegmentedOption = {\n  value: string;\n  label: string;\n};\n\nconst OPTION_CLASSES =\n  \"relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)\";\n\nexport const SEGMENTED_SIZES = ['md', 'sm'] as const;\nexport type SegmentedSize = (typeof SEGMENTED_SIZES)[number];\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  md: 'h-10 pointer-fine:h-8',\n  sm: 'h-10 pointer-fine:h-[30px]',\n};\n\nconst SELECTED_CLASSES = 'text-(--foreground)';\n\nconst UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';\n\n/**\n * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's\n * background is a single thumb that slides under it in `transform`, instead of being redrawn.\n *\n * @example\n * <ui-segmented [options]=\"ranges\" label=\"Time range\" [(value)]=\"range\" />\n */\n@Component({\n  selector: 'ui-segmented',\n  template: `\n    <div [class]=\"showLabel() ? 'flex flex-col gap-1.5' : ''\">\n      @if (showLabel()) {\n        <span class=\"text-label leading-[17px] font-medium text-(--muted-foreground)\" [id]=\"labelId\">{{\n          label()\n        }}</span>\n      }\n      <div\n        class=\"rounded-control relative grid bg-(--muted) p-0.5\"\n        role=\"radiogroup\"\n        [attr.aria-label]=\"showLabel() ? null : label()\"\n        [attr.aria-labelledby]=\"showLabel() ? labelId : null\"\n        [style.grid-template-columns]=\"'repeat(' + options().length + ', 1fr)'\"\n      >\n        @if (thumbIndex(); as index) {\n          <span\n            aria-hidden=\"true\"\n            class=\"absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out\"\n            data-thumb\n            [style.transform]=\"'translateX(' + (index - 1) * 100 + '%)'\"\n            [style.width]=\"'calc((100% - 4px) / ' + options().length + ')'\"\n          ></span>\n        }\n\n        @for (option of options(); track option.value) {\n          <button\n            #radio\n            role=\"radio\"\n            type=\"button\"\n            [attr.aria-checked]=\"option.value === value()\"\n            [attr.tabindex]=\"tabIndexFor(option.value)\"\n            [class]=\"optionClasses(option.value)\"\n            (click)=\"select(option.value)\"\n            (keydown)=\"onKeydown($event)\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class UiSegmented {\n  readonly options = input.required<SegmentedOption[]>();\n  readonly label = input.required<string>();\n  readonly showLabel = input(false, { transform: booleanAttribute });\n\n  protected readonly labelId = nextId();\n  readonly value = model.required<string>();\n  readonly size = input<SegmentedSize>('md');\n\n  protected readonly radios = viewChildren<ElementRef<HTMLButtonElement>>('radio');\n\n  protected readonly thumbIndex = computed(() => {\n    const index = this.options().findIndex((option) => option.value === this.value());\n\n    return index === -1 ? 0 : index + 1;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n\n  protected optionClasses(optionValue: string): string {\n    return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;\n  }\n\n  protected tabIndexFor(optionValue: string): number {\n    const opts = this.options();\n    const tabStopValue = opts.some((option) => option.value === this.value()) ? this.value() : opts[0]?.value;\n\n    return optionValue === tabStopValue ? 0 : -1;\n  }\n\n  protected select(optionValue: string): void {\n    this.value.set(optionValue);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const delta = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];\n    if (delta === undefined) {\n      return;\n    }\n    event.preventDefault();\n\n    const opts = this.options();\n    const currentIndex = opts.findIndex((option) => option.value === this.value());\n    const nextIndex = (currentIndex + delta + opts.length) % opts.length;\n    const next = opts[nextIndex]!;\n\n    this.value.set(next.value);\n    this.radios()[nextIndex]?.nativeElement.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/joanroucoux-cairn-ui-select.mjs

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { input, computed, forwardRef, Directive } from '@angular/core';
+import { UI_CONTROL } from '@joanroucoux/cairn-ui/control';
+import { CONTROL_BASE_CLASSES, CONTROL_SIZE_CLASSES } from '@joanroucoux/cairn-ui/input';
+
+const SELECT_CLASSES = 'cursor-pointer appearance-none pr-10 bg-(image:--chevron-down) bg-no-repeat bg-[position:right_0.75rem_center] bg-[size:1.125rem]';
+// Spelled out prefix included: Tailwind scans for literal strings, so a prefix applied in code
+// emits nothing.
+const PICKER_CLASSES = [
+    'pointer-fine:supports-[appearance:base-select]:[appearance:base-select]',
+    'pointer-fine:supports-[appearance:base-select]:items-center',
+    'pointer-fine:supports-[appearance:base-select]:[&_option]:cursor-pointer',
+    'pointer-fine:supports-[appearance:base-select]:[&_option]:rounded-control',
+    'pointer-fine:supports-[appearance:base-select]:[&_option]:px-2.5',
+    'pointer-fine:supports-[appearance:base-select]:[&_option]:py-2',
+    'pointer-fine:supports-[appearance:base-select]:[&_option:hover]:bg-(--soft)',
+    'pointer-fine:supports-[appearance:base-select]:[&_option:focus]:bg-(--soft)',
+    'pointer-fine:supports-[appearance:base-select]:[&_option:checked]:font-medium',
+    '[&::picker-icon]:hidden',
+    '[&::picker(select)]:[appearance:base-select]',
+    '[&::picker(select)]:my-1.5',
+    '[&::picker(select)]:rounded-control',
+    '[&::picker(select)]:border',
+    '[&::picker(select)]:border-(--border)',
+    '[&::picker(select)]:bg-(--card)',
+    '[&::picker(select)]:[position-try-fallbacks:none]',
+    '[&::picker(select)]:overflow-y-auto',
+    '[&::picker(select)]:p-1',
+    '[&::picker(select)]:text-(--card-foreground)',
+].join(' ');
+/**
+ * Styled native select, drop-down list included where the browser allows it. It stays a native
+ * `<select>`: keyboard, typeahead and semantics come from the platform, not from a rebuilt listbox.
+ *
+ * Declares the `errors` and `touched` inputs Angular's `[formField]` fills, so a `ui-field` around
+ * it can show the message without any binding here.
+ *
+ * @example
+ * <select uiSelect><option value="pea">PEA</option></select>
+ */
+class UiSelect {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${CONTROL_BASE_CLASSES} bg-(--background) ${SELECT_CLASSES} ${PICKER_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.7", ngImport: i0, type: UiSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiSelect, isStandalone: true, selector: "select[uiSelect]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiSelect) }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[uiSelect]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiSelect) }],
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiSelect };
+//# sourceMappingURL=joanroucoux-cairn-ui-select.mjs.map

package/fesm2022/joanroucoux-cairn-ui-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-select.mjs","sources":["../../../projects/ui/select/select.ts","../../../projects/ui/select/joanroucoux-cairn-ui-select.ts"],"sourcesContent":["import { Directive, computed, forwardRef, input } from '@angular/core';\n\nimport { UI_CONTROL, type UiControl, type UiControlError } from '@joanroucoux/cairn-ui/control';\nimport { CONTROL_BASE_CLASSES, CONTROL_SIZE_CLASSES, type ControlSize } from '@joanroucoux/cairn-ui/input';\n\nconst SELECT_CLASSES =\n  'cursor-pointer appearance-none pr-10 bg-(image:--chevron-down) bg-no-repeat bg-[position:right_0.75rem_center] bg-[size:1.125rem]';\n\n// Spelled out prefix included: Tailwind scans for literal strings, so a prefix applied in code\n// emits nothing.\nconst PICKER_CLASSES = [\n  'pointer-fine:supports-[appearance:base-select]:[appearance:base-select]',\n  'pointer-fine:supports-[appearance:base-select]:items-center',\n  'pointer-fine:supports-[appearance:base-select]:[&_option]:cursor-pointer',\n  'pointer-fine:supports-[appearance:base-select]:[&_option]:rounded-control',\n  'pointer-fine:supports-[appearance:base-select]:[&_option]:px-2.5',\n  'pointer-fine:supports-[appearance:base-select]:[&_option]:py-2',\n  'pointer-fine:supports-[appearance:base-select]:[&_option:hover]:bg-(--soft)',\n  'pointer-fine:supports-[appearance:base-select]:[&_option:focus]:bg-(--soft)',\n  'pointer-fine:supports-[appearance:base-select]:[&_option:checked]:font-medium',\n  '[&::picker-icon]:hidden',\n  '[&::picker(select)]:[appearance:base-select]',\n  '[&::picker(select)]:my-1.5',\n  '[&::picker(select)]:rounded-control',\n  '[&::picker(select)]:border',\n  '[&::picker(select)]:border-(--border)',\n  '[&::picker(select)]:bg-(--card)',\n  '[&::picker(select)]:[position-try-fallbacks:none]',\n  '[&::picker(select)]:overflow-y-auto',\n  '[&::picker(select)]:p-1',\n  '[&::picker(select)]:text-(--card-foreground)',\n].join(' ');\n\n/**\n * Styled native select, drop-down list included where the browser allows it. It stays a native\n * `<select>`: keyboard, typeahead and semantics come from the platform, not from a rebuilt listbox.\n *\n * Declares the `errors` and `touched` inputs Angular's `[formField]` fills, so a `ui-field` around\n * it can show the message without any binding here.\n *\n * @example\n * <select uiSelect><option value=\"pea\">PEA</option></select>\n */\n@Directive({\n  selector: 'select[uiSelect]',\n  host: {\n    '[class]': 'classes()',\n  },\n  providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiSelect) }],\n})\nexport class UiSelect implements UiControl {\n  readonly size = input<ControlSize>('md');\n  readonly errors = input<readonly UiControlError[]>([]);\n  readonly touched = input(false);\n\n  protected readonly classes = computed(\n    () =>\n      `${CONTROL_BASE_CLASSES} bg-(--background) ${SELECT_CLASSES} ${PICKER_CLASSES} ${CONTROL_SIZE_CLASSES[this.size()]}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAKA,MAAM,cAAc,GAClB,mIAAmI;AAErI;AACA;AACA,MAAM,cAAc,GAAG;IACrB,yEAAyE;IACzE,6DAA6D;IAC7D,0EAA0E;IAC1E,2EAA2E;IAC3E,kEAAkE;IAClE,gEAAgE;IAChE,6EAA6E;IAC7E,6EAA6E;IAC7E,+EAA+E;IAC/E,yBAAyB;IACzB,8CAA8C;IAC9C,4BAA4B;IAC5B,qCAAqC;IACrC,4BAA4B;IAC5B,uCAAuC;IACvC,iCAAiC;IACjC,mDAAmD;IACnD,qCAAqC;IACrC,yBAAyB;IACzB,8CAA8C;AAC/C,CAAA,CAAC,IAAI,CAAC,GAAG,CAAC;AAEX;;;;;;;;;AASG;MAQU,QAAQ,CAAA;IACV,IAAI,GAAG,KAAK,CAAc,IAAI;6EAAC;IAC/B,MAAM,GAAG,KAAK,CAA4B,EAAE;+EAAC;IAC7C,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IAEZ,OAAO,GAAG,QAAQ,CACnC,MACE,CAAA,EAAG,oBAAoB,CAAA,mBAAA,EAAsB,cAAc,IAAI,cAAc,CAAA,CAAA,EAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;gFACvH;uGARU,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,yeAFR,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,QAAQ,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAElE,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACD,oBAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,QAAS,CAAC,EAAE,CAAC;AAC9E,iBAAA;;;ACjDD;;AAEG;;;;"}

package/fesm2022/joanroucoux-cairn-ui-skeleton.mjs

@@ -0,0 +1,91 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+
+/** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */
+const SKELETON_SHAPES = ['text', 'figure', 'row', 'chart', 'ring', 'dot'];
+const LAST_LINE_WIDTH = '62%';
+const PULSE_ANIMATION = 'cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate';
+const BAR_CLASSES = 'block rounded-control bg-(--muted)';
+/**
+ * Decorative, pulsing placeholder for content that is still loading, at the shape of the content
+ * it stands in for.
+ *
+ * @example
+ * <ui-skeleton shape="figure" />
+ * <ui-skeleton [lines]="3" />
+ */
+class UiSkeleton {
+    shape = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    lines = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    height = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    size = input(232, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    animation = PULSE_ANIMATION;
+    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.7", ngImport: i0, type: UiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: "\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"block rounded-control bg-(--muted) h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"block rounded-control bg-(--muted) h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"block rounded-control bg-(--muted) h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"block rounded-control bg-(--muted) h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('dot') {\n        <span class=\"rounded-pill size-3 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"block rounded-control bg-(--muted)\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  ", isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-skeleton',
+                    template: `
+    @switch (shape()) {
+      @case ('figure') {
+        <span class="${BAR_CLASSES} h-10 w-65" [style.animation]="animation"></span>
+      }
+      @case ('row') {
+        <span class="flex h-14 items-center justify-between gap-4">
+          <span class="flex min-w-0 flex-1 flex-col gap-1.5">
+            <span class="${BAR_CLASSES} h-4 w-3/5" [style.animation]="animation"></span>
+            <span class="${BAR_CLASSES} h-3 w-20" [style.animation]="animation"></span>
+          </span>
+          <span class="${BAR_CLASSES} h-4 w-[90px] flex-none" [style.animation]="animation"></span>
+        </span>
+      }
+      @case ('chart') {
+        <span class="rounded-control min-h-50 w-full flex-1 bg-(--muted)" [style.animation]="animation"></span>
+      }
+      @case ('dot') {
+        <span class="rounded-pill size-3 bg-(--muted)" [style.animation]="animation"></span>
+      }
+      @case ('ring') {
+        <span
+          class="rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]"
+          [style.animation]="animation"
+          [style.height.px]="size()"
+          [style.width.px]="size()"
+        ></span>
+      }
+      @default {
+        @for (line of bars(); track $index) {
+          <span
+            class="${BAR_CLASSES}"
+            [style.animation]="animation"
+            [style.height.px]="height()"
+            [style.width]="line"
+          ></span>
+        }
+      }
+    }
+  `,
+                    host: {
+                        'aria-hidden': 'true',
+                        class: 'flex flex-col gap-2',
+                    },
+                }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SKELETON_SHAPES, UiSkeleton };
+//# sourceMappingURL=joanroucoux-cairn-ui-skeleton.mjs.map

package/fesm2022/joanroucoux-cairn-ui-skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-skeleton.mjs","sources":["../../../projects/ui/skeleton/skeleton.ts","../../../projects/ui/skeleton/joanroucoux-cairn-ui-skeleton.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */\nexport const SKELETON_SHAPES = ['text', 'figure', 'row', 'chart', 'ring', 'dot'] as const;\nexport type SkeletonShape = (typeof SKELETON_SHAPES)[number];\n\nconst LAST_LINE_WIDTH = '62%';\n\nconst PULSE_ANIMATION = 'cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate';\n\nconst BAR_CLASSES = 'block rounded-control bg-(--muted)';\n\n/**\n * Decorative, pulsing placeholder for content that is still loading, at the shape of the content\n * it stands in for.\n *\n * @example\n * <ui-skeleton shape=\"figure\" />\n * <ui-skeleton [lines]=\"3\" />\n */\n@Component({\n  selector: 'ui-skeleton',\n  template: `\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"${BAR_CLASSES} h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"${BAR_CLASSES} h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"${BAR_CLASSES} h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"${BAR_CLASSES} h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('dot') {\n        <span class=\"rounded-pill size-3 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"${BAR_CLASSES}\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  `,\n  host: {\n    'aria-hidden': 'true',\n    class: 'flex flex-col gap-2',\n  },\n})\nexport class UiSkeleton {\n  readonly shape = input<SkeletonShape>('text');\n  readonly lines = input(1);\n  readonly height = input(12);\n  readonly size = input(232);\n\n  protected readonly animation = PULSE_ANIMATION;\n\n  protected readonly bars = computed(() => {\n    const count = Math.max(1, this.lines());\n\n    return Array.from({ length: count }, (_, index) => (index === count - 1 && count > 1 ? LAST_LINE_WIDTH : '100%'));\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;AACO,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK;AAG/E,MAAM,eAAe,GAAG,KAAK;AAE7B,MAAM,eAAe,GAAG,sEAAsE;AAE9F,MAAM,WAAW,GAAG,oCAAoC;AAExD;;;;;;;AAOG;MAgDU,UAAU,CAAA;IACZ,KAAK,GAAG,KAAK,CAAgB,MAAM;8EAAC;IACpC,KAAK,GAAG,KAAK,CAAC,CAAC;8EAAC;IAChB,MAAM,GAAG,KAAK,CAAC,EAAE;+EAAC;IAClB,IAAI,GAAG,KAAK,CAAC,GAAG;6EAAC;IAEP,SAAS,GAAG,eAAe;AAE3B,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAK;AACtC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAEvC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK,KAAK,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,eAAe,GAAG,MAAM,CAAC,CAAC;IACnH,CAAC;6EAAC;uGAZS,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,kjDAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBA/CtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE;;;uBAGW,WAAW,CAAA;;;;;2BAKP,WAAW,CAAA;2BACX,WAAW,CAAA;;yBAEb,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;qBAoBf,WAAW,CAAA;;;;;;;;AAQ7B,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,aAAa,EAAE,MAAM;AACrB,wBAAA,KAAK,EAAE,qBAAqB;AAC7B,qBAAA;AACF,iBAAA;;;AClED;;AAEG;;;;"}

package/fesm2022/joanroucoux-cairn-ui-stale-link.mjs

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Directive } from '@angular/core';
+
+/** Available stale link sizes. `StaleLinkSize` is derived from this tuple. */
+const STALE_LINK_SIZES = ['caption', 'label'];
+const BASE_CLASSES = "relative inline-flex items-center gap-0.5 rounded-[4px] font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:h-11 pointer-fine:before:h-10 before:-translate-y-1/2 before:content-['']";
+const SIZE_CLASSES = {
+    caption: 'text-caption',
+    label: 'text-label',
+};
+const CHEVRON_CLASSES = "after:size-4 after:flex-none after:bg-current after:content-[''] after:mask-center after:mask-no-repeat after:mask-[url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]";
+/**
+ * Link in the stale tone, for a caption about data that is late or left out of a total, such as
+ * "1 ligne sans cours, non comptée". Weight 500, underlined on hover, with an optional trailing
+ * chevron. `size` is `caption` (12/17, the default) or `label` (14/20, the dashboard total's
+ * "1 cours en retard").
+ *
+ * @example
+ * <a uiStaleLink chevron size="label" routerLink="/holdings">1 cours en retard</a>
+ */
+class UiStaleLink {
+    chevron = input(false, { ...(ngDevMode ? { debugName: "chevron" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('caption', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}${this.chevron() ? ` ${CHEVRON_CLASSES}` : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStaleLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiStaleLink, isStandalone: true, selector: "a[uiStaleLink]", inputs: { chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, 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.7", ngImport: i0, type: UiStaleLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[uiStaleLink]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STALE_LINK_SIZES, UiStaleLink };
+//# sourceMappingURL=joanroucoux-cairn-ui-stale-link.mjs.map