{"version":3,"file":"seniorsistemas-angular-components-pin-code-field.mjs","sources":["../../projects/angular-components/pin-code-field/src/lib/pin-code-field/pin-code-field.component.ts","../../projects/angular-components/pin-code-field/src/lib/pin-code-field/pin-code-field.component.html","../../projects/angular-components/pin-code-field/src/lib/pin-code-field.module.ts","../../projects/angular-components/pin-code-field/src/seniorsistemas-angular-components-pin-code-field.ts"],"sourcesContent":["import {\n Component,\n forwardRef,\n viewChildren,\n ElementRef,\n signal,\n input,\n output,\n effect,\n computed,\n model,\n inject,\n DestroyRef,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { TranslateModule } from '@ngx-translate/core';\n\n/**\n * @description Componente de entrada de código PIN/OTP com campos individuais para cada dígito.\n * Implementa {@link ControlValueAccessor} para integração nativa com Reactive Forms\n * e Template-driven Forms do Angular.\n *\n * Funcionalidades:\n * - Campos separados e navegáveis para cada dígito do código\n * - Comprimento configurável via input `length`\n * - Suporte a entrada numérica ou alfanumérica\n * - Navegação por teclado (setas, backspace)\n * - Suporte a colar (paste) com truncamento automático ao tamanho definido\n * - Estado de erro via input `invalid`\n * - Acessibilidade completa com ARIA labels e roles semânticos\n *\n * @example\n * ```html\n * \n * ```\n *\n * @category Inputs\n */\n@Component({\n selector: 's-pin-code-field',\n templateUrl: './pin-code-field.component.html',\n standalone: true,\n imports: [CommonModule, TranslateModule],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PinCodeFieldComponent),\n multi: true,\n },\n ],\n})\nexport class PinCodeFieldComponent implements ControlValueAccessor {\n private static readonly LAST_INDEX_OFFSET = 1;\n private static readonly EMPTY_VALUE = '';\n\n /**\n * @description Número de campos de entrada (comprimento do código PIN).\n * Deve ser ao menos 1.\n *\n * @default 6\n */\n public length = input(6);\n\n /**\n * @description Permite entrada alfanumérica e de caracteres especiais.\n * Quando `false`, aceita apenas dígitos numéricos (0–9).\n *\n * @default false\n */\n public alphanumeric = input(false);\n\n /**\n * @description Texto de ajuda exibido abaixo dos campos de entrada,\n * fornecendo instruções adicionais ao usuário.\n *\n * @default ''\n */\n public helpText = input('');\n\n /**\n * @description Controla a visualização do estado de erro do componente.\n * Quando `true`, exibe borda vermelha nos campos de entrada.\n * Normalmente vinculado ao estado `invalid && dirty` do `FormControl`.\n *\n * @example\n * ```html\n * [invalid]=\"(control?.invalid && control?.dirty) || false\"\n * ```\n * @default false\n */\n public invalid = input(false);\n\n /**\n * @description Controla o estado desabilitado do componente via two-way binding.\n * Quando `true`, todos os campos ficam desabilitados e a interação do usuário é bloqueada.\n *\n * @default false\n */\n public disabled = model(false);\n\n /**\n * @description Emitido quando todos os campos do código PIN são preenchidos.\n * Emite o código completo como string.\n *\n * @example\n * ```html\n * (codeFilled)=\"onCodeFilled($event)\"\n * ```\n */\n public codeFilled = output();\n\n /**\n * @description Signal com os valores atuais de cada campo de entrada.\n * O comprimento do array corresponde ao valor do input `length`.\n */\n public inputs = signal([]);\n\n /**\n * Signal tracking whether the component has been touched by the user.\n * Set to true when the last input field loses focus (blur event).\n */\n public touched = signal(false);\n\n /**\n * Computed signal indicating whether all PIN code fields are filled.\n * True only when every field contains a non-empty value.\n */\n public isComplete = computed(() => this.inputs().every((input) => input !== ''));\n\n /**\n * Computed signal containing the complete PIN code as a joined string.\n * Returns empty string if no inputs are filled.\n */\n public currentValue = computed(() => this.inputs().join(''));\n\n /**\n * Signal tracking if the component host has the ng-invalid class from FormControl validators.\n * Updated reactively whenever the invalid state changes.\n */\n private hasNgInvalidClass = signal(false);\n\n /**\n * Signal tracking if the FormControl is dirty.\n * Updated reactively whenever the dirty state changes.\n */\n private isControlDirty = signal(false);\n\n /**\n * Computed signal indicating if the component should show error state.\n * Returns true if:\n * - The `invalid` input is true, OR\n * - The component has the `ng-invalid` class AND the FormControl is dirty (touched/modified)\n * This ensures errors are only shown to the user after they've interacted with the field.\n */\n public hasError = computed(() => this.invalid() || (this.hasNgInvalidClass() && this.isControlDirty()));\n\n /**\n * ViewChildren reference to all input DOM elements.\n * Used for DOM manipulation (focus, selection).\n */\n public pinInputs = viewChildren('pinInput');\n\n private readonly elementRef = inject(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor() {\n effect(\n () => {\n const newLength = this.length();\n if (newLength < 1) {\n console.warn('PIN code length must be at least 1');\n return;\n }\n if (this.inputs().length !== newLength) {\n this.inputs.set(Array.from({ length: newLength }, () => ''));\n }\n },\n { allowSignalWrites: true },\n );\n\n // Monitor ng-invalid and ng-dirty classes on the host element for reactive error state\n effect(\n () => {\n // Access inputs to create dependency on changes\n this.inputs();\n this.invalid();\n\n // Use setTimeout to defer the check to next tick to ensure Angular has updated DOM classes\n const timeoutId = window.setTimeout(() => {\n const hostElement = this.elementRef.nativeElement;\n const hasNgInvalid = hostElement.classList.contains('ng-invalid');\n const isDirty = hostElement.classList.contains('ng-dirty');\n\n this.hasNgInvalidClass.set(hasNgInvalid);\n this.isControlDirty.set(isDirty);\n });\n\n // Cleanup timeout on component destroy\n this.destroyRef.onDestroy(() => {\n clearTimeout(timeoutId);\n });\n },\n { allowSignalWrites: true },\n );\n }\n\n /**\n * Handles input event on PIN code fields.\n * Validates character input, prevents multiple characters per field,\n * auto-advances to next field when character is entered.\n *\n * @param index - The input field index (0-based)\n * @param event - The input event\n */\n public onInput(index: number, event: Event): void {\n if (this.disabled()) {\n event.preventDefault();\n return;\n }\n\n const target = event.target as HTMLInputElement;\n const value = target.value;\n\n if (value.length > 1 || (value && !this.isValidCharacter(value))) {\n this.clearInput(target);\n return;\n }\n\n this.setInputAtIndex(index, value);\n\n if (value && index < this.length() - 1) {\n this.focusAndSelectInput(index + 1);\n }\n\n if (this.isComplete()) {\n this.codeFilled.emit(this.currentValue());\n }\n }\n\n /**\n * Handles keyboard events on PIN code fields.\n * Supports arrow navigation (left/right) and backspace key.\n *\n * Keyboard behavior:\n * - ArrowRight: Move focus to next field\n * - ArrowLeft: Move focus to previous field\n * - Backspace: Clear current or previous field and adjust focus\n *\n * @param index - The input field index (0-based)\n * @param event - The keyboard event\n */\n public onKeyDown(index: number, event: KeyboardEvent): void {\n if (this.disabled()) {\n event.preventDefault();\n return;\n }\n\n const key = event.key;\n\n switch (key) {\n case 'ArrowRight':\n if (index < this.length() - 1) {\n event.preventDefault();\n this.focusAndSelectInput(index + 1);\n }\n break;\n case 'ArrowLeft':\n if (index > 0) {\n event.preventDefault();\n this.focusAndSelectInput(index - 1);\n }\n break;\n case 'Backspace':\n event.preventDefault();\n this.handleBackspace(index);\n break;\n }\n }\n\n /**\n * Handles paste (clipboard) events on PIN code fields.\n * Extracts valid characters from pasted content, filters by character type,\n * and automatically truncates to match field length.\n *\n * Behavior:\n * - Filters characters based on `alphanumeric` setting\n * - Truncates to maximum field count\n * - Fills available fields with pasted content\n * - Emits codeFilled event if all fields are filled\n *\n * @param event - The clipboard event\n */\n public onPaste(event: ClipboardEvent): void {\n if (this.disabled()) {\n event.preventDefault();\n return;\n }\n\n event.preventDefault();\n\n const validChars = this.extractValidCharactersFromPaste(event);\n\n if (validChars.length === 0) {\n return;\n }\n\n const filledInputs = [...validChars, ...Array(this.length() - validChars.length).fill('')];\n\n this.inputs.set(filledInputs);\n this.updateValue();\n\n // Focus on the first empty input or the last filled input if all are filled\n const firstEmptyIndex = validChars.length < this.length() ? validChars.length : validChars.length - 1;\n this.focusAndSelectInput(firstEmptyIndex);\n\n if (this.isComplete()) {\n this.codeFilled.emit(this.currentValue());\n }\n }\n\n /**\n * Handles focus event on PIN code fields.\n * Selects all text in the input field when focused.\n *\n * @param index - The input field index (0-based)\n */\n public onFocus(index: number): void {\n const input = this.pinInputs()[index];\n if (input) {\n input.nativeElement.select();\n }\n }\n\n /**\n * Handles blur event on PIN code fields.\n * Marks the component as touched when the last input field loses focus.\n * Also notifies the registered onTouched callback for FormControl integration.\n *\n * @param index - The input field index (0-based)\n */\n public onBlur(index: number): void {\n // Only mark as touched when the LAST input loses focus\n if (index === this.length() - PinCodeFieldComponent.LAST_INDEX_OFFSET) {\n this.touched.set(true);\n this.onTouched();\n }\n }\n\n /**\n * Clears the input value at specified index and adjusts focus accordingly.\n * If current field is empty, moves to previous field and clears it.\n *\n * @private\n * @param index - The input field index (0-based)\n */\n private handleBackspace(index: number): void {\n const currentInputs = this.inputs();\n\n // If current input has value, clear it\n if (currentInputs[index]) {\n this.setInputAtIndex(index, PinCodeFieldComponent.EMPTY_VALUE);\n return;\n }\n\n // Otherwise, clear previous input and focus it\n if (index > 0) {\n this.setInputAtIndex(index - 1, PinCodeFieldComponent.EMPTY_VALUE);\n this.focusAndSelectInput(index - 1);\n }\n }\n\n /**\n * Sets the value at a specific input field index and updates the form value.\n * Updates the signal and triggers the change detection via onChange callback.\n *\n * @private\n * @param index - The input field index (0-based)\n * @param value - The value to set in the field\n */\n private setInputAtIndex(index: number, value: string): void {\n const currentInputs = this.inputs();\n currentInputs[index] = value;\n this.inputs.set([...currentInputs]);\n this.updateValue();\n }\n\n /**\n * Focuses on and selects text in the input field at the specified index.\n * Uses queueMicrotask to ensure DOM is updated before focusing.\n *\n * @private\n * @param index - The input field index (0-based)\n */\n private focusAndSelectInput(index: number): void {\n queueMicrotask(() => {\n const input = this.pinInputs()[index];\n if (input) {\n input.nativeElement.focus();\n input.nativeElement.select();\n }\n });\n }\n\n /**\n * Clears the value of an input element.\n * Used for input validation to reject invalid characters.\n *\n * @private\n * @param target - The HTML input element to clear\n */\n private clearInput(target: HTMLInputElement): void {\n target.value = '';\n }\n\n /**\n * Extracts valid characters from pasted content.\n * Filters based on alphanumeric setting and limits to component's length.\n *\n * @private\n * @param event - The clipboard event\n * @returns Array of valid characters from the pasted content\n */\n private extractValidCharactersFromPaste(event: ClipboardEvent): string[] {\n const pastedText = (event.clipboardData?.getData('text') || '').trim();\n return pastedText\n .split('')\n .filter((char) => this.isValidCharacter(char))\n .slice(0, this.length());\n }\n\n /**\n * Validates if a character is acceptable based on component configuration.\n * For numeric mode, accepts only digits 0-9.\n * For alphanumeric mode, accepts any non-whitespace character.\n *\n * @private\n * @param char - The character to validate\n * @returns true if character is valid, false otherwise\n */\n private isValidCharacter(char: string): boolean {\n if (this.alphanumeric()) {\n return char.trim().length > 0;\n }\n return /^[0-9]$/.test(char);\n }\n\n /**\n * Updates the form value by calling the onChange callback registered by FormControl.\n * This ensures the reactive form stays synchronized with component state.\n *\n * @private\n */\n private updateValue(): void {\n this.onChange(this.currentValue());\n }\n\n /**\n * Implements ControlValueAccessor interface.\n * Called by the FormControl to write a value to the component.\n * Only accepts string values with length matching the component's length setting.\n *\n * @param value - The value to write (typically from the FormControl)\n */\n public writeValue(value: any): void {\n if (value) {\n const stringValue = String(value);\n if (stringValue.length === this.length()) {\n this.inputs.set(stringValue.split(''));\n }\n }\n }\n\n /**\n * Implements ControlValueAccessor interface.\n * Called by the FormControl when value changes.\n * Registers the callback to be called when the component value changes.\n *\n * @param fn - Callback function to invoke when component value changes\n */\n public registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Implements ControlValueAccessor interface.\n * Called by the FormControl to register the touched callback.\n * The callback is invoked when the last input field loses focus.\n *\n * @param fn - Callback function to invoke when component is touched\n */\n public registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Implements ControlValueAccessor interface.\n * Called by the FormControl to set the disabled state of the component.\n * Updates the disabled model to reflect the form's disabled state.\n *\n * @param isDisabled - Whether the component should be disabled\n */\n public setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n}\n\n","\n
\n @for (input of inputs(); let i = $index; track i) {\n \n }\n