@joanroucoux/cairn-ui 0.7.2 → 0.8.1

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

@@ -0,0 +1,282 @@
+import * as i0 from '@angular/core';
+import { signal, inject, DestroyRef, effect, untracked, input, booleanAttribute, output, computed, Component } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+const SKELETON_DELAY_MS = 150;
+const SKELETON_MIN_MS = 400;
+/**
+ * Turns the live state of a call into the state to draw: `loading` only appears once the call has
+ * lasted 150 ms and, once shown, stays at least 400 ms, so a fast call never flashes a skeleton and a
+ * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);
+ * `null` means nothing to draw yet, for a first load still under 150 ms. Call it in an injection context.
+ *
+ * @example
+ * protected readonly shown = delayedState(this.state);
+ */
+function delayedState(source) {
+    const displayed = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
+    let timer;
+    let shownAt = 0;
+    const clear = () => {
+        clearTimeout(timer);
+        timer = undefined;
+    };
+    inject(DestroyRef).onDestroy(clear);
+    effect(() => {
+        const state = source();
+        untracked(() => {
+            if (state === 'loading') {
+                if (displayed() === 'loading') {
+                    clear();
+                }
+                else {
+                    timer = setTimeout(() => {
+                        timer = undefined;
+                        shownAt = Date.now();
+                        displayed.set('loading');
+                    }, SKELETON_DELAY_MS);
+                }
+                return;
+            }
+            clear();
+            const remaining = shownAt + SKELETON_MIN_MS - Date.now();
+            if (displayed() === 'loading' && remaining > 0) {
+                timer = setTimeout(() => {
+                    timer = undefined;
+                    displayed.set(untracked(source));
+                }, remaining);
+            }
+            else {
+                displayed.set(state);
+            }
+        });
+    });
+    return displayed.asReadonly();
+}
+
+/** Available async block states. `AsyncState` is derived from this tuple. */
+const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'];
+/** Looks of the error block. `AsyncVariant` is derived from this tuple. */
+const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'];
+/** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */
+const ASYNC_ALIGNS = ['start', 'center', 'auto'];
+const RETRY_BASE_CLASSES = 'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';
+const RETRY_OUTLINE_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';
+const RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';
+const RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';
+const RETRY_INLINE_CLASSES = 'h-11 pointer-fine:h-8 flex-none gap-1.5 pl-2.5 pr-3';
+const ELEVATED_SURFACE_CLASSES = 'rounded-control bg-(--elevated)';
+const CARD_SURFACE_CLASSES = 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)]';
+const BLOCK_SPECS = {
+    elevated: {
+        surface: ELEVATED_SURFACE_CLASSES,
+        gap: 'gap-1',
+        padding: { start: 'p-4', center: 'px-4 py-10', auto: 'p-4 lg:py-10' },
+        title: 'text-body font-medium',
+        message: { start: 'text-label', center: 'text-label', auto: 'text-label' },
+        retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },
+        retry: RETRY_OUTLINE_CLASSES,
+    },
+    plain: {
+        surface: '',
+        gap: 'gap-1',
+        padding: { start: 'px-4 py-5', center: 'px-4 py-12', auto: 'px-4 py-5 lg:py-12' },
+        title: 'text-body leading-[normal] font-medium',
+        message: {
+            start: 'text-label leading-[normal]',
+            center: 'text-label leading-[normal]',
+            auto: 'text-label leading-[normal]',
+        },
+        retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },
+        retry: RETRY_OUTLINE_CLASSES,
+    },
+    emphasis: {
+        surface: '',
+        gap: 'gap-3',
+        padding: { start: 'px-4 py-6', center: 'px-4 py-14', auto: 'px-4 py-6 lg:py-14' },
+        title: 'text-title font-semibold',
+        message: {
+            start: 'text-label',
+            center: 'text-body leading-[normal]',
+            auto: 'text-label lg:text-body lg:leading-[normal]',
+        },
+        retryMargin: { start: 'mt-1', center: 'mt-2', auto: 'mt-1 lg:mt-2' },
+        retry: RETRY_PRIMARY_CLASSES,
+    },
+};
+const ALIGN_CLASSES = {
+    start: 'items-start',
+    center: 'items-center text-center',
+    auto: 'items-start lg:items-center lg:text-center',
+};
+const INLINE_BOX_CLASSES = 'flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5';
+/**
+ * The three states of a block that depends on a service call, next to the ready content.
+ *
+ * @example
+ * <ui-async [state]="totalState()" errorTitle="Total could not be loaded" errorMessage="The server did not answer." retryLabel="Retry" (retry)="reload()">
+ *   <span asyncLoading><ui-skeleton shape="figure" /></span>
+ *   <span asyncEmpty>Add a holding to see your total.</span>
+ *   <span>{{ total() }}</span>
+ * </ui-async>
+ */
+class UiAsync {
+    state = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    errorTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorTitle" }] : /* istanbul ignore next */ []));
+    errorMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    retryLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "retryLabel" }] : /* istanbul ignore next */ []));
+    variant = input('elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    card = input(false, { ...(ngDevMode ? { debugName: "card" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    retry = output();
+    shown = delayedState(this.state);
+    filling = computed(() => this.fill() && this.shown() === 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filling" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    #spec = computed(() => {
+        const variant = this.variant();
+        return variant === 'inline' ? null : BLOCK_SPECS[variant];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#spec" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => {
+        const spec = this.#spec();
+        const fill = this.fill() ? ' flex-1 justify-center' : '';
+        if (spec === null) {
+            return `flex ${INLINE_BOX_CLASSES}${this.card() ? ` ${CARD_SURFACE_CLASSES}` : ''}${this.fill() ? ' flex-1' : ''}`;
+        }
+        const surface = this.card() ? CARD_SURFACE_CLASSES : spec.surface;
+        return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => this.#spec().title, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    messageClasses = computed(() => this.#spec().message[this.align()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageClasses" }] : /* istanbul ignore next */ []));
+    retryButtonClasses = computed(() => {
+        const spec = this.#spec();
+        if (spec === null) {
+            return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES}`;
+        }
+        return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "retryButtonClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAsync, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAsync, isStandalone: true, selector: "ui-async", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { properties: { "attr.aria-busy": "state() === 'loading' || null", "class.flex": "filling()", "class.flex-col": "filling()" } }, ngImport: i0, template: `
+    @switch (shown()) {
+      @case (null) {}
+      @case ('loading') {
+        <ng-content select="[asyncLoading]" />
+      }
+      @case ('error') {
+        <div aria-live="polite" role="alert" [class]="boxClasses()">
+          @if (variant() === 'inline') {
+            <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          } @else {
+            @if (variant() === 'emphasis') {
+              <h2 [class]="titleClasses()">{{ errorTitle() }}</h2>
+            } @else {
+              <span [class]="titleClasses()">{{ errorTitle() }}</span>
+            }
+            <span class="text-(--muted-foreground)" [class]="messageClasses()">{{ errorMessage() }}</span>
+          }
+          <button type="button" [class]="retryButtonClasses()" (click)="retry.emit()">
+            <svg
+              aria-hidden="true"
+              class="block flex-none fill-none stroke-current"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              [attr.height]="iconSize()"
+              [attr.width]="iconSize()"
+            >
+              <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+              <path d="M21 3v5h-5" />
+            </svg>
+            {{ retryLabel() }}
+          </button>
+        </div>
+      }
+      @case ('empty') {
+        <ng-content select="[asyncEmpty]" />
+      }
+      @default {
+        <ng-content />
+      }
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAsync, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-async',
+                    template: `
+    @switch (shown()) {
+      @case (null) {}
+      @case ('loading') {
+        <ng-content select="[asyncLoading]" />
+      }
+      @case ('error') {
+        <div aria-live="polite" role="alert" [class]="boxClasses()">
+          @if (variant() === 'inline') {
+            <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          } @else {
+            @if (variant() === 'emphasis') {
+              <h2 [class]="titleClasses()">{{ errorTitle() }}</h2>
+            } @else {
+              <span [class]="titleClasses()">{{ errorTitle() }}</span>
+            }
+            <span class="text-(--muted-foreground)" [class]="messageClasses()">{{ errorMessage() }}</span>
+          }
+          <button type="button" [class]="retryButtonClasses()" (click)="retry.emit()">
+            <svg
+              aria-hidden="true"
+              class="block flex-none fill-none stroke-current"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              [attr.height]="iconSize()"
+              [attr.width]="iconSize()"
+            >
+              <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+              <path d="M21 3v5h-5" />
+            </svg>
+            {{ retryLabel() }}
+          </button>
+        </div>
+      }
+      @case ('empty') {
+        <ng-content select="[asyncEmpty]" />
+      }
+      @default {
+        <ng-content />
+      }
+    }
+  `,
+                    host: {
+                        '[attr.aria-busy]': "state() === 'loading' || null",
+                        '[class.flex]': 'filling()',
+                        '[class.flex-col]': 'filling()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, UiAsync, delayedState };
+//# sourceMappingURL=joanroucoux-cairn-ui-async.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-async.mjs","sources":["../../../projects/ui/async/delayed-state.ts","../../../projects/ui/async/async.ts","../../../projects/ui/async/joanroucoux-cairn-ui-async.ts"],"sourcesContent":["import { DestroyRef, type Signal, effect, inject, signal, untracked } from '@angular/core';\n\nimport type { AsyncState } from './async';\n\nexport const SKELETON_DELAY_MS = 150;\nexport const SKELETON_MIN_MS = 400;\n\n/**\n * Turns the live state of a call into the state to draw: `loading` only appears once the call has\n * lasted 150 ms and, once shown, stays at least 400 ms, so a fast call never flashes a skeleton and a\n * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);\n * `null` means nothing to draw yet, for a first load still under 150 ms. Call it in an injection context.\n *\n * @example\n * protected readonly shown = delayedState(this.state);\n */\nexport function delayedState(source: Signal<AsyncState>): Signal<AsyncState | null> {\n  const displayed = signal<AsyncState | null>(null);\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let shownAt = 0;\n\n  const clear = (): void => {\n    clearTimeout(timer);\n    timer = undefined;\n  };\n\n  inject(DestroyRef).onDestroy(clear);\n\n  effect(() => {\n    const state = source();\n\n    untracked(() => {\n      if (state === 'loading') {\n        if (displayed() === 'loading') {\n          clear();\n        } else {\n          timer = setTimeout(() => {\n            timer = undefined;\n            shownAt = Date.now();\n            displayed.set('loading');\n          }, SKELETON_DELAY_MS);\n        }\n\n        return;\n      }\n\n      clear();\n\n      const remaining = shownAt + SKELETON_MIN_MS - Date.now();\n\n      if (displayed() === 'loading' && remaining > 0) {\n        timer = setTimeout(() => {\n          timer = undefined;\n          displayed.set(untracked(source));\n        }, remaining);\n      } else {\n        displayed.set(state);\n      }\n    });\n  });\n\n  return displayed.asReadonly();\n}\n","import { Component, booleanAttribute, computed, input, output } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nimport { delayedState } from './delayed-state';\n\n/** Available async block states. `AsyncState` is derived from this tuple. */\nexport const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'] as const;\nexport type AsyncState = (typeof ASYNC_STATES)[number];\n\n/** Looks of the error block. `AsyncVariant` is derived from this tuple. */\nexport const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'] as const;\nexport type AsyncVariant = (typeof ASYNC_VARIANTS)[number];\n\n/** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */\nexport const ASYNC_ALIGNS = ['start', 'center', 'auto'] as const;\nexport type AsyncAlign = (typeof ASYNC_ALIGNS)[number];\n\nconst RETRY_BASE_CLASSES =\n  'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';\n\nconst RETRY_OUTLINE_CLASSES =\n  'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';\n\nconst RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';\n\nconst RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';\n\nconst RETRY_INLINE_CLASSES = 'h-11 pointer-fine:h-8 flex-none gap-1.5 pl-2.5 pr-3';\n\nconst ELEVATED_SURFACE_CLASSES = 'rounded-control bg-(--elevated)';\n\nconst CARD_SURFACE_CLASSES = 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)]';\n\ntype BlockSpec = {\n  surface: string;\n  gap: string;\n  padding: Record<AsyncAlign, string>;\n  title: string;\n  message: Record<AsyncAlign, string>;\n  retryMargin: Record<AsyncAlign, string>;\n  retry: string;\n};\n\nconst BLOCK_SPECS: Record<Exclude<AsyncVariant, 'inline'>, BlockSpec> = {\n  elevated: {\n    surface: ELEVATED_SURFACE_CLASSES,\n    gap: 'gap-1',\n    padding: { start: 'p-4', center: 'px-4 py-10', auto: 'p-4 lg:py-10' },\n    title: 'text-body font-medium',\n    message: { start: 'text-label', center: 'text-label', auto: 'text-label' },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  plain: {\n    surface: '',\n    gap: 'gap-1',\n    padding: { start: 'px-4 py-5', center: 'px-4 py-12', auto: 'px-4 py-5 lg:py-12' },\n    title: 'text-body leading-[normal] font-medium',\n    message: {\n      start: 'text-label leading-[normal]',\n      center: 'text-label leading-[normal]',\n      auto: 'text-label leading-[normal]',\n    },\n    retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },\n    retry: RETRY_OUTLINE_CLASSES,\n  },\n  emphasis: {\n    surface: '',\n    gap: 'gap-3',\n    padding: { start: 'px-4 py-6', center: 'px-4 py-14', auto: 'px-4 py-6 lg:py-14' },\n    title: 'text-title font-semibold',\n    message: {\n      start: 'text-label',\n      center: 'text-body leading-[normal]',\n      auto: 'text-label lg:text-body lg:leading-[normal]',\n    },\n    retryMargin: { start: 'mt-1', center: 'mt-2', auto: 'mt-1 lg:mt-2' },\n    retry: RETRY_PRIMARY_CLASSES,\n  },\n};\n\nconst ALIGN_CLASSES: Record<AsyncAlign, string> = {\n  start: 'items-start',\n  center: 'items-center text-center',\n  auto: 'items-start lg:items-center lg:text-center',\n};\n\nconst INLINE_BOX_CLASSES = 'flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5';\n\n/**\n * The three states of a block that depends on a service call, next to the ready content.\n *\n * @example\n * <ui-async [state]=\"totalState()\" errorTitle=\"Total could not be loaded\" errorMessage=\"The server did not answer.\" retryLabel=\"Retry\" (retry)=\"reload()\">\n *   <span asyncLoading><ui-skeleton shape=\"figure\" /></span>\n *   <span asyncEmpty>Add a holding to see your total.</span>\n *   <span>{{ total() }}</span>\n * </ui-async>\n */\n@Component({\n  selector: 'ui-async',\n  template: `\n    @switch (shown()) {\n      @case (null) {}\n      @case ('loading') {\n        <ng-content select=\"[asyncLoading]\" />\n      }\n      @case ('error') {\n        <div aria-live=\"polite\" role=\"alert\" [class]=\"boxClasses()\">\n          @if (variant() === 'inline') {\n            <span class=\"text-label text-(--muted-foreground)\">{{ errorMessage() }}</span>\n          } @else {\n            @if (variant() === 'emphasis') {\n              <h2 [class]=\"titleClasses()\">{{ errorTitle() }}</h2>\n            } @else {\n              <span [class]=\"titleClasses()\">{{ errorTitle() }}</span>\n            }\n            <span class=\"text-(--muted-foreground)\" [class]=\"messageClasses()\">{{ errorMessage() }}</span>\n          }\n          <button type=\"button\" [class]=\"retryButtonClasses()\" (click)=\"retry.emit()\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"block flex-none fill-none stroke-current\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"1.75\"\n              viewBox=\"0 0 24 24\"\n              [attr.height]=\"iconSize()\"\n              [attr.width]=\"iconSize()\"\n            >\n              <path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" />\n              <path d=\"M21 3v5h-5\" />\n            </svg>\n            {{ retryLabel() }}\n          </button>\n        </div>\n      }\n      @case ('empty') {\n        <ng-content select=\"[asyncEmpty]\" />\n      }\n      @default {\n        <ng-content />\n      }\n    }\n  `,\n  host: {\n    '[attr.aria-busy]': \"state() === 'loading' || null\",\n    '[class.flex]': 'filling()',\n    '[class.flex-col]': 'filling()',\n  },\n})\nexport class UiAsync {\n  readonly state = input.required<AsyncState>();\n  readonly errorTitle = input<string>();\n  readonly errorMessage = input<string>();\n  readonly retryLabel = input<string>();\n  readonly variant = input<AsyncVariant>('elevated');\n  readonly align = input<AsyncAlign>('start');\n  readonly card = input(false, { transform: booleanAttribute });\n  readonly fill = input(false, { transform: booleanAttribute });\n  readonly retry = output<void>();\n\n  protected readonly shown = delayedState(this.state);\n\n  protected readonly filling = computed(() => this.fill() && this.shown() === 'error');\n\n  protected readonly iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18));\n\n  readonly #spec = computed(() => {\n    const variant = this.variant();\n\n    return variant === 'inline' ? null : BLOCK_SPECS[variant];\n  });\n\n  protected readonly boxClasses = computed(() => {\n    const spec = this.#spec();\n    const fill = this.fill() ? ' flex-1 justify-center' : '';\n\n    if (spec === null) {\n      return `flex ${INLINE_BOX_CLASSES}${this.card() ? ` ${CARD_SURFACE_CLASSES}` : ''}${this.fill() ? ' flex-1' : ''}`;\n    }\n\n    const surface = this.card() ? CARD_SURFACE_CLASSES : spec.surface;\n\n    return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;\n  });\n\n  protected readonly titleClasses = computed(() => this.#spec()!.title);\n\n  protected readonly messageClasses = computed(() => this.#spec()!.message[this.align()]);\n\n  protected readonly retryButtonClasses = computed(() => {\n    const spec = this.#spec();\n\n    if (spec === null) {\n      return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES}`;\n    }\n\n    return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;\n  });\n\n  constructor() {\n    holdTransitionsUntilRendered();\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-avatar.mjs

@@ -0,0 +1,71 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, Directive } from '@angular/core';
+
+/** Available avatar sizes. `AvatarSize` is derived from this tuple. */
+const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'];
+const BASE_CLASSES = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
+const SIZE_CLASSES = {
+    sm: 'size-8 text-caption',
+    md: 'size-[34px] text-label',
+    lg: 'size-14 text-title',
+    auto: 'size-[34px] text-label lg:size-8 lg:text-caption',
+};
+/**
+ * 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} ${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: UiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", 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.7", 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 }] }] } });
+/**
+ * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
+ * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
+ * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar
+ * itself keeps its own size.
+ *
+ * @example
+ * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
+ */
+class UiAvatarLink {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[uiAvatarLink], button[uiAvatarLink]',
+                    host: {
+                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AVATAR_SIZES, UiAvatar, UiAvatarLink };
+//# sourceMappingURL=joanroucoux-cairn-ui-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-avatar.mjs","sources":["../../../projects/ui/avatar/avatar.ts","../../../projects/ui/avatar/joanroucoux-cairn-ui-avatar.ts"],"sourcesContent":["import { Component, Directive, computed, input } from '@angular/core';\n\n/** Available avatar sizes. `AvatarSize` is derived from this tuple. */\nexport const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'] as const;\nexport type AvatarSize = (typeof AVATAR_SIZES)[number];\n\nconst BASE_CLASSES = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  sm: 'size-8 text-caption',\n  md: 'size-[34px] text-label',\n  lg: 'size-14 text-title',\n  auto: 'size-[34px] text-label lg:size-8 lg:text-caption',\n};\n\n/**\n * Initials in a disc, standing in for a person. Single-user application: there is exactly one.\n *\n * @example\n * <ui-avatar initials=\"JR\" label=\"My account\" />\n */\n@Component({\n  selector: 'ui-avatar',\n  template: '<span aria-hidden=\"true\">{{ initials() }}</span>',\n  host: {\n    role: 'img',\n    '[attr.aria-label]': 'label()',\n    '[class]': 'classes()',\n  },\n})\nexport class UiAvatar {\n  readonly initials = input.required<string>();\n  readonly label = input.required<string>();\n  readonly size = input<AvatarSize>('md');\n\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n}\n\n/**\n * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a\n * glow on hover and the press scale. On the current page (`aria-current=\"page\"`, which `routerLinkActive`\n * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar\n * itself keeps its own size.\n *\n * @example\n * <a uiAvatarLink routerLink=\"/profile\"><ui-avatar initials=\"JR\" label=\"Profile\" size=\"auto\" /></a>\n */\n@Directive({\n  selector: 'a[uiAvatarLink], button[uiAvatarLink]',\n  host: {\n    class:\n      'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n  },\n})\nexport class UiAvatarLink {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;AACO,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM;AAGrD,MAAM,YAAY,GAAG,4FAA4F;AAEjH,MAAM,YAAY,GAA+B;AAC/C,IAAA,EAAE,EAAE,qBAAqB;AACzB,IAAA,EAAE,EAAE,wBAAwB;AAC5B,IAAA,EAAE,EAAE,oBAAoB;AACxB,IAAA,IAAI,EAAE,kDAAkD;CACzD;AAED;;;;;AAKG;MAUU,QAAQ,CAAA;IACV,QAAQ,GAAG,KAAK,CAAC,QAAQ;iFAAU;IACnC,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,IAAI,GAAG,KAAK,CAAa,IAAI;6EAAC;AAEpB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;gFAAC;uGALhF,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,0iBAPT,kDAAkD,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAOjD,QAAQ,EAAA,UAAA,EAAA,CAAA;kBATpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,QAAQ,EAAE,kDAAkD;AAC5D,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,KAAK;AACX,wBAAA,mBAAmB,EAAE,SAAS;AAC9B,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;AASD;;;;;;;;AAQG;MAQU,YAAY,CAAA;uGAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qcAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uCAAuC;AACjD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,qcAAqc;AACxc,qBAAA;AACF,iBAAA;;;ACrDD;;AAEG;;;;"}

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

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+/** Available back link sizes. `BackLinkSize` is derived from this tuple. */
+const BACK_LINK_SIZES = ['md', 'sm', 'header'];
+const BASE_CLASSES = 'inline-flex items-center gap-0.5 rounded-control text-body font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';
+const SIZE_CLASSES = {
+    md: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:outline-offset-2',
+    sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',
+    header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',
+};
+const CHEVRON = { md: 22, sm: 22, header: 24 };
+/**
+ * Link back to the parent screen: a chevron and the name of the destination.
+ *
+ * @example
+ * <a ui-back-link routerLink="/accounts">Accounts</a>
+ */
+class UiBackLink {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    chevron = computed(() => CHEVRON[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBackLink, isStandalone: true, selector: "a[ui-back-link]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      [attr.height]="chevron()"
+      [attr.width]="chevron()"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-back-link]',
+                    template: `
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      [attr.height]="chevron()"
+      [attr.width]="chevron()"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BACK_LINK_SIZES, UiBackLink };
+//# sourceMappingURL=joanroucoux-cairn-ui-back-link.mjs.map

package/fesm2022/joanroucoux-cairn-ui-back-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-back-link.mjs","sources":["../../../projects/ui/back-link/back-link.ts","../../../projects/ui/back-link/joanroucoux-cairn-ui-back-link.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available back link sizes. `BackLinkSize` is derived from this tuple. */\nexport const BACK_LINK_SIZES = ['md', 'sm', 'header'] as const;\nexport type BackLinkSize = (typeof BACK_LINK_SIZES)[number];\n\nconst BASE_CLASSES =\n  'inline-flex items-center gap-0.5 rounded-control text-body font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';\n\nconst SIZE_CLASSES: Record<BackLinkSize, string> = {\n  md: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:outline-offset-2',\n  sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',\n  header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',\n};\n\nconst CHEVRON: Record<BackLinkSize, number> = { md: 22, sm: 22, header: 24 };\n\n/**\n * Link back to the parent screen: a chevron and the name of the destination.\n *\n * @example\n * <a ui-back-link routerLink=\"/accounts\">Accounts</a>\n */\n@Component({\n  selector: 'a[ui-back-link]',\n  template: `\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"1.75\"\n      viewBox=\"0 0 24 24\"\n      [attr.height]=\"chevron()\"\n      [attr.width]=\"chevron()\"\n    >\n      <path d=\"m15 18-6-6 6-6\" />\n    </svg>\n    <ng-content />\n  `,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiBackLink {\n  readonly size = input<BackLinkSize>('md');\n\n  protected readonly chevron = computed(() => CHEVRON[this.size()]);\n  protected readonly classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}`);\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA;AACO,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ;AAGpD,MAAM,YAAY,GAChB,qWAAqW;AAEvW,MAAM,YAAY,GAAiC;AACjD,IAAA,EAAE,EAAE,mEAAmE;AACvE,IAAA,EAAE,EAAE,sHAAsH;AAC1H,IAAA,MAAM,EAAE,oEAAoE;CAC7E;AAED,MAAM,OAAO,GAAiC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;AAE5E;;;;;AAKG;MAuBU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAAe,IAAI;6EAAC;AAEtB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gFAAC;AAC9C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAE;gFAAC;AAE3F,IAAA,WAAA,GAAA;AACE,QAAA,4BAA4B,EAAE;IAChC;uGARW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,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,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBX;;;;;;;;;;;;;;;AAeT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAKU,UAAU,EAAA,UAAA,EAAA,CAAA;kBAtBtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;AAeT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;AC9CD;;AAEG;;;;"}

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

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+
+/** Available badge variants. `BadgeVariant` is derived from this tuple. */
+const BADGE_VARIANTS = ['neutral', 'outline'];
+const BADGE_SIZES = ['md', 'sm'];
+const BASE_CLASSES = 'inline-flex items-center rounded-pill text-caption font-medium';
+const SIZE_CLASSES = {
+    md: 'h-6 px-2.5',
+    sm: 'h-[22px] px-2',
+};
+const VARIANT_CLASSES = {
+    neutral: 'bg-(--muted) text-(--foreground)',
+    outline: 'shadow-[inset_0_0_0_1px_var(--border)] text-(--foreground)',
+};
+/**
+ * Small status descriptor for counts, states or labels, such as an instrument's asset class.
+ *
+ * @example
+ * <ui-badge>ETF</ui-badge>
+ */
+class UiBadge {
+    variant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${VARIANT_CLASSES[this.variant()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBadge, isStandalone: true, selector: "ui-badge", 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.7", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BADGE_SIZES, BADGE_VARIANTS, UiBadge };
+//# sourceMappingURL=joanroucoux-cairn-ui-badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-badge.mjs","sources":["../../../projects/ui/badge/badge.ts","../../../projects/ui/badge/joanroucoux-cairn-ui-badge.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available badge variants. `BadgeVariant` is derived from this tuple. */\nexport const BADGE_VARIANTS = ['neutral', 'outline'] as const;\nexport type BadgeVariant = (typeof BADGE_VARIANTS)[number];\n\nexport const BADGE_SIZES = ['md', 'sm'] as const;\nexport type BadgeSize = (typeof BADGE_SIZES)[number];\n\nconst BASE_CLASSES = 'inline-flex items-center rounded-pill text-caption font-medium';\n\nconst SIZE_CLASSES: Record<BadgeSize, string> = {\n  md: 'h-6 px-2.5',\n  sm: 'h-[22px] px-2',\n};\n\nconst VARIANT_CLASSES: Record<BadgeVariant, string> = {\n  neutral: 'bg-(--muted) text-(--foreground)',\n  outline: 'shadow-[inset_0_0_0_1px_var(--border)] text-(--foreground)',\n};\n\n/**\n * Small status descriptor for counts, states or labels, such as an instrument's asset class.\n *\n * @example\n * <ui-badge>ETF</ui-badge>\n */\n@Component({\n  selector: 'ui-badge',\n  template: '<ng-content />',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiBadge {\n  readonly variant = input<BadgeVariant>('neutral');\n  readonly size = input<BadgeSize>('md');\n\n  protected readonly classes = computed(\n    () => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${VARIANT_CLASSES[this.variant()]}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;MACa,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS;MAGtC,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI;AAGtC,MAAM,YAAY,GAAG,gEAAgE;AAErF,MAAM,YAAY,GAA8B;AAC9C,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,EAAE,EAAE,eAAe;CACpB;AAED,MAAM,eAAe,GAAiC;AACpD,IAAA,OAAO,EAAE,kCAAkC;AAC3C,IAAA,OAAO,EAAE,4DAA4D;CACtE;AAED;;;;;AAKG;MAQU,OAAO,CAAA;IACT,OAAO,GAAG,KAAK,CAAe,SAAS;gFAAC;IACxC,IAAI,GAAG,KAAK,CAAY,IAAI;6EAAC;IAEnB,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,CAAE;gFACxF;uGANU,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,mXALR,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAKf,OAAO,EAAA,UAAA,EAAA,CAAA;kBAPnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;ACjCD;;AAEG;;;;"}