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

package/fesm2022/area8975-ui-dropzone.mjs

@@ -0,0 +1,332 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model, output, signal, viewChild } from "@angular/core";
+import { formatFileSize, selectFiles } from "@area8975/ui/file";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroArrowUpTray, heroDocument } from "@ng-icons/heroicons/outline";
+var UiDropzoneComponent = class UiDropzoneComponent {
+	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
+	});
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	maxSize = input(null, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	icon = input("heroArrowUpTray", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	rejected = output();
+	picker = viewChild.required("picker", ...ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []);
+	dragDepth = 0;
+	isDragging = signal(false, ...ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []);
+	hasRejection = signal(false, ...ngDevMode ? [{ debugName: "hasRejection" }] : /* istanbul ignore next */ []);
+	displayTitle = computed(() => this.title() || (this.multiple() ? "Drop files here or click to browse" : "Drop a file here or click to browse"), ...ngDevMode ? [{ debugName: "displayTitle" }] : /* istanbul ignore next */ []);
+	files = computed(() => this.value().map((file) => ({
+		name: file.name,
+		size: formatFileSize(file.size)
+	})), ...ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []);
+	openPicker() {
+		if (this.disabled()) return;
+		const picker = this.picker().nativeElement;
+		if (picker.showPicker) picker.showPicker();
+		else picker.click();
+	}
+	handleKeydown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.openPicker();
+		}
+	}
+	handlePick(event) {
+		const target = event.target;
+		this.addFiles([...target.files ?? []]);
+		target.value = "";
+	}
+	handleDragEnter(event) {
+		event.preventDefault();
+		if (this.disabled()) return;
+		this.dragDepth++;
+		this.isDragging.set(true);
+	}
+	handleDragOver(event) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = this.disabled() ? "none" : "copy";
+	}
+	handleDragLeave() {
+		this.dragDepth = Math.max(0, this.dragDepth - 1);
+		if (!this.dragDepth) this.isDragging.set(false);
+	}
+	handleDrop(event) {
+		event.preventDefault();
+		this.dragDepth = 0;
+		this.isDragging.set(false);
+		if (!this.disabled()) this.addFiles([...event.dataTransfer?.files ?? []]);
+	}
+	clear() {
+		this.value.set([]);
+		this.hasRejection.set(false);
+	}
+	addFiles(files) {
+		if (!files.length) return;
+		const candidates = this.multiple() ? files : files.slice(0, 1);
+		const { accepted, rejected } = selectFiles(candidates, this.accept(), this.maxSize());
+		this.hasRejection.set(rejected.length > 0);
+		if (rejected.length) this.rejected.emit(rejected);
+		if (accepted.length) this.value.set(accepted);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDropzoneComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiDropzoneComponent,
+		isStandalone: true,
+		selector: "ui-dropzone",
+		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
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				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
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			rejected: "rejected"
+		},
+		host: { properties: { "attr.id": "null" } },
+		providers: [provideIcons({
+			heroArrowUpTray,
+			heroDocument
+		})],
+		viewQueries: [{
+			propertyName: "picker",
+			first: true,
+			predicate: ["picker"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n    class=\"ui-dropzone\"\n    role=\"button\"\n    [attr.id]=\"id() || null\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.data-dragging]=\"isDragging() ? '' : null\"\n    [attr.data-invalid]=\"hasRejection() ? '' : null\"\n    (click)=\"openPicker()\"\n    (keydown)=\"handleKeydown($event)\"\n    (dragenter)=\"handleDragEnter($event)\"\n    (dragover)=\"handleDragOver($event)\"\n    (dragleave)=\"handleDragLeave()\"\n    (drop)=\"handleDrop($event)\"\n>\n    <span class=\"ui-dropzone-icon\">\n        <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n    </span>\n\n    <span class=\"text-foreground ui-text-body\">\n        {{ displayTitle() }}\n    </span>\n\n    @if (hint()) {\n        <span class=\"text-muted-foreground-1 ui-text-caption\">\n            {{ hint() }}\n        </span>\n    }\n</div>\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@if (files().length) {\n    <div class=\"ui-dropzone-files\">\n        <ul class=\"ui-dropzone-list\">\n            @for (file of files(); track $index) {\n                <li class=\"ui-dropzone-file\">\n                    <ng-icon\n                        name=\"heroDocument\"\n                        class=\"text-muted-foreground-1 shrink-0\"\n                    />\n                    <span class=\"text-foreground truncate ui-text-body\">\n                        {{ file.name }}\n                    </span>\n                    <span\n                        class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n                    >\n                        {{ file.size }}\n                    </span>\n                </li>\n            }\n        </ul>\n\n        @if (!disabled()) {\n            <button\n                type=\"button\"\n                class=\"ui-dropzone-clear ui-text-caption\"\n                (click)=\"clear()\"\n            >\n                {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n            </button>\n        }\n    </div>\n}\n",
+		styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--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)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--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)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@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;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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-duration: initial;--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;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			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: UiDropzoneComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-dropzone",
+			host: { "[attr.id]": "null" },
+			imports: [NgIcon],
+			providers: [provideIcons({
+				heroArrowUpTray,
+				heroDocument
+			})],
+			template: "<div\n    class=\"ui-dropzone\"\n    role=\"button\"\n    [attr.id]=\"id() || null\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.data-dragging]=\"isDragging() ? '' : null\"\n    [attr.data-invalid]=\"hasRejection() ? '' : null\"\n    (click)=\"openPicker()\"\n    (keydown)=\"handleKeydown($event)\"\n    (dragenter)=\"handleDragEnter($event)\"\n    (dragover)=\"handleDragOver($event)\"\n    (dragleave)=\"handleDragLeave()\"\n    (drop)=\"handleDrop($event)\"\n>\n    <span class=\"ui-dropzone-icon\">\n        <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n    </span>\n\n    <span class=\"text-foreground ui-text-body\">\n        {{ displayTitle() }}\n    </span>\n\n    @if (hint()) {\n        <span class=\"text-muted-foreground-1 ui-text-caption\">\n            {{ hint() }}\n        </span>\n    }\n</div>\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@if (files().length) {\n    <div class=\"ui-dropzone-files\">\n        <ul class=\"ui-dropzone-list\">\n            @for (file of files(); track $index) {\n                <li class=\"ui-dropzone-file\">\n                    <ng-icon\n                        name=\"heroDocument\"\n                        class=\"text-muted-foreground-1 shrink-0\"\n                    />\n                    <span class=\"text-foreground truncate ui-text-body\">\n                        {{ file.name }}\n                    </span>\n                    <span\n                        class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n                    >\n                        {{ file.size }}\n                    </span>\n                </li>\n            }\n        </ul>\n\n        @if (!disabled()) {\n            <button\n                type=\"button\"\n                class=\"ui-dropzone-clear ui-text-caption\"\n                (click)=\"clear()\"\n            >\n                {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n            </button>\n        }\n    </div>\n}\n",
+			styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--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)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--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)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@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;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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-duration: initial;--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;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		maxSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSize",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		rejected: [{
+			type: i0.Output,
+			args: ["rejected"]
+		}],
+		picker: [{
+			type: i0.ViewChild,
+			args: ["picker", { isSignal: true }]
+		}]
+	}
+});
+export { UiDropzoneComponent };
+
+//# sourceMappingURL=area8975-ui-dropzone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-dropzone.mjs","names":[],"sources":["../../../projects/ui/dropzone/dropzone.component.ts","../../../projects/ui/dropzone/dropzone.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 type { FileRejection } from '@area8975/ui/file';\nimport { formatFileSize, selectFiles } from '@area8975/ui/file';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroArrowUpTray, heroDocument } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-dropzone',\n    templateUrl: './dropzone.component.html',\n    styleUrl: './dropzone.component.css',\n    host: { '[attr.id]': 'null' },\n    imports: [NgIcon],\n    providers: [provideIcons({\n        heroArrowUpTray,\n        heroDocument\n    })]\n})\nexport class UiDropzoneComponent {\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 ariaLabel = input<string>('');\n    readonly describedBy = input<string>('');\n\n    /** Max size per file in bytes. */\n    readonly maxSize = input<number | null>(null);\n\n    readonly title = input<string>('');\n    readonly hint = input<string>('');\n    readonly icon = input<IconName>('heroArrowUpTray');\n\n    readonly rejected = output<FileRejection[]>();\n\n    private readonly picker = viewChild.required<ElementRef<HTMLInputElement>>(\n        'picker'\n    );\n\n    // dragenter/leave fire for every child, so count them instead of toggling\n    private dragDepth = 0;\n\n    protected readonly isDragging = signal(false);\n    protected readonly hasRejection = signal(false);\n\n    protected readonly displayTitle = computed(() =>\n        this.title() ||\n        (this.multiple()\n            ? 'Drop files here or click to browse'\n            : 'Drop a file here or click to browse')\n    );\n\n    protected readonly files = computed(() =>\n        this.value().map(file => ({\n            name: file.name,\n            size: formatFileSize(file.size)\n        }))\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 handleKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.openPicker();\n        }\n    }\n\n    protected handlePick(event: Event): void {\n        const target = event.target as HTMLInputElement;\n\n        this.addFiles([...target.files ?? []]);\n\n        // reset so picking the same file again still fires change\n        target.value = '';\n    }\n\n    protected handleDragEnter(event: DragEvent): void {\n        event.preventDefault();\n\n        if (this.disabled()) {\n            return;\n        }\n\n        this.dragDepth++;\n        this.isDragging.set(true);\n    }\n\n    protected handleDragOver(event: DragEvent): void {\n        // without this the browser won't allow the drop\n        event.preventDefault();\n\n        if (event.dataTransfer) {\n            event.dataTransfer.dropEffect = this.disabled() ? 'none' : 'copy';\n        }\n    }\n\n    protected handleDragLeave(): void {\n        this.dragDepth = Math.max(0, this.dragDepth - 1);\n\n        if (!this.dragDepth) {\n            this.isDragging.set(false);\n        }\n    }\n\n    protected handleDrop(event: DragEvent): void {\n        event.preventDefault();\n\n        this.dragDepth = 0;\n        this.isDragging.set(false);\n\n        if (!this.disabled()) {\n            this.addFiles([...event.dataTransfer?.files ?? []]);\n        }\n    }\n\n    protected clear(): void {\n        this.value.set([]);\n        this.hasRejection.set(false);\n    }\n\n    private addFiles(files: File[]): void {\n        if (!files.length) {\n            return;\n        }\n\n        // the native picker enforces this, but a drop can carry several files\n        const candidates = this.multiple() ? files : files.slice(0, 1);\n        const { accepted, rejected } = selectFiles(\n            candidates,\n            this.accept(),\n            this.maxSize()\n        );\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","<div\n    class=\"ui-dropzone\"\n    role=\"button\"\n    [attr.id]=\"id() || null\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-disabled]=\"disabled() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.data-dragging]=\"isDragging() ? '' : null\"\n    [attr.data-invalid]=\"hasRejection() ? '' : null\"\n    (click)=\"openPicker()\"\n    (keydown)=\"handleKeydown($event)\"\n    (dragenter)=\"handleDragEnter($event)\"\n    (dragover)=\"handleDragOver($event)\"\n    (dragleave)=\"handleDragLeave()\"\n    (drop)=\"handleDrop($event)\"\n>\n    <span class=\"ui-dropzone-icon\">\n        <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n    </span>\n\n    <span class=\"text-foreground ui-text-body\">\n        {{ displayTitle() }}\n    </span>\n\n    @if (hint()) {\n        <span class=\"text-muted-foreground-1 ui-text-caption\">\n            {{ hint() }}\n        </span>\n    }\n</div>\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@if (files().length) {\n    <div class=\"ui-dropzone-files\">\n        <ul class=\"ui-dropzone-list\">\n            @for (file of files(); track $index) {\n                <li class=\"ui-dropzone-file\">\n                    <ng-icon\n                        name=\"heroDocument\"\n                        class=\"text-muted-foreground-1 shrink-0\"\n                    />\n                    <span class=\"text-foreground truncate ui-text-body\">\n                        {{ file.name }}\n                    </span>\n                    <span\n                        class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n                    >\n                        {{ file.size }}\n                    </span>\n                </li>\n            }\n        </ul>\n\n        @if (!disabled()) {\n            <button\n                type=\"button\"\n                class=\"ui-dropzone-clear ui-text-caption\"\n                (click)=\"clear()\"\n            >\n                {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n            </button>\n        }\n    </div>\n}\n"],"mappings":"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"}

package/fesm2022/area8975-ui-field.mjs

@@ -0,0 +1,191 @@
+import * as i0 from "@angular/core";
+import { Component, DOCUMENT, booleanAttribute, computed, inject, input } from "@angular/core";
+var UiFieldComponent = class UiFieldComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	for = input("", ...ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []);
+	hintId = input("", ...ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []);
+	errorId = input("", ...ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []);
+	labelId = computed(() => this.for() && this.label() ? `${this.for()}-label` : "", ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+	document = inject(DOCUMENT);
+	get forAttr() {
+		return this.for() || null;
+	}
+	get labelIdAttr() {
+		return this.labelId() || null;
+	}
+	onClick(event) {
+		const label = event.target.closest("label");
+		if (!label?.classList.contains("ui-field-label")) return;
+		const control = label.control;
+		if (control instanceof HTMLInputElement && (control.type === "checkbox" || control.type === "radio")) return;
+		const target = control ?? (this.for() ? this.document.getElementById(this.for()) : null);
+		if (target) {
+			event.preventDefault();
+			target.focus();
+		}
+	}
+	get hintAttr() {
+		return this.hintId() || null;
+	}
+	get errorAttr() {
+		return this.errorId() || null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiFieldComponent,
+		isStandalone: true,
+		selector: "ui-field",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			for: {
+				classPropertyName: "for",
+				publicName: "for",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hintId: {
+				classPropertyName: "hintId",
+				publicName: "hintId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorId: {
+				classPropertyName: "errorId",
+				publicName: "errorId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: { "click": "onClick($event)" },
+			classAttribute: "block"
+		},
+		ngImport: i0,
+		template: "@if (label()) {\n    <label\n        [attr.id]=\"labelIdAttr\"\n        [attr.for]=\"forAttr\"\n        class=\"ui-text-body ui-field-label\"\n    >\n        {{ label() }}\n\n        @if (required()) {\n            <span class=\"text-danger-500\" aria-hidden=\"true\">*</span>\n            <span class=\"sr-only\">(required)</span>\n        }\n    </label>\n}\n\n<ng-content />\n\n@if (error()) {\n    <div\n        [attr.id]=\"errorAttr\"\n        class=\"text-danger-600 ui-text-caption ui-field-hint\"\n        role=\"alert\"\n    >\n        {{ error() }}\n    </div>\n} @else if (hint()) {\n    <div\n        [attr.id]=\"hintAttr\"\n        class=\"text-muted-foreground-1 ui-text-caption ui-field-hint\"\n    >\n        {{ hint() }}\n    </div>\n}\n",
+		styles: [":host{position:relative}.ui-field-label{margin-bottom:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-field-hint{margin-top:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-field",
+			host: {
+				class: "block",
+				"(click)": "onClick($event)"
+			},
+			template: "@if (label()) {\n    <label\n        [attr.id]=\"labelIdAttr\"\n        [attr.for]=\"forAttr\"\n        class=\"ui-text-body ui-field-label\"\n    >\n        {{ label() }}\n\n        @if (required()) {\n            <span class=\"text-danger-500\" aria-hidden=\"true\">*</span>\n            <span class=\"sr-only\">(required)</span>\n        }\n    </label>\n}\n\n<ng-content />\n\n@if (error()) {\n    <div\n        [attr.id]=\"errorAttr\"\n        class=\"text-danger-600 ui-text-caption ui-field-hint\"\n        role=\"alert\"\n    >\n        {{ error() }}\n    </div>\n} @else if (hint()) {\n    <div\n        [attr.id]=\"hintAttr\"\n        class=\"text-muted-foreground-1 ui-text-caption ui-field-hint\"\n    >\n        {{ hint() }}\n    </div>\n}\n",
+			styles: [":host{position:relative}.ui-field-label{margin-bottom:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-field-hint{margin-top:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		for: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "for",
+				required: false
+			}]
+		}],
+		hintId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hintId",
+				required: false
+			}]
+		}],
+		errorId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorId",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiFieldComponent };
+
+//# sourceMappingURL=area8975-ui-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-field.mjs","names":[],"sources":["../../../projects/ui/field/field.component.ts","../../../projects/ui/field/field.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    DOCUMENT,\n    inject,\n    input\n} from '@angular/core';\n\n\n@Component({\n    selector: 'ui-field',\n    templateUrl: './field.component.html',\n    styleUrl: './field.component.css',\n    host: { class: 'block', '(click)': 'onClick($event)' }\n})\nexport class UiFieldComponent {\n    readonly label = input<string>('');\n    readonly hint = input<string>('');\n\n    /**\n     * Shows a \"*\" marker next to the label.\n     */\n    readonly required = input(false, { transform: booleanAttribute });\n\n    /**\n     * An error message, shown instead of `hint` when present.\n     */\n    readonly error = input<string>('');\n\n    // Pass the id of the control being labelled (e.g. the `ui-input`'s `id`)\n    // so the label is properly associated with it for accessibility.\n    readonly for = input<string>('');\n\n    // Ids for the hint/error elements - pass both to the control's\n    // `describedBy` (e.g. `ui-input`) so screen readers announce whichever\n    // is showing. Safe to pass both even though only one renders at a\n    // time - an aria-describedby token pointing at a nonexistent id is\n    // simply ignored.\n    readonly hintId = input<string>('');\n    readonly errorId = input<string>('');\n\n    /**\n     * The label's id, `${for}-label`. Controls that a `<label for>` can't\n     * reach (e.g. `ui-rich-text-editor`) point `aria-labelledby` at it.\n     */\n    readonly labelId = computed(() =>\n        this.for() && this.label() ? `${this.for()}-label` : ''\n    );\n\n    private readonly document = inject(DOCUMENT);\n\n    protected get forAttr() {\n        return this.for() || null;\n    }\n\n    protected get labelIdAttr() {\n        return this.labelId() || null;\n    }\n\n    /**\n     * A label click is passed on to its control as a click, which opens a\n     * `ui-select` or `ui-datepicker` rather than just focusing it, and does\n     * nothing at all for controls a label can't target (a contenteditable,\n     * a `role=\"button\"` div). So apart from checkboxes and radios, where the\n     * click is the point, the label just focuses its control.\n     */\n    protected onClick(event: MouseEvent) {\n        const label = (event.target as Element).closest('label');\n\n        if (!label?.classList.contains('ui-field-label')) {\n            return;\n        }\n\n        const control = label.control;\n\n        if (\n            control instanceof HTMLInputElement &&\n            (control.type === 'checkbox' || control.type === 'radio')\n        ) {\n            return;\n        }\n\n        const target = control ?? (this.for() ?\n            this.document.getElementById(this.for()) :\n            null);\n\n        if (target) {\n            event.preventDefault();\n            target.focus();\n        }\n    }\n\n    protected get hintAttr() {\n        return this.hintId() || null;\n    }\n\n    protected get errorAttr() {\n        return this.errorId() || null;\n    }\n}\n","@if (label()) {\n    <label\n        [attr.id]=\"labelIdAttr\"\n        [attr.for]=\"forAttr\"\n        class=\"ui-text-body ui-field-label\"\n    >\n        {{ label() }}\n\n        @if (required()) {\n            <span class=\"text-danger-500\" aria-hidden=\"true\">*</span>\n            <span class=\"sr-only\">(required)</span>\n        }\n    </label>\n}\n\n<ng-content />\n\n@if (error()) {\n    <div\n        [attr.id]=\"errorAttr\"\n        class=\"text-danger-600 ui-text-caption ui-field-hint\"\n        role=\"alert\"\n    >\n        {{ error() }}\n    </div>\n} @else if (hint()) {\n    <div\n        [attr.id]=\"hintAttr\"\n        class=\"text-muted-foreground-1 ui-text-caption ui-field-hint\"\n    >\n        {{ hint() }}\n    </div>\n}\n"],"mappings":"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"}