@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-input-otp.mjs

@@ -0,0 +1,586 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, inject, input, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const inputOtpGroupClass = "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40";
+const inputOtpSlotClass = "relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40";
+const inputOtpSeparatorClass = "flex items-center [&_svg:not([class*='size-'])]:size-4";
+const UI_INPUT_OTP_GENERATED = [];
+var UiInputOtp = class UiInputOtp {
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	maxLength = input(6, {
+		...ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	pattern = input("^\\d+$", ...ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	complete = output();
+	field = viewChild.required("field", ...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	focused = signal(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	caret = signal(0, ...ngDevMode ? [{ debugName: "caret" }] : /* istanbul ignore next */ []);
+	inputMode = computed(() => this.pattern().includes("\\d") && !this.pattern().includes("a-z") ? "numeric" : "text", ...ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative flex items-center gap-2 has-disabled:opacity-50", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	activeIndex = computed(() => Math.min(this.caret(), this.maxLength() - 1), ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	charAt(i) {
+		return this.value()[i] ?? "";
+	}
+	focus(index) {
+		const el = this.field().nativeElement;
+		el.focus();
+		if (index !== void 0) {
+			const i = Math.min(index, this.value().length);
+			el.setSelectionRange(i, Math.min(i + 1, this.value().length));
+			this.syncCaret();
+		}
+	}
+	onInput(e) {
+		const el = e.target;
+		const re = new RegExp(this.pattern());
+		const cleaned = el.value.slice(0, this.maxLength());
+		const ok = cleaned === "" || re.test(cleaned);
+		const next = ok ? cleaned : this.value();
+		if (!ok) el.value = next;
+		this.value.set(next);
+		this.onChange(next);
+		if (next.length === this.maxLength()) this.complete.emit(next);
+		this.syncCaret();
+	}
+	onFocus() {
+		this.focused.set(true);
+		this.syncCaret();
+	}
+	onBlur() {
+		this.focused.set(false);
+		this.onTouched();
+	}
+	syncCaret() {
+		this.caret.set(this.field().nativeElement.selectionStart ?? 0);
+	}
+	writeValue(v) {
+		this.value.set(v ?? "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInputOtp,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiInputOtp,
+		isStandalone: true,
+		selector: "div[uiInputOtp], ui-input-otp",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxLength: {
+				classPropertyName: "maxLength",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pattern: {
+				classPropertyName: "pattern",
+				publicName: "pattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			complete: "complete"
+		},
+		host: {
+			attributes: { "data-slot": "input-otp-container" },
+			properties: { "attr.class": "classes()" }
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiInputOtp),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: ["field"],
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <ng-content />
+    <input
+      #field
+      data-slot="input-otp"
+      data-input-otp="true"
+      autocomplete="one-time-code"
+      spellcheck="false"
+      [attr.inputmode]="inputMode()"
+      [attr.maxlength]="maxLength()"
+      [attr.pattern]="pattern()"
+      [disabled]="isDisabled()"
+      [required]="required()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [value]="value()"
+      class="absolute inset-0 size-full cursor-text opacity-0 disabled:cursor-not-allowed"
+      (input)="onInput($event)"
+      (focus)="onFocus()"
+      (blur)="onBlur()"
+      (keyup)="syncCaret()"
+      (click)="syncCaret()"
+      (select)="syncCaret()"
+    />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInputOtp,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiInputOtp], ui-input-otp",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiInputOtp),
+				multi: true
+			}],
+			host: {
+				"data-slot": "input-otp-container",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <input
+      #field
+      data-slot="input-otp"
+      data-input-otp="true"
+      autocomplete="one-time-code"
+      spellcheck="false"
+      [attr.inputmode]="inputMode()"
+      [attr.maxlength]="maxLength()"
+      [attr.pattern]="pattern()"
+      [disabled]="isDisabled()"
+      [required]="required()"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [value]="value()"
+      class="absolute inset-0 size-full cursor-text opacity-0 disabled:cursor-not-allowed"
+      (input)="onInput($event)"
+      (focus)="onFocus()"
+      (blur)="onBlur()"
+      (keyup)="syncCaret()"
+      (click)="syncCaret()"
+      (select)="syncCaret()"
+    />
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		pattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pattern",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		complete: [{
+			type: i0.Output,
+			args: ["complete"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}]
+	}
+});
+var UiInputOtpGroup = class UiInputOtpGroup {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(inputOtpGroupClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInputOtpGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiInputOtpGroup,
+		isStandalone: true,
+		selector: "[uiInputOtpGroup], ui-input-otp-group",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "input-otp-group" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInputOtpGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiInputOtpGroup], ui-input-otp-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "input-otp-group",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiInputOtpSlot = class UiInputOtpSlot {
+	otp = inject(UiInputOtp);
+	index = input.required(...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	char = computed(() => this.otp.charAt(this.index()), ...ngDevMode ? [{ debugName: "char" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.otp.focused() && this.otp.activeIndex() === this.index(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(inputOtpSlotClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInputOtpSlot,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiInputOtpSlot,
+		isStandalone: true,
+		selector: "[uiInputOtpSlot], ui-input-otp-slot",
+		inputs: {
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "input-otp-slot" },
+			listeners: { "pointerdown": "$event.preventDefault(); otp.focus(index())" },
+			properties: {
+				"attr.data-active": "active()",
+				"attr.aria-invalid": "otp.invalid() ? \"true\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    {{ char() }}
+    @if (active() && !char()) {
+      <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+      </div>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInputOtpSlot,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiInputOtpSlot], ui-input-otp-slot",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "input-otp-slot",
+				"[attr.data-active]": "active()",
+				"[attr.aria-invalid]": "otp.invalid() ? \"true\" : null",
+				"[attr.class]": "classes()",
+				"(pointerdown)": "$event.preventDefault(); otp.focus(index())"
+			},
+			template: `
+    {{ char() }}
+    @if (active() && !char()) {
+      <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: true
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiInputOtpSeparator = class UiInputOtpSeparator {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(inputOtpSeparatorClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInputOtpSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiInputOtpSeparator,
+		isStandalone: true,
+		selector: "[uiInputOtpSeparator], ui-input-otp-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"data-slot": "input-otp-separator"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<svg uiIcon="minus"></svg>`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInputOtpSeparator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiInputOtpSeparator], ui-input-otp-separator",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "separator",
+				"data-slot": "input-otp-separator",
+				"[attr.class]": "classes()"
+			},
+			template: `<svg uiIcon="minus"></svg>`
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_INPUT_OTP = [
+	UiInputOtp,
+	UiInputOtpGroup,
+	UiInputOtpSlot,
+	UiInputOtpSeparator
+];
+export { UI_INPUT_OTP, UI_INPUT_OTP_GENERATED, UiInputOtp, UiInputOtpGroup, UiInputOtpSeparator, UiInputOtpSlot, inputOtpGroupClass, inputOtpSeparatorClass, inputOtpSlotClass };
+
+//# sourceMappingURL=loomui-ng-ui-input-otp.mjs.map

package/fesm2022/loomui-ng-ui-input-otp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-input-otp.mjs","names":[],"sources":["../../../libs/ui/input-otp/input-otp.ts","../../../libs/ui/input-otp/input-otp.manual.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/input-otp.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./input-otp.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\n\nexport const inputOtpGroupClass =\n  'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40';\n\nexport const inputOtpSlotClass =\n  'relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40';\n\nexport const inputOtpSeparatorClass =\n  'flex items-center [&_svg:not([class*=\\'size-\\'])]:size-4';\n\nexport const UI_INPUT_OTP_GENERATED = [] as const;\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  Directive,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  model,\n  numberAttribute,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { inputOtpGroupClass, inputOtpSeparatorClass, inputOtpSlotClass } from './input-otp';\nimport { UiIconSvg } from '@loomui-ng/ui/icon';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiInputOtp [maxLength]=\"6\" [(value)]=\"code\">\n *   <div uiInputOtpGroup><div uiInputOtpSlot [index]=\"0\"></div>…</div>\n * </div>\n * One real (transparent) <input> captures typing, paste and caret keys; slots only render characters (input-otp's approach).\n * Observed input attrs: autocomplete=\"one-time-code\", inputmode=\"numeric\", maxlength, pattern, spellcheck=false.\n */\n@Component({\n  selector: 'div[uiInputOtp], ui-input-otp', hostDirectives: [UiElementHost],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiInputOtp), multi: true }],\n  host: {\n    'data-slot': 'input-otp-container',\n    '[attr.class]': 'classes()',\n  },\n  template: `\n    <ng-content />\n    <input\n      #field\n      data-slot=\"input-otp\"\n      data-input-otp=\"true\"\n      autocomplete=\"one-time-code\"\n      spellcheck=\"false\"\n      [attr.inputmode]=\"inputMode()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.pattern]=\"pattern()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [value]=\"value()\"\n      class=\"absolute inset-0 size-full cursor-text opacity-0 disabled:cursor-not-allowed\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keyup)=\"syncCaret()\"\n      (click)=\"syncCaret()\"\n      (select)=\"syncCaret()\"\n    />\n  `,\n})\nexport class UiInputOtp implements ControlValueAccessor {\n  readonly value = model('');\n  readonly maxLength = input(6, { transform: numberAttribute });\n  /** Allowed characters; default digits only (observed `^\\d+$`; alphanumeric uses `^[a-zA-Z0-9]+$`). */\n  readonly pattern = input<string>('^\\\\d+$');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  readonly complete = output<string>();\n\n  private readonly field = viewChild.required<ElementRef<HTMLInputElement>>('field');\n  private readonly cvaDisabled = signal(false);\n  readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n  readonly focused = signal(false);\n  private readonly caret = signal(0);\n  protected readonly inputMode = computed(() => (this.pattern().includes('\\\\d') && !this.pattern().includes('a-z') ? 'numeric' : 'text'));\n  protected readonly classes = computed(() => cn('relative flex items-center gap-2 has-disabled:opacity-50', this.userClass()));\n  private onChange: (v: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  /** Index of the slot that currently owns the caret. */\n  readonly activeIndex = computed(() => Math.min(this.caret(), this.maxLength() - 1));\n\n  charAt(i: number): string {\n    return this.value()[i] ?? '';\n  }\n\n  focus(index?: number): void {\n    const el = this.field().nativeElement;\n    el.focus();\n    if (index !== undefined) {\n      const i = Math.min(index, this.value().length);\n      el.setSelectionRange(i, Math.min(i + 1, this.value().length));\n      this.syncCaret();\n    }\n  }\n\n  protected onInput(e: Event): void {\n    const el = e.target as HTMLInputElement;\n    const re = new RegExp(this.pattern());\n    const cleaned = el.value.slice(0, this.maxLength());\n    const ok = cleaned === '' || re.test(cleaned);\n    const next = ok ? cleaned : this.value();\n    if (!ok) el.value = next;\n    this.value.set(next);\n    this.onChange(next);\n    if (next.length === this.maxLength()) this.complete.emit(next);\n    this.syncCaret();\n  }\n\n  protected onFocus(): void {\n    this.focused.set(true);\n    this.syncCaret();\n  }\n  protected onBlur(): void {\n    this.focused.set(false);\n    this.onTouched();\n  }\n  protected syncCaret(): void {\n    this.caret.set(this.field().nativeElement.selectionStart ?? 0);\n  }\n\n  writeValue(v: string | null): void {\n    this.value.set(v ?? '');\n  }\n  registerOnChange(fn: (v: string) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.cvaDisabled.set(d);\n  }\n}\n\n@Directive({\n  selector: '[uiInputOtpGroup], ui-input-otp-group', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'input-otp-group', '[attr.class]': 'classes()' },\n})\nexport class UiInputOtpGroup {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(inputOtpGroupClass, this.userClass()));\n}\n\n@Component({\n  selector: '[uiInputOtpSlot], ui-input-otp-slot', hostDirectives: [UiElementHost],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'data-slot': 'input-otp-slot',\n    '[attr.data-active]': 'active()',\n    '[attr.aria-invalid]': 'otp.invalid() ? \"true\" : null',\n    '[attr.class]': 'classes()',\n    '(pointerdown)': '$event.preventDefault(); otp.focus(index())',\n  },\n  template: `\n    {{ char() }}\n    @if (active() && !char()) {\n      <div class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n        <div class=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\"></div>\n      </div>\n    }\n  `,\n})\nexport class UiInputOtpSlot {\n  protected readonly otp = inject(UiInputOtp);\n  readonly index = input.required<number>();\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly char = computed(() => this.otp.charAt(this.index()));\n  protected readonly active = computed(() => this.otp.focused() && this.otp.activeIndex() === this.index());\n  protected readonly classes = computed(() => cn(inputOtpSlotClass, this.userClass()));\n}\n\n@Component({\n  selector: '[uiInputOtpSeparator], ui-input-otp-separator', hostDirectives: [UiElementHost],\n  imports: [UiIconSvg],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { role: 'separator', 'data-slot': 'input-otp-separator', '[attr.class]': 'classes()' },\n  template: `<svg uiIcon=\"minus\"></svg>`,\n})\nexport class UiInputOtpSeparator {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(inputOtpSeparatorClass, this.userClass()));\n}\n\nexport const UI_INPUT_OTP = [UiInputOtp, UiInputOtpGroup, UiInputOtpSlot, UiInputOtpSeparator] as const;\n"],"mappings":"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"}