@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/README.md

@@ -120,10 +120,11 @@ export const appConfig: ApplicationConfig = {
 
 ## Usage
 
-Everything is standalone, import what you need:
+Everything is standalone, and each component has its own entry point, so import what you need from where it lives:
 
 ```ts
-import { UiButtonComponent, UiInputComponent } from '@area8975/ui';
+import { UiButtonComponent } from '@area8975/ui/button';
+import { UiInputComponent } from '@area8975/ui/input';
 
 
 @Component({

package/fesm2022/area8975-ui-alert.mjs

@@ -0,0 +1,113 @@
+import * as i0 from "@angular/core";
+import { Component, computed, contentChild, input } from "@angular/core";
+var UiAlertComponent = class UiAlertComponent {
+	appearance = input("soft", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	intent = input("info", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	icon = contentChild("icon", {
+		...ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	generatedClasses = computed(() => [
+		"block",
+		"ui-alert",
+		`ui-alert--${this.appearance()}`,
+		`ui-alert--${this.intent()}`
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiAlertComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiAlertComponent,
+		isStandalone: true,
+		selector: "ui-alert",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			intent: {
+				classPropertyName: "intent",
+				publicName: "intent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "alert" },
+			properties: { "class": "generatedClasses()" }
+		},
+		queries: [{
+			propertyName: "icon",
+			first: true,
+			predicate: ["icon"],
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />\n",
+		styles: ["@layer properties;::ng-deep .ui-alert{display:inline-block;padding:calc(var(--spacing, .25rem) * 4)}:where(:is()>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}::ng-deep .ui-alert--icon{display:flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:4px}:host(.ui-alert--soft){border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px}:host(.ui-alert--bordered){border-inline-start-style:var(--tw-border-style);border-inline-start-width:6px}:host(.ui-alert--info){border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}::ng-deep .ui-alert--info .ui-alert--icon{border-color:var(--color-primary-100, var(--color-blue-100));background-color:var(--color-primary-200, var(--color-blue-200))}:host(.ui-alert--success){border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}::ng-deep .ui-alert--success .ui-alert--icon{border-color:var(--color-success-100, var(--color-teal-100));background-color:var(--color-success-200, var(--color-teal-200))}:host(.ui-alert--warning){border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}::ng-deep .ui-alert--warning .ui-alert--icon{border-color:var(--color-warning-100, var(--color-yellow-100));background-color:var(--color-warning-200, var(--color-yellow-200))}:host(.ui-alert--danger){border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}::ng-deep .ui-alert--danger .ui-alert--icon{border-color:var(--color-danger-100, var(--color-red-100));background-color:var(--color-danger-200, var(--color-red-200))}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiAlertComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-alert",
+			host: {
+				role: "alert",
+				"[class]": "generatedClasses()"
+			},
+			template: "<ng-content />\n",
+			styles: ["@layer properties;::ng-deep .ui-alert{display:inline-block;padding:calc(var(--spacing, .25rem) * 4)}:where(:is()>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}::ng-deep .ui-alert--icon{display:flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:4px}:host(.ui-alert--soft){border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px}:host(.ui-alert--bordered){border-inline-start-style:var(--tw-border-style);border-inline-start-width:6px}:host(.ui-alert--info){border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}::ng-deep .ui-alert--info .ui-alert--icon{border-color:var(--color-primary-100, var(--color-blue-100));background-color:var(--color-primary-200, var(--color-blue-200))}:host(.ui-alert--success){border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}::ng-deep .ui-alert--success .ui-alert--icon{border-color:var(--color-success-100, var(--color-teal-100));background-color:var(--color-success-200, var(--color-teal-200))}:host(.ui-alert--warning){border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}::ng-deep .ui-alert--warning .ui-alert--icon{border-color:var(--color-warning-100, var(--color-yellow-100));background-color:var(--color-warning-200, var(--color-yellow-200))}:host(.ui-alert--danger){border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}::ng-deep .ui-alert--danger .ui-alert--icon{border-color:var(--color-danger-100, var(--color-red-100));background-color:var(--color-danger-200, var(--color-red-200))}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		intent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "intent",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.ContentChild,
+			args: ["icon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}]
+	}
+});
+const AlertIntents = [
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+const AlertAppearances = ["soft", "bordered"];
+export { AlertAppearances, AlertIntents, UiAlertComponent };
+
+//# sourceMappingURL=area8975-ui-alert.mjs.map

package/fesm2022/area8975-ui-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-alert.mjs","names":[],"sources":["../../../projects/ui/alert/alert.component.ts","../../../projects/ui/alert/alert.component.html","../../../projects/ui/alert/alert.types.ts"],"sourcesContent":["import {\n    Component,\n    computed,\n    contentChild,\n    input,\n    TemplateRef\n} from '@angular/core';\n\nimport { AlertAppearance, AlertIntent } from './alert.types';\n\n\n@Component({\n    selector: 'ui-alert',\n    templateUrl: './alert.component.html',\n    styleUrl: './alert.component.css',\n    host: {\n        role: 'alert',\n        '[class]': 'generatedClasses()'\n    }\n})\nexport class UiAlertComponent {\n    readonly appearance = input<AlertAppearance>('soft');\n    readonly intent = input<AlertIntent>('info');\n\n    readonly icon = contentChild<TemplateRef<unknown>>('icon', {\n        descendants: false\n    });\n\n    readonly generatedClasses = computed(() =>\n        [\n            'block',\n            'ui-alert',\n            `ui-alert--${this.appearance()}`,\n            `ui-alert--${this.intent()}`\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n}\n","<ng-content />\n","export const AlertIntents = [\n    'info',\n    'success',\n    'warning',\n    'danger'\n];\n\nexport const AlertAppearances = [\n    'soft',\n    'bordered'\n] as const;\n\nexport type AlertIntent = typeof AlertIntents[number];\nexport type AlertAppearance = typeof AlertAppearances[number];\n"],"mappings":";;AAoBA,IAAa,mBAAb,MAAa,iBAAgB;CAChB,aAAa,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC3C,SAAS,MAAmB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEnC,OAAO,aAAmC,QAAM;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EACrD,aAAa;CAAK,CAAA;CAGb,mBAAmB,eACxB;EACI;EACA;EACA,aAAa,KAAK,WAAU;EAC5B,aAAa,KAAK,OAAM;CAC3B,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAChB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAjBQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,QAAA;GAAA,YAAA,EAAA,SAAA,qBAAA;EAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,MAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UCpB7B;EACA,QAAA,CAAA,8tFAAA;CAAA,CAAA;;ADmBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAT5B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAU,MAGd;IACF,MAAM;IACN,WAAW;GACd;GAAA,UAAA;GAAA,QAAA,CAAA,8tFAAA;EAAA,CAAA;CAMkD,CAAA;CAAA,gBAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,QAAM;IACrD,aAAa;IAChB,UAAA;GAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA;AE1BL,MAAa,eAAe;CACxB;CACA;CACA;CACA;AACH;AAED,MAAa,mBAAmB,CAC5B,QACA,UACM"}

package/fesm2022/area8975-ui-avatar.mjs

@@ -0,0 +1,157 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input, signal } from "@angular/core";
+import { chartLabelInk } from "@area8975/ui/chart-palette";
+const TEXT_CLASSES = {
+	sm: "ui-text-caption",
+	md: "ui-text-caption",
+	lg: "ui-text-body-alt",
+	xl: "ui-text-h3"
+};
+var UiAvatarComponent = class UiAvatarComponent {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	colour = input(null, ...ngDevMode ? [{ debugName: "colour" }] : /* istanbul ignore next */ []);
+	failedSrc = signal(null, ...ngDevMode ? [{ debugName: "failedSrc" }] : /* istanbul ignore next */ []);
+	showImage = computed(() => {
+		const src = this.src();
+		return !!src && src !== this.failedSrc();
+	}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
+	initials = computed(() => {
+		const words = this.name().trim().split(/\s+/).filter(Boolean);
+		return ((words[0]?.[0] ?? "") + (words.length > 1 ? words[words.length - 1][0] : "")).toUpperCase();
+	}, ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	ink = computed(() => {
+		const colour = this.colour();
+		return colour ? chartLabelInk(colour) : null;
+	}, ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-avatar",
+		`ui-avatar--${this.size()}`,
+		TEXT_CLASSES[this.size()]
+	].join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	imageFailed() {
+		this.failedSrc.set(this.src());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiAvatarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiAvatarComponent,
+		isStandalone: true,
+		selector: "ui-avatar",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colour: {
+				classPropertyName: "colour",
+				publicName: "colour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "img" },
+			properties: {
+				"attr.aria-label": "name()",
+				"class": "generatedClasses()",
+				"style.background-color": "colour()",
+				"style.color": "ink()"
+			}
+		},
+		ngImport: i0,
+		template: "@if (showImage()) {\n    <img class=\"ui-avatar-image\" [src]=\"src()\" alt=\"\" (error)=\"imageFailed()\" />\n} @else {\n    <span aria-hidden=\"true\">{{ initials() }}</span>\n}\n",
+		styles: ["@layer properties;:host(.ui-avatar){display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);-webkit-user-select:none;user-select:none}:host(.ui-avatar--sm){width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6)}:host(.ui-avatar--md){width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8)}:host(.ui-avatar--lg){width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10)}:host(.ui-avatar--xl){width:calc(var(--spacing, .25rem) * 16);height:calc(var(--spacing, .25rem) * 16)}.ui-avatar-image{width:100%;height:100%;object-fit:cover}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiAvatarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-avatar",
+			host: {
+				role: "img",
+				"[attr.aria-label]": "name()",
+				"[class]": "generatedClasses()",
+				"[style.background-color]": "colour()",
+				"[style.color]": "ink()"
+			},
+			template: "@if (showImage()) {\n    <img class=\"ui-avatar-image\" [src]=\"src()\" alt=\"\" (error)=\"imageFailed()\" />\n} @else {\n    <span aria-hidden=\"true\">{{ initials() }}</span>\n}\n",
+			styles: ["@layer properties;:host(.ui-avatar){display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);-webkit-user-select:none;user-select:none}:host(.ui-avatar--sm){width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6)}:host(.ui-avatar--md){width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8)}:host(.ui-avatar--lg){width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10)}:host(.ui-avatar--xl){width:calc(var(--spacing, .25rem) * 16);height:calc(var(--spacing, .25rem) * 16)}.ui-avatar-image{width:100%;height:100%;object-fit:cover}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		colour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colour",
+				required: false
+			}]
+		}]
+	}
+});
+const AvatarSizes = [
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+export { AvatarSizes, UiAvatarComponent };
+
+//# sourceMappingURL=area8975-ui-avatar.mjs.map

package/fesm2022/area8975-ui-avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-avatar.mjs","names":[],"sources":["../../../projects/ui/avatar/avatar.component.ts","../../../projects/ui/avatar/avatar.component.html","../../../projects/ui/avatar/avatar.types.ts"],"sourcesContent":["import { Component, computed, input, signal } from '@angular/core';\n\nimport { chartLabelInk } from '@area8975/ui/chart-palette';\n\nimport type { AvatarSize } from './avatar.types';\n\n\nconst TEXT_CLASSES: Record<AvatarSize, string> = {\n    sm: 'ui-text-caption',\n    md: 'ui-text-caption',\n    lg: 'ui-text-body-alt',\n    xl: 'ui-text-h3'\n};\n\n@Component({\n    selector: 'ui-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrl: './avatar.component.css',\n    host: {\n        role: 'img',\n        '[attr.aria-label]': 'name()',\n        '[class]': 'generatedClasses()',\n        '[style.background-color]': 'colour()',\n        '[style.color]': 'ink()'\n    }\n})\nexport class UiAvatarComponent {\n    readonly name = input.required<string>();\n    readonly src = input<string | null>(null);\n    readonly size = input<AvatarSize>('md');\n    /** Fill behind the initials, any CSS colour. The initials' ink is picked to read on six digit hex, anything else gets dark ink. */\n    readonly colour = input<string | null>(null);\n\n    private readonly failedSrc = signal<string | null>(null);\n\n    protected readonly showImage = computed(() => {\n        const src = this.src();\n\n        return !!src && src !== this.failedSrc();\n    });\n\n    protected readonly initials = computed(() => {\n        const words = this.name().trim().split(/\\s+/).filter(Boolean);\n        const first = words[0]?.[0] ?? '';\n        const last = words.length > 1 ? words[words.length - 1][0] : '';\n\n        return (first + last).toUpperCase();\n    });\n\n    protected readonly ink = computed(() => {\n        const colour = this.colour();\n\n        return colour ? chartLabelInk(colour) : null;\n    });\n\n    readonly generatedClasses = computed(() =>\n        [\n            'ui-avatar',\n            `ui-avatar--${this.size()}`,\n            TEXT_CLASSES[this.size()]\n        ].join(' ')\n    );\n\n    protected imageFailed(): void {\n        this.failedSrc.set(this.src());\n    }\n}\n","@if (showImage()) {\n    <img class=\"ui-avatar-image\" [src]=\"src()\" alt=\"\" (error)=\"imageFailed()\" />\n} @else {\n    <span aria-hidden=\"true\">{{ initials() }}</span>\n}\n","export const AvatarSizes = ['sm', 'md', 'lg', 'xl'] as const;\n\n/** @see {@link AvatarSizes} */\nexport type AvatarSize = typeof AvatarSizes[number];\n"],"mappings":";;;AAOA,MAAM,eAA2C;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACP;AAcD,IAAa,oBAAb,MAAa,kBAAiB;CACjB,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,MAAM,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE9B,SAAS,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAE3B,YAAY,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAErC,YAAY,eAAc;EACzC,MAAM,MAAM,KAAK,IAAG;EAEpB,OAAO,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAS;CAC1C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,WAAW,eAAc;EACxC,MAAM,QAAQ,KAAK,KAAI,CAAE,CAAC,KAAI,CAAE,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;EAI5D,SAHc,MAAM,EAAE,GAAG,MAAM,OAClB,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,CAAC,KAAK,IAE7C,CAAM,YAAW;CACrC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,MAAM,eAAc;EACnC,MAAM,SAAS,KAAK,OAAM;EAE1B,OAAO,SAAS,cAAc,MAAM,IAAI;CAC5C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAEO,mBAAmB,eACxB;EACI;EACA,cAAc,KAAK,KAAI;EACvB,aAAa,KAAK,KAAI;CACzB,CAAA,CAAC,KAAK,GAAG,GACb,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAES,cAAW;EACjB,KAAK,UAAU,IAAI,KAAK,IAAG,CAAE;CACjC;CAvCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,MAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,SAAA;IAAA,0BAAA;IAAA,eAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC1B9B;EAKA,QAAA,CAAA,upCAAA;CAAA,CAAA;;ADqBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAZ7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAW,MAGf;IACF,MAAM;IACN,qBAAqB;IACrB,WAAW;IACX,4BAA4B;IAC5B,iBAAiB;GACpB;GAAA,UAAA;GAAA,QAAA,CAAA,upCAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AExBL,MAAa,cAAc;CAAC;CAAM;CAAM;CAAM;AAAI"}

package/fesm2022/area8975-ui-badge.mjs

@@ -0,0 +1,116 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+var UiBadgeComponent = class UiBadgeComponent {
+	appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-badge",
+		`ui-badge--${this.intent()}-${this.appearance()}`,
+		`ui-badge--${this.size()}`
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiBadgeComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiBadgeComponent,
+		isStandalone: true,
+		selector: "ui-badge",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			intent: {
+				classPropertyName: "intent",
+				publicName: "intent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "generatedClasses()" } },
+		ngImport: i0,
+		template: "<ng-content />\n",
+		styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiBadgeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-badge",
+			host: { "[class]": "generatedClasses()" },
+			template: "<ng-content />\n",
+			styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		intent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "intent",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
+const BadgeIntents = [
+	"primary",
+	"secondary",
+	"success",
+	"warning",
+	"danger"
+];
+const BadgeAppearances = [
+	"solid",
+	"outline",
+	"soft"
+];
+const BadgeSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg"
+];
+export { BadgeAppearances, BadgeIntents, BadgeSizes, UiBadgeComponent };
+
+//# sourceMappingURL=area8975-ui-badge.mjs.map

package/fesm2022/area8975-ui-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-badge.mjs","names":[],"sources":["../../../projects/ui/badge/badge.component.ts","../../../projects/ui/badge/badge.component.html","../../../projects/ui/badge/badge.types.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport { BadgeAppearance, BadgeIntent, BadgeSize } from './badge.types';\n\n\n@Component({\n    selector: 'ui-badge',\n    templateUrl: './badge.component.html',\n    styleUrl: './badge.component.css',\n    host: { '[class]': 'generatedClasses()' }\n})\nexport class UiBadgeComponent {\n    readonly appearance = input<BadgeAppearance>('solid');\n    readonly intent = input<BadgeIntent>('primary');\n    readonly size = input<BadgeSize>('md');\n\n    readonly generatedClasses = computed(() =>\n        [\n            'ui-badge',\n            `ui-badge--${this.intent()}-${this.appearance()}`,\n            `ui-badge--${this.size()}`\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n}\n","<ng-content />\n","export const BadgeIntents = [\n    'primary',\n    'secondary',\n    'success',\n    'warning',\n    'danger'\n] as const;\n\nexport const BadgeAppearances = [\n    'solid',\n    'outline',\n    'soft'\n] as const;\n\nexport const BadgeSizes = [\n    'xs',\n    'sm',\n    'md',\n    'lg'\n] as const;\n\nexport type BadgeIntent = typeof BadgeIntents[number];\nexport type BadgeAppearance = typeof BadgeAppearances[number];\nexport type BadgeSize = typeof BadgeSizes[number];\n"],"mappings":";;AAWA,IAAa,mBAAb,MAAa,iBAAgB;CAChB,aAAa,MAAuB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,SAAS,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,OAAO,MAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,mBAAmB,eACxB;EACI;EACA,aAAa,KAAK,OAAM,EAAE,GAAI,KAAK,WAAU;EAC7C,aAAa,KAAK,KAAI;CACzB,CAAA,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAChB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAbQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;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,qBAAA,EAAA;EAAA,UAAA;EAAA,UCX7B;EACA,QAAA,CAAA,m5GAAA;CAAA,CAAA;;ADUa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAN5B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAU,MAGd,EAAE,WAAW,qBAAoB;GAAE,UAAA;GAAA,QAAA,CAAA,m5GAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AET7C,MAAa,eAAe;CACxB;CACA;CACA;CACA;CACA;AACM;AAEV,MAAa,mBAAmB;CAC5B;CACA;CACA;AACM;AAEV,MAAa,aAAa;CACtB;CACA;CACA;CACA;AACM"}