@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-input-number.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-input-number.mjs","names":[],"sources":["../../../projects/star-ng/input-number/input-number.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  linkedSignal,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { STAR_UI_TEXT } from '@star-ng/ui/core';\nimport { StarField } from '@star-ng/ui/field';\n\n/**\n * Number field (PrimeNG `p-inputnumber`): locale formatting with `Intl.NumberFormat`\n * (decimal, currency, percent, units), min / max clamping, step buttons, Arrow keys and\n * PageUp / PageDown, `role=\"spinbutton\"`. While focused the field shows plain editable digits;\n * on blur it shows the formatted number.\n *\n * `<star-input-number [formField]=\"form.quantity\" [min]=\"0\" [max]=\"500\" unit=\"kilogram\" showButtons />`\n */\n@Component({\n  selector: 'star-input-number',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-number',\n    '[class.star-number--disabled]': 'disabled()',\n    '[class.star-number--invalid]': 'showInvalid()',\n    '[class.star-number--buttons]': 'showButtons()',\n  },\n  template: `\n    <div class=\"star-number__control\">\n      @if (showButtons()) {\n        <button\n          type=\"button\"\n          class=\"star-number__btn\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"uiText.decrease\"\n          [disabled]=\"!canStep(-1)\"\n          (click)=\"stepBy(-1)\"\n        >\n          <i class=\"ph-bold ph-minus\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      <input\n        #input\n        type=\"text\"\n        class=\"star-number__input\"\n        role=\"spinbutton\"\n        autocomplete=\"off\"\n        [attr.inputmode]=\"maxFractionDigits() === 0 ? 'numeric' : 'decimal'\"\n        [id]=\"inputId()\"\n        [attr.name]=\"name() || null\"\n        [value]=\"text()\"\n        [attr.placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [readOnly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-valuenow]=\"value()\"\n        [attr.aria-valuetext]=\"formatted()\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-describedby]=\"field?.describedBy() ?? null\"\n        [attr.aria-invalid]=\"showInvalid() || null\"\n        (focus)=\"onFocus()\"\n        (input)=\"text.set(input.value)\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n      />\n      @if (showButtons()) {\n        <button\n          type=\"button\"\n          class=\"star-number__btn\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"uiText.increase\"\n          [disabled]=\"!canStep(1)\"\n          (click)=\"stepBy(1)\"\n        >\n          <i class=\"ph-bold ph-plus\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n  `,\n})\nexport class StarInputNumber implements FormValueControl<number | null> {\n  protected readonly uiText = inject(STAR_UI_TEXT);\n  protected readonly field = inject(StarField, { optional: true });\n  /** Invalid after touch, or while the parent `star-field` shows an error. */\n  protected readonly showInvalid = computed(\n    () => (this.invalid() && this.touched()) || !!this.field?.errorText(),\n  );\n\n  constructor() {\n    this.field?.linkControl(this.inputId);\n  }\n\n  readonly value = model<number | null>(null);\n  readonly mode = input<'decimal' | 'currency' | 'percent' | 'unit'>('decimal');\n  /** ISO 4217 code for `mode=\"currency\"`, for example `EUR`. */\n  readonly currency = input('USD');\n  /**\n   * ECMA-402 sanctioned unit for `mode=\"unit\"`, for example `kilogram`, `milliliter`, `day`.\n   * An unsupported unit (such as `milligram`) is shown as a plain suffix instead of failing.\n   */\n  readonly unit = input('');\n  /** Text before the number, for example `~ `. */\n  readonly prefix = input('');\n  /** Text after the number, for example ` kg`. */\n  readonly suffix = input('');\n  readonly locale = input<string | undefined>(undefined);\n  /** Default: the Intl default for the mode (0 for decimal, 2 for most currencies). */\n  readonly minFractionDigits = input<number | undefined>(undefined);\n  /** Default: the Intl default for the mode (3 for decimal, 2 for most currencies). */\n  readonly maxFractionDigits = input<number | undefined>(undefined);\n  readonly useGrouping = input(true, { transform: booleanAttribute });\n  readonly step = input(1);\n  readonly min = input<number | undefined>(undefined);\n  readonly max = input<number | undefined>(undefined);\n  readonly showButtons = input(false, { transform: booleanAttribute });\n  readonly placeholder = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n  readonly inputId = input(inject(_IdGenerator).getId('star-number-'));\n\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly name = input('');\n  readonly touch = output<void>();\n\n  private readonly input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n  private readonly focused = signal(false);\n\n  /** Unit text appended when Intl does not support `unit`. */\n  private readonly fallbackUnit = signal('');\n\n  private readonly formatter = computed(() => {\n    const mode = this.mode();\n    const options: Intl.NumberFormatOptions = {\n      style: mode,\n      currency: mode === 'currency' ? this.currency() : undefined,\n      unit: mode === 'unit' ? this.unit() : undefined,\n      minimumFractionDigits: this.minFractionDigits(),\n      maximumFractionDigits: this.maxFractionDigits(),\n      useGrouping: this.useGrouping(),\n    };\n    try {\n      const format = new Intl.NumberFormat(this.locale(), options);\n      untracked(() => this.fallbackUnit.set(''));\n      return format;\n    } catch (error) {\n      if (mode !== 'unit') throw error;\n      untracked(() => this.fallbackUnit.set(this.unit() ? ' ' + this.unit() : ''));\n      return new Intl.NumberFormat(this.locale(), {\n        ...options,\n        style: 'decimal',\n        unit: undefined,\n      });\n    }\n  });\n\n  /** Decimal separator of the locale (`.` or `,`). */\n  private readonly decimal = computed(\n    () =>\n      new Intl.NumberFormat(this.locale())\n        .formatToParts(1.1)\n        .find((part) => part.type === 'decimal')?.value ?? '.',\n  );\n\n  protected readonly formatted = computed(() => {\n    const value = this.value();\n    if (value === null) return '';\n    const number = this.formatter().format(this.mode() === 'percent' ? value / 100 : value);\n    return this.prefix() + number + this.fallbackUnit() + this.suffix();\n  });\n\n  /** Plain digits while editing, formatted text otherwise. */\n  protected readonly text = linkedSignal(() =>\n    this.focused() ? this.plain(this.value()) : this.formatted(),\n  );\n\n  private plain(value: number | null): string {\n    if (value === null) return '';\n    return String(value).replace('.', this.decimal());\n  }\n\n  /** Reads typed text with either separator; ignores grouping, currency and unit symbols. */\n  parse(text: string): number | null | undefined {\n    const decimal = this.decimal();\n    const cleaned = text\n      .replace(new RegExp(`[^0-9${decimal === ',' ? ',' : '.'}-]`, 'g'), '')\n      .replace(decimal, '.');\n    if (!cleaned || cleaned === '-') return null;\n    const number = Number(cleaned);\n    return Number.isFinite(number) ? number : undefined;\n  }\n\n  private clamp(value: number): number {\n    const min = this.min();\n    const max = this.max();\n    const digits = this.formatter().resolvedOptions().maximumFractionDigits ?? 2;\n    // Percent mode stores 42 for 42 %, so keep the same digits as displayed.\n    let result = Number(\n      value.toFixed(this.mode() === 'percent' ? Math.max(0, digits - 2) : digits),\n    );\n    if (min !== undefined) result = Math.max(min, result);\n    if (max !== undefined) result = Math.min(max, result);\n    return result;\n  }\n\n  protected onFocus(): void {\n    this.focused.set(true);\n  }\n\n  protected onBlur(): void {\n    this.commit();\n    this.focused.set(false);\n    // The [value] binding may not change if the formatted text equals the last render.\n    this.input().nativeElement.value = this.formatted();\n    this.touch.emit();\n  }\n\n  private commit(): void {\n    const parsed = this.parse(this.text());\n    if (parsed === undefined) return;\n    this.value.set(parsed === null ? null : this.clamp(parsed));\n  }\n\n  protected canStep(direction: 1 | -1): boolean {\n    if (this.disabled() || this.readonly()) return false;\n    const value = this.value();\n    if (value === null) return true;\n    const limit = direction === 1 ? this.max() : this.min();\n    return limit === undefined || (direction === 1 ? value < limit : value > limit);\n  }\n\n  stepBy(direction: number): void {\n    if (this.disabled() || this.readonly()) return;\n    if (this.focused()) this.commit();\n    const start = this.value() ?? this.min() ?? 0;\n    const next = this.clamp(start + direction * this.step());\n    this.value.set(next);\n    this.input().nativeElement.value = this.focused() ? this.plain(next) : this.formatted();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const steps: Record<string, number> = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 };\n    if (event.key in steps) {\n      event.preventDefault();\n      this.stepBy(steps[event.key]);\n    } else if (event.key === 'Home' && this.min() !== undefined) {\n      event.preventDefault();\n      this.value.set(this.min() ?? null);\n    } else if (event.key === 'End' && this.max() !== undefined) {\n      event.preventDefault();\n      this.value.set(this.max() ?? null);\n    } else if (event.key === 'Enter') {\n      this.commit();\n    }\n  }\n\n  focus(options?: FocusOptions): void {\n    this.input().nativeElement.focus(options);\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,343 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, output, viewChildren } from "@angular/core";
+import { STAR_UI_TEXT, starInlineKey } from "@star-ng/ui/core";
+var StarInputOtp = class StarInputOtp {
+	text = inject(STAR_UI_TEXT);
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	length = input(6, ...ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []);
+	integerOnly = input(false, {
+		...ngDevMode ? { debugName: "integerOnly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	mask = input(false, {
+		...ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* 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
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	completed = output();
+	boxes = viewChildren("box", ...ngDevMode ? [{ debugName: "boxes" }] : /* istanbul ignore next */ []);
+	slots = computed(() => Array.from({ length: this.length() }, (_, i) => i), ...ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []);
+	chars = computed(() => [...this.value()], ...ngDevMode ? [{ debugName: "chars" }] : /* istanbul ignore next */ []);
+	allowed(char) {
+		return this.integerOnly() ? /\d/.test(char) : /[\p{L}\d]/u.test(char);
+	}
+	setChar(index, char) {
+		const chars = Array.from({ length: this.length() }, (_, i) => this.chars()[i] ?? "");
+		chars[index] = char;
+		const end = chars.indexOf("");
+		const value = (end < 0 ? chars : chars.slice(0, Math.max(end, index + (char ? 1 : 0)))).join("");
+		this.value.set(value);
+		if (value.length === this.length() && !value.includes(" ")) this.completed.emit(value);
+	}
+	focusBox(index) {
+		this.boxes()[Math.min(Math.max(index, 0), this.length() - 1)]?.nativeElement.focus();
+	}
+	onInput(event, index) {
+		const box = event.target;
+		const char = box.value.slice(-1);
+		if (char && !this.allowed(char)) {
+			box.value = this.chars()[index] ?? "";
+			return;
+		}
+		this.setChar(index, char);
+		if (char) this.focusBox(index + 1);
+	}
+	onKeydown(event, index) {
+		const box = event.target;
+		if (event.key === "Backspace" && !box.value) {
+			event.preventDefault();
+			this.setChar(index - 1, "");
+			this.focusBox(index - 1);
+		} else if (starInlineKey(event) === "ArrowLeft") {
+			event.preventDefault();
+			this.focusBox(index - 1);
+		} else if (starInlineKey(event) === "ArrowRight") {
+			event.preventDefault();
+			this.focusBox(index + 1);
+		}
+	}
+	onPaste(event, index) {
+		const chars = [...(event.clipboardData?.getData("text") ?? "").replace(/\s/g, "")].filter((c) => this.allowed(c));
+		if (!chars.length) return;
+		event.preventDefault();
+		const value = [...[...this.value()].slice(0, index), ...chars].slice(0, this.length()).join("");
+		this.value.set(value);
+		this.focusBox(value.length);
+		if (value.length === this.length()) this.completed.emit(value);
+	}
+	focus() {
+		this.focusBox(Math.min(this.value().length, this.length() - 1));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarInputOtp,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarInputOtp,
+		isStandalone: true,
+		selector: "star-input-otp",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			length: {
+				classPropertyName: "length",
+				publicName: "length",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			integerOnly: {
+				classPropertyName: "integerOnly",
+				publicName: "integerOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mask: {
+				classPropertyName: "mask",
+				publicName: "mask",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch",
+			completed: "completed"
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: {
+				"attr.aria-label": "ariaLabel() ?? text.otpLabel",
+				"class.star-otp--invalid": "invalid() && touched()"
+			},
+			classAttribute: "star-otp"
+		},
+		viewQueries: [{
+			propertyName: "boxes",
+			predicate: ["box"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @for (slot of slots(); track slot) {
+      <input
+        #box
+        class="star-otp__box"
+        maxlength="1"
+        [type]="mask() ? 'password' : 'text'"
+        [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
+        [attr.autocomplete]="slot === 0 ? 'one-time-code' : 'off'"
+        [attr.aria-label]="text.otpCharacter(slot + 1, length())"
+        [value]="chars()[slot] ?? ''"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        (input)="onInput($event, slot)"
+        (keydown)="onKeydown($event, slot)"
+        (paste)="onPaste($event, slot)"
+        (focus)="box.select()"
+        (blur)="slot === length() - 1 && touch.emit()"
+      />
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarInputOtp,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-input-otp",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-otp",
+				role: "group",
+				"[attr.aria-label]": "ariaLabel() ?? text.otpLabel",
+				"[class.star-otp--invalid]": "invalid() && touched()"
+			},
+			template: `
+    @for (slot of slots(); track slot) {
+      <input
+        #box
+        class="star-otp__box"
+        maxlength="1"
+        [type]="mask() ? 'password' : 'text'"
+        [attr.inputmode]="integerOnly() ? 'numeric' : 'text'"
+        [attr.autocomplete]="slot === 0 ? 'one-time-code' : 'off'"
+        [attr.aria-label]="text.otpCharacter(slot + 1, length())"
+        [value]="chars()[slot] ?? ''"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        (input)="onInput($event, slot)"
+        (keydown)="onKeydown($event, slot)"
+        (paste)="onPaste($event, slot)"
+        (focus)="box.select()"
+        (blur)="slot === length() - 1 && touch.emit()"
+      />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		length: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "length",
+				required: false
+			}]
+		}],
+		integerOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "integerOnly",
+				required: false
+			}]
+		}],
+		mask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mask",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		completed: [{
+			type: i0.Output,
+			args: ["completed"]
+		}],
+		boxes: [{
+			type: i0.ViewChildren,
+			args: ["box", { isSignal: true }]
+		}]
+	}
+});
+export { StarInputOtp };
+
+//# sourceMappingURL=star-ng-ui-input-otp.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-input-otp.mjs","names":[],"sources":["../../../projects/star-ng/input-otp/input-otp.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  viewChildren,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { STAR_UI_TEXT, starInlineKey } from '@star-ng/ui/core';\n\n/**\n * One-time code field (PrimeNG `p-inputotp`): one box per character, auto-advance, Backspace\n * goes back, Arrow keys move, pasting a full code fills every box, `autocomplete=\"one-time-code\"`\n * on the first box so phones offer SMS codes.\n *\n * `<star-input-otp [length]=\"6\" integerOnly [formField]=\"form.code\" (completed)=\"verify($event)\" />`\n */\n@Component({\n  selector: 'star-input-otp',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-otp',\n    role: 'group',\n    '[attr.aria-label]': 'ariaLabel() ?? text.otpLabel',\n    '[class.star-otp--invalid]': 'invalid() && touched()',\n  },\n  template: `\n    @for (slot of slots(); track slot) {\n      <input\n        #box\n        class=\"star-otp__box\"\n        maxlength=\"1\"\n        [type]=\"mask() ? 'password' : 'text'\"\n        [attr.inputmode]=\"integerOnly() ? 'numeric' : 'text'\"\n        [attr.autocomplete]=\"slot === 0 ? 'one-time-code' : 'off'\"\n        [attr.aria-label]=\"text.otpCharacter(slot + 1, length())\"\n        [value]=\"chars()[slot] ?? ''\"\n        [disabled]=\"disabled()\"\n        [readOnly]=\"readonly()\"\n        (input)=\"onInput($event, slot)\"\n        (keydown)=\"onKeydown($event, slot)\"\n        (paste)=\"onPaste($event, slot)\"\n        (focus)=\"box.select()\"\n        (blur)=\"slot === length() - 1 && touch.emit()\"\n      />\n    }\n  `,\n})\nexport class StarInputOtp implements FormValueControl<string> {\n  protected readonly text = inject(STAR_UI_TEXT);\n  readonly value = model('');\n  readonly length = input(6);\n  readonly integerOnly = input(false, { transform: booleanAttribute });\n  /** Hides characters like a password. */\n  readonly mask = input(false, { transform: booleanAttribute });\n  readonly ariaLabel = input<string | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly touched = input(false, { transform: booleanAttribute });\n  readonly touch = output<void>();\n  readonly completed = output<string>();\n\n  private readonly boxes = viewChildren<ElementRef<HTMLInputElement>>('box');\n  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));\n  protected readonly chars = computed(() => [...this.value()]);\n\n  private allowed(char: string): boolean {\n    return this.integerOnly() ? /\\d/.test(char) : /[\\p{L}\\d]/u.test(char);\n  }\n\n  private setChar(index: number, char: string): void {\n    const chars = Array.from({ length: this.length() }, (_, i) => this.chars()[i] ?? '');\n    chars[index] = char;\n    // Keep characters packed to the left; an empty slot ends the value.\n    const end = chars.indexOf('');\n    const value = (end < 0 ? chars : chars.slice(0, Math.max(end, index + (char ? 1 : 0)))).join(\n      '',\n    );\n    this.value.set(value);\n    if (value.length === this.length() && !value.includes(' ')) this.completed.emit(value);\n  }\n\n  private focusBox(index: number): void {\n    this.boxes()[Math.min(Math.max(index, 0), this.length() - 1)]?.nativeElement.focus();\n  }\n\n  protected onInput(event: Event, index: number): void {\n    const box = event.target as HTMLInputElement;\n    const char = box.value.slice(-1);\n    if (char && !this.allowed(char)) {\n      box.value = this.chars()[index] ?? '';\n      return;\n    }\n    this.setChar(index, char);\n    if (char) this.focusBox(index + 1);\n  }\n\n  protected onKeydown(event: KeyboardEvent, index: number): void {\n    const box = event.target as HTMLInputElement;\n    if (event.key === 'Backspace' && !box.value) {\n      event.preventDefault();\n      this.setChar(index - 1, '');\n      this.focusBox(index - 1);\n    } else if (starInlineKey(event) === 'ArrowLeft') {\n      event.preventDefault();\n      this.focusBox(index - 1);\n    } else if (starInlineKey(event) === 'ArrowRight') {\n      event.preventDefault();\n      this.focusBox(index + 1);\n    }\n  }\n\n  protected onPaste(event: ClipboardEvent, index: number): void {\n    const text = (event.clipboardData?.getData('text') ?? '').replace(/\\s/g, '');\n    const chars = [...text].filter((c) => this.allowed(c));\n    if (!chars.length) return;\n    event.preventDefault();\n    const current = [...this.value()].slice(0, index);\n    const value = [...current, ...chars].slice(0, this.length()).join('');\n    this.value.set(value);\n    this.focusBox(value.length);\n    if (value.length === this.length()) this.completed.emit(value);\n  }\n\n  focus(): void {\n    this.focusBox(Math.min(this.value().length, this.length() - 1));\n  }\n}\n"],"mappings":"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"}