@joanroucoux/cairn-ui 0.8.2 → 0.9.0

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

@@ -1,72 +1,203 @@
-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'];
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, booleanAttribute, computed, inject, input } 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 ROW_TRAILINGS = ["none", "chevron"];
 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',
+	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: `
+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 CHEVRON_CLASSES = "min-h-(--row-min) gap-3 px-0 hover:text-(--muted-foreground)";
+const CHEVRON_INTERACTIVE_CLASSES = "transition-colors [transition-duration:var(--duration-fast)] ease-out";
+const UNAVAILABLE_CLASSES = "opacity-50 cursor-not-allowed";
+const SELECTED_CLASSES = "bg-(--soft)";
+var UiRow = 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", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	padding = input("md", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+	gap = input("default", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
+	trailing = input("none", ...ngDevMode ? [{ debugName: "trailing" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const chevron = this.trailing() === "chevron";
+		const layout = chevron ? CHEVRON_CLASSES : `${SIZE_CLASSES[this.size()]} ${this.gap() === "sm" ? "gap-2" : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}`;
+		const interactive = chevron ? CHEVRON_INTERACTIVE_CLASSES : INTERACTIVE_CLASSES;
+		return `${BASE_CLASSES} ${layout}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${interactive}`}${this.selected() ? ` ${SELECTED_CLASSES}` : ""}${this.busy() ? " pointer-events-none" : ""}`;
+	}, ...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.2.0",
+		ngImport: i0,
+		type: UiRow,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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
+			},
+			trailing: {
+				classPropertyName: "trailing",
+				publicName: "trailing",
+				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 (trailing() === 'chevron') {
+      <svg
+        aria-hidden="true"
+        class="block flex-none fill-none stroke-(--subtle-foreground)"
+        height="16"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="16"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    }
     @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: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiRow,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[ui-row], button[ui-row]",
+			template: `
     <ng-content />
+    @if (trailing() === 'chevron') {
+      <svg
+        aria-hidden="true"
+        class="block flex-none fill-none stroke-(--subtle-foreground)"
+        height="16"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.75"
+        viewBox="0 0 24 24"
+        width="16"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    }
     @if (busy()) {
       <span
         aria-hidden="true"
@@ -74,91 +205,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       ></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.
- */
+			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
+			}]
+		}],
+		trailing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trailing",
+				required: false
+			}]
+		}]
+	}
+});
+var UiRowItem = class UiRowItem {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiRowItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		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.2.0",
+	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" }
+		}]
+	}]
+});
+var UiListRow = 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", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiListRow,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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.2.0",
+	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
+		}]
+	}] }
+});
+var UiRowTile = class UiRowTile {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiRowTile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		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.2.0",
+	ngImport: i0,
+	type: UiRowTile,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiRowTile]",
+			host: { class: "rounded-control grid size-9 flex-none place-items-center bg-(--muted)" }
+		}]
+	}]
+});
+export { ROW_GAPS, ROW_PADDINGS, ROW_SIZES, ROW_TRAILINGS, UiListRow, UiRow, UiRowItem, UiRowTile };
 
-export { ROW_GAPS, ROW_PADDINGS, ROW_SIZES, UiListRow, UiRow, UiRowItem, UiRowTile };
-//# sourceMappingURL=joanroucoux-cairn-ui-row.mjs.map
+//# sourceMappingURL=joanroucoux-cairn-ui-row.mjs.map

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

@@ -1 +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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"}
+{"version":3,"file":"joanroucoux-cairn-ui-row.mjs","names":[],"sources":["../../../projects/ui/row/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\nexport const ROW_TRAILINGS = ['none', 'chevron'] as const;\nexport type RowTrailing = (typeof ROW_TRAILINGS)[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 CHEVRON_CLASSES = 'min-h-(--row-min) gap-3 px-0 hover:text-(--muted-foreground)';\n\nconst CHEVRON_INTERACTIVE_CLASSES = 'transition-colors [transition-duration:var(--duration-fast)] ease-out';\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. With `trailing=\"chevron\"` it is a\n * flush link row: no side padding, a 16 px chevron at the end, the text dimming on hover.\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 (trailing() === 'chevron') {\n      <svg\n        aria-hidden=\"true\"\n        class=\"block flex-none fill-none stroke-(--subtle-foreground)\"\n        height=\"16\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.75\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    }\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  readonly trailing = input<RowTrailing>('none');\n\n  protected readonly classes = computed(() => {\n    const chevron = this.trailing() === 'chevron';\n    const layout = chevron\n      ? CHEVRON_CLASSES\n      : `${SIZE_CLASSES[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}`;\n    const interactive = chevron ? CHEVRON_INTERACTIVE_CLASSES : INTERACTIVE_CLASSES;\n\n    return `${BASE_CLASSES} ${layout}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${interactive}`}${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.\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. Put it on an `li` or a `div`. Use `ui-row` instead when the whole\n * 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 filled tile that leads a row, holding an icon. Put it on a `span` as the first child of a\n * `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"],"mappings":"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"}