@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-input-otp.mjs

@@ -1,44 +1,125 @@
-import * as i0 from '@angular/core';
-import { Directive, input, computed, Component, inject, numberAttribute, booleanAttribute, viewChild, ElementRef, Injector, output, linkedSignal, signal, contentChildren, forwardRef } from '@angular/core';
-import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { FormFieldContext } from '@ojiepermana/angular/component/form';
-import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
-
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, Injector, booleanAttribute, computed, contentChildren, forwardRef, inject, input, linkedSignal, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
+import { FormFieldContext } from "@ojiepermana/angular/component/form";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
 const REGEXP_ONLY_DIGITS = /^[0-9]$/;
 const REGEXP_ONLY_DIGITS_AND_CHARS = /^[A-Za-z0-9]$/;
-class InputOtpContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: InputOtpContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpContextBase, decorators: [{
-            type: Directive
-        }] });
-class InputOtpGroupComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex items-center overflow-hidden rounded-md border border-input bg-background shadow-sm', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputOtpGroupComponent, isStandalone: true, selector: "InputOtpGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'InputOtpGroup',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"input-otp-group"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class InputOtpSeparatorComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('inline-flex h-control-10 w-6 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputOtpSeparatorComponent, isStandalone: true, selector: "InputOtpSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()", "attr.data-slot": "\"input-otp-separator\"" } }, ngImport: i0, template: `
+var InputOtpContextBase = class InputOtpContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InputOtpContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: InputOtpContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InputOtpContextBase,
+	decorators: [{ type: Directive }]
+});
+var InputOtpGroupComponent = class InputOtpGroupComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex items-center overflow-hidden rounded-md border border-input bg-background shadow-sm", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InputOtpGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: InputOtpGroupComponent,
+		isStandalone: true,
+		selector: "InputOtpGroup",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"input-otp-group\""
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InputOtpGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "InputOtpGroup",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"input-otp-group\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var InputOtpSeparatorComponent = class InputOtpSeparatorComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("inline-flex h-control-10 w-6 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InputOtpSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: InputOtpSeparatorComponent,
+		isStandalone: true,
+		selector: "InputOtpSeparator",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: {
+				"class": "classes()",
+				"attr.data-slot": "\"input-otp-separator\""
+			}
+		},
+		ngImport: i0,
+		template: `
     <svg
       viewBox="0 0 24 24"
       fill="none"
@@ -49,18 +130,25 @@ class InputOtpSeparatorComponent {
     >
       <path d="M5 12h14" />
     </svg>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'InputOtpSeparator',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"input-otp-separator"',
-                        'aria-hidden': 'true',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InputOtpSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "InputOtpSeparator",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"input-otp-separator\"",
+				"aria-hidden": "true"
+			},
+			template: `
     <svg
       viewBox="0 0 24 24"
       fill="none"
@@ -71,85 +159,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     >
       <path d="M5 12h14" />
     </svg>
-  `,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class InputOtpSlotComponent {
-    ctx = inject(InputOtpContextBase);
-    index = input(0, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
-    inputRef = viewChild.required('inputRef', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
-    maxLength = computed(() => this.ctx.maxLength(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-    character = computed(() => this.ctx.slotValue(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "character" }] : /* istanbul ignore next */ []));
-    active = computed(() => this.ctx.isActive(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    filled = computed(() => this.character() !== '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.ctx.isDisabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    required = computed(() => this.ctx.isRequired(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    inputId = computed(() => this.ctx.slotId(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    inputMode = computed(() => this.ctx.slotInputMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
-    autocomplete = computed(() => this.ctx.slotAutocomplete(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    ariaLabel = computed(() => this.ctx.slotAriaLabel(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    ariaLabelledBy = computed(() => this.ctx.slotAriaLabelledBy(this.index()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
-    ariaDescribedBy = computed(() => this.ctx.slotAriaDescribedBy(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
-    effectiveInvalid = computed(() => this.invalid() || this.ctx.isInvalid(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('relative flex h-control-10 w-control-10 items-center justify-center border-r border-border text-sm font-medium transition-[background-color,box-shadow,opacity] last:border-r-0', this.active() && !this.effectiveInvalid() && 'z-10 ring-1 ring-inset ring-ring', this.effectiveInvalid() &&
-        'bg-destructive/5 text-destructive ring-1 ring-inset ring-destructive/50', this.disabled() && 'opacity-50', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    focus(select = true) {
-        const input = this.inputRef().nativeElement;
-        input.focus();
-        if (select) {
-            input.select();
-        }
-    }
-    handleFocus() {
-        this.ctx.handleSlotFocus(this.index());
-        this.inputRef().nativeElement.select();
-    }
-    handleInput(event) {
-        const target = event.target;
-        this.ctx.handleSlotInput(this.index(), target.value);
-        this.syncElementValue(target);
-    }
-    /**
-     * Push the model back onto the element the browser just wrote to.
-     *
-     * `[value]` only repaints when `character()` CHANGES, and a character the
-     * pattern rejects leaves the model exactly as it was — so without this the
-     * rejected character stays on screen until some later, unrelated value change.
-     * It covers the paste of an entirely unacceptable string too: that one is not
-     * prevented, so the browser drops it in and the `input` event lands here.
-     */
-    syncElementValue(target) {
-        const character = this.character();
-        if (target.value !== character) {
-            target.value = character;
-        }
-    }
-    handleKeydown(event) {
-        this.ctx.handleSlotKeydown(this.index(), event);
-    }
-    handlePaste(event) {
-        this.ctx.handleSlotPaste(this.index(), event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: InputOtpSlotComponent, isStandalone: true, selector: "InputOtpSlot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-slot\"", "attr.data-active": "active() ? \"\" : null", "attr.data-filled": "filled() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "effectiveInvalid() ? \"\" : null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var InputOtpSlotComponent = class InputOtpSlotComponent {
+	ctx = inject(InputOtpContextBase);
+	index = input(0, {
+		...ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid",
+		transform: booleanAttribute
+	});
+	inputRef = viewChild.required("inputRef", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	maxLength = computed(() => this.ctx.maxLength(), ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
+	character = computed(() => this.ctx.slotValue(this.index()), ...ngDevMode ? [{ debugName: "character" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.ctx.isActive(this.index()), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	filled = computed(() => this.character() !== "", ...ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.ctx.isDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	required = computed(() => this.ctx.isRequired(), ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	inputId = computed(() => this.ctx.slotId(this.index()), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	inputMode = computed(() => this.ctx.slotInputMode(), ...ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []);
+	autocomplete = computed(() => this.ctx.slotAutocomplete(this.index()), ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	ariaLabel = computed(() => this.ctx.slotAriaLabel(this.index()), ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = computed(() => this.ctx.slotAriaLabelledBy(this.index()), ...ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	ariaDescribedBy = computed(() => this.ctx.slotAriaDescribedBy(), ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+	effectiveInvalid = computed(() => this.invalid() || this.ctx.isInvalid(), ...ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative flex h-control-10 w-control-10 items-center justify-center border-r border-border text-sm font-medium transition-[background-color,box-shadow,opacity] last:border-r-0", this.active() && !this.effectiveInvalid() && "z-10 ring-1 ring-inset ring-ring", this.effectiveInvalid() && "bg-destructive/5 text-destructive ring-1 ring-inset ring-destructive/50", this.disabled() && "opacity-50", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	focus(select = true) {
+		const input = this.inputRef().nativeElement;
+		input.focus();
+		if (select) input.select();
+	}
+	handleFocus() {
+		this.ctx.handleSlotFocus(this.index());
+		this.inputRef().nativeElement.select();
+	}
+	handleInput(event) {
+		const target = event.target;
+		this.ctx.handleSlotInput(this.index(), target.value);
+		this.syncElementValue(target);
+	}
+	syncElementValue(target) {
+		const character = this.character();
+		if (target.value !== character) target.value = character;
+	}
+	handleKeydown(event) {
+		this.ctx.handleSlotKeydown(this.index(), event);
+	}
+	handlePaste(event) {
+		this.ctx.handleSlotPaste(this.index(), event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InputOtpSlotComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: InputOtpSlotComponent,
+		isStandalone: true,
+		selector: "InputOtpSlot",
+		inputs: {
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"input-otp-slot\"",
+			"attr.data-active": "active() ? \"\" : null",
+			"attr.data-filled": "filled() ? \"\" : null",
+			"attr.data-disabled": "disabled() ? \"\" : null",
+			"attr.data-invalid": "effectiveInvalid() ? \"\" : null"
+		} },
+		viewQueries: [{
+			propertyName: "inputRef",
+			first: true,
+			predicate: ["inputRef"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <input
       #inputRef
       class="h-full w-full border-0 bg-transparent px-0 text-center text-inherit font-inherit outline-none disabled:cursor-not-allowed"
@@ -172,21 +298,28 @@ class InputOtpSlotComponent {
       (keydown)="handleKeydown($event)"
       (paste)="handlePaste($event)"
     />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSlotComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'InputOtpSlot',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"input-otp-slot"',
-                        '[attr.data-active]': 'active() ? "" : null',
-                        '[attr.data-filled]': 'filled() ? "" : null',
-                        '[attr.data-disabled]': 'disabled() ? "" : null',
-                        '[attr.data-invalid]': 'effectiveInvalid() ? "" : null',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InputOtpSlotComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "InputOtpSlot",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"input-otp-slot\"",
+				"[attr.data-active]": "active() ? \"\" : null",
+				"[attr.data-filled]": "filled() ? \"\" : null",
+				"[attr.data-disabled]": "disabled() ? \"\" : null",
+				"[attr.data-invalid]": "effectiveInvalid() ? \"\" : null"
+			},
+			template: `
     <input
       #inputRef
       class="h-full w-full border-0 bg-transparent px-0 text-center text-inherit font-inherit outline-none disabled:cursor-not-allowed"
@@ -209,346 +342,616 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       (keydown)="handleKeydown($event)"
       (paste)="handlePaste($event)"
     />
-  `,
-                }]
-        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
-class InputOtpComponent extends InputOtpContextBase {
-    host = inject(ElementRef);
-    injector = inject(Injector);
-    formFieldContext = inject(FormFieldContext, { optional: true });
-    maxLengthInput = input(6, { ...(ngDevMode ? { debugName: "maxLengthInput" } : /* istanbul ignore next */ {}), alias: 'maxLength', transform: numberAttribute });
-    value = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    pattern = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
-    id = input(null, { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'id' });
-    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    inputMode = input('numeric', { ...(ngDevMode ? { debugName: "inputMode" } : /* istanbul ignore next */ {}), alias: 'inputmode' });
-    autocomplete = input('one-time-code', { ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'autocomplete' });
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
-    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    valueChange = output();
-    generatedId = injectUniqueId('InputOtp');
-    /**
-     * Single source of truth for the rendered value. Re-seeds from the `value`
-     * binding when it changes, but writes from typing or the Forms API
-     * (writeValue) win until the binding changes again — so `form.reset()` is
-     * never shadowed by a stale `[value]` binding.
-     */
-    internalValue = linkedSignal(() => this.normalizeValue(this.value() ?? ''), {
-        debugName: 'InputOtp.internalValue',
-        set: (value, rawSet) => rawSet(this.normalizeValue(value)),
-    });
-    disabledState = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    activeIndex = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    slots = contentChildren(InputOtpSlotComponent, { ...(ngDevMode ? { debugName: "slots" } : /* istanbul ignore next */ {}), descendants: true });
-    compiledPattern = computed(() => {
-        const pattern = this.pattern();
-        if (!pattern) {
-            return [];
-        }
-        if (pattern instanceof RegExp) {
-            return [pattern];
-        }
-        if (typeof pattern !== 'string') {
-            return pattern;
-        }
-        try {
-            return [new RegExp(pattern)];
-        }
-        catch {
-            return [];
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "compiledPattern" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('inline-flex flex-wrap items-center gap-2', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.disabledInput() || this.disabledState(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    displayValue = computed(() => this.internalValue(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-    ngControl = null;
-    onChange = () => { };
-    onTouched = () => { };
-    ngOnInit() {
-        this.ngControl = this.injector.get(NgControl, null, { optional: true, self: true });
-        this.publishControl();
-    }
-    ngAfterViewInit() {
-        // `formControlName` assigns `.control` in FormControlName.ngOnChanges, which
-        // Angular runs AFTER this component's ngOnInit — both are pre-order hooks,
-        // and the component's are registered first. Reading it once at init would
-        // park `null` in the FormField forever, so the field could never surface the
-        // control's invalid state. By now the node is fully set up, whichever
-        // directive owns the binding.
-        this.publishControl();
-    }
-    maxLength() {
-        return Math.max(1, this.maxLengthInput());
-    }
-    slotId(index) {
-        const baseId = this.id() ?? this.formFieldContext?.controlId ?? this.generatedId;
-        return index === 0 ? baseId : `${baseId}-${index + 1}`;
-    }
-    slotValue(index) {
-        return this.toCharArray()[index] ?? '';
-    }
-    slotAriaLabel(index) {
-        const baseLabel = this.ariaLabel() ?? 'One-time password';
-        return `${baseLabel} character ${index + 1} of ${this.maxLength()}`;
-    }
-    slotAriaLabelledBy(index) {
-        return index === 0 ? this.ariaLabelledby() : null;
-    }
-    slotAriaDescribedBy() {
-        return this.describedBy();
-    }
-    slotInputMode() {
-        return this.inputMode();
-    }
-    slotAutocomplete(index) {
-        return index === 0 ? this.autocomplete() : 'off';
-    }
-    isDisabled() {
-        return this.disabled();
-    }
-    isRequired() {
-        return this.required();
-    }
-    isInvalid() {
-        return this.invalidInput() || this.formFieldContext?.invalid() || false;
-    }
-    isActive(index) {
-        return this.activeIndex() === index;
-    }
-    handleSlotFocus(index) {
-        this.activeIndex.set(index);
-    }
-    handleSlotInput(index, value) {
-        if (this.disabled()) {
-            return;
-        }
-        const accepted = this.filterCharacters(value);
-        if (accepted.length === 0) {
-            return;
-        }
-        if (accepted.length > 1) {
-            this.applyFragment(index, accepted);
-            return;
-        }
-        const next = this.replaceAt(index, accepted[0]);
-        this.commitValue(next);
-        this.focusSlot(Math.min(index + 1, this.maxLength() - 1));
-    }
-    handleSlotKeydown(index, event) {
-        if (this.disabled()) {
-            return;
-        }
-        const isRtl = this.isRtl();
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                this.focusSlot(Math.max(0, index + (isRtl ? 1 : -1)));
-                return;
-            case 'ArrowRight':
-                event.preventDefault();
-                this.focusSlot(Math.min(this.maxLength() - 1, index + (isRtl ? -1 : 1)));
-                return;
-            case 'Home':
-                event.preventDefault();
-                this.focusSlot(0);
-                return;
-            case 'End':
-                event.preventDefault();
-                this.focusSlot(this.maxLength() - 1);
-                return;
-            case 'Backspace': {
-                event.preventDefault();
-                const current = this.slotValue(index);
-                const deleteIndex = current === '' ? index - 1 : index;
-                if (deleteIndex < 0) {
-                    return;
-                }
-                this.commitValue(this.removeAt(deleteIndex));
-                this.focusSlot(Math.max(0, deleteIndex));
-                return;
-            }
-            case 'Delete':
-                event.preventDefault();
-                this.commitValue(this.removeAt(index));
-                this.focusSlot(index);
-                return;
-            default:
-                return;
-        }
-    }
-    handleSlotPaste(index, event) {
-        if (this.disabled()) {
-            return;
-        }
-        const pasted = event.clipboardData?.getData('text') ?? '';
-        const accepted = this.filterCharacters(pasted);
-        if (accepted.length === 0) {
-            return;
-        }
-        event.preventDefault();
-        this.applyFragment(index, accepted);
-    }
-    focus() {
-        const index = Math.min(this.displayValue().length, this.maxLength() - 1);
-        this.focusSlot(Math.max(index, 0));
-    }
-    writeValue(value) {
-        this.internalValue.set(typeof value === 'string' ? value : '');
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(disabled) {
-        this.disabledState.set(disabled);
-    }
-    describedBy() {
-        const rawIds = [this.ariaDescribedby(), this.formFieldContext?.describedBy() ?? null].filter((value) => !!value);
-        const ids = [...new Set(rawIds.flatMap((value) => value.split(/\s+/)).filter(Boolean))];
-        return ids.length > 0 ? ids.join(' ') : null;
-    }
-    handleFocusOut(event) {
-        const nextTarget = event.relatedTarget;
-        if (!(nextTarget instanceof Node) || !this.host.nativeElement.contains(nextTarget)) {
-            this.onTouched();
-        }
-    }
-    /** Hand the bound control to `<FormField>`, if this OTP is inside one. */
-    publishControl() {
-        const context = this.formFieldContext;
-        if (!context) {
-            return;
-        }
-        const control = this.ngControl?.control ?? null;
-        if (control !== context.control()) {
-            context.control.set(control);
-        }
-    }
-    commitValue(value) {
-        this.internalValue.set(value);
-        const nextValue = this.internalValue();
-        this.onChange(nextValue);
-        this.valueChange.emit(nextValue);
-    }
-    replaceAt(index, character) {
-        const chars = this.toCharArray();
-        chars[index] = character;
-        return this.serialize(chars);
-    }
-    removeAt(index) {
-        const chars = this.toCharArray();
-        if (index < 0 || index >= chars.length) {
-            return this.displayValue();
-        }
-        chars.splice(index, 1);
-        chars.push('');
-        return this.serialize(chars);
-    }
-    applyFragment(index, characters) {
-        const chars = this.toCharArray();
-        let cursor = index;
-        for (const character of characters) {
-            if (cursor >= chars.length) {
-                break;
-            }
-            chars[cursor] = character;
-            cursor += 1;
-        }
-        this.commitValue(this.serialize(chars));
-        this.focusSlot(Math.min(cursor, this.maxLength() - 1));
-    }
-    focusSlot(index) {
-        const slot = this.slots().find((candidate) => candidate.index() === index);
-        if (!slot) {
-            return;
-        }
-        this.activeIndex.set(index);
-        slot.focus();
-    }
-    toCharArray() {
-        const chars = Array.from({ length: this.maxLength() }, () => '');
-        for (const [index, character] of Array.from(this.displayValue()).entries()) {
-            if (index >= chars.length) {
-                break;
-            }
-            chars[index] = character;
-        }
-        return chars;
-    }
-    serialize(chars) {
-        let lastFilledIndex = -1;
-        for (let index = chars.length - 1; index >= 0; index -= 1) {
-            if (chars[index] !== '') {
-                lastFilledIndex = index;
-                break;
-            }
-        }
-        return lastFilledIndex === -1 ? '' : chars.slice(0, lastFilledIndex + 1).join('');
-    }
-    normalizeValue(value) {
-        return this.filterCharacters(value).slice(0, this.maxLength()).join('');
-    }
-    filterCharacters(value) {
-        return Array.from(value).filter((character) => this.acceptsCharacter(character));
-    }
-    acceptsCharacter(character) {
-        return this.compiledPattern().every((pattern) => {
-            pattern.lastIndex = 0;
-            return pattern.test(character);
-        });
-    }
-    isRtl() {
-        return getComputedStyle(this.host.nativeElement).direction === 'rtl';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: InputOtpComponent, isStandalone: true, selector: "InputOtp", inputs: { maxLengthInput: { classPropertyName: "maxLengthInput", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "handleFocusOut($event)" }, properties: { "class": "classes()", "attr.id": "null", "attr.role": "\"group\"", "attr.data-slot": "\"input-otp\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "describedBy()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "isInvalid() ? \"true\" : null" } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
-            { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },
-        ], queries: [{ propertyName: "slots", predicate: InputOtpSlotComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'InputOtp',
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
-                        { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'null',
-                        '[attr.role]': '"group"',
-                        '[attr.data-slot]': '"input-otp"',
-                        '[attr.data-disabled]': 'disabled() ? "" : null',
-                        '[attr.data-invalid]': 'isInvalid() ? "" : null',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()',
-                        '[attr.aria-describedby]': 'describedBy()',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '[attr.aria-invalid]': 'isInvalid() ? "true" : null',
-                        '(focusout)': 'handleFocusOut($event)',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { maxLengthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], slots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputOtpSlotComponent), { ...{ descendants: true }, isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { InputOtpComponent, InputOtpGroupComponent, InputOtpSeparatorComponent, InputOtpSlotComponent, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
+  `
+		}]
+	}],
+	propDecorators: {
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}],
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["inputRef", { isSignal: true }]
+		}]
+	}
+});
+var InputOtpComponent = class InputOtpComponent extends InputOtpContextBase {
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	formFieldContext = inject(FormFieldContext, { optional: true });
+	maxLengthInput = input(6, {
+		...ngDevMode ? { debugName: "maxLengthInput" } : /* istanbul ignore next */ {},
+		alias: "maxLength",
+		transform: numberAttribute
+	});
+	value = input(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	pattern = input(null, ...ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []);
+	id = input(null, {
+		...ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {},
+		alias: "id"
+	});
+	ariaLabel = input(null, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaLabelledby = input(null, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	ariaDescribedby = input(null, {
+		...ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {},
+		alias: "aria-describedby"
+	});
+	inputMode = input("numeric", {
+		...ngDevMode ? { debugName: "inputMode" } : /* istanbul ignore next */ {},
+		alias: "inputmode"
+	});
+	autocomplete = input("one-time-code", {
+		...ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {},
+		alias: "autocomplete"
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	invalidInput = input(false, {
+		...ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid",
+		transform: booleanAttribute
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	generatedId = injectUniqueId("InputOtp");
+	internalValue = linkedSignal(() => this.normalizeValue(this.value() ?? ""), {
+		debugName: "InputOtp.internalValue",
+		set: (value, rawSet) => rawSet(this.normalizeValue(value))
+	});
+	disabledState = signal(false, ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	slots = contentChildren(InputOtpSlotComponent, {
+		...ngDevMode ? { debugName: "slots" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	compiledPattern = computed(() => {
+		const pattern = this.pattern();
+		if (!pattern) return [];
+		if (pattern instanceof RegExp) return [pattern];
+		if (typeof pattern !== "string") return pattern;
+		try {
+			return [new RegExp(pattern)];
+		} catch {
+			return [];
+		}
+	}, ...ngDevMode ? [{ debugName: "compiledPattern" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("inline-flex flex-wrap items-center gap-2", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	disabled = computed(() => this.disabledInput() || this.disabledState(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	displayValue = computed(() => this.internalValue(), ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	ngControl = null;
+	onChange = () => {};
+	onTouched = () => {};
+	ngOnInit() {
+		this.ngControl = this.injector.get(NgControl, null, {
+			optional: true,
+			self: true
+		});
+		this.publishControl();
+	}
+	ngAfterViewInit() {
+		this.publishControl();
+	}
+	maxLength() {
+		return Math.max(1, this.maxLengthInput());
+	}
+	slotId(index) {
+		const baseId = this.id() ?? this.formFieldContext?.controlId ?? this.generatedId;
+		return index === 0 ? baseId : `${baseId}-${index + 1}`;
+	}
+	slotValue(index) {
+		return this.toCharArray()[index] ?? "";
+	}
+	slotAriaLabel(index) {
+		return `${this.ariaLabel() ?? "One-time password"} character ${index + 1} of ${this.maxLength()}`;
+	}
+	slotAriaLabelledBy(index) {
+		return index === 0 ? this.ariaLabelledby() : null;
+	}
+	slotAriaDescribedBy() {
+		return this.describedBy();
+	}
+	slotInputMode() {
+		return this.inputMode();
+	}
+	slotAutocomplete(index) {
+		return index === 0 ? this.autocomplete() : "off";
+	}
+	isDisabled() {
+		return this.disabled();
+	}
+	isRequired() {
+		return this.required();
+	}
+	isInvalid() {
+		return this.invalidInput() || this.formFieldContext?.invalid() || false;
+	}
+	isActive(index) {
+		return this.activeIndex() === index;
+	}
+	handleSlotFocus(index) {
+		this.activeIndex.set(index);
+	}
+	handleSlotInput(index, value) {
+		if (this.disabled()) return;
+		const accepted = this.filterCharacters(value);
+		if (accepted.length === 0) return;
+		if (accepted.length > 1) {
+			this.applyFragment(index, accepted);
+			return;
+		}
+		const next = this.replaceAt(index, accepted[0]);
+		this.commitValue(next);
+		this.focusSlot(Math.min(index + 1, this.maxLength() - 1));
+	}
+	handleSlotKeydown(index, event) {
+		if (this.disabled()) return;
+		const isRtl = this.isRtl();
+		switch (event.key) {
+			case "ArrowLeft":
+				event.preventDefault();
+				this.focusSlot(Math.max(0, index + (isRtl ? 1 : -1)));
+				return;
+			case "ArrowRight":
+				event.preventDefault();
+				this.focusSlot(Math.min(this.maxLength() - 1, index + (isRtl ? -1 : 1)));
+				return;
+			case "Home":
+				event.preventDefault();
+				this.focusSlot(0);
+				return;
+			case "End":
+				event.preventDefault();
+				this.focusSlot(this.maxLength() - 1);
+				return;
+			case "Backspace": {
+				event.preventDefault();
+				const deleteIndex = this.slotValue(index) === "" ? index - 1 : index;
+				if (deleteIndex < 0) return;
+				this.commitValue(this.removeAt(deleteIndex));
+				this.focusSlot(Math.max(0, deleteIndex));
+				return;
+			}
+			case "Delete":
+				event.preventDefault();
+				this.commitValue(this.removeAt(index));
+				this.focusSlot(index);
+				return;
+			default: return;
+		}
+	}
+	handleSlotPaste(index, event) {
+		if (this.disabled()) return;
+		const pasted = event.clipboardData?.getData("text") ?? "";
+		const accepted = this.filterCharacters(pasted);
+		if (accepted.length === 0) return;
+		event.preventDefault();
+		this.applyFragment(index, accepted);
+	}
+	focus() {
+		const index = Math.min(this.displayValue().length, this.maxLength() - 1);
+		this.focusSlot(Math.max(index, 0));
+	}
+	writeValue(value) {
+		this.internalValue.set(typeof value === "string" ? value : "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.disabledState.set(disabled);
+	}
+	describedBy() {
+		const rawIds = [this.ariaDescribedby(), this.formFieldContext?.describedBy() ?? null].filter((value) => !!value);
+		const ids = [...new Set(rawIds.flatMap((value) => value.split(/\s+/)).filter(Boolean))];
+		return ids.length > 0 ? ids.join(" ") : null;
+	}
+	handleFocusOut(event) {
+		const nextTarget = event.relatedTarget;
+		if (!(nextTarget instanceof Node) || !this.host.nativeElement.contains(nextTarget)) this.onTouched();
+	}
+	publishControl() {
+		const context = this.formFieldContext;
+		if (!context) return;
+		const control = this.ngControl?.control ?? null;
+		if (control !== context.control()) context.control.set(control);
+	}
+	commitValue(value) {
+		this.internalValue.set(value);
+		const nextValue = this.internalValue();
+		this.onChange(nextValue);
+		this.valueChange.emit(nextValue);
+	}
+	replaceAt(index, character) {
+		const chars = this.toCharArray();
+		chars[index] = character;
+		return this.serialize(chars);
+	}
+	removeAt(index) {
+		const chars = this.toCharArray();
+		if (index < 0 || index >= chars.length) return this.displayValue();
+		chars.splice(index, 1);
+		chars.push("");
+		return this.serialize(chars);
+	}
+	applyFragment(index, characters) {
+		const chars = this.toCharArray();
+		let cursor = index;
+		for (const character of characters) {
+			if (cursor >= chars.length) break;
+			chars[cursor] = character;
+			cursor += 1;
+		}
+		this.commitValue(this.serialize(chars));
+		this.focusSlot(Math.min(cursor, this.maxLength() - 1));
+	}
+	focusSlot(index) {
+		const slot = this.slots().find((candidate) => candidate.index() === index);
+		if (!slot) return;
+		this.activeIndex.set(index);
+		slot.focus();
+	}
+	toCharArray() {
+		const chars = Array.from({ length: this.maxLength() }, () => "");
+		for (const [index, character] of Array.from(this.displayValue()).entries()) {
+			if (index >= chars.length) break;
+			chars[index] = character;
+		}
+		return chars;
+	}
+	serialize(chars) {
+		let lastFilledIndex = -1;
+		for (let index = chars.length - 1; index >= 0; index -= 1) if (chars[index] !== "") {
+			lastFilledIndex = index;
+			break;
+		}
+		return lastFilledIndex === -1 ? "" : chars.slice(0, lastFilledIndex + 1).join("");
+	}
+	normalizeValue(value) {
+		return this.filterCharacters(value).slice(0, this.maxLength()).join("");
+	}
+	filterCharacters(value) {
+		return Array.from(value).filter((character) => this.acceptsCharacter(character));
+	}
+	acceptsCharacter(character) {
+		return this.compiledPattern().every((pattern) => {
+			pattern.lastIndex = 0;
+			return pattern.test(character);
+		});
+	}
+	isRtl() {
+		return getComputedStyle(this.host.nativeElement).direction === "rtl";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InputOtpComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.0",
+		type: InputOtpComponent,
+		isStandalone: true,
+		selector: "InputOtp",
+		inputs: {
+			maxLengthInput: {
+				classPropertyName: "maxLengthInput",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pattern: {
+				classPropertyName: "pattern",
+				publicName: "pattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedby: {
+				classPropertyName: "ariaDescribedby",
+				publicName: "aria-describedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputMode: {
+				classPropertyName: "inputMode",
+				publicName: "inputmode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidInput: {
+				classPropertyName: "invalidInput",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		host: {
+			listeners: { "focusout": "handleFocusOut($event)" },
+			properties: {
+				"class": "classes()",
+				"attr.id": "null",
+				"attr.role": "\"group\"",
+				"attr.data-slot": "\"input-otp\"",
+				"attr.data-disabled": "disabled() ? \"\" : null",
+				"attr.data-invalid": "isInvalid() ? \"\" : null",
+				"attr.aria-label": "ariaLabel()",
+				"attr.aria-labelledby": "ariaLabelledby()",
+				"attr.aria-describedby": "describedBy()",
+				"attr.aria-disabled": "disabled() ? \"true\" : null",
+				"attr.aria-invalid": "isInvalid() ? \"true\" : null"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => InputOtpComponent),
+			multi: true
+		}, {
+			provide: InputOtpContextBase,
+			useExisting: forwardRef(() => InputOtpComponent)
+		}],
+		queries: [{
+			propertyName: "slots",
+			predicate: InputOtpSlotComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InputOtpComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "InputOtp",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => InputOtpComponent),
+				multi: true
+			}, {
+				provide: InputOtpContextBase,
+				useExisting: forwardRef(() => InputOtpComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "null",
+				"[attr.role]": "\"group\"",
+				"[attr.data-slot]": "\"input-otp\"",
+				"[attr.data-disabled]": "disabled() ? \"\" : null",
+				"[attr.data-invalid]": "isInvalid() ? \"\" : null",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.aria-labelledby]": "ariaLabelledby()",
+				"[attr.aria-describedby]": "describedBy()",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null",
+				"[attr.aria-invalid]": "isInvalid() ? \"true\" : null",
+				"(focusout)": "handleFocusOut($event)"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		maxLengthInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		pattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pattern",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		ariaDescribedby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-describedby",
+				required: false
+			}]
+		}],
+		inputMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputmode",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalidInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		slots: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => InputOtpSlotComponent), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+export { InputOtpComponent, InputOtpGroupComponent, InputOtpSeparatorComponent, InputOtpSlotComponent, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };