@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-input-otp.mjs

@@ -0,0 +1,788 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, afterEveryRender, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal, viewChild } from "@angular/core";
+const RAQM_INPUT_OTP = new InjectionToken("RaqmInputOtp");
+var RaqmInputOtpGroupDirective = class RaqmInputOtpGroupDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmInputOtpGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmInputOtpGroupDirective,
+		isStandalone: true,
+		selector: "raqm-input-otp-group, [raqm-input-otp-group]",
+		host: {
+			attributes: {
+				"data-raqm-slot": "input-otp-group",
+				"aria-hidden": "true"
+			},
+			classAttribute: "raqm-input-otp-group"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmInputOtpGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "raqm-input-otp-group, [raqm-input-otp-group]",
+			host: {
+				class: "raqm-input-otp-group",
+				"data-raqm-slot": "input-otp-group",
+				"aria-hidden": "true"
+			}
+		}]
+	}]
+});
+var RaqmInputOtpSlotComponent = class RaqmInputOtpSlotComponent {
+	index = input.required(...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	ariaInvalid = input(null, {
+		...ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid"
+	});
+	root = inject(RAQM_INPUT_OTP);
+	char = computed(() => this.root.currentValue()[this.index()] ?? "", ...ngDevMode ? [{ debugName: "char" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.root.isActive(this.index()), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	invalid = computed(() => this.root.invalidState() || this.ariaInvalid() !== null && this.ariaInvalid() !== false && this.ariaInvalid() !== "false", ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmInputOtpSlotComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmInputOtpSlotComponent,
+		isStandalone: true,
+		selector: "raqm-input-otp-slot",
+		inputs: {
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaInvalid: {
+				classPropertyName: "ariaInvalid",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-raqm-slot": "input-otp-slot",
+				"aria-hidden": "true"
+			},
+			properties: {
+				"attr.data-raqm-index": "index()",
+				"attr.data-raqm-active": "active()",
+				"attr.aria-invalid": "invalid() ? \"true\" : null"
+			},
+			classAttribute: "raqm-input-otp-slot"
+		},
+		ngImport: i0,
+		template: `{{ char() }}
+    @if (active() && !char()) {
+      <span class="raqm-input-otp-slot__caret"><span></span></span>
+    }`,
+		isInline: true,
+		styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:calc(var(--raqm-spacing) * 8);block-size:calc(var(--raqm-spacing) * 8);border-block:1px solid var(--raqm-input);border-inline-end:1px solid var(--raqm-input);background:var(--raqm-control-bg);font-size:var(--raqm-font-size-sm);outline:none;transition:border-color var(--raqm-duration-base),box-shadow var(--raqm-duration-base)}:host(:first-child){border-inline-start:1px solid var(--raqm-input);border-start-start-radius:var(--raqm-radius-lg);border-end-start-radius:var(--raqm-radius-lg)}:host(:last-child){border-start-end-radius:var(--raqm-radius-lg);border-end-end-radius:var(--raqm-radius-lg)}:host([data-raqm-active=true]){z-index:1;border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:host([aria-invalid=true]){border-color:var(--raqm-destructive)}:host([data-raqm-active=true][aria-invalid=true]){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-input-otp-slot__caret{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.raqm-input-otp-slot__caret span{inline-size:1px;block-size:calc(var(--raqm-spacing) * 4);background:var(--raqm-foreground);animation:raqm-otp-caret-blink 1s ease-out infinite}@keyframes raqm-otp-caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}@media(prefers-reduced-motion:reduce){.raqm-input-otp-slot__caret span{animation:none}}@media(forced-colors:active){:host([data-raqm-active=true]){outline:2px solid Highlight;outline-offset:-2px}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmInputOtpSlotComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-input-otp-slot",
+			template: `{{ char() }}
+    @if (active() && !char()) {
+      <span class="raqm-input-otp-slot__caret"><span></span></span>
+    }`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-input-otp-slot",
+				"data-raqm-slot": "input-otp-slot",
+				"aria-hidden": "true",
+				"[attr.data-raqm-index]": "index()",
+				"[attr.data-raqm-active]": "active()",
+				"[attr.aria-invalid]": "invalid() ? \"true\" : null"
+			},
+			styles: [":host{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:calc(var(--raqm-spacing) * 8);block-size:calc(var(--raqm-spacing) * 8);border-block:1px solid var(--raqm-input);border-inline-end:1px solid var(--raqm-input);background:var(--raqm-control-bg);font-size:var(--raqm-font-size-sm);outline:none;transition:border-color var(--raqm-duration-base),box-shadow var(--raqm-duration-base)}:host(:first-child){border-inline-start:1px solid var(--raqm-input);border-start-start-radius:var(--raqm-radius-lg);border-end-start-radius:var(--raqm-radius-lg)}:host(:last-child){border-start-end-radius:var(--raqm-radius-lg);border-end-end-radius:var(--raqm-radius-lg)}:host([data-raqm-active=true]){z-index:1;border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:host([aria-invalid=true]){border-color:var(--raqm-destructive)}:host([data-raqm-active=true][aria-invalid=true]){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-input-otp-slot__caret{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.raqm-input-otp-slot__caret span{inline-size:1px;block-size:calc(var(--raqm-spacing) * 4);background:var(--raqm-foreground);animation:raqm-otp-caret-blink 1s ease-out infinite}@keyframes raqm-otp-caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}@media(prefers-reduced-motion:reduce){.raqm-input-otp-slot__caret span{animation:none}}@media(forced-colors:active){:host([data-raqm-active=true]){outline:2px solid Highlight;outline-offset:-2px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: true
+			}]
+		}],
+		ariaInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmInputOtpSeparatorComponent = class RaqmInputOtpSeparatorComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmInputOtpSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmInputOtpSeparatorComponent,
+		isStandalone: true,
+		selector: "raqm-input-otp-separator",
+		host: {
+			attributes: {
+				"data-raqm-slot": "input-otp-separator",
+				"role": "separator",
+				"aria-hidden": "true"
+			},
+			classAttribute: "raqm-input-otp-separator"
+		},
+		ngImport: i0,
+		template: `<svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    aria-hidden="true"
+  >
+    <path d="M5 12h14" />
+  </svg>`,
+		isInline: true,
+		styles: [":host{display:flex;align-items:center}svg{inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmInputOtpSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-input-otp-separator",
+			template: `<svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    aria-hidden="true"
+  >
+    <path d="M5 12h14" />
+  </svg>`,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-input-otp-separator",
+				"data-raqm-slot": "input-otp-separator",
+				role: "separator",
+				"aria-hidden": "true"
+			},
+			styles: [":host{display:flex;align-items:center}svg{inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4)}\n"]
+		}]
+	}]
+});
+var RaqmInputOtpComponent = class RaqmInputOtpComponent {
+	maxLength = input.required(...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
+	value = input(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	defaultValue = input("", ...ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []);
+	pattern = input(void 0, ...ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readOnly = input(false, {
+		...ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input(null, ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	form = input(null, ...ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []);
+	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"
+	});
+	ariaInvalid = input(null, {
+		...ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid"
+	});
+	autoComplete = input("one-time-code", ...ngDevMode ? [{ debugName: "autoComplete" }] : /* istanbul ignore next */ []);
+	inputMode = input("numeric", ...ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []);
+	pasteTransformer = input(void 0, ...ngDevMode ? [{ debugName: "pasteTransformer" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	complete = output();
+	localValue = signal(void 0, ...ngDevMode ? [{ debugName: "localValue" }] : /* istanbul ignore next */ []);
+	control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	composing = false;
+	pointerStart = null;
+	focused = signal(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	selectionStart = signal(0, ...ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []);
+	selectionEnd = signal(0, ...ngDevMode ? [{ debugName: "selectionEnd" }] : /* istanbul ignore next */ []);
+	length = computed(() => Math.max(1, Math.floor(this.maxLength()) || 1), ...ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []);
+	currentValue = computed(() => this.clean(this.value() ?? this.localValue() ?? this.defaultValue()), ...ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []);
+	patternSource = computed(() => {
+		const pattern = this.pattern();
+		return typeof pattern === "string" ? pattern : pattern?.source ?? null;
+	}, ...ngDevMode ? [{ debugName: "patternSource" }] : /* istanbul ignore next */ []);
+	invalidState = computed(() => this.invalid() || this.ariaInvalid() !== null && this.ariaInvalid() !== false && this.ariaInvalid() !== "false", ...ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterEveryRender(() => {
+			const control = this.control().nativeElement;
+			if (!this.composing && control.value !== this.currentValue()) {
+				control.value = this.currentValue();
+				this.syncSelection();
+			}
+		});
+		afterRenderEffect((cleanup) => {
+			const control = this.control().nativeElement;
+			const document = control.ownerDocument;
+			const selection = () => this.syncSelection();
+			document.addEventListener("selectionchange", selection);
+			const form = control.form;
+			const reset = (event) => queueMicrotask(() => {
+				if (!event.defaultPrevented && !this.destroyRef.destroyed) {
+					if (this.value() === void 0) this.localValue.set(this.clean(this.defaultValue()));
+					control.value = this.currentValue();
+					this.syncSelection();
+				}
+			});
+			form?.addEventListener("reset", reset);
+			cleanup(() => {
+				document.removeEventListener("selectionchange", selection);
+				form?.removeEventListener("reset", reset);
+			});
+		});
+	}
+	matches(value) {
+		const pattern = this.pattern();
+		if (pattern === void 0) return true;
+		const regex = typeof pattern === "string" ? new RegExp(pattern) : new RegExp(pattern.source, pattern.flags.replace(/[gy]/g, ""));
+		return value === "" || regex.test(value);
+	}
+	clean(value) {
+		const capped = value.slice(0, this.length());
+		if (this.matches(capped)) return capped;
+		const filtered = Array.from(value).filter((char) => this.matches(char)).join("").slice(0, this.length());
+		return this.matches(filtered) ? filtered : "";
+	}
+	commit(value, caret) {
+		const previous = this.currentValue();
+		if (value !== previous) {
+			if (this.value() === void 0) this.localValue.set(value);
+			this.valueChange.emit(value);
+			if (previous.length < this.length() && value.length === this.length()) this.complete.emit(value);
+		}
+		const control = this.control().nativeElement;
+		control.value = value;
+		const position = Math.min(caret, control.value.length);
+		control.setSelectionRange(position, position);
+		this.syncSelection();
+	}
+	onInput(event) {
+		if (this.composing || event.isComposing) return;
+		const control = this.control().nativeElement;
+		if (this.disabled() || this.readOnly()) {
+			control.value = this.currentValue();
+			return;
+		}
+		const raw = control.value;
+		const caret = this.clean(raw.slice(0, control.selectionStart ?? raw.length)).length;
+		const next = this.clean(raw);
+		this.commit(raw !== "" && next === "" ? this.currentValue() : next, caret);
+	}
+	onPaste(event) {
+		if (!event.clipboardData || this.disabled() || this.readOnly()) return;
+		event.preventDefault();
+		const control = this.control().nativeElement;
+		const raw = event.clipboardData.getData("text/plain");
+		const pasted = this.clean(this.pasteTransformer()?.(raw) ?? raw);
+		if (!pasted) return;
+		const current = this.currentValue();
+		const start = Math.min(control.selectionStart ?? current.length, current.length);
+		const end = Math.min(control.selectionEnd ?? start, current.length);
+		const available = this.length() - (current.length - (end - start));
+		const inserted = pasted.slice(0, Math.max(0, available));
+		const next = current.slice(0, start) + inserted + current.slice(end);
+		if (this.matches(next)) this.commit(next, start + inserted.length);
+	}
+	onCompositionStart() {
+		this.composing = true;
+	}
+	onCompositionEnd(event) {
+		this.composing = false;
+		this.onInput(event);
+	}
+	onFocus() {
+		this.focused.set(true);
+		const control = this.control().nativeElement;
+		control.setSelectionRange(Math.min(control.value.length, this.length() - 1), control.value.length);
+		this.syncSelection();
+	}
+	onBlur() {
+		this.focused.set(false);
+	}
+	onPointerDown(event) {
+		this.pointerStart = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	onClick(event) {
+		if (this.disabled() || event.detail === 0) return;
+		const control = this.control().nativeElement;
+		if (event.detail > 1 || this.pointerStart && (Math.abs(event.clientX - this.pointerStart.x) > 4 || Math.abs(event.clientY - this.pointerStart.y) > 4)) return;
+		const target = Array.from(this.host.nativeElement.querySelectorAll("[data-raqm-slot=\"input-otp-slot\"]")).find((slot) => {
+			const rect = slot.getBoundingClientRect();
+			return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+		});
+		if (target) {
+			const index = Math.min(Number(target.dataset["index"]), control.value.length);
+			control.setSelectionRange(index, Math.min(index + 1, control.value.length));
+			this.syncSelection();
+		}
+	}
+	syncSelection() {
+		const control = this.control().nativeElement;
+		if (control.ownerDocument.activeElement !== control || this.composing) return;
+		let start = control.selectionStart ?? 0;
+		let end = control.selectionEnd ?? start;
+		if (start === end && control.value.length > 0 && !(start === control.value.length && start < this.length())) {
+			const backwards = start < this.selectionEnd();
+			if (start === this.length() || backwards && start > 0) start -= 1;
+			end = Math.min(start + 1, control.value.length);
+			control.setSelectionRange(start, end, backwards ? "backward" : "forward");
+		}
+		this.selectionStart.set(start);
+		this.selectionEnd.set(end);
+	}
+	isActive(index) {
+		return !this.disabled() && this.focused() && (this.selectionStart() === this.selectionEnd() ? index === this.selectionStart() : index >= this.selectionStart() && index < this.selectionEnd());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmInputOtpComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmInputOtpComponent,
+		isStandalone: true,
+		selector: "raqm-input-otp",
+		inputs: {
+			maxLength: {
+				classPropertyName: "maxLength",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultValue: {
+				classPropertyName: "defaultValue",
+				publicName: "defaultValue",
+				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
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readOnly: {
+				classPropertyName: "readOnly",
+				publicName: "readOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			form: {
+				classPropertyName: "form",
+				publicName: "form",
+				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
+			},
+			ariaInvalid: {
+				classPropertyName: "ariaInvalid",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoComplete: {
+				classPropertyName: "autoComplete",
+				publicName: "autoComplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputMode: {
+				classPropertyName: "inputMode",
+				publicName: "inputMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pasteTransformer: {
+				classPropertyName: "pasteTransformer",
+				publicName: "pasteTransformer",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			valueChange: "valueChange",
+			complete: "complete"
+		},
+		host: {
+			attributes: { "translate": "no" },
+			properties: {
+				"attr.id": "null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null",
+				"attr.aria-describedby": "null",
+				"attr.aria-invalid": "null",
+				"attr.data-raqm-disabled": "disabled() ? \"\" : null",
+				"attr.data-raqm-invalid": "invalidState() ? \"\" : null"
+			},
+			classAttribute: "raqm-input-otp"
+		},
+		providers: [{
+			provide: RAQM_INPUT_OTP,
+			useExisting: RaqmInputOtpComponent
+		}],
+		viewQueries: [{
+			propertyName: "control",
+			first: true,
+			predicate: ["control"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n<input\r\n  #control\r\n  class=\"raqm-input-otp__input\"\r\n  data-raqm-slot=\"input-otp\"\r\n  type=\"text\"\r\n  [id]=\"id()\"\r\n  [value]=\"currentValue()\"\r\n  [attr.maxlength]=\"length()\"\r\n  [attr.pattern]=\"patternSource()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  [readOnly]=\"readOnly()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.form]=\"form()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n  [attr.aria-describedby]=\"ariaDescribedby()\"\r\n  [attr.aria-invalid]=\"invalidState() ? ariaInvalid() || 'true' : null\"\r\n  [attr.autocomplete]=\"autoComplete()\"\r\n  [attr.inputmode]=\"inputMode()\"\r\n  [spellcheck]=\"false\"\r\n  autocapitalize=\"off\"\r\n  (input)=\"onInput($event)\"\r\n  (change)=\"onInput($event)\"\r\n  (paste)=\"onPaste($event)\"\r\n  (compositionstart)=\"onCompositionStart()\"\r\n  (compositionend)=\"onCompositionEnd($event)\"\r\n  (focus)=\"onFocus()\"\r\n  (blur)=\"onBlur()\"\r\n  (click)=\"onClick($event)\"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (select)=\"syncSelection()\"\r\n  (keyup)=\"syncSelection()\"\r\n/>\r\n",
+		styles: [":host{position:relative;display:inline-flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);color:var(--raqm-foreground)}:host([data-raqm-disabled]){opacity:var(--raqm-disabled-opacity)}.raqm-input-otp__input{z-index:2;position:absolute;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;min-inline-size:0;padding:0;border:0;outline:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;box-shadow:none;font-family:monospace;font-size:calc(var(--raqm-spacing) * 8);letter-spacing:-.5em;cursor:text}.raqm-input-otp__input::selection{background:transparent;color:transparent}.raqm-input-otp__input:disabled{cursor:not-allowed}.raqm-input-otp__input:autofill{background:transparent;-webkit-text-fill-color:transparent}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmInputOtpComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-input-otp",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: RAQM_INPUT_OTP,
+				useExisting: RaqmInputOtpComponent
+			}],
+			host: {
+				class: "raqm-input-otp",
+				"[attr.id]": "null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null",
+				"[attr.aria-describedby]": "null",
+				"[attr.aria-invalid]": "null",
+				"[attr.data-raqm-disabled]": "disabled() ? \"\" : null",
+				"[attr.data-raqm-invalid]": "invalidState() ? \"\" : null",
+				translate: "no"
+			},
+			template: "<ng-content />\r\n<input\r\n  #control\r\n  class=\"raqm-input-otp__input\"\r\n  data-raqm-slot=\"input-otp\"\r\n  type=\"text\"\r\n  [id]=\"id()\"\r\n  [value]=\"currentValue()\"\r\n  [attr.maxlength]=\"length()\"\r\n  [attr.pattern]=\"patternSource()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  [readOnly]=\"readOnly()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.form]=\"form()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\r\n  [attr.aria-describedby]=\"ariaDescribedby()\"\r\n  [attr.aria-invalid]=\"invalidState() ? ariaInvalid() || 'true' : null\"\r\n  [attr.autocomplete]=\"autoComplete()\"\r\n  [attr.inputmode]=\"inputMode()\"\r\n  [spellcheck]=\"false\"\r\n  autocapitalize=\"off\"\r\n  (input)=\"onInput($event)\"\r\n  (change)=\"onInput($event)\"\r\n  (paste)=\"onPaste($event)\"\r\n  (compositionstart)=\"onCompositionStart()\"\r\n  (compositionend)=\"onCompositionEnd($event)\"\r\n  (focus)=\"onFocus()\"\r\n  (blur)=\"onBlur()\"\r\n  (click)=\"onClick($event)\"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (select)=\"syncSelection()\"\r\n  (keyup)=\"syncSelection()\"\r\n/>\r\n",
+			styles: [":host{position:relative;display:inline-flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);color:var(--raqm-foreground)}:host([data-raqm-disabled]){opacity:var(--raqm-disabled-opacity)}.raqm-input-otp__input{z-index:2;position:absolute;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;min-inline-size:0;padding:0;border:0;outline:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;box-shadow:none;font-family:monospace;font-size:calc(var(--raqm-spacing) * 8);letter-spacing:-.5em;cursor:text}.raqm-input-otp__input::selection{background:transparent;color:transparent}.raqm-input-otp__input:disabled{cursor:not-allowed}.raqm-input-otp__input:autofill{background:transparent;-webkit-text-fill-color:transparent}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		defaultValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultValue",
+				required: false
+			}]
+		}],
+		pattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pattern",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		readOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		form: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "form",
+				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
+			}]
+		}],
+		ariaInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}],
+		autoComplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoComplete",
+				required: false
+			}]
+		}],
+		inputMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputMode",
+				required: false
+			}]
+		}],
+		pasteTransformer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pasteTransformer",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		complete: [{
+			type: i0.Output,
+			args: ["complete"]
+		}],
+		control: [{
+			type: i0.ViewChild,
+			args: ["control", { isSignal: true }]
+		}]
+	}
+});
+const RaqmInputOtp = [
+	RaqmInputOtpComponent,
+	RaqmInputOtpGroupDirective,
+	RaqmInputOtpSlotComponent,
+	RaqmInputOtpSeparatorComponent
+];
+export { RaqmInputOtp, RaqmInputOtpComponent, RaqmInputOtpGroupDirective, RaqmInputOtpSeparatorComponent, RaqmInputOtpSlotComponent };
+
+//# sourceMappingURL=raqm-ui-input-otp.mjs.map