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