@joanroucoux/cairn-ui 0.8.1 → 0.9.0

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

@@ -1,48 +1,88 @@
-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';
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+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',
+	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)',
+	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.
- */
-
+var UiBadge = class UiBadge {
+	variant = input("neutral", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${VARIANT_CLASSES[this.variant()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		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.2.0",
+	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
+			}]
+		}]
+	}
+});
 export { BADGE_SIZES, BADGE_VARIANTS, UiBadge };
-//# sourceMappingURL=joanroucoux-cairn-ui-badge.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-badge.mjs.map

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

@@ -1 +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;;;;"}
+{"version":3,"file":"joanroucoux-cairn-ui-badge.mjs","names":[],"sources":["../../../projects/ui/badge/badge.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available badge variants. */\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"],"mappings":";;AAGA,MAAa,iBAAiB,CAAC,WAAW,SAAS;AAGnD,MAAa,cAAc,CAAC,MAAM,IAAI;AAGtC,MAAM,eAAe;AAErB,MAAM,eAA0C;CAC9C,IAAI;CACJ,IAAI;AACL;AAED,MAAM,kBAAgD;CACpD,SAAS;CACT,SAAS;AACV;AAeD,IAAa,UAAb,MAAa,QAAO;CACT,UAAU,MAAoB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACxC,OAAO,MAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEnB,UAAU,eACrB,GAAG,aAAY,GAAI,aAAa,KAAK,KAAI,GAAG,GAAI,gBAAgB,KAAK,QAAO,MACnF,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CANU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,YAAA,EAAA;EAAA,UAAA;EAAA,UALR;EAAgB,UAAA;CAAA,CAAA;;AAKf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAPnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,MAAM,EACJ,WAAW,YACZ;EACF,CAAA"}

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

@@ -1,95 +1,136 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, inject, ElementRef, DestroyRef, Component } from '@angular/core';
-import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
-
-/** Available button variants. `ButtonVariant` is derived from this tuple. */
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
 const BUTTON_VARIANTS = [
-    'primary',
-    'outline',
-    'ghost',
-    'destructive',
-    'quiet',
-    'quiet-destructive',
-    'outline-destructive',
-    'quiet-glow',
-    'tonal',
+	"primary",
+	"outline",
+	"ghost",
+	"destructive",
+	"quiet",
+	"quiet-destructive",
+	"outline-destructive",
+	"quiet-glow",
+	"tonal"
 ];
-/** Available button sizes. */
 const BUTTON_SIZES = [
-    'compact',
-    'slim',
-    'xs',
-    'sm',
-    'md',
-    'lg',
-    'xl',
-    'xxl',
-    'tall',
-    'block',
-    'icon',
-    'icon-sm',
+	"compact",
+	"slim",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl",
+	"tall",
+	"block",
+	"icon",
+	"icon-sm"
 ];
-const 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
-const RING_OUTSIDE = 'focus-visible:outline-offset-2';
-const RING_INSIDE = 'focus-visible:-outline-offset-2';
-const OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';
+const 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40";
+const RING_OUTSIDE = "focus-visible:outline-offset-2";
+const RING_INSIDE = "focus-visible:-outline-offset-2";
+const OUTLINE = "bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)";
 const VARIANT_CLASSES = {
-    primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,
-    outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,
-    ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,
-    destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,
-    tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,
-    'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,
-    quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,
-    'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,
-    'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,
+	primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,
+	outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,
+	ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,
+	destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,
+	tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,
+	"quiet-glow": `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,
+	quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,
+	"quiet-destructive": `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,
+	"outline-destructive": `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`
 };
 const SIZE_CLASSES = {
-    compact: 'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',
-    slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',
-    xs: 'h-8 gap-1.5 px-2.5 text-label',
-    sm: 'h-9 gap-2 px-3 text-label',
-    md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',
-    lg: 'h-11 gap-2 px-[18px] text-label',
-    xl: 'h-[50px] gap-2 px-6 text-body',
-    xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',
-    tall: 'h-12 lg:h-10 gap-2 px-4 text-body',
-    block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',
-    icon: 'size-(--row-min) gap-2 p-0',
-    'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',
+	compact: "h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden",
+	slim: "h-11 lg:h-8 gap-1.5 px-2.5 text-label",
+	xs: "h-8 gap-1.5 px-2.5 text-label",
+	sm: "h-9 gap-2 px-3 text-label",
+	md: "min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3",
+	lg: "h-11 gap-2 px-[18px] text-label",
+	xl: "h-[50px] gap-2 px-6 text-body",
+	xxl: "h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4",
+	tall: "h-12 lg:h-10 gap-2 px-4 text-body",
+	block: "h-[50px] lg:h-11 gap-2 px-4 text-body",
+	icon: "size-(--row-min) gap-2 p-0",
+	"icon-sm": "size-11 pointer-fine:size-9 gap-2 p-0"
 };
-/**
- * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
- *
- * @example
- * <button ui-button variant="destructive">Delete</button>
- * <button ui-button size="icon" variant="ghost" aria-label="More actions">...</button>
- */
-class UiButton {
-    variant = input('primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    inactive = computed(() => this.loading() || this.busy(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        holdTransitionsUntilRendered();
-        const host = inject(ElementRef).nativeElement;
-        const guard = (event) => {
-            if (this.inactive()) {
-                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: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiButton, isStandalone: true, selector: "button[ui-button], a[ui-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "inactive() || null", "attr.aria-disabled": "inactive() || null" } }, ngImport: i0, template: `
+var UiButton = class UiButton {
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	busy = input(false, {
+		...ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	inactive = computed(() => this.loading() || this.busy(), ...ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? " pointer-events-none opacity-70" : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		holdTransitionsUntilRendered();
+		const host = inject(ElementRef).nativeElement;
+		const guard = (event) => {
+			if (this.inactive()) {
+				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: UiButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiButton,
+		isStandalone: true,
+		selector: "button[ui-button], a[ui-button]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.aria-busy": "inactive() || null",
+			"attr.aria-disabled": "inactive() || null"
+		} },
+		ngImport: i0,
+		template: `
     @if (loading()) {
       <span
         aria-hidden="true"
@@ -97,13 +138,20 @@ class UiButton {
       ></span>
     }
     <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiButton, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[ui-button], a[ui-button]',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[ui-button], a[ui-button]",
+			template: `
     @if (loading()) {
       <span
         aria-hidden="true"
@@ -112,17 +160,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }
     <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
   `,
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.aria-busy]': 'inactive() || null',
-                        '[attr.aria-disabled]': 'inactive() || null',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: {
+				"[class]": "classes()",
+				"[attr.aria-busy]": "inactive() || null",
+				"[attr.aria-disabled]": "inactive() || null"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}]
+	}
+});
 export { BUTTON_SIZES, BUTTON_VARIANTS, UiButton };
-//# sourceMappingURL=joanroucoux-cairn-ui-button.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-button.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-button.mjs","sources":["../../../projects/ui/button/button.ts","../../../projects/ui/button/joanroucoux-cairn-ui-button.ts"],"sourcesContent":["import { Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available button variants. `ButtonVariant` is derived from this tuple. */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'destructive',\n  'quiet',\n  'quiet-destructive',\n  'outline-destructive',\n  'quiet-glow',\n  'tonal',\n] as const;\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number];\n\n/** Available button sizes. */\nexport const BUTTON_SIZES = [\n  'compact',\n  'slim',\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  'xxl',\n  'tall',\n  'block',\n  'icon',\n  'icon-sm',\n] as const;\nexport type ButtonSize = (typeof BUTTON_SIZES)[number];\n\nconst 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';\n\nconst RING_OUTSIDE = 'focus-visible:outline-offset-2';\nconst RING_INSIDE = 'focus-visible:-outline-offset-2';\nconst OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,\n  outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,\n  ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,\n  destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,\n  tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,\n  'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,\n  quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,\n  'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,\n  'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  compact:\n    'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',\n  slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',\n  xs: 'h-8 gap-1.5 px-2.5 text-label',\n  sm: 'h-9 gap-2 px-3 text-label',\n  md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',\n  lg: 'h-11 gap-2 px-[18px] text-label',\n  xl: 'h-[50px] gap-2 px-6 text-body',\n  xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',\n  tall: 'h-12 lg:h-10 gap-2 px-4 text-body',\n  block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',\n  icon: 'size-(--row-min) gap-2 p-0',\n  'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',\n};\n\n/**\n * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.\n *\n * @example\n * <button ui-button variant=\"destructive\">Delete</button>\n * <button ui-button size=\"icon\" variant=\"ghost\" aria-label=\"More actions\">...</button>\n */\n@Component({\n  selector: 'button[ui-button], a[ui-button]',\n  template: `\n    @if (loading()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent\"\n      ></span>\n    }\n    <span class=\"contents\" [class.text-transparent]=\"loading()\"><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'inactive() || null',\n    '[attr.aria-disabled]': 'inactive() || null',\n  },\n})\nexport class UiButton {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly loading = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n\n  protected readonly inactive = computed(() => this.loading() || this.busy());\n\n  protected readonly classes = computed(\n    () =>\n      `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`,\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.inactive()) {\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 * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-button.mjs","names":[],"sources":["../../../projects/ui/button/button.ts"],"sourcesContent":["import { Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Available button variants. */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'destructive',\n  'quiet',\n  'quiet-destructive',\n  'outline-destructive',\n  'quiet-glow',\n  'tonal',\n] as const;\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number];\n\n/** Available button sizes. */\nexport const BUTTON_SIZES = [\n  'compact',\n  'slim',\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  'xxl',\n  'tall',\n  'block',\n  'icon',\n  'icon-sm',\n] as const;\nexport type ButtonSize = (typeof BUTTON_SIZES)[number];\n\nconst 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';\n\nconst RING_OUTSIDE = 'focus-visible:outline-offset-2';\nconst RING_INSIDE = 'focus-visible:-outline-offset-2';\nconst OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,\n  outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,\n  ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,\n  destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,\n  tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,\n  'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,\n  quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,\n  'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,\n  'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  compact:\n    'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',\n  slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',\n  xs: 'h-8 gap-1.5 px-2.5 text-label',\n  sm: 'h-9 gap-2 px-3 text-label',\n  md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',\n  lg: 'h-11 gap-2 px-[18px] text-label',\n  xl: 'h-[50px] gap-2 px-6 text-body',\n  xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',\n  tall: 'h-12 lg:h-10 gap-2 px-4 text-body',\n  block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',\n  icon: 'size-(--row-min) gap-2 p-0',\n  'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',\n};\n\n/**\n * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.\n *\n * @example\n * <button ui-button variant=\"destructive\">Delete</button>\n * <button ui-button size=\"icon\" variant=\"ghost\" aria-label=\"More actions\">...</button>\n */\n@Component({\n  selector: 'button[ui-button], a[ui-button]',\n  template: `\n    @if (loading()) {\n      <span\n        aria-hidden=\"true\"\n        class=\"rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent\"\n      ></span>\n    }\n    <span class=\"contents\" [class.text-transparent]=\"loading()\"><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-busy]': 'inactive() || null',\n    '[attr.aria-disabled]': 'inactive() || null',\n  },\n})\nexport class UiButton {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly loading = input(false, { transform: booleanAttribute });\n  readonly busy = input(false, { transform: booleanAttribute });\n\n  protected readonly inactive = computed(() => this.loading() || this.busy());\n\n  protected readonly classes = computed(\n    () =>\n      `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`,\n  );\n\n  constructor() {\n    holdTransitionsUntilRendered();\n    const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n    const guard = (event: Event): void => {\n      if (this.inactive()) {\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"],"mappings":";;;AAKA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACQ;AAIV,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACQ;AAGV,MAAM,eACJ;AAEF,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,UAAU;AAEhB,MAAM,kBAAiD;CACrD,SAAS,GAAG,aAAY;CACxB,SAAS,GAAG,aAAY,GAAI,QAAO;CACnC,OAAO,GAAG,aAAY;CACtB,aAAa,GAAG,aAAY;CAC5B,OAAO,GAAG,aAAY;CACtB,cAAc,GAAG,YAAW;CAC5B,OAAO,GAAG,YAAW;CACrB,qBAAqB,GAAG,YAAW;CACnC,uBAAuB,GAAG,aAAY,GAAI,QAAO;AAClD;AAED,MAAM,eAA2C;CAC/C,SACE;CACF,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,MAAM;CACN,OAAO;CACP,MAAM;CACN,WAAW;AACZ;AA0BD,IAAa,WAAb,MAAa,SAAQ;CACV,UAAU,MAAqB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC9B,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACpD,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAEvC,WAAW,eAAe,KAAK,QAAO,KAAM,KAAK,KAAI,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAExD,UAAU,eAEzB,GAAG,aAAY,GAAI,gBAAgB,KAAK,QAAO,GAAG,GAAI,aAAa,KAAK,KAAI,KAAM,KAAK,SAAQ,IAAK,oCAAoC,MAC3I,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAED,cAAA;EACE,6BAA4B;EAC5B,MAAM,OAAO,OAAgC,UAAU,CAAC,CAAC;EACzD,MAAM,SAAS,UAAsB;GACnC,IAAI,KAAK,SAAQ,GAAI;IACnB,MAAM,eAAc;IACpB,MAAM,yBAAwB;GAChC;EACF;EAEA,KAAK,iBAAiB,SAAS,OAAO,EAAE,SAAS,KAAI,CAAE;EACvD,OAAO,UAAU,CAAC,CAAC,gBAAgB,KAAK,oBAAoB,SAAS,OAAO,EAAE,SAAS,KAAI,CAAE,CAAC;CAChG;CAzBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,kBAAA;GAAA,sBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UAfT;;;;;;;;;EAQT,UAAA;CAAA,CAAA;;AAOU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAjBpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;GASV,MAAM;IACJ,WAAW;IACX,oBAAoB;IACpB,wBAAwB;GACzB;EACF,CAAA"}