@seniorsistemas/angular-components 18.0.4 → 18.1.0-feature-sds-276-640ecaac

package/fesm2022/seniorsistemas-angular-components-pin-code-field.mjs

@@ -0,0 +1,480 @@
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, viewChildren, inject, ElementRef, DestroyRef, effect, forwardRef, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Pin Code Field Component
+ *
+ * A flexible, accessible PIN code input component that implements {@link ControlValueAccessor}
+ * for seamless integration with Angular Reactive Forms and Template-driven Forms.
+ *
+ * Features:
+ * - Multiple input fields for PIN/OTP code entry
+ * - Configurable code length and character validation
+ * - Keyboard navigation (arrow keys, backspace)
+ * - Paste support with automatic truncation
+ * - Error state display via the `invalid` input
+ * - Full accessibility support (ARIA labels, semantic roles)
+ * - Signal-based state management
+ *
+ * @example
+ * ```html
+ * <form [formGroup]="form">
+ *   <s-pin-code-field
+ *     formControlName="code"
+ *     [length]="6"
+ *     [alphanumeric]="false"
+ *     [invalid]="(form.get('code')?.invalid && form.get('code')?.dirty) || false"
+ *     helpText="Enter your 6-digit code"
+ *     (codeFilled)="onCodeFilled($event)">
+ *   </s-pin-code-field>
+ * </form>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * form = this.fb.group({
+ *   code: ['', [Validators.required]],
+ * });
+ * ```
+ */
+class PinCodeFieldComponent {
+    static LAST_INDEX_OFFSET = 1;
+    static EMPTY_VALUE = '';
+    /**
+     * Number of input fields (PIN code length).
+     * Must be at least 1.
+     *
+     * @default 6
+     */
+    length = input(6);
+    /**
+     * Allows alphanumeric and special characters input.
+     * When false, only numeric input (0-9) is accepted.
+     *
+     * @default false
+     */
+    alphanumeric = input(false);
+    /**
+     * Help text displayed below the input fields.
+     *
+     * @default ''
+     */
+    helpText = input('');
+    /**
+     * Controls the error state visualization of the component.
+     * When true, displays red border on input fields.
+     * Typically bound to FormControl's invalid and dirty state.
+     *
+     * @example
+     * ```html
+     * [invalid]="(control?.invalid && control?.dirty) || false"
+     * ```
+     * @default false
+     */
+    invalid = input(false);
+    /**
+     * Two-way binding for the disabled state of the component.
+     * Disables all input fields and prevents user interaction.
+     *
+     * @default false
+     */
+    disabled = model(false);
+    /**
+     * Emitted when all PIN code fields are filled.
+     * Emits the complete PIN code as a string.
+     *
+     * @example
+     * ```html
+     * (codeFilled)="onCodeFilled($event)"
+     * ```
+     */
+    codeFilled = output();
+    /**
+     * Signal containing the current values of each input field.
+     * Array length matches the `length` input value.
+     */
+    inputs = signal([]);
+    /**
+     * Signal tracking whether the component has been touched by the user.
+     * Set to true when the last input field loses focus (blur event).
+     */
+    touched = signal(false);
+    /**
+     * Computed signal indicating whether all PIN code fields are filled.
+     * True only when every field contains a non-empty value.
+     */
+    isComplete = computed(() => this.inputs().every((input) => input !== ''));
+    /**
+     * Computed signal containing the complete PIN code as a joined string.
+     * Returns empty string if no inputs are filled.
+     */
+    currentValue = computed(() => this.inputs().join(''));
+    /**
+     * Signal tracking if the component host has the ng-invalid class from FormControl validators.
+     * Updated reactively whenever the invalid state changes.
+     */
+    hasNgInvalidClass = signal(false);
+    /**
+     * Signal tracking if the FormControl is dirty.
+     * Updated reactively whenever the dirty state changes.
+     */
+    isControlDirty = signal(false);
+    /**
+     * Computed signal indicating if the component should show error state.
+     * Returns true if:
+     * - The `invalid` input is true, OR
+     * - The component has the `ng-invalid` class AND the FormControl is dirty (touched/modified)
+     * This ensures errors are only shown to the user after they've interacted with the field.
+     */
+    hasError = computed(() => this.invalid() || (this.hasNgInvalidClass() && this.isControlDirty()));
+    /**
+     * ViewChildren reference to all input DOM elements.
+     * Used for DOM manipulation (focus, selection).
+     */
+    pinInputs = viewChildren('pinInput');
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const newLength = this.length();
+            if (newLength < 1) {
+                console.warn('PIN code length must be at least 1');
+                return;
+            }
+            if (this.inputs().length !== newLength) {
+                this.inputs.set(Array.from({ length: newLength }, () => ''));
+            }
+        }, { allowSignalWrites: true });
+        // Monitor ng-invalid and ng-dirty classes on the host element for reactive error state
+        effect(() => {
+            // Access inputs to create dependency on changes
+            this.inputs();
+            this.invalid();
+            // Use setTimeout to defer the check to next tick to ensure Angular has updated DOM classes
+            const timeoutId = window.setTimeout(() => {
+                const hostElement = this.elementRef.nativeElement;
+                const hasNgInvalid = hostElement.classList.contains('ng-invalid');
+                const isDirty = hostElement.classList.contains('ng-dirty');
+                this.hasNgInvalidClass.set(hasNgInvalid);
+                this.isControlDirty.set(isDirty);
+            });
+            // Cleanup timeout on component destroy
+            this.destroyRef.onDestroy(() => {
+                clearTimeout(timeoutId);
+            });
+        }, { allowSignalWrites: true });
+    }
+    /**
+     * Handles input event on PIN code fields.
+     * Validates character input, prevents multiple characters per field,
+     * auto-advances to next field when character is entered.
+     *
+     * @param index - The input field index (0-based)
+     * @param event - The input event
+     */
+    onInput(index, event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        const target = event.target;
+        const value = target.value;
+        if (value.length > 1 || (value && !this.isValidCharacter(value))) {
+            this.clearInput(target);
+            return;
+        }
+        this.setInputAtIndex(index, value);
+        if (value && index < this.length() - 1) {
+            this.focusAndSelectInput(index + 1);
+        }
+        if (this.isComplete()) {
+            this.codeFilled.emit(this.currentValue());
+        }
+    }
+    /**
+     * Handles keyboard events on PIN code fields.
+     * Supports arrow navigation (left/right) and backspace key.
+     *
+     * Keyboard behavior:
+     * - ArrowRight: Move focus to next field
+     * - ArrowLeft: Move focus to previous field
+     * - Backspace: Clear current or previous field and adjust focus
+     *
+     * @param index - The input field index (0-based)
+     * @param event - The keyboard event
+     */
+    onKeyDown(index, event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        const key = event.key;
+        switch (key) {
+            case 'ArrowRight':
+                if (index < this.length() - 1) {
+                    event.preventDefault();
+                    this.focusAndSelectInput(index + 1);
+                }
+                break;
+            case 'ArrowLeft':
+                if (index > 0) {
+                    event.preventDefault();
+                    this.focusAndSelectInput(index - 1);
+                }
+                break;
+            case 'Backspace':
+                event.preventDefault();
+                this.handleBackspace(index);
+                break;
+        }
+    }
+    /**
+     * Handles paste (clipboard) events on PIN code fields.
+     * Extracts valid characters from pasted content, filters by character type,
+     * and automatically truncates to match field length.
+     *
+     * Behavior:
+     * - Filters characters based on `alphanumeric` setting
+     * - Truncates to maximum field count
+     * - Fills available fields with pasted content
+     * - Emits codeFilled event if all fields are filled
+     *
+     * @param event - The clipboard event
+     */
+    onPaste(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        const validChars = this.extractValidCharactersFromPaste(event);
+        if (validChars.length === 0) {
+            return;
+        }
+        const filledInputs = [
+            ...validChars,
+            ...Array(this.length() - validChars.length).fill(''),
+        ];
+        this.inputs.set(filledInputs);
+        this.updateValue();
+        // Focus on the first empty input or the last filled input if all are filled
+        const firstEmptyIndex = validChars.length < this.length() ? validChars.length : validChars.length - 1;
+        this.focusAndSelectInput(firstEmptyIndex);
+        if (this.isComplete()) {
+            this.codeFilled.emit(this.currentValue());
+        }
+    }
+    /**
+     * Handles focus event on PIN code fields.
+     * Selects all text in the input field when focused.
+     *
+     * @param index - The input field index (0-based)
+     */
+    onFocus(index) {
+        const input = this.pinInputs()[index];
+        if (input) {
+            input.nativeElement.select();
+        }
+    }
+    /**
+     * Handles blur event on PIN code fields.
+     * Marks the component as touched when the last input field loses focus.
+     * Also notifies the registered onTouched callback for FormControl integration.
+     *
+     * @param index - The input field index (0-based)
+     */
+    onBlur(index) {
+        // Only mark as touched when the LAST input loses focus
+        if (index === this.length() - PinCodeFieldComponent.LAST_INDEX_OFFSET) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    /**
+     * Clears the input value at specified index and adjusts focus accordingly.
+     * If current field is empty, moves to previous field and clears it.
+     *
+     * @private
+     * @param index - The input field index (0-based)
+     */
+    handleBackspace(index) {
+        const currentInputs = this.inputs();
+        // If current input has value, clear it
+        if (currentInputs[index]) {
+            this.setInputAtIndex(index, PinCodeFieldComponent.EMPTY_VALUE);
+            return;
+        }
+        // Otherwise, clear previous input and focus it
+        if (index > 0) {
+            this.setInputAtIndex(index - 1, PinCodeFieldComponent.EMPTY_VALUE);
+            this.focusAndSelectInput(index - 1);
+        }
+    }
+    /**
+     * Sets the value at a specific input field index and updates the form value.
+     * Updates the signal and triggers the change detection via onChange callback.
+     *
+     * @private
+     * @param index - The input field index (0-based)
+     * @param value - The value to set in the field
+     */
+    setInputAtIndex(index, value) {
+        const currentInputs = this.inputs();
+        currentInputs[index] = value;
+        this.inputs.set([...currentInputs]);
+        this.updateValue();
+    }
+    /**
+     * Focuses on and selects text in the input field at the specified index.
+     * Uses queueMicrotask to ensure DOM is updated before focusing.
+     *
+     * @private
+     * @param index - The input field index (0-based)
+     */
+    focusAndSelectInput(index) {
+        queueMicrotask(() => {
+            const input = this.pinInputs()[index];
+            if (input) {
+                input.nativeElement.focus();
+                input.nativeElement.select();
+            }
+        });
+    }
+    /**
+     * Clears the value of an input element.
+     * Used for input validation to reject invalid characters.
+     *
+     * @private
+     * @param target - The HTML input element to clear
+     */
+    clearInput(target) {
+        target.value = '';
+    }
+    /**
+     * Extracts valid characters from pasted content.
+     * Filters based on alphanumeric setting and limits to component's length.
+     *
+     * @private
+     * @param event - The clipboard event
+     * @returns Array of valid characters from the pasted content
+     */
+    extractValidCharactersFromPaste(event) {
+        const pastedText = (event.clipboardData?.getData('text') || '').trim();
+        return pastedText
+            .split('')
+            .filter((char) => this.isValidCharacter(char))
+            .slice(0, this.length());
+    }
+    /**
+     * Validates if a character is acceptable based on component configuration.
+     * For numeric mode, accepts only digits 0-9.
+     * For alphanumeric mode, accepts any non-whitespace character.
+     *
+     * @private
+     * @param char - The character to validate
+     * @returns true if character is valid, false otherwise
+     */
+    isValidCharacter(char) {
+        if (this.alphanumeric()) {
+            return char.trim().length > 0;
+        }
+        return /^[0-9]$/.test(char);
+    }
+    /**
+     * Updates the form value by calling the onChange callback registered by FormControl.
+     * This ensures the reactive form stays synchronized with component state.
+     *
+     * @private
+     */
+    updateValue() {
+        this.onChange(this.currentValue());
+    }
+    /**
+     * Implements ControlValueAccessor interface.
+     * Called by the FormControl to write a value to the component.
+     * Only accepts string values with length matching the component's length setting.
+     *
+     * @param value - The value to write (typically from the FormControl)
+     */
+    writeValue(value) {
+        if (value) {
+            const stringValue = String(value);
+            if (stringValue.length === this.length()) {
+                this.inputs.set(stringValue.split(''));
+            }
+        }
+    }
+    /**
+     * Implements ControlValueAccessor interface.
+     * Called by the FormControl when value changes.
+     * Registers the callback to be called when the component value changes.
+     *
+     * @param fn - Callback function to invoke when component value changes
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Implements ControlValueAccessor interface.
+     * Called by the FormControl to register the touched callback.
+     * The callback is invoked when the last input field loses focus.
+     *
+     * @param fn - Callback function to invoke when component is touched
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Implements ControlValueAccessor interface.
+     * Called by the FormControl to set the disabled state of the component.
+     * Updates the disabled model to reflect the form's disabled state.
+     *
+     * @param isDisabled - Whether the component should be disabled
+     */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PinCodeFieldComponent, isStandalone: true, selector: "s-pin-code-field", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", codeFilled: "codeFilled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PinCodeFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "pinInputs", predicate: ["pinInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gap-xsmall flex flex-col\">\n    <div\n        class=\"flex gap-2\"\n        role=\"group\"\n        aria-label=\"PIN code input\"\n        [attr.aria-labelledby]=\"helpText() ? 'pin-help-text' : null\"\n    >\n        @for (input of inputs(); let i = $index; track i) {\n            <input\n                #pinInput\n                type=\"text\"\n                class=\"h-12 w-12 rounded-xbig border text-center text-lg font-medium transition-all duration-200\"\n                [ngClass]=\"{\n                    'border-criticality-red focus:ring-criticality-red': hasError(),\n                    'border-grayscale-30 focus:border-primary focus:ring-primary': !hasError(),\n                    'cursor-not-allowed bg-grayscale-10 text-grayscale-60': disabled(),\n                    'bg-grayscale-0 text-grayscale-100 focus:outline-none': !disabled(),\n                }\"\n                [value]=\"input\"\n                [disabled]=\"disabled()\"\n                [attr.maxlength]=\"1\"\n                [attr.inputmode]=\"alphanumeric() ? 'text' : 'numeric'\"\n                [attr.aria-label]=\"'PIN code character ' + (i + 1) + ' of ' + length()\"\n                [attr.aria-describedby]=\"helpText() ? 'pin-help-text' : null\"\n                [attr.aria-required]=\"true\"\n                autocomplete=\"off\"\n                (input)=\"onInput(i, $event)\"\n                (keydown)=\"onKeyDown(i, $event)\"\n                (paste)=\"onPaste($event)\"\n                (focus)=\"onFocus(i)\"\n                (blur)=\"onBlur(i)\"\n            />\n        }\n    </div>\n\n    @if (helpText()) {\n        <div\n            id=\"pin-help-text\"\n            class=\"mt-small text-sm text-grayscale-60\"\n        >\n            {{ helpText() }}\n        </div>\n    }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-pin-code-field', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PinCodeFieldComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"gap-xsmall flex flex-col\">\n    <div\n        class=\"flex gap-2\"\n        role=\"group\"\n        aria-label=\"PIN code input\"\n        [attr.aria-labelledby]=\"helpText() ? 'pin-help-text' : null\"\n    >\n        @for (input of inputs(); let i = $index; track i) {\n            <input\n                #pinInput\n                type=\"text\"\n                class=\"h-12 w-12 rounded-xbig border text-center text-lg font-medium transition-all duration-200\"\n                [ngClass]=\"{\n                    'border-criticality-red focus:ring-criticality-red': hasError(),\n                    'border-grayscale-30 focus:border-primary focus:ring-primary': !hasError(),\n                    'cursor-not-allowed bg-grayscale-10 text-grayscale-60': disabled(),\n                    'bg-grayscale-0 text-grayscale-100 focus:outline-none': !disabled(),\n                }\"\n                [value]=\"input\"\n                [disabled]=\"disabled()\"\n                [attr.maxlength]=\"1\"\n                [attr.inputmode]=\"alphanumeric() ? 'text' : 'numeric'\"\n                [attr.aria-label]=\"'PIN code character ' + (i + 1) + ' of ' + length()\"\n                [attr.aria-describedby]=\"helpText() ? 'pin-help-text' : null\"\n                [attr.aria-required]=\"true\"\n                autocomplete=\"off\"\n                (input)=\"onInput(i, $event)\"\n                (keydown)=\"onKeyDown(i, $event)\"\n                (paste)=\"onPaste($event)\"\n                (focus)=\"onFocus(i)\"\n                (blur)=\"onBlur(i)\"\n            />\n        }\n    </div>\n\n    @if (helpText()) {\n        <div\n            id=\"pin-help-text\"\n            class=\"mt-small text-sm text-grayscale-60\"\n        >\n            {{ helpText() }}\n        </div>\n    }\n</div>\n\n" }]
+        }], ctorParameters: () => [] });
+
+class PinCodeFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldModule, imports: [PinCodeFieldComponent], exports: [PinCodeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldModule, imports: [PinCodeFieldComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PinCodeFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [PinCodeFieldComponent],
+                    exports: [PinCodeFieldComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PinCodeFieldComponent, PinCodeFieldModule };
+//# sourceMappingURL=seniorsistemas-angular-components-pin-code-field.mjs.map

package/fesm2022/seniorsistemas-angular-components-pin-code-field.mjs.map

@@ -0,0 +1 @@
+{"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';\n\n/**\n * Pin Code Field Component\n *\n * A flexible, accessible PIN code input component that implements {@link ControlValueAccessor}\n * for seamless integration with Angular Reactive Forms and Template-driven Forms.\n *\n * Features:\n * - Multiple input fields for PIN/OTP code entry\n * - Configurable code length and character validation\n * - Keyboard navigation (arrow keys, backspace)\n * - Paste support with automatic truncation\n * - Error state display via the `invalid` input\n * - Full accessibility support (ARIA labels, semantic roles)\n * - Signal-based state management\n *\n * @example\n * ```html\n * <form [formGroup]=\"form\">\n *   <s-pin-code-field\n *     formControlName=\"code\"\n *     [length]=\"6\"\n *     [alphanumeric]=\"false\"\n *     [invalid]=\"(form.get('code')?.invalid && form.get('code')?.dirty) || false\"\n *     helpText=\"Enter your 6-digit code\"\n *     (codeFilled)=\"onCodeFilled($event)\">\n *   </s-pin-code-field>\n * </form>\n * ```\n *\n * @example\n * ```typescript\n * form = this.fb.group({\n *   code: ['', [Validators.required]],\n * });\n * ```\n */\n@Component({\n    selector: 's-pin-code-field',\n    templateUrl: './pin-code-field.component.html',\n    standalone: true,\n    imports: [CommonModule],\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     * Number of input fields (PIN code length).\n     * Must be at least 1.\n     *\n     * @default 6\n     */\n    public length = input(6);\n\n    /**\n     * Allows alphanumeric and special characters input.\n     * When false, only numeric input (0-9) is accepted.\n     *\n     * @default false\n     */\n    public alphanumeric = input(false);\n\n    /**\n     * Help text displayed below the input fields.\n     *\n     * @default ''\n     */\n    public helpText = input('');\n\n    /**\n     * Controls the error state visualization of the component.\n     * When true, displays red border on input fields.\n     * Typically bound to FormControl's invalid and dirty state.\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     * Two-way binding for the disabled state of the component.\n     * Disables all input fields and prevents user interaction.\n     *\n     * @default false\n     */\n    public disabled = model(false);\n\n    /**\n     * Emitted when all PIN code fields are filled.\n     * Emits the complete PIN code as a string.\n     *\n     * @example\n     * ```html\n     * (codeFilled)=\"onCodeFilled($event)\"\n     * ```\n     */\n    public codeFilled = output<string>();\n\n    /**\n     * Signal containing the current values of each input field.\n     * Array length matches the `length` input value.\n     */\n    public inputs = signal<string[]>([]);\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<boolean>(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<boolean>(false);\n\n    /**\n     * Signal tracking if the FormControl is dirty.\n     * Updated reactively whenever the dirty state changes.\n     */\n    private isControlDirty = signal<boolean>(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(() =>\n        this.invalid() || (this.hasNgInvalidClass() && this.isControlDirty())\n    );\n\n    /**\n     * ViewChildren reference to all input DOM elements.\n     * Used for DOM manipulation (focus, selection).\n     */\n    public pinInputs = viewChildren<ElementRef>('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 = [\n            ...validChars,\n            ...Array(this.length() - validChars.length).fill(''),\n        ];\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","<div class=\"gap-xsmall flex flex-col\">\n    <div\n        class=\"flex gap-2\"\n        role=\"group\"\n        aria-label=\"PIN code input\"\n        [attr.aria-labelledby]=\"helpText() ? 'pin-help-text' : null\"\n    >\n        @for (input of inputs(); let i = $index; track i) {\n            <input\n                #pinInput\n                type=\"text\"\n                class=\"h-12 w-12 rounded-xbig border text-center text-lg font-medium transition-all duration-200\"\n                [ngClass]=\"{\n                    'border-criticality-red focus:ring-criticality-red': hasError(),\n                    'border-grayscale-30 focus:border-primary focus:ring-primary': !hasError(),\n                    'cursor-not-allowed bg-grayscale-10 text-grayscale-60': disabled(),\n                    'bg-grayscale-0 text-grayscale-100 focus:outline-none': !disabled(),\n                }\"\n                [value]=\"input\"\n                [disabled]=\"disabled()\"\n                [attr.maxlength]=\"1\"\n                [attr.inputmode]=\"alphanumeric() ? 'text' : 'numeric'\"\n                [attr.aria-label]=\"'PIN code character ' + (i + 1) + ' of ' + length()\"\n                [attr.aria-describedby]=\"helpText() ? 'pin-help-text' : null\"\n                [attr.aria-required]=\"true\"\n                autocomplete=\"off\"\n                (input)=\"onInput(i, $event)\"\n                (keydown)=\"onKeyDown(i, $event)\"\n                (paste)=\"onPaste($event)\"\n                (focus)=\"onFocus(i)\"\n                (blur)=\"onBlur(i)\"\n            />\n        }\n    </div>\n\n    @if (helpText()) {\n        <div\n            id=\"pin-help-text\"\n            class=\"mt-small text-sm text-grayscale-60\"\n        >\n            {{ helpText() }}\n        </div>\n    }\n</div>\n\n","import { NgModule } from '@angular/core';\nimport { PinCodeFieldComponent } from './pin-code-field/pin-code-field.component';\n\n@NgModule({\n    imports: [PinCodeFieldComponent],\n    exports: [PinCodeFieldComponent],\n})\nexport class PinCodeFieldModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/form-dynamic/components/form-dynamic/form-dynamic.component.d.ts

@@ -0,0 +1,15 @@
+import { FormGroup } from '@angular/forms';
+import { FormDynamicSchema } from '../../schemas/form-dynamic-schema';
+import * as i0 from "@angular/core";
+export declare class FormDynamicComponent {
+    protected form: FormGroup<{}>;
+    schema: import("@angular/core").InputSignal<FormDynamicSchema>;
+    private readonly hosts;
+    private readonly schemaEffect;
+    private readonly hostsEffect;
+    private buildForm;
+    private buildFields;
+    emit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormDynamicComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormDynamicComponent, "s-form-dynamic", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/form-dynamic/core/registry.d.ts

@@ -0,0 +1,7 @@
+import { Type } from "@angular/core";
+import { FieldType } from "../schemas/field-dynamic";
+export declare class FormDynamicRegistry {
+    private static fields;
+    static registerField(type: FieldType, component: Type<any>): void;
+    static resolveField(type: FieldType): Type<any> | undefined;
+}

package/form-dynamic/fields-basic/boolean-field/boolean-field.component.d.ts

@@ -0,0 +1,9 @@
+import { BooleanField } from '../../schemas/field-dynamic';
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class BooleanFieldComponent {
+    field: import("@angular/core").InputSignal<BooleanField>;
+    control: import("@angular/core").InputSignal<FormControl<any>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BooleanFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BooleanFieldComponent, "s-boolean-field", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/form-dynamic/fields-basic/string-field/string-field.component.d.ts

@@ -0,0 +1,9 @@
+import { FormControl } from '@angular/forms';
+import { StringField } from '../../schemas/field-dynamic';
+import * as i0 from "@angular/core";
+export declare class StringFieldComponent {
+    field: import("@angular/core").InputSignal<StringField>;
+    control: import("@angular/core").InputSignal<FormControl<any>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StringFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StringFieldComponent, "s-string-field", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/form-dynamic/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@seniorsistemas/angular-components/form-dynamic" />
+export * from './public-api';

package/form-dynamic/lib/optional-fields/editor/editor-field/editor-field.component.d.ts

@@ -0,0 +1,15 @@
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { EditorField } from '../editor-types';
+import { FormControl } from '@angular/forms';
+import Quill from 'quill';
+import * as i0 from "@angular/core";
+export declare class EditorFieldComponent implements AfterViewInit {
+    id: `${string}-${string}-${string}-${string}-${string}`;
+    field: import("@angular/core").InputSignal<EditorField>;
+    control: import("@angular/core").InputSignal<FormControl<any>>;
+    editorContainer: import("@angular/core").Signal<ElementRef<HTMLElement>>;
+    quill: Quill;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditorFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditorFieldComponent, "s-editor-field", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/form-dynamic/lib/optional-fields/editor/editor-types.d.ts

@@ -0,0 +1,13 @@
+import { FieldDynamicBase } from '@seniorsistemas/angular-components/form-dynamic';
+export interface EditorField extends FieldDynamicBase {
+    type: 'editor';
+    key: string;
+    label?: string;
+    required?: boolean;
+    theme?: 'snow' | 'bubble';
+}
+declare module '@seniorsistemas/angular-components/form-dynamic' {
+    interface FieldTypeMap {
+        editor: EditorField;
+    }
+}

package/form-dynamic/lib/optional-fields/editor/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@seniorsistemas/angular-components/form-dynamic/lib/optional-fields/editor" />
+export * from './public-api';

package/form-dynamic/lib/optional-fields/editor/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from '../editor/editor-types';
+export { EditorFieldComponent } from '../editor/editor-field/editor-field.component';

package/form-dynamic/public-api.d.ts

@@ -0,0 +1,4 @@
+export { FormDynamicRegistry } from './core/registry';
+export * from './schemas/field-dynamic';
+export * from './schemas/form-dynamic-schema';
+export { FormDynamicComponent } from './components/form-dynamic/form-dynamic.component';