@joanroucoux/cairn-ui 0.8.2 → 0.9.0

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

@@ -1,179 +1,268 @@
-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);
- */
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, booleanAttribute, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
 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();
+	const displayed = signal(null, ...ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []);
+	let timer;
+	let shownAt = 0;
+	const clear = () => {
+		clearTimeout(timer);
+		timer = void 0;
+	};
+	inject(DestroyRef).onDestroy(clear);
+	effect(() => {
+		const state = source();
+		untracked(() => {
+			if (state === "loading") {
+				if (displayed() === "loading") clear();
+				else timer = setTimeout(() => {
+					timer = void 0;
+					shownAt = Date.now();
+					displayed.set("loading");
+				}, 150);
+				return;
+			}
+			clear();
+			const remaining = shownAt + 400 - Date.now();
+			if (displayed() === "loading" && remaining > 0) timer = setTimeout(() => {
+				timer = void 0;
+				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 ASYNC_STATES = [
+	"loading",
+	"error",
+	"empty",
+	"ready"
+];
+const ASYNC_VARIANTS = [
+	"elevated",
+	"plain",
+	"emphasis",
+	"inline"
+];
+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";
+const RETRY_INLINE_ICON_CLASSES = "gap-1.5 pl-2.5 pr-3";
+const RETRY_INLINE_TEXT_CLASSES = "px-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,
-    },
+	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',
+	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: `
+const INLINE_BOX_CLASSES = "flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5";
+var UiAsync = class UiAsync {
+	state = input.required(...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	errorTitle = input(...ngDevMode ? [void 0, { debugName: "errorTitle" }] : /* istanbul ignore next */ []);
+	errorMessage = input(...ngDevMode ? [void 0, { debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	retryLabel = input(...ngDevMode ? [void 0, { debugName: "retryLabel" }] : /* istanbul ignore next */ []);
+	retryIcon = input(true, {
+		...ngDevMode ? { debugName: "retryIcon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	variant = input("elevated", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	align = input("start", ...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", ...ngDevMode ? [{ debugName: "filling" }] : /* istanbul ignore next */ []);
+	iconSize = computed(() => this.variant() === "inline" ? 16 : 18, ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+	#spec = computed(() => {
+		const variant = this.variant();
+		return variant === "inline" ? null : BLOCK_SPECS[variant];
+	}, ...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" : ""}`;
+		return `flex flex-col ${this.card() ? CARD_SURFACE_CLASSES : spec.surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;
+	}, ...ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []);
+	titleClasses = computed(() => this.#spec().title, ...ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []);
+	messageClasses = computed(() => this.#spec().message[this.align()], ...ngDevMode ? [{ debugName: "messageClasses" }] : /* istanbul ignore next */ []);
+	retryButtonClasses = computed(() => {
+		const spec = this.#spec();
+		if (spec === null) {
+			const spacing = this.retryIcon() ? RETRY_INLINE_ICON_CLASSES : RETRY_INLINE_TEXT_CLASSES;
+			return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES} ${spacing}`;
+		}
+		return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;
+	}, ...ngDevMode ? [{ debugName: "retryButtonClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		holdTransitionsUntilRendered();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiAsync,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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
+			},
+			retryIcon: {
+				classPropertyName: "retryIcon",
+				publicName: "retryIcon",
+				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') {
@@ -192,19 +281,21 @@ class UiAsync {
             <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>
+            @if (retryIcon() || variant() !== 'inline') {
+              <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>
@@ -216,13 +307,20 @@ class UiAsync {
         <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: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiAsync,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-async",
+			template: `
     @switch (shown()) {
       @case (null) {}
       @case ('loading') {
@@ -241,19 +339,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             <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>
+            @if (retryIcon() || variant() !== 'inline') {
+              <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>
@@ -266,17 +366,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
     }
   `,
-                    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.
- */
-
+			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
+			}]
+		}],
+		retryIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryIcon",
+				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"]
+		}]
+	}
+});
 export { ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, UiAsync, delayedState };
-//# sourceMappingURL=joanroucoux-cairn-ui-async.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-async.mjs.map