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

package/fesm2022/area8975-ui-file-input.mjs

@@ -0,0 +1,340 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model, output, signal, viewChild } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { selectFiles } from "@area8975/ui/file";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiInputGroupComponent } from "@area8975/ui/input-group";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroArrowUp, heroXMark } from "@ng-icons/heroicons/outline";
+var UiFileInputComponent = class UiFileInputComponent {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	maxSize = input(null, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
+	placeholder = input("No file chosen", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	buttonLabel = input("Browse", ...ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []);
+	rejected = output();
+	picker = viewChild.required("picker", ...ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []);
+	hasRejection = signal(false, ...ngDevMode ? [{ debugName: "hasRejection" }] : /* istanbul ignore next */ []);
+	summary = computed(() => {
+		const files = this.value();
+		return files.length > 1 ? `${files.length} files` : files[0]?.name ?? "";
+	}, ...ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []);
+	openPicker() {
+		if (this.disabled()) return;
+		const picker = this.picker().nativeElement;
+		if (picker.showPicker) picker.showPicker();
+		else picker.click();
+	}
+	handlePick(event) {
+		const target = event.target;
+		const { accepted, rejected } = selectFiles([...target.files ?? []], this.accept(), this.maxSize());
+		target.value = "";
+		this.hasRejection.set(rejected.length > 0);
+		if (rejected.length) this.rejected.emit(rejected);
+		if (accepted.length) this.value.set(accepted);
+	}
+	clear(event) {
+		event.stopPropagation();
+		this.value.set([]);
+		this.hasRejection.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiFileInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiFileInputComponent,
+		isStandalone: true,
+		selector: "ui-file-input",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSize: {
+				classPropertyName: "maxSize",
+				publicName: "maxSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			buttonLabel: {
+				classPropertyName: "buttonLabel",
+				publicName: "buttonLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			rejected: "rejected"
+		},
+		host: { properties: { "attr.id": "null" } },
+		providers: [provideIcons({
+			heroArrowUp,
+			heroXMark
+		})],
+		viewQueries: [{
+			propertyName: "picker",
+			first: true,
+			predicate: ["picker"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ui-input-group [validationState]=\"hasRejection() ? false : null\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <ng-icon name=\"heroArrowUpTray\" class=\"shrink-0\" />\n        {{ buttonLabel() }}\n    </ui-button>\n\n    <input\n        #picker\n        type=\"file\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n        (change)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [value]=\"summary()\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder()\"\n        [describedBy]=\"describedBy()\"\n        classes=\"truncate cursor-pointer\"\n        readonly\n        (click)=\"openPicker()\"\n    >\n        <ng-template #trailing>\n            @if (value().length && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear files\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n</ui-input-group>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiInputGroupComponent,
+				selector: "ui-input-group",
+				inputs: ["validationState"],
+				outputs: ["validationStateChange"]
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiFileInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-file-input",
+			imports: [
+				UiInputComponent,
+				UiInputGroupComponent,
+				UiButtonComponent,
+				NgIcon
+			],
+			providers: [provideIcons({
+				heroArrowUp,
+				heroXMark
+			})],
+			host: { "[attr.id]": "null" },
+			template: "<ui-input-group [validationState]=\"hasRejection() ? false : null\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <ng-icon name=\"heroArrowUpTray\" class=\"shrink-0\" />\n        {{ buttonLabel() }}\n    </ui-button>\n\n    <input\n        #picker\n        type=\"file\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n        (change)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [value]=\"summary()\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder()\"\n        [describedBy]=\"describedBy()\"\n        classes=\"truncate cursor-pointer\"\n        readonly\n        (click)=\"openPicker()\"\n    >\n        <ng-template #trailing>\n            @if (value().length && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear files\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n</ui-input-group>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		maxSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSize",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		buttonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "buttonLabel",
+				required: false
+			}]
+		}],
+		rejected: [{
+			type: i0.Output,
+			args: ["rejected"]
+		}],
+		picker: [{
+			type: i0.ViewChild,
+			args: ["picker", { isSignal: true }]
+		}]
+	}
+});
+export { UiFileInputComponent };
+
+//# sourceMappingURL=area8975-ui-file-input.mjs.map

package/fesm2022/area8975-ui-file-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-file-input.mjs","names":[],"sources":["../../../projects/ui/file-input/file-input.component.ts","../../../projects/ui/file-input/file-input.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    input,\n    model,\n    output,\n    signal,\n    viewChild\n} from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport type { FileRejection } from '@area8975/ui/file';\nimport { selectFiles } from '@area8975/ui/file';\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { UiInputGroupComponent } from '@area8975/ui/input-group';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroArrowUp, heroXMark } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-file-input',\n    templateUrl: './file-input.component.html',\n    imports: [\n        UiInputComponent,\n        UiInputGroupComponent,\n        UiButtonComponent,\n        NgIcon\n    ],\n    providers: [provideIcons({ heroArrowUp, heroXMark })],\n    host: { '[attr.id]': 'null' }\n})\nexport class UiFileInputComponent {\n    readonly value = model<File[]>([]);\n\n    readonly id = input<string>('');\n    readonly accept = input<string>('');\n    readonly multiple = input(false, { transform: booleanAttribute });\n    readonly disabled = input(false, { transform: booleanAttribute });\n    readonly describedBy = input<string>('');\n\n    /** Max size per file in bytes. */\n    readonly maxSize = input<number | null>(null);\n\n    readonly placeholder = input<string>('No file chosen');\n    readonly buttonLabel = input<string>('Browse');\n\n    readonly rejected = output<FileRejection[]>();\n\n    private readonly picker = viewChild.required<ElementRef<HTMLInputElement>>(\n        'picker'\n    );\n\n    protected readonly hasRejection = signal(false);\n\n    protected readonly summary = computed(() => {\n        const files = this.value();\n\n        return files.length > 1\n            ? `${files.length} files`\n            : files[0]?.name ?? '';\n    });\n\n    protected openPicker(): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        const picker = this.picker().nativeElement;\n\n        if (picker.showPicker) {\n            picker.showPicker();\n        } else {\n            picker.click();\n        }\n    }\n\n    protected handlePick(event: Event): void {\n        const target = event.target as HTMLInputElement;\n        const { accepted, rejected } = selectFiles(\n            [...target.files ?? []],\n            this.accept(),\n            this.maxSize()\n        );\n\n        // reset so picking the same file again still fires change\n        target.value = '';\n\n        this.hasRejection.set(rejected.length > 0);\n\n        if (rejected.length) {\n            this.rejected.emit(rejected);\n        }\n\n        if (accepted.length) {\n            this.value.set(accepted);\n        }\n    }\n\n    protected clear(event: Event): void {\n        // stop the input underneath from opening the picker\n        event.stopPropagation();\n\n        this.value.set([]);\n        this.hasRejection.set(false);\n    }\n}\n","<ui-input-group [validationState]=\"hasRejection() ? false : null\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <ng-icon name=\"heroArrowUpTray\" class=\"shrink-0\" />\n        {{ buttonLabel() }}\n    </ui-button>\n\n    <input\n        #picker\n        type=\"file\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        [disabled]=\"disabled()\"\n        (change)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [value]=\"summary()\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder()\"\n        [describedBy]=\"describedBy()\"\n        classes=\"truncate cursor-pointer\"\n        readonly\n        (click)=\"openPicker()\"\n    >\n        <ng-template #trailing>\n            @if (value().length && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear files\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n</ui-input-group>\n"],"mappings":"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"}

package/fesm2022/area8975-ui-file.mjs

@@ -0,0 +1,47 @@
+const FileRejectionReasons = ["type", "size"];
+const SIZE_UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB"
+];
+function matchesAccept(file, accept) {
+	const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (!tokens.length) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+function selectFiles(files, accept, maxSize) {
+	const accepted = [];
+	const rejected = [];
+	for (const file of files) if (!matchesAccept(file, accept)) rejected.push({
+		file,
+		reason: "type"
+	});
+	else if (maxSize !== null && file.size > maxSize) rejected.push({
+		file,
+		reason: "size"
+	});
+	else accepted.push(file);
+	return {
+		accepted,
+		rejected
+	};
+}
+function formatFileSize(bytes) {
+	let size = bytes;
+	let unit = 0;
+	while (size >= 1024 && unit < SIZE_UNITS.length - 1) {
+		size /= 1024;
+		unit++;
+	}
+	return `${unit === 0 ? size : Math.round(size * 10) / 10} ${SIZE_UNITS[unit]}`;
+}
+export { FileRejectionReasons, formatFileSize, matchesAccept, selectFiles };
+
+//# sourceMappingURL=area8975-ui-file.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-file.mjs","names":[],"sources":["../../../projects/ui/file/file.types.ts","../../../projects/ui/file/file.utils.ts"],"sourcesContent":["/** Why a file was turned away by a file picker. */\nexport const FileRejectionReasons = ['type', 'size'] as const;\n\n/** @see {@link FileRejectionReasons} */\nexport type FileRejectionReason = typeof FileRejectionReasons[number];\n\nexport interface FileRejection {\n    file: File;\n    reason: FileRejectionReason;\n}\n\nexport interface FileSelection {\n    accepted: File[];\n    rejected: FileRejection[];\n}\n","import type { FileRejection, FileSelection } from './file.types';\n\n\nconst SIZE_UNITS = ['B', 'KB', 'MB', 'GB'];\n\n/**\n * Checks a file against a native `accept` string, e.g. \".csv,image/*\".\n * Dropped files skip the browser's own accept check, so we do it ourselves.\n */\nexport function matchesAccept(file: File, accept: string): boolean {\n    const tokens = accept\n        .split(',')\n        .map(token => token.trim().toLowerCase())\n        .filter(Boolean);\n\n    if (!tokens.length) {\n        return true;\n    }\n\n    const name = file.name.toLowerCase();\n    const type = file.type.toLowerCase();\n\n    return tokens.some(token => {\n        if (token.startsWith('.')) {\n            return name.endsWith(token);\n        }\n\n        if (token.endsWith('/*')) {\n            return type.startsWith(token.slice(0, -1));\n        }\n\n        return type === token;\n    });\n}\n\n/** Splits files into ones that pass the accept and size rules and ones that don't. */\nexport function selectFiles(\n    files: File[],\n    accept: string,\n    maxSize: number | null\n): FileSelection {\n    const accepted: File[] = [];\n    const rejected: FileRejection[] = [];\n\n    for (const file of files) {\n        if (!matchesAccept(file, accept)) {\n            rejected.push({ file, reason: 'type' });\n        } else if (maxSize !== null && file.size > maxSize) {\n            rejected.push({ file, reason: 'size' });\n        } else {\n            accepted.push(file);\n        }\n    }\n\n    return { accepted, rejected };\n}\n\n/** Human readable size, e.g. 1536 -> \"1.5 KB\". */\nexport function formatFileSize(bytes: number): string {\n    let size = bytes;\n    let unit = 0;\n\n    while (size >= 1024 && unit < SIZE_UNITS.length - 1) {\n        size /= 1024;\n        unit++;\n    }\n\n    const rounded = unit === 0 ? size : Math.round(size * 10) / 10;\n\n    return `${rounded} ${SIZE_UNITS[unit]}`;\n}\n"],"mappings":"AACA,MAAa,uBAAuB,CAAC,QAAQ,MAAM;ACEnD,MAAM,aAAa;CAAC;CAAK;CAAM;CAAM;AAAI;AAMzC,SAAgB,cAAc,MAAY,QAAc;CACpD,MAAM,SAAS,OACV,MAAM,GAAG,CAAC,CACV,KAAI,UAAS,MAAM,KAAI,CAAE,CAAC,YAAW,CAAE,CAAC,CACxC,OAAO,OAAO;CAEnB,IAAI,CAAC,OAAO,QACR,OAAO;CAGX,MAAM,OAAO,KAAK,KAAK,YAAW;CAClC,MAAM,OAAO,KAAK,KAAK,YAAW;CAElC,OAAO,OAAO,MAAK,UAAQ;EACvB,IAAI,MAAM,WAAW,GAAG,GACpB,OAAO,KAAK,SAAS,KAAK;EAG9B,IAAI,MAAM,SAAS,IAAI,GACnB,OAAO,KAAK,WAAW,MAAM,MAAM,GAAG,EAAE,CAAC;EAG7C,OAAO,SAAS;CACpB,CAAC;AACL;AAGA,SAAgB,YACZ,OACA,QACA,SAAsB;CAEtB,MAAM,WAAmB,CAAA;CACzB,MAAM,WAA4B,CAAA;CAElC,KAAK,MAAM,QAAQ,OACf,IAAI,CAAC,cAAc,MAAM,MAAM,GAC3B,SAAS,KAAK;EAAE;EAAM,QAAQ;CAAM,CAAE;MACnC,IAAI,YAAY,QAAQ,KAAK,OAAO,SACvC,SAAS,KAAK;EAAE;EAAM,QAAQ;CAAM,CAAE;MAEtC,SAAS,KAAK,IAAI;CAI1B,OAAO;EAAE;EAAU;CAAQ;AAC/B;AAGA,SAAgB,eAAe,OAAa;CACxC,IAAI,OAAO;CACX,IAAI,OAAO;CAEX,OAAO,QAAQ,QAAQ,OAAO,WAAW,SAAS,GAAG;EACjD,QAAQ;EACR;CACJ;CAIA,OAAO,GAFS,SAAS,IAAI,OAAO,KAAK,MAAM,OAAO,EAAE,IAAI,GAE3C,GAAI,WAAW;AACpC"}

package/fesm2022/area8975-ui-format.mjs

@@ -0,0 +1,70 @@
+import { InjectionToken, inject, signal } from "@angular/core";
+const UiPrivacies = [
+	"visible",
+	"discreet",
+	"hidden"
+];
+const UI_PRIVACY = new InjectionToken("UI_PRIVACY", {
+	providedIn: "root",
+	factory: () => signal("visible").asReadonly()
+});
+function provideUiPrivacy(privacy) {
+	return {
+		provide: UI_PRIVACY,
+		useFactory: privacy
+	};
+}
+const PRIVATE_TEXT_MASK = "- - -";
+const PRIVATE_TEXT_LABEL = "text hidden";
+const PRIVACY_MASK = ` ${PRIVATE_TEXT_MASK}`;
+function maskMoney(currency, locale) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).formatToParts(0).map((part) => part.type === "currency" || part.type === "literal" ? part.value : PRIVACY_MASK).filter((value, index, values) => value !== PRIVACY_MASK || values[index - 1] !== PRIVACY_MASK).join("");
+}
+function injectPrivateText() {
+	const privacy = inject(UI_PRIVACY);
+	const replace = (text, replacement) => !text ? text ?? "" : privacy() === "visible" ? text : replacement;
+	return Object.assign((text) => replace(text, PRIVATE_TEXT_MASK), { label: (text) => replace(text, PRIVATE_TEXT_LABEL) });
+}
+const UI_FORMAT_DEFAULTS = {
+	currency: "GBP",
+	locale: "en-GB"
+};
+const UI_FORMAT = new InjectionToken("UI_FORMAT", {
+	providedIn: "root",
+	factory: () => UI_FORMAT_DEFAULTS
+});
+function provideUiFormat(format) {
+	return {
+		provide: UI_FORMAT,
+		useValue: {
+			...UI_FORMAT_DEFAULTS,
+			...format
+		}
+	};
+}
+const MONEY = Symbol("money");
+function moneyFormatterParts(formatter) {
+	return formatter[MONEY] ?? null;
+}
+function injectMoneyFormatter(options = {}) {
+	const { currency, locale } = inject(UI_FORMAT);
+	const privacy = inject(UI_PRIVACY);
+	const formatter = new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency,
+		...options
+	});
+	const resolved = formatter.resolvedOptions();
+	const mask = maskMoney(resolved.currency ?? currency, resolved.locale);
+	const format = (value) => formatter.format(value);
+	return Object.assign((value) => privacy() === "visible" ? format(value) : mask, { [MONEY]: {
+		format,
+		mask
+	} });
+}
+export { PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_PRIVACY, UiPrivacies, injectMoneyFormatter, injectPrivateText, maskMoney, moneyFormatterParts, provideUiFormat, provideUiPrivacy };
+
+//# sourceMappingURL=area8975-ui-format.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-format.mjs","names":[],"sources":["../../../projects/ui/format/privacy.ts","../../../projects/ui/format/format.ts"],"sourcesContent":["import {\n    inject,\n    InjectionToken,\n    type Provider,\n    type Signal,\n    signal\n} from '@angular/core';\n\n\nexport const UiPrivacies = [\n    'visible',\n    'discreet',\n    'hidden'\n] as const;\n\n/** Discreet hides amounts but keeps their shape, hidden hides everything about them. */\nexport type UiPrivacy = typeof UiPrivacies[number];\n\nexport const UI_PRIVACY = new InjectionToken<Signal<UiPrivacy>>('UI_PRIVACY', {\n    providedIn: 'root',\n    factory: () => signal<UiPrivacy>('visible').asReadonly()\n});\n\n/** The factory runs in an injection context, so it can return a signal from an app service. */\nexport function provideUiPrivacy(privacy: () => Signal<UiPrivacy>): Provider {\n    return {\n        provide: UI_PRIVACY,\n        useFactory: privacy\n    };\n}\n\n// #region Privacy\n\n/** The fixed mask for private text, e.g. a transaction's description. */\nexport const PRIVATE_TEXT_MASK = '- - -';\n\n/** What screen readers hear in place of private text. */\nexport const PRIVATE_TEXT_LABEL = 'text hidden';\n\nconst PRIVACY_MASK = ` ${PRIVATE_TEXT_MASK}`;\n\nexport function maskMoney(currency: string, locale: string): string {\n    return new Intl.NumberFormat(locale, { style: 'currency', currency })\n        .formatToParts(0)\n        .map(part =>\n            part.type === 'currency' || part.type === 'literal'\n                ? part.value\n                : PRIVACY_MASK\n        )\n        .filter((value, index, values) =>\n            value !== PRIVACY_MASK || values[index - 1] !== PRIVACY_MASK\n        )\n        .join('');\n}\n\nexport interface PrivateTextFormatter {\n    /** The text, or `PRIVATE_TEXT_MASK`. For visible attributes like `title`. */\n    (text: string | null | undefined): string;\n\n    /** The text, or `PRIVATE_TEXT_LABEL`. For `aria-*`, so screen readers don't read out dashes. */\n    label: (text: string | null | undefined) => string;\n}\n\n/** Needs an injection context. Reads `UI_PRIVACY` on every call, so a template or computed calling it follows the mode. */\nexport function injectPrivateText(): PrivateTextFormatter {\n    const privacy = inject(UI_PRIVACY);\n\n    const replace = (text: string | null | undefined, replacement: string) =>\n        !text ? text ?? '' : privacy() === 'visible' ? text : replacement;\n\n    return Object.assign(\n        (text: string | null | undefined) => replace(text, PRIVATE_TEXT_MASK),\n        { label: (text: string | null | undefined) => replace(text, PRIVATE_TEXT_LABEL) }\n    );\n}\n// #endregion\n","import { inject, InjectionToken, type Provider } from '@angular/core';\n\nimport { maskMoney, UI_PRIVACY } from './privacy';\n\n\nexport interface UiFormat {\n    /** ISO 4217 code, e.g. \"GBP\". */\n    currency: string;\n\n    /** BCP 47 tag, e.g. \"en-GB\". */\n    locale: string;\n}\n\nexport const UI_FORMAT_DEFAULTS: UiFormat = {\n    currency: 'GBP',\n    locale: 'en-GB'\n};\n\nexport const UI_FORMAT = new InjectionToken<UiFormat>('UI_FORMAT', {\n    providedIn: 'root',\n    factory: () => UI_FORMAT_DEFAULTS\n});\n\nexport function provideUiFormat(format: Partial<UiFormat>): Provider {\n    return {\n        provide: UI_FORMAT,\n        useValue: { ...UI_FORMAT_DEFAULTS, ...format }\n    };\n}\n\nconst MONEY = Symbol('money');\n\nexport interface MoneyFormatterParts {\n    format: (value: number) => string;\n    mask: string;\n}\n\n/** The unmasked formatter and mask behind a formatter from `injectMoneyFormatter`, null for any other function. */\nexport function moneyFormatterParts(formatter: (value: number) => string): MoneyFormatterParts | null {\n    return (formatter as { [MONEY]?: MoneyFormatterParts })[MONEY] ?? null;\n}\n\n/** Needs an injection context. Reads `UI_PRIVACY` on every call, so a template or computed calling it follows the mode. */\nexport function injectMoneyFormatter(\n    options: Intl.NumberFormatOptions = {}\n): (value: number) => string {\n    const { currency, locale } = inject(UI_FORMAT);\n    const privacy = inject(UI_PRIVACY);\n    const formatter = new Intl.NumberFormat(locale, {\n        style: 'currency',\n        currency,\n        ...options\n    });\n    const resolved = formatter.resolvedOptions();\n    const mask = maskMoney(resolved.currency ?? currency, resolved.locale);\n\n    const format = (value: number) => formatter.format(value);\n\n    return Object.assign(\n        (value: number) => privacy() === 'visible' ? format(value) : mask,\n        { [MONEY]: { format, mask } }\n    );\n}\n"],"mappings":";AASA,MAAa,cAAc;CACvB;CACA;CACA;AACM;AAKV,MAAa,aAAa,IAAI,eAAkC,cAAc;CAC1E,YAAY;CACZ,eAAe,OAAkB,SAAS,CAAC,CAAC,WAAU;AACzD,CAAA;AAGD,SAAgB,iBAAiB,SAAgC;CAC7D,OAAO;EACH,SAAS;EACT,YAAY;CACf;AACL;AAKA,MAAa,oBAAoB;AAGjC,MAAa,qBAAqB;AAElC,MAAM,eAAe,IAAI;AAEzB,SAAgB,UAAU,UAAkB,QAAc;CACtD,OAAO,IAAI,KAAK,aAAa,QAAQ;EAAE,OAAO;EAAY;CAAQ,CAAE,CAAC,CAChE,cAAc,CAAC,CAAC,CAChB,KAAI,SACD,KAAK,SAAS,cAAc,KAAK,SAAS,YACpC,KAAK,QACL,YAAY,CACrB,CACA,QAAQ,OAAO,OAAO,WACnB,UAAU,gBAAgB,OAAO,QAAQ,OAAO,YAAY,CAC/D,CACA,KAAK,EAAE;AAChB;AAWA,SAAgB,oBAAiB;CAC7B,MAAM,UAAU,OAAO,UAAU;CAEjC,MAAM,WAAW,MAAiC,gBAC9C,CAAC,OAAO,QAAQ,KAAK,QAAO,MAAO,YAAY,OAAO;CAE1D,OAAO,OAAO,QACT,SAAoC,QAAQ,MAAM,iBAAiB,GACpE,EAAE,QAAQ,SAAoC,QAAQ,MAAM,kBAAkB,EAAC,CAAE;AAEzF;AC7DA,MAAa,qBAA+B;CACxC,UAAU;CACV,QAAQ;AACX;AAED,MAAa,YAAY,IAAI,eAAyB,aAAa;CAC/D,YAAY;CACZ,eAAe;AAClB,CAAA;AAED,SAAgB,gBAAgB,QAAyB;CACrD,OAAO;EACH,SAAS;EACT,UAAU;GAAE,GAAG;GAAoB,GAAG;EAAM;CAC/C;AACL;AAEA,MAAM,QAAQ,OAAO,OAAO;AAQ5B,SAAgB,oBAAoB,WAAoC;CACpE,OAAQ,UAAgD,UAAU;AACtE;AAGA,SAAgB,qBACZ,UAAoC,CAAA,GAAE;CAEtC,MAAM,EAAE,UAAU,WAAW,OAAO,SAAS;CAC7C,MAAM,UAAU,OAAO,UAAU;CACjC,MAAM,YAAY,IAAI,KAAK,aAAa,QAAQ;EAC5C,OAAO;EACP;EACA,GAAG;CACN,CAAA;CACD,MAAM,WAAW,UAAU,gBAAe;CAC1C,MAAM,OAAO,UAAU,SAAS,YAAY,UAAU,SAAS,MAAM;CAErE,MAAM,UAAU,UAAkB,UAAU,OAAO,KAAK;CAExD,OAAO,OAAO,QACT,UAAkB,QAAO,MAAO,YAAY,OAAO,KAAK,IAAI,MAC7D,GAAG,QAAQ;EAAE;EAAQ;CAAI,EAAE,CAAE;AAErC"}

package/fesm2022/area8975-ui-input-addon.mjs

@@ -0,0 +1,42 @@
+import * as i0 from "@angular/core";
+import { Component } from "@angular/core";
+var UiInputAddonComponent = class UiInputAddonComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiInputAddonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiInputAddonComponent,
+		isStandalone: true,
+		selector: "ui-input-addon",
+		host: { classAttribute: "ui-text-body-alt" },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--muted-foreground-1)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}@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: UiInputAddonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-input-addon",
+			template: `<ng-content />`,
+			host: { class: "ui-text-body-alt" },
+			styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--muted-foreground-1)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}@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"]
+		}]
+	}]
+});
+export { UiInputAddonComponent };
+
+//# sourceMappingURL=area8975-ui-input-addon.mjs.map

package/fesm2022/area8975-ui-input-addon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-input-addon.mjs","names":[],"sources":["../../../projects/ui/input-addon/input-addon.component.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n\n/**\n * A static and non-interactable text or symbol that can be combined with\n * a `ui-input` inside of a `ui-input-group`. Example: this could represent\n * a currency symbol or unit of measurement.\n */\n@Component({\n    selector: 'ui-input-addon',\n    template: `<ng-content />`,\n    styleUrl: './input-addon.component.css',\n    host: { class: 'ui-text-body-alt' }\n})\nexport class UiInputAddonComponent {}\n"],"mappings":";;AAcA,IAAa,wBAAb,MAAa,sBAAqB;CAArB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,mBAAA;EAAA,UAAA;EAAA,UAJpB;EAAgB,UAAA;EAAA,QAAA,CAAA,igCAAA;CAAA,CAAA;;AAIjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EANjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,UAChB;GAAgB,MAEpB,EAAE,OAAO,mBAAkB;GAAE,QAAA,CAAA,igCAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-input-group.mjs

@@ -0,0 +1,86 @@
+import * as i0 from "@angular/core";
+import { Component, contentChildren, effect, model } from "@angular/core";
+import { UiInputComponent } from "@area8975/ui/input";
+var UiInputGroupComponent = class UiInputGroupComponent {
+	inputs = contentChildren(UiInputComponent, {
+		...ngDevMode ? { debugName: "inputs" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const state = this.validationState();
+			for (const input of this.inputs()) input.validationState.set(state);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiInputGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiInputGroupComponent,
+		isStandalone: true,
+		selector: "ui-input-group",
+		inputs: { validationState: {
+			classPropertyName: "validationState",
+			publicName: "validationState",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { validationState: "validationStateChange" },
+		queries: [{
+			propertyName: "inputs",
+			predicate: UiInputComponent,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:inline-flex;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiInputGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-input-group",
+			template: "<ng-content />",
+			styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:inline-flex;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		inputs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UiInputComponent), {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["validationStateChange"]
+		}]
+	}
+});
+export { UiInputGroupComponent };
+
+//# sourceMappingURL=area8975-ui-input-group.mjs.map

package/fesm2022/area8975-ui-input-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-input-group.mjs","names":[],"sources":["../../../projects/ui/input-group/input-group.component.ts"],"sourcesContent":["import { Component, contentChildren, effect, model } from '@angular/core';\n\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { InputValidation } from '@area8975/ui/input';\n\n\n@Component({\n    selector: 'ui-input-group',\n    template: '<ng-content />',\n    styleUrl: './input-group.component.css'\n})\nexport class UiInputGroupComponent {\n    readonly inputs = contentChildren(UiInputComponent, { descendants: false });\n\n    /** true/false shows valid/invalid styling. null means not validated yet. */\n    readonly validationState = model<InputValidation>(null);\n\n    constructor() {\n        effect(() => {\n            const state = this.validationState();\n\n            for (const input of this.inputs()) {\n                input.validationState.set(state);\n            }\n        });\n    }\n}\n"],"mappings":";;;AAWA,IAAa,wBAAb,MAAa,sBAAqB;CACrB,SAAS,gBAAgB,kBAAgB;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,aAAa;CAAK,CAAA;CAG/D,kBAAkB,MAAuB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAEvD,cAAA;EACI,aAAY;GACR,MAAM,QAAQ,KAAK,gBAAe;GAElC,KAAK,MAAM,SAAS,KAAK,OAAM,GAC3B,MAAM,gBAAgB,IAAI,KAAK;EAEvC,CAAC;CACL;CAdS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,iBAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,SAAA,EAAA,iBAAA,wBAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,WACI;GAAgB,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UAJxC;EAAgB,UAAA;EAAA,QAAA,CAAA,0gIAAA;CAAA,CAAA;;AAGjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EALjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,UAChB;GAAgB,QAAA,CAAA,0gIAAA;EAAA,CAAA;CAIQ,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,gBAAgB,GAAA;IAAI,aAAa;IAAO,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,iBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,GAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,uBAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}