@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,696 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { AlertComponent } from "@lifecorner/angular-ui-kit/alert";
+let nextUniqueId = 0;
+const SYMBOL_PATTERN = /[!@#$%^&*()_+\-=[\]{}|;:,.<>?]/;
+const DEFAULT_MIN_LENGTH = 8;
+var PasswordInputComponent = class PasswordInputComponent {
+	label = input("Password", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("Enter password", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	showStrengthMeter = input(false, ...ngDevMode ? [{ debugName: "showStrengthMeter" }] : /* istanbul ignore next */ []);
+	showRequirements = input(false, ...ngDevMode ? [{ debugName: "showRequirements" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	requiredIndicator = input(true, ...ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []);
+	error = input(void 0, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	helperText = input(...ngDevMode ? [void 0, { debugName: "helperText" }] : /* istanbul ignore next */ []);
+	minLength = input(...ngDevMode ? [void 0, { debugName: "minLength" }] : /* istanbul ignore next */ []);
+	strengthMode = input("composition", ...ngDevMode ? [{ debugName: "strengthMode" }] : /* 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("off", ...ngDevMode ? [{ debugName: "autocapitalize" }] : /* istanbul ignore next */ []);
+	spellcheck = input(false, ...ngDevMode ? [{ debugName: "spellcheck" }] : /* istanbul ignore next */ []);
+	enterkeyhint = input(...ngDevMode ? [void 0, { debugName: "enterkeyhint" }] : /* istanbul ignore next */ []);
+	showPasswordAriaLabel = input("Show password", ...ngDevMode ? [{ debugName: "showPasswordAriaLabel" }] : /* istanbul ignore next */ []);
+	hidePasswordAriaLabel = input("Hide password", ...ngDevMode ? [{ debugName: "hidePasswordAriaLabel" }] : /* istanbul ignore next */ []);
+	strengthLabel = input("Password strength:", ...ngDevMode ? [{ debugName: "strengthLabel" }] : /* istanbul ignore next */ []);
+	weakLabel = input("Weak", ...ngDevMode ? [{ debugName: "weakLabel" }] : /* istanbul ignore next */ []);
+	fairLabel = input("Fair", ...ngDevMode ? [{ debugName: "fairLabel" }] : /* istanbul ignore next */ []);
+	goodLabel = input("Good", ...ngDevMode ? [{ debugName: "goodLabel" }] : /* istanbul ignore next */ []);
+	strongLabel = input("Strong", ...ngDevMode ? [{ debugName: "strongLabel" }] : /* istanbul ignore next */ []);
+	requirementsAriaLabel = input("Password requirements", ...ngDevMode ? [{ debugName: "requirementsAriaLabel" }] : /* istanbul ignore next */ []);
+	minLengthRequirementLabel = input("At least 8 characters", ...ngDevMode ? [{ debugName: "minLengthRequirementLabel" }] : /* istanbul ignore next */ []);
+	uppercaseRequirementLabel = input("One uppercase letter (A-Z)", ...ngDevMode ? [{ debugName: "uppercaseRequirementLabel" }] : /* istanbul ignore next */ []);
+	lowercaseRequirementLabel = input("One lowercase letter (a-z)", ...ngDevMode ? [{ debugName: "lowercaseRequirementLabel" }] : /* istanbul ignore next */ []);
+	digitRequirementLabel = input("One digit (0-9)", ...ngDevMode ? [{ debugName: "digitRequirementLabel" }] : /* istanbul ignore next */ []);
+	symbolRequirementLabel = input("One symbol (!@#$%^&*)", ...ngDevMode ? [{ debugName: "symbolRequirementLabel" }] : /* istanbul ignore next */ []);
+	requirementMetLabel = input("(met)", ...ngDevMode ? [{ debugName: "requirementMetLabel" }] : /* istanbul ignore next */ []);
+	requirementNotMetLabel = input("(not met)", ...ngDevMode ? [{ debugName: "requirementNotMetLabel" }] : /* istanbul ignore next */ []);
+	strengthChange = output();
+	inputId = `lc-password-input-${nextUniqueId++}`;
+	errorId = `${this.inputId}-error`;
+	helperId = `${this.inputId}-helper`;
+	strengthId = `${this.inputId}-strength`;
+	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	isPasswordVisible = signal(false, ...ngDevMode ? [{ debugName: "isPasswordVisible" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	requiredLength = computed(() => this.minLength() ?? DEFAULT_MIN_LENGTH, ...ngDevMode ? [{ debugName: "requiredLength" }] : /* istanbul ignore next */ []);
+	requirements = computed(() => {
+		const password = this.value();
+		const checks = [[this.minLengthRequirementLabel(), password.length >= this.requiredLength()]];
+		if (this.strengthMode() === "composition") checks.push([this.uppercaseRequirementLabel(), /[A-Z]/.test(password)], [this.lowercaseRequirementLabel(), /[a-z]/.test(password)], [this.digitRequirementLabel(), /[0-9]/.test(password)], [this.symbolRequirementLabel(), SYMBOL_PATTERN.test(password)]);
+		return checks.map(([label, met]) => ({
+			label,
+			met,
+			icon: met ? "✓" : "✗"
+		}));
+	}, ...ngDevMode ? [{ debugName: "requirements" }] : /* istanbul ignore next */ []);
+	strength = computed(() => this.strengthMode() === "length" ? this.lengthStrength() : this.compositionStrength(), ...ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []);
+	strengthText = computed(() => {
+		switch (this.strength().level) {
+			case "Strong": return this.strongLabel();
+			case "Good": return this.goodLabel();
+			case "Fair": return this.fairLabel();
+			default: return this.weakLabel();
+		}
+	}, ...ngDevMode ? [{ debugName: "strengthText" }] : /* istanbul ignore next */ []);
+	strengthLevelClass = computed(() => `lc-strength-${this.strength().level.toLowerCase()}`, ...ngDevMode ? [{ debugName: "strengthLevelClass" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [];
+		if (this.error()) ids.push(this.errorId);
+		else if (this.helperText()) ids.push(this.helperId);
+		if (this.showStrengthMeter()) ids.push(this.strengthId);
+		return ids.length ? ids.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value.set(value || "");
+		this.strengthChange.emit(this.strength());
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	togglePasswordVisibility() {
+		this.isPasswordVisible.update((visible) => !visible);
+	}
+	onInput(event) {
+		const input = event.target;
+		this.value.set(input.value);
+		this.onChange(input.value);
+		this.strengthChange.emit(this.strength());
+	}
+	onBlur() {
+		this.onTouched();
+	}
+	compositionStrength() {
+		const requirements = this.requirements();
+		const score = requirements.filter((r) => r.met).length;
+		const percentage = score / requirements.length * 100;
+		let level = "Weak";
+		if (percentage >= 80) level = "Strong";
+		else if (percentage >= 60) level = "Good";
+		else if (percentage >= 40) level = "Fair";
+		return {
+			score,
+			level,
+			percentage
+		};
+	}
+	lengthStrength() {
+		const length = this.value().length;
+		const min = this.requiredLength();
+		const percentage = Math.min(100, Math.round(length / (2 * min) * 100));
+		let level = "Weak";
+		let score = length > 0 ? 1 : 0;
+		if (length >= 2 * min) {
+			level = "Strong";
+			score = 4;
+		} else if (length >= 1.5 * min) {
+			level = "Good";
+			score = 3;
+		} else if (length >= min) {
+			level = "Fair";
+			score = 2;
+		}
+		return {
+			score,
+			level,
+			percentage
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PasswordInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PasswordInputComponent,
+		isStandalone: true,
+		selector: "lc-password-input",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showStrengthMeter: {
+				classPropertyName: "showStrengthMeter",
+				publicName: "showStrengthMeter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showRequirements: {
+				classPropertyName: "showRequirements",
+				publicName: "showRequirements",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				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
+			},
+			minLength: {
+				classPropertyName: "minLength",
+				publicName: "minLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strengthMode: {
+				classPropertyName: "strengthMode",
+				publicName: "strengthMode",
+				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
+			},
+			showPasswordAriaLabel: {
+				classPropertyName: "showPasswordAriaLabel",
+				publicName: "showPasswordAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hidePasswordAriaLabel: {
+				classPropertyName: "hidePasswordAriaLabel",
+				publicName: "hidePasswordAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strengthLabel: {
+				classPropertyName: "strengthLabel",
+				publicName: "strengthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weakLabel: {
+				classPropertyName: "weakLabel",
+				publicName: "weakLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fairLabel: {
+				classPropertyName: "fairLabel",
+				publicName: "fairLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			goodLabel: {
+				classPropertyName: "goodLabel",
+				publicName: "goodLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strongLabel: {
+				classPropertyName: "strongLabel",
+				publicName: "strongLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requirementsAriaLabel: {
+				classPropertyName: "requirementsAriaLabel",
+				publicName: "requirementsAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minLengthRequirementLabel: {
+				classPropertyName: "minLengthRequirementLabel",
+				publicName: "minLengthRequirementLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			uppercaseRequirementLabel: {
+				classPropertyName: "uppercaseRequirementLabel",
+				publicName: "uppercaseRequirementLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lowercaseRequirementLabel: {
+				classPropertyName: "lowercaseRequirementLabel",
+				publicName: "lowercaseRequirementLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			digitRequirementLabel: {
+				classPropertyName: "digitRequirementLabel",
+				publicName: "digitRequirementLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			symbolRequirementLabel: {
+				classPropertyName: "symbolRequirementLabel",
+				publicName: "symbolRequirementLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requirementMetLabel: {
+				classPropertyName: "requirementMetLabel",
+				publicName: "requirementMetLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requirementNotMetLabel: {
+				classPropertyName: "requirementNotMetLabel",
+				publicName: "requirementNotMetLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { strengthChange: "strengthChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => PasswordInputComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"lc-password-input\">\n  <label [for]=\"inputId\" class=\"lc-label\">\n    {{ label() }}\n    @if (required() && requiredIndicator()) {\n      <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n\n  <div class=\"lc-input-wrapper\">\n    <input\n      [id]=\"inputId\"\n      [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      autocorrect=\"off\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      class=\"lc-input\"\n      [class.lc-input-error]=\"error()\"\n    />\n\n    <button\n      type=\"button\"\n      (click)=\"togglePasswordVisibility()\"\n      [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n      [attr.aria-pressed]=\"isPasswordVisible()\"\n      [attr.aria-controls]=\"inputId\"\n      class=\"lc-toggle-btn\"\n      [disabled]=\"isDisabled()\"\n    >\n      @if (isPasswordVisible()) {\n        <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      } @else {\n        <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      }\n    </button>\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  } @else if (helperText()) {\n    <div [id]=\"helperId\" class=\"lc-helper\">\n      {{ helperText() }}\n    </div>\n  }\n\n  @if (showStrengthMeter()) {\n    <div class=\"lc-strength-meter\">\n      <!-- The bar is decorative; the live label below carries the meaning -->\n      <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n        <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n      </div>\n      <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n        <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n      </div>\n    </div>\n  }\n\n  @if (showRequirements()) {\n    <lc-alert variant=\"info\" [dismissible]=\"false\">\n      <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n        @for (req of requirements(); track req.label) {\n          <li\n            class=\"lc-requirement\"\n            [class.lc-requirement-met]=\"req.met\"\n            [class.lc-requirement-unmet]=\"!req.met\"\n          >\n            <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n            <span class=\"lc-requirement-label\">{{ req.label }}</span>\n            <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n          </li>\n        }\n      </ul>\n    </lc-alert>\n  }\n</div>\n",
+		styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error-600) 20%,transparent)}.lc-toggle-btn{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease;color:var(--color-text-secondary)}.lc-toggle-btn:hover{opacity:.7}.lc-toggle-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.lc-icon{font-size:1.25rem}.lc-error{font-size:.875rem;color:var(--color-text-error)}.lc-helper{font-size:.875rem;color:var(--color-text-secondary)}.lc-strength-meter{display:flex;align-items:center;gap:.75rem}.lc-strength-bar{flex:1;height:.375rem;background-color:var(--color-surface-sunken);border-radius:var(--border-radius-sm);overflow:hidden}.lc-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.lc-strength-fill.lc-strength-weak{background-color:var(--color-error-500)}.lc-strength-fill.lc-strength-fair{background-color:var(--color-warning-500)}.lc-strength-fill.lc-strength-good{background-color:var(--color-primary-500)}.lc-strength-fill.lc-strength-strong{background-color:var(--color-success-500)}.lc-strength-label{position:relative;font-size:.875rem;font-weight:500;min-width:4rem;text-align:right}.lc-strength-label.lc-strength-weak{color:var(--color-text-error)}.lc-strength-label.lc-strength-fair{color:var(--color-text-warning)}.lc-strength-label.lc-strength-good{color:var(--color-on-primary-subtle)}.lc-strength-label.lc-strength-strong{color:var(--color-text-success)}.lc-requirements{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.lc-requirement{position:relative;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;font-size:.875rem}.lc-requirement.lc-requirement-met{color:var(--color-text-success);font-weight:600}.lc-requirement.lc-requirement-met .lc-requirement-icon{color:var(--color-text-success)}.lc-requirement.lc-requirement-unmet{color:inherit}.lc-requirement.lc-requirement-unmet .lc-requirement-icon{color:inherit;opacity:.7}.lc-requirement-icon{font-weight:600;min-width:1rem}.lc-requirement-label{flex:1}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}, {
+			kind: "component",
+			type: AlertComponent,
+			selector: "lc-alert",
+			inputs: [
+				"variant",
+				"title",
+				"message",
+				"icon",
+				"showIcon",
+				"iconAriaLabel",
+				"actionsLayout",
+				"dismissible",
+				"ariaLabel",
+				"closeAriaLabel",
+				"visible"
+			],
+			outputs: ["dismissed", "visibleChange"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PasswordInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-password-input",
+			standalone: true,
+			imports: [IconComponent, AlertComponent],
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => PasswordInputComponent),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-password-input\">\n  <label [for]=\"inputId\" class=\"lc-label\">\n    {{ label() }}\n    @if (required() && requiredIndicator()) {\n      <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n\n  <div class=\"lc-input-wrapper\">\n    <input\n      [id]=\"inputId\"\n      [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      autocorrect=\"off\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      class=\"lc-input\"\n      [class.lc-input-error]=\"error()\"\n    />\n\n    <button\n      type=\"button\"\n      (click)=\"togglePasswordVisibility()\"\n      [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n      [attr.aria-pressed]=\"isPasswordVisible()\"\n      [attr.aria-controls]=\"inputId\"\n      class=\"lc-toggle-btn\"\n      [disabled]=\"isDisabled()\"\n    >\n      @if (isPasswordVisible()) {\n        <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      } @else {\n        <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      }\n    </button>\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  } @else if (helperText()) {\n    <div [id]=\"helperId\" class=\"lc-helper\">\n      {{ helperText() }}\n    </div>\n  }\n\n  @if (showStrengthMeter()) {\n    <div class=\"lc-strength-meter\">\n      <!-- The bar is decorative; the live label below carries the meaning -->\n      <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n        <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n      </div>\n      <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n        <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n      </div>\n    </div>\n  }\n\n  @if (showRequirements()) {\n    <lc-alert variant=\"info\" [dismissible]=\"false\">\n      <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n        @for (req of requirements(); track req.label) {\n          <li\n            class=\"lc-requirement\"\n            [class.lc-requirement-met]=\"req.met\"\n            [class.lc-requirement-unmet]=\"!req.met\"\n          >\n            <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n            <span class=\"lc-requirement-label\">{{ req.label }}</span>\n            <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n          </li>\n        }\n      </ul>\n    </lc-alert>\n  }\n</div>\n",
+			styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error-600) 20%,transparent)}.lc-toggle-btn{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease;color:var(--color-text-secondary)}.lc-toggle-btn:hover{opacity:.7}.lc-toggle-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.lc-icon{font-size:1.25rem}.lc-error{font-size:.875rem;color:var(--color-text-error)}.lc-helper{font-size:.875rem;color:var(--color-text-secondary)}.lc-strength-meter{display:flex;align-items:center;gap:.75rem}.lc-strength-bar{flex:1;height:.375rem;background-color:var(--color-surface-sunken);border-radius:var(--border-radius-sm);overflow:hidden}.lc-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.lc-strength-fill.lc-strength-weak{background-color:var(--color-error-500)}.lc-strength-fill.lc-strength-fair{background-color:var(--color-warning-500)}.lc-strength-fill.lc-strength-good{background-color:var(--color-primary-500)}.lc-strength-fill.lc-strength-strong{background-color:var(--color-success-500)}.lc-strength-label{position:relative;font-size:.875rem;font-weight:500;min-width:4rem;text-align:right}.lc-strength-label.lc-strength-weak{color:var(--color-text-error)}.lc-strength-label.lc-strength-fair{color:var(--color-text-warning)}.lc-strength-label.lc-strength-good{color:var(--color-on-primary-subtle)}.lc-strength-label.lc-strength-strong{color:var(--color-text-success)}.lc-requirements{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.lc-requirement{position:relative;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;font-size:.875rem}.lc-requirement.lc-requirement-met{color:var(--color-text-success);font-weight:600}.lc-requirement.lc-requirement-met .lc-requirement-icon{color:var(--color-text-success)}.lc-requirement.lc-requirement-unmet{color:inherit}.lc-requirement.lc-requirement-unmet .lc-requirement-icon{color:inherit;opacity:.7}.lc-requirement-icon{font-weight:600;min-width:1rem}.lc-requirement-label{flex:1}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showStrengthMeter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showStrengthMeter",
+				required: false
+			}]
+		}],
+		showRequirements: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showRequirements",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				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
+			}]
+		}],
+		minLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minLength",
+				required: false
+			}]
+		}],
+		strengthMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strengthMode",
+				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
+			}]
+		}],
+		showPasswordAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPasswordAriaLabel",
+				required: false
+			}]
+		}],
+		hidePasswordAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidePasswordAriaLabel",
+				required: false
+			}]
+		}],
+		strengthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strengthLabel",
+				required: false
+			}]
+		}],
+		weakLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weakLabel",
+				required: false
+			}]
+		}],
+		fairLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fairLabel",
+				required: false
+			}]
+		}],
+		goodLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "goodLabel",
+				required: false
+			}]
+		}],
+		strongLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strongLabel",
+				required: false
+			}]
+		}],
+		requirementsAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requirementsAriaLabel",
+				required: false
+			}]
+		}],
+		minLengthRequirementLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minLengthRequirementLabel",
+				required: false
+			}]
+		}],
+		uppercaseRequirementLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uppercaseRequirementLabel",
+				required: false
+			}]
+		}],
+		lowercaseRequirementLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lowercaseRequirementLabel",
+				required: false
+			}]
+		}],
+		digitRequirementLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "digitRequirementLabel",
+				required: false
+			}]
+		}],
+		symbolRequirementLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "symbolRequirementLabel",
+				required: false
+			}]
+		}],
+		requirementMetLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requirementMetLabel",
+				required: false
+			}]
+		}],
+		requirementNotMetLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requirementNotMetLabel",
+				required: false
+			}]
+		}],
+		strengthChange: [{
+			type: i0.Output,
+			args: ["strengthChange"]
+		}]
+	}
+});
+export { PasswordInputComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-password-input.mjs.map