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

package/fesm2022/area8975-ui-input.mjs

@@ -0,0 +1,682 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, contentChild, input, model, output, signal } from "@angular/core";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroEye, heroEyeSlash } from "@ng-icons/heroicons/outline";
+var UiInputComponent = class UiInputComponent {
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	autocomplete = input("", ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	inputmode = input("", ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	min = input("", ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input("", ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input("", ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	pattern = input("", ...ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []);
+	minlength = input(null, ...ngDevMode ? [{ debugName: "minlength" }] : /* istanbul ignore next */ []);
+	maxlength = input(null, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
+	autofocus = input(false, {
+		...ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	spellcheck = input(true, {
+		...ngDevMode ? { debugName: "spellcheck" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	revealable = input(false, {
+		...ngDevMode ? { debugName: "revealable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	list = input("", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	inputRole = input("", ...ngDevMode ? [{ debugName: "inputRole" }] : /* istanbul ignore next */ []);
+	ariaExpanded = input(null, ...ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []);
+	ariaControls = input("", ...ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []);
+	ariaActiveDescendant = input(null, ...ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : /* istanbul ignore next */ []);
+	ariaAutocomplete = input("", ...ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []);
+	ariaHasPopup = input("", ...ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []);
+	focused = output();
+	blurred = output();
+	leadingElement = contentChild("leading", ...ngDevMode ? [{ debugName: "leadingElement" }] : /* istanbul ignore next */ []);
+	trailingElement = contentChild("trailing", ...ngDevMode ? [{ debugName: "trailingElement" }] : /* istanbul ignore next */ []);
+	revealed = signal(false, ...ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []);
+	canReveal = computed(() => this.revealable() && this.type() === "password", ...ngDevMode ? [{ debugName: "canReveal" }] : /* istanbul ignore next */ []);
+	shownType = computed(() => this.canReveal() && this.revealed() ? "text" : this.type(), ...ngDevMode ? [{ debugName: "shownType" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => [
+		"ui-input",
+		"ui-text-body",
+		this.classes()
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	handleInput(event) {
+		const target = event.target;
+		this.value.set(this.parseValue(target));
+	}
+	handleFocus(event) {
+		this.focused.emit(event);
+	}
+	handleBlur(event) {
+		this.blurred.emit(event);
+	}
+	parseValue(element) {
+		if (this.type() !== "number") return element.value;
+		if (!element.value) return null;
+		return element.valueAsNumber;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiInputComponent,
+		isStandalone: true,
+		selector: "ui-input",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputmode: {
+				classPropertyName: "inputmode",
+				publicName: "inputmode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationState: {
+				classPropertyName: "validationState",
+				publicName: "validationState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pattern: {
+				classPropertyName: "pattern",
+				publicName: "pattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minlength: {
+				classPropertyName: "minlength",
+				publicName: "minlength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxlength: {
+				classPropertyName: "maxlength",
+				publicName: "maxlength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spellcheck: {
+				classPropertyName: "spellcheck",
+				publicName: "spellcheck",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			revealable: {
+				classPropertyName: "revealable",
+				publicName: "revealable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			list: {
+				classPropertyName: "list",
+				publicName: "list",
+				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
+			},
+			inputRole: {
+				classPropertyName: "inputRole",
+				publicName: "inputRole",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaExpanded: {
+				classPropertyName: "ariaExpanded",
+				publicName: "ariaExpanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaControls: {
+				classPropertyName: "ariaControls",
+				publicName: "ariaControls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaActiveDescendant: {
+				classPropertyName: "ariaActiveDescendant",
+				publicName: "ariaActiveDescendant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaAutocomplete: {
+				classPropertyName: "ariaAutocomplete",
+				publicName: "ariaAutocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaHasPopup: {
+				classPropertyName: "ariaHasPopup",
+				publicName: "ariaHasPopup",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			validationState: "validationStateChange",
+			focused: "focused",
+			blurred: "blurred"
+		},
+		host: { properties: { "attr.id": "null" } },
+		providers: [provideIcons({
+			heroEyeSlash,
+			heroEye
+		})],
+		queries: [{
+			propertyName: "leadingElement",
+			first: true,
+			predicate: ["leading"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "trailingElement",
+			first: true,
+			predicate: ["trailing"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n    [value]=\"value()\"\n    [class]=\"generatedClasses()\"\n    [type]=\"shownType()\"\n    [attr.id]=\"id() || null\"\n    [attr.name]=\"name() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [autocomplete]=\"autocomplete()\"\n    [attr.min]=\"min() === '' ? null : min()\"\n    [attr.max]=\"max() === '' ? null : max()\"\n    [attr.step]=\"step() === '' ? null : step()\"\n    [attr.pattern]=\"pattern() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.maxlength]=\"maxlength()\"\n    [attr.minlength]=\"minlength()\"\n   \n    [attr.spellcheck]=\"spellcheck()\"\n    [attr.list]=\"list() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.role]=\"inputRole() || null\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls() || null\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n    [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n    <button\n        type=\"button\"\n        class=\"ui-input-reveal\"\n        [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"revealed()\"\n        [disabled]=\"disabled()\"\n        (click)=\"revealed.set(!revealed())\"\n    >\n        <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n    </button>\n}\n",
+		styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;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(--layer)}:host:focus-within{z-index:10}: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:disabled){opacity:50%}: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)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal: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-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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-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)}@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"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			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: UiInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-input",
+			host: { "[attr.id]": "null" },
+			imports: [NgTemplateOutlet, NgIcon],
+			providers: [provideIcons({
+				heroEyeSlash,
+				heroEye
+			})],
+			template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n    [value]=\"value()\"\n    [class]=\"generatedClasses()\"\n    [type]=\"shownType()\"\n    [attr.id]=\"id() || null\"\n    [attr.name]=\"name() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [autocomplete]=\"autocomplete()\"\n    [attr.min]=\"min() === '' ? null : min()\"\n    [attr.max]=\"max() === '' ? null : max()\"\n    [attr.step]=\"step() === '' ? null : step()\"\n    [attr.pattern]=\"pattern() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.maxlength]=\"maxlength()\"\n    [attr.minlength]=\"minlength()\"\n   \n    [attr.spellcheck]=\"spellcheck()\"\n    [attr.list]=\"list() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.role]=\"inputRole() || null\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls() || null\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n    [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n    <button\n        type=\"button\"\n        class=\"ui-input-reveal\"\n        [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"revealed()\"\n        [disabled]=\"disabled()\"\n        (click)=\"revealed.set(!revealed())\"\n    >\n        <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n    </button>\n}\n",
+			styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;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(--layer)}:host:focus-within{z-index:10}: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:disabled){opacity:50%}: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)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal: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-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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-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)}@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"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		inputmode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputmode",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["validationStateChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		pattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pattern",
+				required: false
+			}]
+		}],
+		minlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minlength",
+				required: false
+			}]
+		}],
+		maxlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxlength",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		spellcheck: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spellcheck",
+				required: false
+			}]
+		}],
+		revealable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "revealable",
+				required: false
+			}]
+		}],
+		list: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "list",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		inputRole: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputRole",
+				required: false
+			}]
+		}],
+		ariaExpanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaExpanded",
+				required: false
+			}]
+		}],
+		ariaControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaControls",
+				required: false
+			}]
+		}],
+		ariaActiveDescendant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaActiveDescendant",
+				required: false
+			}]
+		}],
+		ariaAutocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaAutocomplete",
+				required: false
+			}]
+		}],
+		ariaHasPopup: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaHasPopup",
+				required: false
+			}]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		leadingElement: [{
+			type: i0.ContentChild,
+			args: ["leading", { isSignal: true }]
+		}],
+		trailingElement: [{
+			type: i0.ContentChild,
+			args: ["trailing", { isSignal: true }]
+		}]
+	}
+});
+const InputTypes = [
+	"text",
+	"email",
+	"tel",
+	"url",
+	"search",
+	"password",
+	"number",
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week",
+	"color"
+];
+const InputModes = [
+	"none",
+	"text",
+	"decimal",
+	"numeric",
+	"tel",
+	"search",
+	"email",
+	"url"
+];
+const InputAriaAutocompletes = [
+	"none",
+	"inline",
+	"list",
+	"both"
+];
+const InputAriaHasPopups = [
+	"listbox",
+	"dialog",
+	"grid",
+	"menu",
+	"tree"
+];
+export { InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, UiInputComponent };
+
+//# sourceMappingURL=area8975-ui-input.mjs.map