@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-input.mjs

@@ -0,0 +1,595 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var InputComponent = class InputComponent {
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+	readonlyWrap = input(false, ...ngDevMode ? [{ debugName: "readonlyWrap" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	requiredIndicator = input(true, ...ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []);
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	helperText = input(...ngDevMode ? [void 0, { debugName: "helperText" }] : /* istanbul ignore next */ []);
+	iconBefore = input(...ngDevMode ? [void 0, { debugName: "iconBefore" }] : /* istanbul ignore next */ []);
+	iconAfter = input(...ngDevMode ? [void 0, { debugName: "iconAfter" }] : /* istanbul ignore next */ []);
+	maxLength = input(...ngDevMode ? [void 0, { debugName: "maxLength" }] : /* istanbul ignore next */ []);
+	showCharCount = input(false, ...ngDevMode ? [{ debugName: "showCharCount" }] : /* istanbul ignore next */ []);
+	charCountRemainingLabel = input("Characters remaining: {remaining}", ...ngDevMode ? [{ debugName: "charCountRemainingLabel" }] : /* istanbul ignore next */ []);
+	charCountAnnounceThreshold = input(...ngDevMode ? [void 0, { debugName: "charCountAnnounceThreshold" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	autocomplete = input(...ngDevMode ? [void 0, { debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
+	autocapitalize = input(...ngDevMode ? [void 0, { debugName: "autocapitalize" }] : /* istanbul ignore next */ []);
+	spellcheck = input(...ngDevMode ? [void 0, { debugName: "spellcheck" }] : /* istanbul ignore next */ []);
+	enterkeyhint = input(...ngDevMode ? [void 0, { debugName: "enterkeyhint" }] : /* istanbul ignore next */ []);
+	requiredAriaLabel = input("required", ...ngDevMode ? [{ debugName: "requiredAriaLabel" }] : /* istanbul ignore next */ []);
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	focused = output();
+	blurred = output();
+	enterPressed = output();
+	inputId = `lc-input-${Math.random().toString(36).substr(2, 9)}`;
+	inputElement = viewChild("inputRef", ...ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []);
+	readonlyValueElement = viewChild("readonlyValueRef", ...ngDevMode ? [{ debugName: "readonlyValueElement" }] : /* istanbul ignore next */ []);
+	_formDisabled = signal(false, ...ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	wrapsReadonlyValue = computed(() => this.readonly() && this.readonlyWrap(), ...ngDevMode ? [{ debugName: "wrapsReadonlyValue" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		if (this.error()) return `${this.inputId}-error`;
+		if (this.helperText()) return `${this.inputId}-helper`;
+		return null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	charCountAnnouncement = computed(() => {
+		const max = this.maxLength();
+		if (!this.showCharCount() || !max) return "";
+		const remaining = Math.max(0, max - this.value().length);
+		if (remaining > (this.charCountAnnounceThreshold() ?? Math.max(1, Math.ceil(max * .1)))) return "";
+		return this.charCountRemainingLabel().replace("{remaining}", String(remaining));
+	}, ...ngDevMode ? [{ debugName: "charCountAnnouncement" }] : /* istanbul ignore next */ []);
+	get isDisabled() {
+		return this.disabled() || this._formDisabled();
+	}
+	get charCount() {
+		return this.value().length;
+	}
+	get hasError() {
+		return !!this.error();
+	}
+	focus() {
+		if (this.wrapsReadonlyValue()) {
+			this.readonlyValueElement()?.nativeElement.focus();
+			return;
+		}
+		this.inputElement()?.nativeElement.focus();
+	}
+	select() {
+		const shown = this.wrapsReadonlyValue() ? this.readonlyValueElement()?.nativeElement : void 0;
+		if (shown) {
+			const selection = shown.ownerDocument.getSelection();
+			const range = shown.ownerDocument.createRange();
+			range.selectNodeContents(shown);
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+			return;
+		}
+		this.inputElement()?.nativeElement.select();
+	}
+	clear() {
+		this.value.set("");
+		this.onChange("");
+	}
+	writeValue(value) {
+		this.value.set(value || "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this._formDisabled.set(isDisabled);
+	}
+	onInput(event) {
+		const newValue = event.target.value;
+		this.value.set(newValue);
+		this.onChange(newValue);
+	}
+	onFocus() {
+		this.focused.emit();
+	}
+	onBlur() {
+		this.onTouched();
+		this.blurred.emit();
+	}
+	onKeydown(event) {
+		if (event.key === "Enter") this.enterPressed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: InputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: InputComponent,
+		isStandalone: true,
+		selector: "lc-input",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				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
+			},
+			readonlyWrap: {
+				classPropertyName: "readonlyWrap",
+				publicName: "readonlyWrap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requiredIndicator: {
+				classPropertyName: "requiredIndicator",
+				publicName: "requiredIndicator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helperText: {
+				classPropertyName: "helperText",
+				publicName: "helperText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconBefore: {
+				classPropertyName: "iconBefore",
+				publicName: "iconBefore",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconAfter: {
+				classPropertyName: "iconAfter",
+				publicName: "iconAfter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxLength: {
+				classPropertyName: "maxLength",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCharCount: {
+				classPropertyName: "showCharCount",
+				publicName: "showCharCount",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			charCountRemainingLabel: {
+				classPropertyName: "charCountRemainingLabel",
+				publicName: "charCountRemainingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			charCountAnnounceThreshold: {
+				classPropertyName: "charCountAnnounceThreshold",
+				publicName: "charCountAnnounceThreshold",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocapitalize: {
+				classPropertyName: "autocapitalize",
+				publicName: "autocapitalize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spellcheck: {
+				classPropertyName: "spellcheck",
+				publicName: "spellcheck",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enterkeyhint: {
+				classPropertyName: "enterkeyhint",
+				publicName: "enterkeyhint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requiredAriaLabel: {
+				classPropertyName: "requiredAriaLabel",
+				publicName: "requiredAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			focused: "focused",
+			blurred: "blurred",
+			enterPressed: "enterPressed"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => InputComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "inputElement",
+			first: true,
+			predicate: ["inputRef"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "readonlyValueElement",
+			first: true,
+			predicate: ["readonlyValueRef"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"required-indicator\" [attr.aria-label]=\"requiredAriaLabel()\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"input-container\"\n    [class.input-xs]=\"size() === 'xs'\"\n    [class.input-sm]=\"size() === 'sm'\"\n    [class.input-md]=\"size() === 'md'\"\n    [class.input-lg]=\"size() === 'lg'\"\n    [class.input-error]=\"hasError\"\n    [class.input-disabled]=\"isDisabled\"\n    [class.input-readonly]=\"readonly()\"\n    [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n  >\n    <!-- Icon Before -->\n    @if (iconBefore()) {\n      <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n\n    <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n    @if (wrapsReadonlyValue()) {\n      <div\n        #readonlyValueRef\n        class=\"input-field input-readonly-value\"\n        role=\"textbox\"\n        aria-readonly=\"true\"\n        tabindex=\"0\"\n        [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      >{{ value() }}</div>\n    }\n\n    <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n    <input\n      #inputRef\n      [id]=\"inputId\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [hidden]=\"wrapsReadonlyValue()\"\n      [attr.maxlength]=\"maxLength() || null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize() ?? null\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-required]=\"required() || undefined\"\n      [attr.aria-invalid]=\"hasError || undefined\"\n      [attr.aria-describedby]=\"describedBy()\"\n      class=\"input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    <!-- Icon After -->\n    @if (iconAfter()) {\n      <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n  </div>\n\n  <!-- Helper Text / Error Message / Character Count -->\n  @if (error() || helperText() || (showCharCount() && maxLength())) {\n    <div class=\"input-footer\">\n      <!-- Error Message -->\n      @if (error()) {\n        <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n          {{ error() }}\n        </p>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText() && !error()) {\n        <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n      @if (showCharCount() && maxLength()) {\n        <p class=\"char-count\">\n          {{ charCount }} / {{ maxLength() }}\n        </p>\n      }\n    </div>\n  }\n\n  @if (showCharCount() && maxLength()) {\n    <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n  }\n</div>\n",
+		styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: InputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-input",
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => InputComponent),
+				multi: true
+			}],
+			template: "<div class=\"input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"required-indicator\" [attr.aria-label]=\"requiredAriaLabel()\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"input-container\"\n    [class.input-xs]=\"size() === 'xs'\"\n    [class.input-sm]=\"size() === 'sm'\"\n    [class.input-md]=\"size() === 'md'\"\n    [class.input-lg]=\"size() === 'lg'\"\n    [class.input-error]=\"hasError\"\n    [class.input-disabled]=\"isDisabled\"\n    [class.input-readonly]=\"readonly()\"\n    [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n  >\n    <!-- Icon Before -->\n    @if (iconBefore()) {\n      <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n\n    <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n    @if (wrapsReadonlyValue()) {\n      <div\n        #readonlyValueRef\n        class=\"input-field input-readonly-value\"\n        role=\"textbox\"\n        aria-readonly=\"true\"\n        tabindex=\"0\"\n        [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      >{{ value() }}</div>\n    }\n\n    <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n    <input\n      #inputRef\n      [id]=\"inputId\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [hidden]=\"wrapsReadonlyValue()\"\n      [attr.maxlength]=\"maxLength() || null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize() ?? null\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-required]=\"required() || undefined\"\n      [attr.aria-invalid]=\"hasError || undefined\"\n      [attr.aria-describedby]=\"describedBy()\"\n      class=\"input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    <!-- Icon After -->\n    @if (iconAfter()) {\n      <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n  </div>\n\n  <!-- Helper Text / Error Message / Character Count -->\n  @if (error() || helperText() || (showCharCount() && maxLength())) {\n    <div class=\"input-footer\">\n      <!-- Error Message -->\n      @if (error()) {\n        <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n          {{ error() }}\n        </p>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText() && !error()) {\n        <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n      @if (showCharCount() && maxLength()) {\n        <p class=\"char-count\">\n          {{ charCount }} / {{ maxLength() }}\n        </p>\n      }\n    </div>\n  }\n\n  @if (showCharCount() && maxLength()) {\n    <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n  }\n</div>\n",
+			styles: [".input-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%}.input-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--spacing-1)}.input-label .required-indicator{color:var(--color-error-600);margin-left:var(--spacing-0-5)}.input-container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease)}.input-container:hover:not(.input-disabled):not(.input-readonly){border-color:var(--color-text-secondary)}.input-container:focus-within{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.input-container.input-error{border-color:var(--color-error-600)}.input-container.input-error:focus-within{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.input-container.input-disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.input-container.input-readonly{background-color:var(--color-surface-muted)}.input-container.input-readonly-wrap{height:auto;min-height:var(--lc-input-height);align-items:stretch}.input-readonly-value{display:flex;align-items:center;min-width:0;white-space:normal;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.input-char-count-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.input-field{flex:1;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background:transparent;border:none;outline:none}.input-field::placeholder{color:var(--color-text-secondary)}.input-field:disabled{cursor:not-allowed}.input-field:read-only{cursor:default}.input-field[type=number]::-webkit-inner-spin-button,.input-field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);pointer-events:none}.input-icon .icon{width:1.25rem;height:1.25rem}.input-icon.input-icon-before{margin-left:var(--spacing-3);margin-right:var(--spacing-2)}.input-icon.input-icon-after{margin-left:var(--spacing-2);margin-right:var(--spacing-3)}.input-xs{--lc-input-height: var(--size-interactive-xs-height);height:var(--lc-input-height)}.input-xs .input-field{padding:var(--size-interactive-xs-padding);font-size:var(--size-interactive-xs-font-size)}.input-xs .icon{width:1rem;height:1rem}.input-sm{--lc-input-height: var(--size-interactive-sm-height);height:var(--lc-input-height)}.input-sm .input-field{padding:var(--size-interactive-sm-padding);font-size:var(--size-interactive-sm-font-size)}.input-md{--lc-input-height: var(--size-interactive-md-height);height:var(--lc-input-height)}.input-md .input-field{padding:var(--size-interactive-md-padding);font-size:var(--size-interactive-md-font-size)}.input-lg{--lc-input-height: var(--size-interactive-lg-height);height:var(--lc-input-height)}.input-lg .input-field{padding:var(--size-interactive-lg-padding);font-size:var(--size-interactive-lg-font-size)}.input-lg .icon{width:1.5rem;height:1.5rem}.input-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:1.25rem}.input-error{flex:1;font-size:var(--font-size-xs);color:var(--color-error-600);margin:0}.input-helper{flex:1;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.char-count{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;margin:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		readonlyWrap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonlyWrap",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		requiredIndicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredIndicator",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		helperText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helperText",
+				required: false
+			}]
+		}],
+		iconBefore: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconBefore",
+				required: false
+			}]
+		}],
+		iconAfter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconAfter",
+				required: false
+			}]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		showCharCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCharCount",
+				required: false
+			}]
+		}],
+		charCountRemainingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "charCountRemainingLabel",
+				required: false
+			}]
+		}],
+		charCountAnnounceThreshold: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "charCountAnnounceThreshold",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		autocapitalize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocapitalize",
+				required: false
+			}]
+		}],
+		spellcheck: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spellcheck",
+				required: false
+			}]
+		}],
+		enterkeyhint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enterkeyhint",
+				required: false
+			}]
+		}],
+		requiredAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredAriaLabel",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		enterPressed: [{
+			type: i0.Output,
+			args: ["enterPressed"]
+		}],
+		inputElement: [{
+			type: i0.ViewChild,
+			args: ["inputRef", { isSignal: true }]
+		}],
+		readonlyValueElement: [{
+			type: i0.ViewChild,
+			args: ["readonlyValueRef", { isSignal: true }]
+		}]
+	}
+});
+export { InputComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-input.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/input/input.component.ts","../../../../libs/angular-ui-kit/src/lib/input/input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering */\nimport {\n  Component,\n  computed,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/** Values of the native `autocapitalize` attribute. */\nexport type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n/** Values of the native `enterkeyhint` attribute (label of the on-screen keyboard's Enter key). */\nexport type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n/**\n * Input component for single-line text form data entry.\n *\n * Features:\n * - Type variants (text, email, password, number, tel, url)\n * - Size presets (xs, sm, md, lg)\n * - Leading and trailing icon support\n * - Character count display with maxLength (announced only near the limit)\n * - Validation error message display\n * - Helper text support\n * - Disabled and readonly states (read-only values can wrap: `readonlyWrap`)\n * - Input purpose and keyboard hints: `autocomplete`, `name`, `autocapitalize`,\n *   `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-input label=\"Name\" autocomplete=\"name\" autocapitalize=\"words\" [spellcheck]=\"false\" [(ngModel)]=\"name\" />\n * ```\n */\n@Component({\n  selector: 'lc-input',\n  imports: [IconComponent],\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => InputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class InputComponent implements ControlValueAccessor {\n  // Input Properties\n  /**\n   * Input label (displayed above input)\n   */\n  readonly label = input<string>();\n\n  /**\n   * Placeholder text\n   * @default ''\n   */\n  readonly placeholder = input<string>('');\n\n  /**\n   * Input type\n   * @default 'text'\n   */\n  readonly type = input<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>('text');\n\n  /**\n   * Size of the input\n   * @default 'md'\n   */\n  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');\n\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  readonly disabled = input<boolean>(false);\n\n  /**\n   * Whether the input is read-only\n   * @default false\n   */\n  readonly readonly = input<boolean>(false);\n\n  /**\n   * Read-only values wrap onto more lines instead of being clipped (WCAG 1.4.10):\n   * the value is shown as text (a read-only textbox named by the label), and a\n   * hidden native input keeps the value, `name` and `autocomplete` for forms and\n   * password managers. Only applies while `readonly` is set.\n   * @default false\n   */\n  readonly readonlyWrap = input<boolean>(false);\n\n  /**\n   * Whether the input is required\n   * @default false\n   */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Show the `*` after the label of a `required` field. `false` keeps the\n   * required semantics (`required`, `aria-required`) without the asterisk —\n   * for forms where every field is required.\n   * @default true\n   */\n  readonly requiredIndicator = input<boolean>(true);\n\n  /**\n   * Error message to display (if validation fails)\n   */\n  readonly error = input<string>();\n\n  /**\n   * Helper text to display below input\n   */\n  readonly helperText = input<string>();\n\n  /**\n    * Icon to display before input text (Tabler icon name)\n   * @example 'envelope'\n   */\n  readonly iconBefore = input<string>();\n\n  /**\n    * Icon to display after input text (Tabler icon name)\n   * @example 'eye'\n   */\n  readonly iconAfter = input<string>();\n\n  /**\n   * Maximum number of characters\n   */\n  readonly maxLength = input<number>();\n\n  /**\n   * Whether to show character count\n   * @default false\n   */\n  readonly showCharCount = input<boolean>(false);\n\n  /**\n   * Screen-reader announcement of the character count near the limit;\n   * `{remaining}` is replaced.\n   * @default 'Characters remaining: {remaining}'\n   */\n  readonly charCountRemainingLabel = input('Characters remaining: {remaining}');\n\n  /**\n   * Remaining characters from which the count is announced (the visible count\n   * is always shown). Unset = the last 10 % of `maxLength` (at least 1).\n   */\n  readonly charCountAnnounceThreshold = input<number>();\n\n  /**\n   * ARIA label for accessibility\n   */\n  readonly ariaLabel = input<string>();\n\n  /**\n   * Native `autocomplete` — the input purpose (WCAG 1.3.5), so browsers and\n   * password managers fill the field: `name`, `email`, `username`,\n   * `username webauthn` (offers passkeys in the field), `current-password`,\n   * `new-password`, `one-time-code`, `tel`, `off` … Unset = no attribute.\n   */\n  readonly autocomplete = input<string>();\n\n  /** Native `name` of the inner `<input>` (form posts, password managers). Unset = no attribute. */\n  readonly name = input<string>();\n\n  /**\n   * Native `autocapitalize` for on-screen keyboards: `off` for addresses,\n   * user names and codes, `words` for names. Unset = no attribute.\n   */\n  readonly autocapitalize = input<InputAutocapitalize>();\n\n  /** Native `spellcheck`: `false` for names, addresses and codes. Unset = no attribute. */\n  readonly spellcheck = input<boolean>();\n\n  /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */\n  readonly enterkeyhint = input<InputEnterKeyHint>();\n\n  /** Accessible name of the `*` marker shown for `required` fields. */\n  readonly requiredAriaLabel = input('required');\n\n  /**\n   * Current value (two-way bindable: `[value]` / `[(value)]`). Emits\n   * `valueChange` whenever it changes — once per user keystroke, on `clear()`\n   * and when a bound form control writes a value.\n   */\n  readonly value = model<string>('');\n\n  // Output Events\n  /**\n   * Emitted when input receives focus\n   */\n  readonly focused = output<void>();\n\n  /**\n   * Emitted when input loses focus\n   */\n  readonly blurred = output<void>();\n\n  /**\n   * Emitted when Enter key is pressed\n   */\n  readonly enterPressed = output<void>();\n\n  // Internal state\n  readonly inputId = `lc-input-${Math.random().toString(36).substr(2, 9)}`;\n\n  // ViewChild reference\n  private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputRef');\n  private readonly readonlyValueElement = viewChild<ElementRef<HTMLElement>>('readonlyValueRef');\n\n  // Internal disabled state (for ControlValueAccessor)\n  private readonly _formDisabled = signal<boolean>(false);\n\n  // ControlValueAccessor callbacks\n  private onChange: (value: string) => void = () => { /* set by registerOnChange */ };\n  private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n  /** The read-only value is shown as wrapping text (SI-10). */\n  protected readonly wrapsReadonlyValue = computed(() => this.readonly() && this.readonlyWrap());\n\n  /** `aria-describedby`: only the texts that are rendered (the error replaces the helper text). */\n  protected readonly describedBy = computed(() => {\n    if (this.error()) return `${this.inputId}-error`;\n    if (this.helperText()) return `${this.inputId}-helper`;\n    return null;\n  });\n\n  /** Screen-reader text of the character count: empty until the limit is near. */\n  protected readonly charCountAnnouncement = computed(() => {\n    const max = this.maxLength();\n    if (!this.showCharCount() || !max) return '';\n    const remaining = Math.max(0, max - this.value().length);\n    const threshold = this.charCountAnnounceThreshold() ?? Math.max(1, Math.ceil(max * 0.1));\n    if (remaining > threshold) return '';\n    return this.charCountRemainingLabel().replace('{remaining}', String(remaining));\n  });\n\n  /**\n   * Computed disabled state from both input and form control\n   */\n  protected get isDisabled(): boolean {\n    return this.disabled() || this._formDisabled();\n  }\n\n  /**\n   * Gets current character count\n   */\n  protected get charCount(): number {\n    return this.value().length;\n  }\n\n  /**\n   * Determines if error state should be shown\n   */\n  protected get hasError(): boolean {\n    return !!this.error();\n  }\n\n  /**\n   * Programmatically focus the input (the visible value while `readonlyWrap` applies)\n   */\n  public focus(): void {\n    if (this.wrapsReadonlyValue()) {\n      this.readonlyValueElement()?.nativeElement.focus();\n      return;\n    }\n    this.inputElement()?.nativeElement.focus();\n  }\n\n  /**\n   * Programmatically select input text\n   */\n  public select(): void {\n    const shown = this.wrapsReadonlyValue() ? this.readonlyValueElement()?.nativeElement : undefined;\n    if (shown) {\n      const selection = shown.ownerDocument.getSelection();\n      const range = shown.ownerDocument.createRange();\n      range.selectNodeContents(shown);\n      selection?.removeAllRanges();\n      selection?.addRange(range);\n      return;\n    }\n    this.inputElement()?.nativeElement.select();\n  }\n\n  /**\n   * Clear the input value\n   */\n  public clear(): void {\n    this.value.set('');\n    this.onChange('');\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: string | null): void {\n    this.value.set(value || '');\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this._formDisabled.set(isDisabled);\n  }\n\n  /**\n   * Handles input value changes\n   */\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const newValue = target.value;\n    // model.set() emits `valueChange` exactly once per actual change\n    this.value.set(newValue);\n    this.onChange(newValue);\n  }\n\n  /**\n   * Handles input focus\n   */\n  protected onFocus(): void {\n    this.focused.emit();\n  }\n\n  /**\n   * Handles input blur\n   */\n  protected onBlur(): void {\n    this.onTouched();\n    this.blurred.emit();\n  }\n\n  /**\n   * Handles keydown events\n   */\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this.enterPressed.emit();\n    }\n  }\n}\n","<div class=\"input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [id]=\"inputId + '-label'\" [attr.for]=\"wrapsReadonlyValue() ? null : inputId\" class=\"input-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"required-indicator\" [attr.aria-label]=\"requiredAriaLabel()\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"input-container\"\n    [class.input-xs]=\"size() === 'xs'\"\n    [class.input-sm]=\"size() === 'sm'\"\n    [class.input-md]=\"size() === 'md'\"\n    [class.input-lg]=\"size() === 'lg'\"\n    [class.input-error]=\"hasError\"\n    [class.input-disabled]=\"isDisabled\"\n    [class.input-readonly]=\"readonly()\"\n    [class.input-readonly-wrap]=\"wrapsReadonlyValue()\"\n  >\n    <!-- Icon Before -->\n    @if (iconBefore()) {\n      <span class=\"input-icon input-icon-before\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconBefore()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n\n    <!-- Read-only value that wraps (SI-10): a read-only textbox named by the label -->\n    @if (wrapsReadonlyValue()) {\n      <div\n        #readonlyValueRef\n        class=\"input-field input-readonly-value\"\n        role=\"textbox\"\n        aria-readonly=\"true\"\n        tabindex=\"0\"\n        [attr.aria-labelledby]=\"label() ? inputId + '-label' : null\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      >{{ value() }}</div>\n    }\n\n    <!-- Input Element (hidden while the read-only value wraps; it keeps value, name and autocomplete) -->\n    <input\n      #inputRef\n      [id]=\"inputId\"\n      [type]=\"type()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [hidden]=\"wrapsReadonlyValue()\"\n      [attr.maxlength]=\"maxLength() || null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize() ?? null\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-required]=\"required() || undefined\"\n      [attr.aria-invalid]=\"hasError || undefined\"\n      [attr.aria-describedby]=\"describedBy()\"\n      class=\"input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeydown($event)\"\n    />\n\n    <!-- Icon After -->\n    @if (iconAfter()) {\n      <span class=\"input-icon input-icon-after\" aria-hidden=\"true\">\n        <lc-icon [name]=\"iconAfter()!\" size=\"sm\" [decorative]=\"true\" />\n      </span>\n    }\n  </div>\n\n  <!-- Helper Text / Error Message / Character Count -->\n  @if (error() || helperText() || (showCharCount() && maxLength())) {\n    <div class=\"input-footer\">\n      <!-- Error Message -->\n      @if (error()) {\n        <p [id]=\"inputId + '-error'\" class=\"input-error\" role=\"alert\">\n          {{ error() }}\n        </p>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText() && !error()) {\n        <p [id]=\"inputId + '-helper'\" class=\"input-helper\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Character Count: always visible; spoken only near the limit (live region below) -->\n      @if (showCharCount() && maxLength()) {\n        <p class=\"char-count\">\n          {{ charCount }} / {{ maxLength() }}\n        </p>\n      }\n    </div>\n  }\n\n  @if (showCharCount() && maxLength()) {\n    <span class=\"input-char-count-live\" aria-live=\"polite\">{{ charCountAnnouncement() }}</span>\n  }\n</div>\n"],"mappings":"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"}