@basis-ng/primitives 0.0.1-alpha.83 → 0.0.1-alpha.84

package/fesm2022/basis-ng-primitives.mjs

@@ -1537,6 +1537,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Component representing a One-Time Password (OTP) input group.
+ *
+ * This component manages a set of digit inputs for entering OTP codes, handling keyboard navigation,
+ * paste events, and integration with Angular Forms via ControlValueAccessor.
+ *
+ * @example
+ * <b-otp>
+ *   <input otp-digit />
+ *   <input otp-digit />
+ *   <input otp-digit />
+ *   <input otp-digit />
+ * </b-otp>
+ */
+/**
+ * OtpComponent manages a group of digit inputs for OTP entry.
+ * Implements keyboard navigation, paste handling, and ControlValueAccessor for Angular Forms.
+ */
+class OtpComponent {
+    /**
+     * The visual size of the OTP inputs. Accepts '1', '2', or '3'. Default is '2'.
+     */
+    size = model('2', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Computed signal for the number of digit inputs.
+     */
+    length = computed(() => this.digitInputs().length, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    /**
+     * Emits the full OTP value when changed.
+     */
+    otpChange = output();
+    /**
+     * Query for all child digit inputs (OtpDigitDirective).
+     */
+    digitInputs = contentChildren(OtpDigitDirective, ...(ngDevMode ? [{ debugName: "digitInputs" }] : []));
+    /**
+     * Internal array holding the current values of each digit input.
+     */
+    values = [];
+    /**
+     * Model indicating whether the OTP input group is disabled.
+     */
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Callback for propagating value changes to Angular Forms.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    /**
+     * Callback for marking the component as touched in Angular Forms.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngAfterContentInit() {
+        // Inicializar listeners en los inputs hijos
+        this.digitInputs().forEach((input, idx) => {
+            const el = input.el.nativeElement;
+            // maxLength y type se aplican por la directiva
+            el.disabled = this.disabled();
+            el.classList.remove('size-1', 'size-2', 'size-3');
+            el.classList.add(`size-${this.size()}`);
+            el.addEventListener('input', (event) => {
+                this.onInput(event, idx);
+            });
+            el.addEventListener('keydown', (event) => {
+                this.onKeyDown(event, idx);
+            });
+            el.addEventListener('paste', (event) => {
+                this.onPaste(event);
+            });
+        });
+        this.resetValues();
+    }
+    /**
+     * Handles input event for each digit input.
+     * Moves focus to next input if value entered.
+     *
+     * @param event - Input event
+     *
+     * @param idx - Index of the digit input
+     */
+    onInput(event, idx) {
+        const input = event.target;
+        const val = input.value;
+        this.values[idx] = val;
+        if (val && idx < this.length() - 1) {
+            this.focusDigit(idx + 1);
+        }
+        this.emitValue();
+    }
+    /**
+     * Handles keyboard navigation for digit inputs.
+     * Supports Backspace, ArrowLeft, ArrowRight.
+     *
+     * @param event - Keyboard event
+     *
+     * @param idx - Index of the digit input
+     */
+    onKeyDown(event, idx) {
+        const input = event.target;
+        if (event.key === 'Backspace') {
+            if (!input.value && idx > 0) {
+                this.focusDigit(idx - 1);
+            }
+            this.values[idx] = '';
+            this.emitValue();
+        }
+        else if (event.key === 'ArrowLeft' && idx > 0) {
+            this.focusDigit(idx - 1);
+        }
+        else if (event.key === 'ArrowRight' && idx < this.length() - 1) {
+            this.focusDigit(idx + 1);
+        }
+    }
+    /**
+     * Handles paste event for the OTP input group.
+     * Distributes pasted characters across digit inputs.
+     *
+     * @param event - Clipboard event
+     */
+    onPaste(event) {
+        event.preventDefault();
+        const paste = event.clipboardData?.getData('text') ?? '';
+        const chars = paste.slice(0, this.length()).split('');
+        chars.forEach((c, i) => {
+            this.values[i] = c;
+            const input = this.digitInputs()[i];
+            if (input) {
+                input.el.nativeElement.value = c;
+            }
+        });
+        this.emitValue();
+        this.focusDigit(chars.length - 1);
+    }
+    /**
+     * Focuses the digit input at the given index.
+     *
+     * @param idx - Index of the digit input to focus
+     */
+    focusDigit(idx) {
+        const input = this.digitInputs()[idx];
+        if (input) {
+            input.el.nativeElement.focus();
+        }
+    }
+    /**
+     * Emits the full OTP value via output and ControlValueAccessor.
+     */
+    emitValue() {
+        const otp = this.values.join('');
+        this.otpChange.emit(otp);
+        this.onChange(otp);
+        this.onTouched();
+    }
+    /**
+     * Resets all digit input values to empty.
+     */
+    resetValues() {
+        this.values = Array(this.length()).fill('');
+        this.digitInputs().forEach(input => {
+            input.el.nativeElement.value = '';
+        });
+    }
+    // ControlValueAccessor implementation
+    /**
+     * Writes a new value to the OTP input group.
+     * Called by Angular Forms to update the value.
+     *
+     * @param value - New OTP value
+     */
+    writeValue(value) {
+        this.values = Array(this.length()).fill('');
+        if (value) {
+            value
+                .slice(0, this.length())
+                .split('')
+                .forEach((c, i) => {
+                this.values[i] = c;
+                const input = this.digitInputs()[i];
+                if (input) {
+                    input.el.nativeElement.value = c;
+                }
+            });
+        }
+        else {
+            this.resetValues();
+        }
+    }
+    /**
+     * Registers a callback to be called when the value changes.
+     *
+     * @param fn - Callback function
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback to be called when the component is touched.
+     *
+     * @param fn - Callback function
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the OTP input group.
+     * Called by Angular Forms to enable/disable the component.
+     *
+     * @param isDisabled - Boolean indicating disabled state
+     */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        this.digitInputs().forEach(input => {
+            input.el.nativeElement.disabled = isDisabled;
+            input.el.nativeElement.classList.remove('size-1', 'size-2', 'size-3');
+            input.el.nativeElement.classList.add(`size-${this.size()}`);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: OtpComponent, isStandalone: true, selector: "b-otp", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", otpChange: "otpChange", disabled: "disabledChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OtpComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "digitInputs", predicate: OtpDigitDirective, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-otp',
+                    template: `<ng-content />`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OtpComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+class OtpDigitDirective {
+    /** Reference to the native input element. */
+    el = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpDigitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: OtpDigitDirective, isStandalone: true, selector: "input[otp-digit]", host: { attributes: { "maxlength": "1" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: OtpDigitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[otp-digit]',
+                    host: {
+                        maxlength: '1',
+                    },
+                }]
+        }] });
+
 class BadgeComponent {
     /** The variant of the badge. */
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
@@ -3515,5 +3772,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardSubtitleComponent, CardTitleComponent, Checkbox, ColorPickerComponent, ComboboxComponent, CommandComponent, CommandOptionsComponent, DialogDirective, DialogService, DrawerComponent, IconComponent, InViewportDirective, InViewportService, InputComponent, InputGroupComponent, LazyContentDirective, MenuComponent, MenuGroupComponent, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabelComponent, MenuTriggerDirective, OptionComponent, OverlayDirective, OverlayTriggerDirective, RangeComponent, ResponsiveService, RowComponent, RowItemComponent, SelectComponent, SelectOptionsComponent, SheetComponent, SpinnerComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TextareaComponent, ThemeService, TooltipDirective, TreeComponent, TreeNodeComponent };
+export { AlertComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardSubtitleComponent, CardTitleComponent, Checkbox, ColorPickerComponent, ComboboxComponent, CommandComponent, CommandOptionsComponent, DialogDirective, DialogService, DrawerComponent, IconComponent, InViewportDirective, InViewportService, InputComponent, InputGroupComponent, LazyContentDirective, MenuComponent, MenuGroupComponent, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabelComponent, MenuTriggerDirective, OptionComponent, OtpComponent, OtpDigitDirective, OverlayDirective, OverlayTriggerDirective, RangeComponent, ResponsiveService, RowComponent, RowItemComponent, SelectComponent, SelectOptionsComponent, SheetComponent, SpinnerComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TextareaComponent, ThemeService, TooltipDirective, TreeComponent, TreeNodeComponent };
 //# sourceMappingURL=basis-ng-primitives.mjs.map