@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,519 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, output, signal } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { InputComponent } from "@lifecorner/angular-ui-kit/input";
+var EmailInputComponent = class EmailInputComponent {
+	label = input("Email", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("you@example.com", ...ngDevMode ? [{ debugName: "placeholder" }] : /* 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 */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	helperText = input(...ngDevMode ? [void 0, { debugName: "helperText" }] : /* istanbul ignore next */ []);
+	validateOnInput = input(false, ...ngDevMode ? [{ debugName: "validateOnInput" }] : /* 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 */ []);
+	showIcon = input(true, ...ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []);
+	readonlyWrap = input(false, ...ngDevMode ? [{ debugName: "readonlyWrap" }] : /* istanbul ignore next */ []);
+	requiredIndicator = input(true, ...ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []);
+	requiredMessage = input("Email address is required", ...ngDevMode ? [{ debugName: "requiredMessage" }] : /* istanbul ignore next */ []);
+	invalidMessage = input("Please enter a valid email address", ...ngDevMode ? [{ debugName: "invalidMessage" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	validationChange = output();
+	focused = output();
+	blurred = output();
+	enterPressed = output();
+	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	touched = signal(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	_formDisabled = signal(false, ...ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []);
+	EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+	onChange = () => {};
+	onTouched = () => {};
+	isValid = computed(() => {
+		const val = this.value();
+		if (!val) return this.required() ? false : true;
+		return this.EMAIL_REGEX.test(val);
+	}, ...ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []);
+	validationError = computed(() => {
+		if (this.error()) return this.error();
+		if (!this.touched() && !this.validateOnInput()) return void 0;
+		const val = this.value();
+		if (this.required() && !val) return this.requiredMessage();
+		if (val && !this.isValid()) return this.invalidMessage();
+	}, ...ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []);
+	get isDisabled() {
+		return this.disabled() || this._formDisabled();
+	}
+	constructor() {
+		effect(() => {
+			const valid = this.isValid();
+			const error = this.validationError();
+			this.validationChange.emit({
+				valid,
+				error
+			});
+		});
+	}
+	writeValue(value) {
+		this.value.set(value || "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this._formDisabled.set(isDisabled);
+	}
+	validate() {
+		this.touched.set(true);
+		return this.isValid();
+	}
+	resetValidation() {
+		this.touched.set(false);
+	}
+	onValueChange(newValue) {
+		this.value.set(newValue);
+		this.onChange(newValue);
+		this.valueChange.emit(newValue);
+	}
+	onFocus() {
+		this.focused.emit();
+	}
+	onBlur() {
+		this.touched.set(true);
+		this.onTouched();
+		this.blurred.emit();
+	}
+	onEnterPressed() {
+		this.enterPressed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: EmailInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: EmailInputComponent,
+		isStandalone: true,
+		selector: "lc-email-input",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				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
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				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
+			},
+			validateOnInput: {
+				classPropertyName: "validateOnInput",
+				publicName: "validateOnInput",
+				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
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonlyWrap: {
+				classPropertyName: "readonlyWrap",
+				publicName: "readonlyWrap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requiredIndicator: {
+				classPropertyName: "requiredIndicator",
+				publicName: "requiredIndicator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requiredMessage: {
+				classPropertyName: "requiredMessage",
+				publicName: "requiredMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidMessage: {
+				classPropertyName: "invalidMessage",
+				publicName: "invalidMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			valueChange: "valueChange",
+			validationChange: "validationChange",
+			focused: "focused",
+			blurred: "blurred",
+			enterPressed: "enterPressed"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => EmailInputComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<lc-input\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  type=\"email\"\n  [size]=\"size()\"\n  [value]=\"value()\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"readonly()\"\n  [readonlyWrap]=\"readonlyWrap()\"\n  [required]=\"required()\"\n  [requiredIndicator]=\"requiredIndicator()\"\n  [error]=\"validationError()\"\n  [helperText]=\"helperText()\"\n  [iconBefore]=\"showIcon() ? 'envelope' : undefined\"\n  [ariaLabel]=\"ariaLabel() || label()\"\n  [autocomplete]=\"autocomplete()\"\n  [name]=\"name()\"\n  [autocapitalize]=\"autocapitalize()\"\n  [spellcheck]=\"spellcheck()\"\n  [enterkeyhint]=\"enterkeyhint()\"\n  (valueChange)=\"onValueChange($event)\"\n  (focused)=\"onFocus()\"\n  (blurred)=\"onBlur()\"\n  (enterPressed)=\"onEnterPressed()\"\n/>\n",
+		styles: [":host{display:block;width:100%}\n"],
+		dependencies: [{
+			kind: "ngmodule",
+			type: CommonModule
+		}, {
+			kind: "component",
+			type: InputComponent,
+			selector: "lc-input",
+			inputs: [
+				"label",
+				"placeholder",
+				"type",
+				"size",
+				"disabled",
+				"readonly",
+				"readonlyWrap",
+				"required",
+				"requiredIndicator",
+				"error",
+				"helperText",
+				"iconBefore",
+				"iconAfter",
+				"maxLength",
+				"showCharCount",
+				"charCountRemainingLabel",
+				"charCountAnnounceThreshold",
+				"ariaLabel",
+				"autocomplete",
+				"name",
+				"autocapitalize",
+				"spellcheck",
+				"enterkeyhint",
+				"requiredAriaLabel",
+				"value"
+			],
+			outputs: [
+				"valueChange",
+				"focused",
+				"blurred",
+				"enterPressed"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: EmailInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-email-input",
+			imports: [CommonModule, InputComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => EmailInputComponent),
+				multi: true
+			}],
+			template: "<lc-input\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  type=\"email\"\n  [size]=\"size()\"\n  [value]=\"value()\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"readonly()\"\n  [readonlyWrap]=\"readonlyWrap()\"\n  [required]=\"required()\"\n  [requiredIndicator]=\"requiredIndicator()\"\n  [error]=\"validationError()\"\n  [helperText]=\"helperText()\"\n  [iconBefore]=\"showIcon() ? 'envelope' : undefined\"\n  [ariaLabel]=\"ariaLabel() || label()\"\n  [autocomplete]=\"autocomplete()\"\n  [name]=\"name()\"\n  [autocapitalize]=\"autocapitalize()\"\n  [spellcheck]=\"spellcheck()\"\n  [enterkeyhint]=\"enterkeyhint()\"\n  (valueChange)=\"onValueChange($event)\"\n  (focused)=\"onFocus()\"\n  (blurred)=\"onBlur()\"\n  (enterPressed)=\"onEnterPressed()\"\n/>\n",
+			styles: [":host{display:block;width:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				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
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		helperText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helperText",
+				required: false
+			}]
+		}],
+		validateOnInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validateOnInput",
+				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
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		readonlyWrap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonlyWrap",
+				required: false
+			}]
+		}],
+		requiredIndicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredIndicator",
+				required: false
+			}]
+		}],
+		requiredMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredMessage",
+				required: false
+			}]
+		}],
+		invalidMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalidMessage",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		validationChange: [{
+			type: i0.Output,
+			args: ["validationChange"]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		enterPressed: [{
+			type: i0.Output,
+			args: ["enterPressed"]
+		}]
+	}
+});
+export { EmailInputComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-email-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-email-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.ts","../../../../libs/angular-ui-kit/src/lib/email-input/email-input.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/member-ordering */\n/* ControlValueAccessor implementation requires specific method placement */\n\nimport {\n  Component,\n  input,\n  output,\n  signal,\n  computed,\n  ChangeDetectionStrategy,\n  forwardRef,\n  effect,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { InputAutocapitalize, InputComponent, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\n\n/**\n * Email input component with built-in RFC 5322 validation.\n *\n * Features:\n * - RFC 5322 regex email format validation\n * - Real-time validation feedback on input\n * - Valid/invalid visual indicators\n * - Size presets (xs, sm, md, lg)\n * - Helper text and error message display\n * - Disabled and readonly states (read-only addresses can wrap: `readonlyWrap`)\n * - Optional leading mail icon (`showIcon`)\n * - Autofill and keyboard hints: `autocomplete`, `name`, `autocapitalize`, `spellcheck`, `enterkeyhint`\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-email-input label=\"Email\" placeholder=\"you@example.com\" [(ngModel)]=\"email\" />\n * ```\n */\n@Component({\n  selector: 'lc-email-input',\n  imports: [CommonModule, InputComponent],\n  templateUrl: './email-input.component.html',\n  styleUrl: './email-input.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => EmailInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class EmailInputComponent implements ControlValueAccessor {\n  // Input Properties\n  /**\n   * Input label (displayed above input)\n   * @default 'Email'\n   */\n  readonly label = input<string>('Email');\n\n  /**\n   * Placeholder text\n   * @default 'you@example.com'\n   */\n  readonly placeholder = input<string>('you@example.com');\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   * Whether the input is required\n   * @default false\n   */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Custom error message (overrides validation error)\n   */\n  readonly error = input<string>();\n\n  /**\n   * Helper text to display below input\n   */\n  readonly helperText = input<string>();\n\n  /**\n   * Whether to show validation feedback immediately\n   * @default false (validates on blur)\n   */\n  readonly validateOnInput = input<boolean>(false);\n\n  /**\n   * ARIA label for accessibility\n   */\n  readonly ariaLabel = input<string>();\n\n  /**\n   * Native `autocomplete` (input purpose, WCAG 1.3.5): `email` (registration),\n   * `username` (the address as the sign-in name), `username webauthn` (sign-in:\n   * the browser offers passkeys in this field). Unset = no attribute.\n   */\n  readonly autocomplete = input<string>();\n\n  /** Native `name` of the inner input. Unset = no attribute. */\n  readonly name = input<string>();\n\n  /** Native `autocapitalize` (`off` keeps keyboards from capitalising the address). Unset = no attribute. */\n  readonly autocapitalize = input<InputAutocapitalize>();\n\n  /** Native `spellcheck`. 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  /**\n   * Show the leading mail icon. `false` gives the address the icon's width\n   * (about 36 px) — long addresses fit on a phone.\n   * @default true\n   */\n  readonly showIcon = input<boolean>(true);\n\n  /**\n   * While `readonly`: the address wraps onto more lines instead of being\n   * clipped. A hidden native input keeps value, `name` and `autocomplete`\n   * (e.g. `username` for password managers on a password page).\n   * @default false\n   */\n  readonly readonlyWrap = input<boolean>(false);\n\n  /**\n   * Show the `*` of a `required` field; `false` keeps the required semantics without it.\n   * @default true\n   */\n  readonly requiredIndicator = input<boolean>(true);\n\n  /** Error shown for an empty `required` field. */\n  readonly requiredMessage = input('Email address is required');\n\n  /** Error shown for a malformed address. */\n  readonly invalidMessage = input('Please enter a valid email address');\n\n  // Output Events\n  /**\n   * Emitted when email value changes\n   */\n  readonly valueChange = output<string>();\n\n  /**\n   * Emitted when validation state changes\n   */\n  readonly validationChange = output<{ valid: boolean; error?: string }>();\n\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 value = signal<string>('');\n  private readonly touched = signal<boolean>(false);\n  private readonly _formDisabled = signal<boolean>(false);\n\n  /**\n   * RFC 5322 compliant email regex (simplified but robust)\n   * Validates: local-part@domain\n   * - Local part: alphanumeric, dots, hyphens, underscores, plus signs\n   * - Domain: alphanumeric, dots, hyphens with valid TLD\n   */\n  private readonly EMAIL_REGEX =\n    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n  // ControlValueAccessor callbacks\n  private onChange: (value: string) => void = () => { /* set by registerOnChange */ };\n  private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n  /**\n   * Computed validation state\n   */\n  protected readonly isValid = computed(() => {\n    const val = this.value();\n    if (!val) return this.required() ? false : true;\n    return this.EMAIL_REGEX.test(val);\n  });\n\n  /**\n   * Computed error message\n   */\n  protected readonly validationError = computed(() => {\n    // Custom error takes precedence\n    if (this.error()) return this.error();\n\n    // Show validation errors only after touched or validateOnInput\n    if (!this.touched() && !this.validateOnInput()) return undefined;\n\n    const val = this.value();\n    if (this.required() && !val) {\n      return this.requiredMessage();\n    }\n    if (val && !this.isValid()) {\n      return this.invalidMessage();\n    }\n    return undefined;\n  });\n\n  /**\n   * Computed disabled state\n   */\n  protected get isDisabled(): boolean {\n    return this.disabled() || this._formDisabled();\n  }\n\n  constructor() {\n    // Emit validation state changes\n    effect(() => {\n      const valid = this.isValid();\n      const error = this.validationError();\n      this.validationChange.emit({ valid, error });\n    });\n  }\n\n  // ===== ControlValueAccessor implementation =====\n\n  writeValue(value: string): 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  // ===== Public API methods =====\n\n  /**\n   * Public method to trigger validation\n   */\n  public validate(): boolean {\n    this.touched.set(true);\n    return this.isValid();\n  }\n\n  /**\n   * Public method to reset validation state\n   */\n  public resetValidation(): void {\n    this.touched.set(false);\n  }\n\n  // ===== Event handlers (protected) =====\n\n  /**\n   * Handles value changes from base input\n   */\n  protected onValueChange(newValue: string): void {\n    this.value.set(newValue);\n    this.onChange(newValue);\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Handles focus events\n   */\n  protected onFocus(): void {\n    this.focused.emit();\n  }\n\n  /**\n   * Handles blur events\n   */\n  protected onBlur(): void {\n    this.touched.set(true);\n    this.onTouched();\n    this.blurred.emit();\n  }\n\n  /**\n   * Handles Enter key press\n   */\n  protected onEnterPressed(): void {\n    this.enterPressed.emit();\n  }\n}\n","<lc-input\n  [label]=\"label()\"\n  [placeholder]=\"placeholder()\"\n  type=\"email\"\n  [size]=\"size()\"\n  [value]=\"value()\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"readonly()\"\n  [readonlyWrap]=\"readonlyWrap()\"\n  [required]=\"required()\"\n  [requiredIndicator]=\"requiredIndicator()\"\n  [error]=\"validationError()\"\n  [helperText]=\"helperText()\"\n  [iconBefore]=\"showIcon() ? 'envelope' : undefined\"\n  [ariaLabel]=\"ariaLabel() || label()\"\n  [autocomplete]=\"autocomplete()\"\n  [name]=\"name()\"\n  [autocapitalize]=\"autocapitalize()\"\n  [spellcheck]=\"spellcheck()\"\n  [enterkeyhint]=\"enterkeyhint()\"\n  (valueChange)=\"onValueChange($event)\"\n  (focused)=\"onFocus()\"\n  (blurred)=\"onBlur()\"\n  (enterPressed)=\"onEnterPressed()\"\n/>\n"],"mappings":";;;;;AAkDA,IAAa,sBAAb,MAAa,oBAAmB;CAMrB,QAAQ,MAAc,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAM9B,cAAc,MAAc,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAM9C,OAAO,MAAiC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAM7C,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAKhC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAKvB,aAAa,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAM5B,kBAAkB,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAKvC,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAO3B,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGtB,iBAAiB,MAA4B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAG7C,aAAa,MAAgB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,eAAe,MAA0B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAOzC,WAAW,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAQ/B,eAAe,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAMpC,oBAAoB,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,kBAAkB,MAAM,6BAA4B,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAGpD,iBAAiB,MAAM,sCAAqC,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAM5D,cAAc,OAAM;CAKpB,mBAAmB,OAAM;CAKzB,UAAU,OAAM;CAKhB,UAAU,OAAM;CAKhB,eAAe,OAAM;CAGrB,QAAQ,OAAe,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,UAAU,OAAgB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,gBAAgB,OAAgB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAQtC,cACf;CAGM,iBAAyC,CAAiC;CAC1E,kBAA6B,CAAkC;CAKpD,UAAU,eAAc;EACzC,MAAM,MAAM,KAAK,MAAK;EACtB,IAAI,CAAC,KAAK,OAAO,KAAK,SAAQ,IAAK,QAAQ;EAC3C,OAAO,KAAK,YAAY,KAAK,GAAG;CAClC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKiB,kBAAkB,eAAc;EAEjD,IAAI,KAAK,MAAK,GAAI,OAAO,KAAK,MAAK;EAGnC,IAAI,CAAC,KAAK,QAAO,KAAM,CAAC,KAAK,gBAAe,GAAI,OAAO;EAEvD,MAAM,MAAM,KAAK,MAAK;EACtB,IAAI,KAAK,SAAQ,KAAM,CAAC,KACtB,OAAO,KAAK,gBAAe;EAE7B,IAAI,OAAO,CAAC,KAAK,QAAO,GACtB,OAAO,KAAK,eAAc;CAG9B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,IAAc,aAAU;EACtB,OAAO,KAAK,SAAQ,KAAM,KAAK,cAAa;CAC9C;CAEA,cAAA;EAEE,aAAY;GACV,MAAM,QAAQ,KAAK,QAAO;GAC1B,MAAM,QAAQ,KAAK,gBAAe;GAClC,KAAK,iBAAiB,KAAK;IAAE;IAAO;GAAK,CAAE;EAC7C,CAAC;CACH;CAIA,WAAW,OAAa;EACtB,KAAK,MAAM,IAAI,SAAS,EAAE;CAC5B;CAEA,iBAAiB,IAA2B;EAC1C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,cAAc,IAAI,UAAU;CACnC;CAOO,WAAQ;EACb,KAAK,QAAQ,IAAI,IAAI;EACrB,OAAO,KAAK,QAAO;CACrB;CAKO,kBAAe;EACpB,KAAK,QAAQ,IAAI,KAAK;CACxB;CAOU,cAAc,UAAgB;EACtC,KAAK,MAAM,IAAI,QAAQ;EACvB,KAAK,SAAS,QAAQ;EACtB,KAAK,YAAY,KAAK,QAAQ;CAChC;CAKU,UAAO;EACf,KAAK,QAAQ,KAAI;CACnB;CAKU,SAAM;EACd,KAAK,QAAQ,IAAI,IAAI;EACrB,KAAK,UAAS;EACd,KAAK,QAAQ,KAAI;CACnB;CAKU,iBAAc;EACtB,KAAK,aAAa,KAAI;CACxB;CArQW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,aAAA;GAAA,kBAAA;GAAA,SAAA;GAAA,SAAA;GAAA,cAAA;EAAA;EAAA,WARnB,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,mBAAmB;GACjD,OAAO;EACR,CACF;EAAA,UAAA;EAAA,UChDH;EAyBA,QAAA,CAAA,mCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDaY;EAAY,GAAA;GAAA,MAAA;GAAA,MAAE;GAAc,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAY3B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAd/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,SACjB,CAAC,cAAc,cAAc;GAAC,iBAGtB,wBAAwB;GAAM,WACpC,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,mBAAoB;IACjD,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,mCAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-empty-state.mjs

@@ -0,0 +1,143 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var EmptyStateComponent = class EmptyStateComponent {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	heading = input(...ngDevMode ? [void 0, { debugName: "heading" }] : /* istanbul ignore next */ []);
+	headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => `empty-state empty-state--${this.size()}`, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: EmptyStateComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: EmptyStateComponent,
+		isStandalone: true,
+		selector: "lc-empty-state",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div [class]=\"hostClasses()\" role=\"status\">\n  @if (icon()) {\n    <lc-icon [name]=\"icon()!\" size=\"xl\" color=\"var(--color-text-tertiary)\" [decorative]=\"true\" />\n  }\n  @if (heading()) {\n    @switch (headingLevel()) {\n      @case (2) {\n        <h2 class=\"empty-state__heading\">{{ heading() }}</h2>\n      }\n      @case (4) {\n        <h4 class=\"empty-state__heading\">{{ heading() }}</h4>\n      }\n      @case (5) {\n        <h5 class=\"empty-state__heading\">{{ heading() }}</h5>\n      }\n      @case (6) {\n        <h6 class=\"empty-state__heading\">{{ heading() }}</h6>\n      }\n      @default {\n        <h3 class=\"empty-state__heading\">{{ heading() }}</h3>\n      }\n    }\n  }\n  @if (message()) {\n    <p class=\"empty-state__message\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n",
+		styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25rem}.empty-state__heading{margin:0;line-height:var(--line-height-tight, 1.25);font-size:1.125rem;font-weight:600;color:var(--color-text-primary)}.empty-state__message{margin:0;font-size:.875rem;color:var(--color-text-tertiary)}.empty-state--sm{padding:.5rem 0}.empty-state--sm .empty-state__message{font-size:.875rem}.empty-state--md{padding:2rem 0;gap:.5rem}.empty-state--lg{padding:5rem 0;gap:.5rem}.empty-state--lg .empty-state__heading{font-size:1.25rem}\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: EmptyStateComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-empty-state",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"hostClasses()\" role=\"status\">\n  @if (icon()) {\n    <lc-icon [name]=\"icon()!\" size=\"xl\" color=\"var(--color-text-tertiary)\" [decorative]=\"true\" />\n  }\n  @if (heading()) {\n    @switch (headingLevel()) {\n      @case (2) {\n        <h2 class=\"empty-state__heading\">{{ heading() }}</h2>\n      }\n      @case (4) {\n        <h4 class=\"empty-state__heading\">{{ heading() }}</h4>\n      }\n      @case (5) {\n        <h5 class=\"empty-state__heading\">{{ heading() }}</h5>\n      }\n      @case (6) {\n        <h6 class=\"empty-state__heading\">{{ heading() }}</h6>\n      }\n      @default {\n        <h3 class=\"empty-state__heading\">{{ heading() }}</h3>\n      }\n    }\n  }\n  @if (message()) {\n    <p class=\"empty-state__message\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n",
+			styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25rem}.empty-state__heading{margin:0;line-height:var(--line-height-tight, 1.25);font-size:1.125rem;font-weight:600;color:var(--color-text-primary)}.empty-state__message{margin:0;font-size:.875rem;color:var(--color-text-tertiary)}.empty-state--sm{padding:.5rem 0}.empty-state--sm .empty-state__message{font-size:.875rem}.empty-state--md{padding:2rem 0;gap:.5rem}.empty-state--lg{padding:5rem 0;gap:.5rem}.empty-state--lg .empty-state__heading{font-size:1.25rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}]
+	}
+});
+export { EmptyStateComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-empty-state.mjs.map