@tailng-ui/components 0.1.0 → 0.12.0

package/src/lib/form/input-otp/tng-input-otp.component.js

@@ -1,137 +1,497 @@
 import { __decorate } from "tslib";
-import { Component, computed, input, output } from '@angular/core';
-import { normalizeTngOtpLength, TngInputOtp as TngInputOtpPrimitive } from '@tailng-ui/primitives';
-function toOtpSlots(length, value) {
-    const slots = Array.from({ length }, () => '');
-    for (const [index, char] of Array.from(value).entries()) {
-        if (index >= length) {
+import { Component, computed, effect, ElementRef, forwardRef, inject, input, output, Renderer2, signal, } from '@angular/core';
+import { booleanAttribute } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { clampTngOtpValue, normalizeTngOtpLength, resolveTngOtpState, TngInputOtp as TngInputOtpPrimitive, } from '@tailng-ui/primitives';
+const tngOtpDigitPattern = /^\d$/;
+const tngOtpAlphanumericPattern = /^[a-zA-Z0-9]$/;
+let tngInputOtpInstanceCounter = 0;
+function toNonGlobalRegex(pattern) {
+    const flags = pattern.flags.replace(/g/g, '');
+    return new RegExp(pattern.source, flags);
+}
+export function sanitizeTngOtpCharacters(value, mode, pattern) {
+    const compiledPattern = mode !== 'custom'
+        ? null
+        : typeof pattern === 'string'
+            ? new RegExp(pattern)
+            : pattern === null
+                ? null
+                : toNonGlobalRegex(pattern);
+    const acceptedChars = [];
+    for (const char of Array.from(value)) {
+        if (mode === 'numeric' && !tngOtpDigitPattern.test(char)) {
+            continue;
+        }
+        if (mode === 'alphanumeric' && !tngOtpAlphanumericPattern.test(char)) {
+            continue;
+        }
+        if (compiledPattern && !compiledPattern.test(char)) {
+            continue;
+        }
+        acceptedChars.push(char);
+    }
+    return acceptedChars;
+}
+export function toTngOtpSlots(length, value) {
+    const safeLength = normalizeTngOtpLength(length);
+    const slots = Array.from({ length: safeLength }, () => '');
+    const chars = Array.from(clampTngOtpValue(value, safeLength));
+    for (const [index, char] of chars.entries()) {
+        if (index >= safeLength) {
             break;
         }
         slots[index] = char;
     }
     return slots;
 }
-function joinOtpSlots(slots) {
-    return slots.join('');
-}
-export function sanitizeTngOtpValue(value) {
-    return value.replace(/[^a-zA-Z0-9]/g, '');
-}
-export function applyTngOtpSlotValue(slots, index, nextValue) {
-    if (index < 0 || index >= slots.length) {
-        return slots;
+export function applyTngOtpCharacters(value, startIndex, characters, maxLength) {
+    const safeLength = normalizeTngOtpLength(maxLength);
+    const nextChars = Array.from(clampTngOtpValue(value, safeLength));
+    const safeStart = Math.max(0, Math.min(startIndex, safeLength - 1));
+    let cursor = nextChars.length < safeLength ? Math.min(safeStart, nextChars.length) : safeStart;
+    for (const char of characters) {
+        if (cursor >= safeLength) {
+            break;
+        }
+        if (cursor < nextChars.length) {
+            nextChars[cursor] = char;
+        }
+        else {
+            nextChars.push(char);
+        }
+        cursor += 1;
     }
-    const nextSlots = [...slots];
-    nextSlots[index] = sanitizeTngOtpValue(nextValue).slice(0, 1);
-    return nextSlots;
-}
-function isFilledOtp(slots) {
-    return slots.every((slot) => slot.length === 1);
+    return nextChars.slice(0, safeLength).join('');
 }
-function focusOtpInput(index) {
-    const target = document.querySelector(`[data-tng-otp-slot='${index}']`);
-    target?.focus();
-    target?.select();
-}
-function readInputValue(event) {
-    if (!(event instanceof Event)) {
-        return null;
-    }
-    const target = event.target;
-    if (!(target instanceof HTMLInputElement)) {
-        return null;
+export function removeTngOtpCharacter(value, index) {
+    const chars = Array.from(value);
+    if (index < 0 || index >= chars.length) {
+        return value;
     }
-    return target.value;
+    chars.splice(index, 1);
+    return chars.join('');
 }
-function readClipboardText(event) {
-    if (!(event instanceof ClipboardEvent)) {
-        return null;
+export function resolveTngOtpEntryIndex(value, length) {
+    const safeLength = normalizeTngOtpLength(length);
+    const safeValue = clampTngOtpValue(value, safeLength);
+    if (safeValue.length >= safeLength) {
+        return safeLength - 1;
     }
-    return event.clipboardData?.getData('text') ?? null;
+    return safeValue.length;
 }
-function handleOtpArrowNavigation(index, key, total) {
-    if (key === 'ArrowLeft' && index > 0) {
-        focusOtpInput(index - 1);
-        return true;
-    }
-    if (key === 'ArrowRight' && index < total - 1) {
-        focusOtpInput(index + 1);
-        return true;
+export function resolveTngOtpEndIndex(value, length) {
+    const safeLength = normalizeTngOtpLength(length);
+    const safeValue = clampTngOtpValue(value, safeLength);
+    if (safeValue.length === 0) {
+        return safeLength - 1;
     }
-    return false;
+    return Math.max(0, safeValue.length - 1);
 }
-function shouldMoveBackForDelete(slots, index, key) {
-    if (key !== 'Backspace') {
-        return false;
+function clampOtpIndex(index, length) {
+    const safeLength = normalizeTngOtpLength(length);
+    if (!Number.isFinite(index)) {
+        return 0;
     }
-    if (index === 0) {
-        return false;
+    if (index < 0) {
+        return 0;
     }
-    return slots[index] === '';
+    if (index >= safeLength) {
+        return safeLength - 1;
+    }
+    return Math.trunc(index);
 }
 let TngInputOtpComponent = class TngInputOtpComponent {
+    hostRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    generatedId = `tng-input-otp-${++tngInputOtpInstanceCounter}`;
+    resetUnlisten = null;
+    hasInitializedUncontrolled = false;
+    onChangeCallback = () => undefined;
+    onTouchedCallback = () => undefined;
+    uncontrolledValue = signal('');
+    formsDisabled = signal(false);
+    focusedState = signal(false);
+    focusVisibleState = signal(false);
+    keyboardInteraction = signal(false);
+    activeIndexState = signal(0);
     length = input(6, {
         transform: (value) => normalizeTngOtpLength(typeof value === 'number' ? value : Number(value)),
     });
-    value = input('');
+    valueInput = input(undefined, { alias: 'value' });
+    defaultValue = input('');
+    type = input('numeric');
+    pattern = input(null);
+    mask = input(false, {
+        transform: booleanAttribute,
+    });
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    readonly = input(false, {
+        transform: booleanAttribute,
+    });
+    required = input(false, {
+        transform: booleanAttribute,
+    });
+    invalid = input(false, {
+        transform: booleanAttribute,
+    });
+    autoFocus = input(false, {
+        transform: booleanAttribute,
+    });
+    selectOnFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    placeholderChar = input('');
+    name = input(null);
+    id = input(null);
+    form = input(null);
+    autocomplete = input('one-time-code');
+    inputMode = input(null);
+    ariaLabel = input(null);
+    ariaLabelledby = input(null);
+    ariaDescribedby = input(null);
     valueChange = output();
     complete = output();
-    slots = computed(() => toOtpSlots(this.length(), sanitizeTngOtpValue(this.value())));
-    onSlotInput(index, event) {
-        const value = readInputValue(event);
-        if (value === null) {
+    disabled = computed(() => this.disabledInput() || this.formsDisabled());
+    focused = computed(() => this.focusedState());
+    focusVisible = computed(() => this.focusVisibleState());
+    activeIndex = computed(() => clampOtpIndex(this.activeIndexState(), this.length()));
+    rootId = computed(() => this.id() ?? this.generatedId);
+    currentValue = computed(() => {
+        const controlled = this.valueInput();
+        if (controlled !== undefined) {
+            return this.normalizeAndClamp(controlled ?? '');
+        }
+        return this.normalizeAndClamp(this.uncontrolledValue());
+    });
+    slots = computed(() => toTngOtpSlots(this.length(), this.currentValue()));
+    completionState = computed(() => resolveTngOtpState(this.length(), this.currentValue()));
+    resolvedInputMode = computed(() => {
+        const explicit = this.inputMode();
+        if (explicit !== null) {
+            return explicit;
+        }
+        return this.type() === 'numeric' ? 'numeric' : 'text';
+    });
+    slotInputType = computed(() => this.mask() ? 'password' : 'text');
+    syncUncontrolledState = effect(() => {
+        const controlled = this.valueInput();
+        const length = this.length();
+        this.type();
+        this.pattern();
+        if (controlled !== undefined) {
+            if (!this.focusedState()) {
+                this.activeIndexState.set(resolveTngOtpEntryIndex(this.normalizeAndClamp(controlled ?? ''), length));
+            }
             return;
         }
-        const nextSlots = applyTngOtpSlotValue(this.slots(), index, value);
-        const nextValue = joinOtpSlots(nextSlots);
-        this.valueChange.emit(nextValue);
-        if (nextSlots[index] !== '' && index < nextSlots.length - 1) {
-            focusOtpInput(index + 1);
+        const normalizedDefault = this.normalizeAndClamp(this.defaultValue());
+        if (!this.hasInitializedUncontrolled) {
+            this.hasInitializedUncontrolled = true;
+            this.uncontrolledValue.set(normalizedDefault);
+            this.activeIndexState.set(resolveTngOtpEntryIndex(normalizedDefault, length));
+            return;
         }
-        if (isFilledOtp(nextSlots)) {
-            this.complete.emit(nextValue);
+        const normalizedCurrent = this.normalizeAndClamp(this.uncontrolledValue());
+        if (normalizedCurrent !== this.uncontrolledValue()) {
+            this.uncontrolledValue.set(normalizedCurrent);
         }
+        this.activeIndexState.update((index) => clampOtpIndex(index, length));
+    });
+    ngAfterViewInit() {
+        this.attachFormResetListener();
+        if (!this.autoFocus() || this.disabled()) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (this.disabled()) {
+                return;
+            }
+            this.focusSlot(resolveTngOtpEntryIndex(this.currentValue(), this.length()), this.selectOnFocus());
+        });
+    }
+    ngOnDestroy() {
+        this.resetUnlisten?.();
+        this.resetUnlisten = null;
+    }
+    writeValue(value) {
+        const normalized = this.normalizeAndClamp(value ?? '');
+        this.hasInitializedUncontrolled = true;
+        this.uncontrolledValue.set(normalized);
+        if (!this.focusedState()) {
+            this.activeIndexState.set(resolveTngOtpEntryIndex(normalized, this.length()));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formsDisabled.set(isDisabled);
+    }
+    onSlotPointerDown() {
+        this.keyboardInteraction.set(false);
+    }
+    onSlotFocus(index, event) {
+        const target = event.target;
+        const nextIndex = this.resolveEditableIndex(index);
+        this.activeIndexState.set(nextIndex);
+        this.focusedState.set(true);
+        if (target instanceof HTMLElement && target.matches(':focus-visible')) {
+            this.focusVisibleState.set(true);
+        }
+        else {
+            this.focusVisibleState.set(this.keyboardInteraction());
+        }
+        if (this.selectOnFocus() && target instanceof HTMLInputElement) {
+            target.select();
+        }
+    }
+    onSlotBlur(event) {
+        const host = this.hostRef.nativeElement;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget instanceof Node && host.contains(relatedTarget)) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (this.isFocusWithinHost()) {
+                return;
+            }
+            this.focusedState.set(false);
+            this.focusVisibleState.set(false);
+            this.onTouchedCallback();
+        });
     }
     onSlotKeydown(index, event) {
-        if (!(event instanceof KeyboardEvent)) {
+        this.keyboardInteraction.set(true);
+        const editableIndex = this.resolveEditableIndex(index);
+        const total = this.length();
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.focusSlot(Math.max(0, editableIndex - 1), true);
             return;
         }
-        if (handleOtpArrowNavigation(index, event.key, this.slots().length)) {
+        if (event.key === 'ArrowRight') {
             event.preventDefault();
+            this.focusSlot(Math.min(total - 1, editableIndex + 1), true);
             return;
         }
-        if (!shouldMoveBackForDelete(this.slots(), index, event.key)) {
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.focusSlot(0, true);
             return;
         }
-        event.preventDefault();
-        const nextSlots = applyTngOtpSlotValue(this.slots(), index - 1, '');
-        this.valueChange.emit(joinOtpSlots(nextSlots));
-        focusOtpInput(index - 1);
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.focusSlot(resolveTngOtpEndIndex(this.currentValue(), total), true);
+            return;
+        }
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            this.handleBackspace(editableIndex);
+            return;
+        }
+        if (event.key === 'Delete') {
+            event.preventDefault();
+            this.handleDelete(editableIndex);
+            return;
+        }
+        if ((this.disabled() || this.readonly()) && event.key.length === 1) {
+            event.preventDefault();
+        }
     }
-    onSlotsPaste(event) {
-        const clipboardValue = readClipboardText(event);
-        if (clipboardValue === null) {
+    onSlotInput(index, event) {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
             return;
         }
-        const cleanedValue = sanitizeTngOtpValue(clipboardValue).slice(0, this.length());
-        if (cleanedValue.length === 0) {
+        if (this.disabled() || this.readonly()) {
+            target.value = this.slotValue(this.resolveEditableIndex(index));
             return;
         }
-        if (event instanceof ClipboardEvent) {
+        const chars = sanitizeTngOtpCharacters(target.value, this.type(), this.pattern());
+        if (chars.length === 0) {
+            const nextValue = removeTngOtpCharacter(this.currentValue(), this.resolveEditableIndex(index));
+            this.commitValue(nextValue, this.resolveEditableIndex(index));
+            return;
+        }
+        const previousValue = this.currentValue();
+        const totalLength = this.length();
+        const editableIndex = this.resolveEditableIndex(index);
+        const wasCompleteBeforeInput = previousValue.length >= totalLength;
+        const wasReplacingExistingCharacter = editableIndex < previousValue.length;
+        const nextValue = applyTngOtpCharacters(previousValue, editableIndex, chars, totalLength);
+        const nextFocus = wasCompleteBeforeInput || wasReplacingExistingCharacter
+            ? Math.min(totalLength - 1, editableIndex + chars.length)
+            : nextValue.length >= totalLength
+                ? totalLength - 1
+                : Math.min(totalLength - 1, Math.max(editableIndex + chars.length, nextValue.length));
+        this.commitValue(nextValue, nextFocus);
+    }
+    onSlotPaste(index, event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const clipboardValue = event.clipboardData?.getData('text') ?? '';
+        const chars = sanitizeTngOtpCharacters(clipboardValue, this.type(), this.pattern());
+        if (chars.length === 0) {
             event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        const editableIndex = this.resolveEditableIndex(index);
+        const nextValue = applyTngOtpCharacters(this.currentValue(), editableIndex, chars, this.length());
+        const nextFocus = nextValue.length >= this.length()
+            ? this.length() - 1
+            : Math.min(this.length() - 1, nextValue.length);
+        this.commitValue(nextValue, nextFocus);
+    }
+    slotValue(index) {
+        const slot = this.slots()[index];
+        return slot ?? '';
+    }
+    slotPlaceholder(index) {
+        if (this.placeholderChar().length === 0) {
+            return null;
+        }
+        return this.slotValue(index) === '' ? this.placeholderChar() : null;
+    }
+    slotAriaLabel(index) {
+        const prefix = this.ariaLabel();
+        const base = prefix?.trim() ? `${prefix.trim()} - ` : '';
+        return `${base}Character ${index + 1} of ${this.length()}`;
+    }
+    isSlotTabbable(index) {
+        return this.activeIndex() === index;
+    }
+    handleBackspace(index) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const currentValue = this.currentValue();
+        if (currentValue.length === 0) {
+            return;
+        }
+        if (index < currentValue.length) {
+            const nextValue = removeTngOtpCharacter(currentValue, index);
+            const nextFocus = Math.min(index, Math.max(0, nextValue.length));
+            this.commitValue(nextValue, nextFocus);
+            return;
+        }
+        const previousIndex = Math.max(0, currentValue.length - 1);
+        const nextValue = removeTngOtpCharacter(currentValue, previousIndex);
+        this.commitValue(nextValue, Math.max(0, previousIndex));
+    }
+    handleDelete(index) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (index >= this.currentValue().length) {
+            return;
+        }
+        const nextValue = removeTngOtpCharacter(this.currentValue(), index);
+        this.commitValue(nextValue, index);
+    }
+    commitValue(nextValue, nextFocusIndex) {
+        const previousValue = this.currentValue();
+        const normalized = this.normalizeAndClamp(nextValue);
+        const didChange = normalized !== previousValue;
+        if (this.valueInput() === undefined) {
+            this.uncontrolledValue.set(normalized);
         }
-        this.valueChange.emit(cleanedValue);
-        if (cleanedValue.length >= this.length()) {
-            this.complete.emit(cleanedValue);
+        this.activeIndexState.set(clampOtpIndex(nextFocusIndex, this.length()));
+        if (didChange) {
+            this.valueChange.emit(normalized);
+            this.onChangeCallback(normalized);
+            if (resolveTngOtpState(this.length(), normalized) === 'complete') {
+                this.complete.emit(normalized);
+            }
+        }
+        queueMicrotask(() => {
+            this.syncSlotInputValues();
+            if (!this.focusedState() && !this.isFocusWithinHost()) {
+                return;
+            }
+            this.focusSlot(this.activeIndex(), this.selectOnFocus());
+        });
+    }
+    resolveEditableIndex(index) {
+        const safeIndex = clampOtpIndex(index, this.length());
+        const currentValueLength = this.currentValue().length;
+        if (currentValueLength >= this.length()) {
+            return safeIndex;
+        }
+        return Math.min(safeIndex, currentValueLength);
+    }
+    focusSlot(index, select) {
+        const safeIndex = clampOtpIndex(index, this.length());
+        const slot = this.hostRef.nativeElement.querySelector(`[data-tng-otp-slot='${safeIndex}']`);
+        if (!(slot instanceof HTMLInputElement)) {
+            return;
+        }
+        slot.focus();
+        if (select) {
+            slot.select();
+        }
+        this.activeIndexState.set(safeIndex);
+    }
+    syncSlotInputValues() {
+        const slotValues = this.slots();
+        const slotInputs = this.hostRef.nativeElement.querySelectorAll('.tng-input-otp-slot');
+        slotInputs.forEach((slotInput, index) => {
+            slotInput.value = slotValues[index] ?? '';
+        });
+    }
+    isFocusWithinHost() {
+        const ownerDocument = this.hostRef.nativeElement.ownerDocument;
+        const activeElement = ownerDocument?.activeElement;
+        return activeElement instanceof Node && this.hostRef.nativeElement.contains(activeElement);
+    }
+    normalizeAndClamp(value) {
+        const chars = sanitizeTngOtpCharacters(value, this.type(), this.pattern());
+        const safeLength = this.length();
+        return chars.slice(0, safeLength).join('');
+    }
+    attachFormResetListener() {
+        const formId = this.form();
+        const ownerForm = formId !== null
+            ? this.hostRef.nativeElement.ownerDocument?.getElementById(formId)
+            : this.hostRef.nativeElement.closest('form');
+        if (!(ownerForm instanceof HTMLFormElement)) {
+            return;
         }
+        this.resetUnlisten?.();
+        this.resetUnlisten = this.renderer.listen(ownerForm, 'reset', () => {
+            if (this.valueInput() !== undefined) {
+                return;
+            }
+            const resetValue = this.normalizeAndClamp(this.defaultValue());
+            this.uncontrolledValue.set(resetValue);
+            this.activeIndexState.set(resolveTngOtpEntryIndex(resetValue, this.length()));
+            this.valueChange.emit(resetValue);
+            this.onChangeCallback(resetValue);
+        });
     }
 };
 TngInputOtpComponent = __decorate([
     Component({
         selector: 'tng-input-otp',
+        standalone: true,
         imports: [TngInputOtpPrimitive],
         templateUrl: './tng-input-otp.component.html',
         styleUrl: './tng-input-otp.component.css',
+        providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TngInputOtpComponent),
+                multi: true,
+            },
+        ],
     })
 ], TngInputOtpComponent);
 export { TngInputOtpComponent };