ux4g-components-angular 1.4.0 → 1.5.0

package/dist/native/otp/fesm2022/ux4g-components-angular-native-otp.mjs

@@ -0,0 +1,176 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Output, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { generateOtpDOM } from 'ux4g-components-web/dom-generators';
+import { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';
+
+/**
+ * UX4GNativeOtpComponent — Angular Native Wrapper for the OTP Input component.
+ *
+ * Generates individual input cells using the shared DOM Generator.
+ * Implements auto-advance focus on input, backspace navigation,
+ * and paste distribution across cells.
+ *
+ * Implements ControlValueAccessor for Angular forms integration (ngModel/formControl).
+ */
+class UX4GNativeOtpComponent extends BaseNativeComponent {
+    constructor() {
+        super(...arguments);
+        this.length = 6;
+        this.otpChange = new EventEmitter();
+        this.inputElements = [];
+        this.eventListenerCleanups = [];
+    }
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    set disabledInput(val) {
+        this.disabled = val;
+    }
+    get disabledInput() {
+        return this.disabled;
+    }
+    ngOnChanges() {
+        this.renderComponent();
+    }
+    ngAfterViewInit() {
+        this.attachEventListeners();
+    }
+    ngOnDestroy() {
+        this.cleanupEventListeners();
+        super.ngOnDestroy();
+    }
+    renderComponent() {
+        // Clear existing children and event listeners
+        this.cleanupEventListeners();
+        const hostEl = this.elementRef.nativeElement;
+        while (hostEl.firstChild) {
+            this.renderer.removeChild(hostEl, hostEl.firstChild);
+        }
+        // Get current values from the stored value
+        const currentValue = this.value || '';
+        const values = Array.from({ length: this.length }, (_, i) => currentValue[i] || '');
+        // Generate descriptor and render to DOM
+        const descriptor = generateOtpDOM({
+            length: this.length,
+            values,
+            disabled: this.disabled,
+        });
+        renderDescriptorToDOM(this.renderer, descriptor, hostEl);
+        // Collect input elements and attach listeners
+        this.inputElements = Array.from(hostEl.querySelectorAll('input.ux4g-otp-cell'));
+        this.attachEventListeners();
+    }
+    attachEventListeners() {
+        this.cleanupEventListeners();
+        this.inputElements.forEach((input, index) => {
+            const onInput = (event) => this.handleInput(index, event);
+            const onKeyDown = (event) => this.handleKeyDown(index, event);
+            const onPaste = (event) => this.handlePaste(event);
+            const onFocus = () => this.notifyTouched();
+            input.addEventListener('input', onInput);
+            input.addEventListener('keydown', onKeyDown);
+            input.addEventListener('paste', onPaste);
+            input.addEventListener('focus', onFocus);
+            this.eventListenerCleanups.push(() => {
+                input.removeEventListener('input', onInput);
+                input.removeEventListener('keydown', onKeyDown);
+                input.removeEventListener('paste', onPaste);
+                input.removeEventListener('focus', onFocus);
+            });
+        });
+    }
+    cleanupEventListeners() {
+        this.eventListenerCleanups.forEach((cleanup) => cleanup());
+        this.eventListenerCleanups = [];
+    }
+    handleInput(index, event) {
+        const input = event.target;
+        const char = input.value.slice(-1); // Take only last character
+        const currentValue = this.value || '';
+        const values = Array.from({ length: this.length }, (_, i) => currentValue[i] || '');
+        values[index] = char;
+        const newValue = values.join('');
+        this.notifyChange(newValue);
+        this.otpChange.emit(newValue);
+        // Auto-advance focus to next cell
+        if (char && index < this.length - 1) {
+            this.inputElements[index + 1]?.focus();
+        }
+        // Re-render to sync displayed values
+        this.renderComponent();
+    }
+    handleKeyDown(index, event) {
+        if (event.key === 'Backspace') {
+            const currentValue = this.value || '';
+            if (!currentValue[index] && index > 0) {
+                // Move focus to previous cell on backspace when current cell is empty
+                this.inputElements[index - 1]?.focus();
+            }
+        }
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text/plain') || '';
+        const chars = pastedText.slice(0, this.length);
+        const currentValue = this.value || '';
+        const values = Array.from({ length: this.length }, (_, i) => chars[i] || currentValue[i] || '');
+        const newValue = values.join('');
+        this.notifyChange(newValue);
+        this.otpChange.emit(newValue);
+        // Focus the cell after the last pasted character, or the last cell
+        const focusIndex = Math.min(chars.length, this.length - 1);
+        this.inputElements[focusIndex]?.focus();
+        // Re-render to sync displayed values
+        this.renderComponent();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: UX4GNativeOtpComponent, isStandalone: true, selector: "ux4g-native-otp", inputs: { length: "length", disabledInput: ["disabled", "disabledInput"] }, outputs: { otpChange: "otpChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UX4GNativeOtpComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ux4g-native-otp',
+                    standalone: true,
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UX4GNativeOtpComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { length: [{
+                type: Input
+            }], disabledInput: [{
+                type: Input,
+                args: ['disabled']
+            }], otpChange: [{
+                type: Output
+            }] } });
+
+class UX4GNativeOtpModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpModule, imports: [UX4GNativeOtpComponent], exports: [UX4GNativeOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: UX4GNativeOtpModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [UX4GNativeOtpComponent],
+                    exports: [UX4GNativeOtpComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UX4GNativeOtpComponent, UX4GNativeOtpModule };
+//# sourceMappingURL=ux4g-components-angular-native-otp.mjs.map

package/dist/native/otp/fesm2022/ux4g-components-angular-native-otp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-otp.mjs","sources":["../../../../src/native/otp/ux4g-native-otp.component.ts","../../../../src/native/otp/ux4g-native-otp.module.ts","../../../../src/native/otp/ux4g-components-angular-native-otp.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  OnChanges,\r\n  AfterViewInit,\r\n  OnDestroy,\r\n  ViewEncapsulation,\r\n  forwardRef,\r\n} from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { generateOtpDOM } from 'ux4g-components-web/dom-generators';\r\nimport { BaseNativeComponent, renderDescriptorToDOM } from '@ux4g-native-shared';\r\n\r\n/**\r\n * UX4GNativeOtpComponent — Angular Native Wrapper for the OTP Input component.\r\n *\r\n * Generates individual input cells using the shared DOM Generator.\r\n * Implements auto-advance focus on input, backspace navigation,\r\n * and paste distribution across cells.\r\n *\r\n * Implements ControlValueAccessor for Angular forms integration (ngModel/formControl).\r\n */\r\n@Component({\r\n  selector: 'ux4g-native-otp',\r\n  standalone: true,\r\n  template: '',\r\n  encapsulation: ViewEncapsulation.None,\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => UX4GNativeOtpComponent),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class UX4GNativeOtpComponent\r\n  extends BaseNativeComponent\r\n  implements OnChanges, AfterViewInit, OnDestroy\r\n{\r\n  @Input() length: number = 6;\r\n\r\n  // eslint-disable-next-line @angular-eslint/no-input-rename\r\n  @Input('disabled')\r\n  set disabledInput(val: boolean) {\r\n    this.disabled = val;\r\n  }\r\n  get disabledInput(): boolean {\r\n    return this.disabled;\r\n  }\r\n\r\n  @Output() otpChange = new EventEmitter<string>();\r\n\r\n  private inputElements: HTMLInputElement[] = [];\r\n  private eventListenerCleanups: (() => void)[] = [];\r\n\r\n  ngOnChanges(): void {\r\n    this.renderComponent();\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    this.attachEventListeners();\r\n  }\r\n\r\n  override ngOnDestroy(): void {\r\n    this.cleanupEventListeners();\r\n    super.ngOnDestroy();\r\n  }\r\n\r\n  protected override renderComponent(): void {\r\n    // Clear existing children and event listeners\r\n    this.cleanupEventListeners();\r\n    const hostEl = this.elementRef.nativeElement;\r\n    while (hostEl.firstChild) {\r\n      this.renderer.removeChild(hostEl, hostEl.firstChild);\r\n    }\r\n\r\n    // Get current values from the stored value\r\n    const currentValue = (this.value as string) || '';\r\n    const values = Array.from({ length: this.length }, (_, i) => currentValue[i] || '');\r\n\r\n    // Generate descriptor and render to DOM\r\n    const descriptor = generateOtpDOM({\r\n      length: this.length,\r\n      values,\r\n      disabled: this.disabled,\r\n    });\r\n\r\n    renderDescriptorToDOM(this.renderer, descriptor, hostEl);\r\n\r\n    // Collect input elements and attach listeners\r\n    this.inputElements = Array.from(\r\n      hostEl.querySelectorAll('input.ux4g-otp-cell')\r\n    ) as HTMLInputElement[];\r\n\r\n    this.attachEventListeners();\r\n  }\r\n\r\n  private attachEventListeners(): void {\r\n    this.cleanupEventListeners();\r\n\r\n    this.inputElements.forEach((input, index) => {\r\n      const onInput = (event: Event) => this.handleInput(index, event);\r\n      const onKeyDown = (event: Event) => this.handleKeyDown(index, event as KeyboardEvent);\r\n      const onPaste = (event: Event) => this.handlePaste(event as ClipboardEvent);\r\n      const onFocus = () => this.notifyTouched();\r\n\r\n      input.addEventListener('input', onInput);\r\n      input.addEventListener('keydown', onKeyDown);\r\n      input.addEventListener('paste', onPaste);\r\n      input.addEventListener('focus', onFocus);\r\n\r\n      this.eventListenerCleanups.push(() => {\r\n        input.removeEventListener('input', onInput);\r\n        input.removeEventListener('keydown', onKeyDown);\r\n        input.removeEventListener('paste', onPaste);\r\n        input.removeEventListener('focus', onFocus);\r\n      });\r\n    });\r\n  }\r\n\r\n  private cleanupEventListeners(): void {\r\n    this.eventListenerCleanups.forEach((cleanup) => cleanup());\r\n    this.eventListenerCleanups = [];\r\n  }\r\n\r\n  private handleInput(index: number, event: Event): void {\r\n    const input = event.target as HTMLInputElement;\r\n    const char = input.value.slice(-1); // Take only last character\r\n\r\n    const currentValue = (this.value as string) || '';\r\n    const values = Array.from({ length: this.length }, (_, i) => currentValue[i] || '');\r\n    values[index] = char;\r\n    const newValue = values.join('');\r\n\r\n    this.notifyChange(newValue);\r\n    this.otpChange.emit(newValue);\r\n\r\n    // Auto-advance focus to next cell\r\n    if (char && index < this.length - 1) {\r\n      this.inputElements[index + 1]?.focus();\r\n    }\r\n\r\n    // Re-render to sync displayed values\r\n    this.renderComponent();\r\n  }\r\n\r\n  private handleKeyDown(index: number, event: KeyboardEvent): void {\r\n    if (event.key === 'Backspace') {\r\n      const currentValue = (this.value as string) || '';\r\n      if (!currentValue[index] && index > 0) {\r\n        // Move focus to previous cell on backspace when current cell is empty\r\n        this.inputElements[index - 1]?.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  private handlePaste(event: ClipboardEvent): void {\r\n    event.preventDefault();\r\n    const pastedText = event.clipboardData?.getData('text/plain') || '';\r\n    const chars = pastedText.slice(0, this.length);\r\n\r\n    const currentValue = (this.value as string) || '';\r\n    const values = Array.from({ length: this.length }, (_, i) => chars[i] || currentValue[i] || '');\r\n    const newValue = values.join('');\r\n\r\n    this.notifyChange(newValue);\r\n    this.otpChange.emit(newValue);\r\n\r\n    // Focus the cell after the last pasted character, or the last cell\r\n    const focusIndex = Math.min(chars.length, this.length - 1);\r\n    this.inputElements[focusIndex]?.focus();\r\n\r\n    // Re-render to sync displayed values\r\n    this.renderComponent();\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { UX4GNativeOtpComponent } from './ux4g-native-otp.component';\r\n\r\n@NgModule({\r\n  imports: [UX4GNativeOtpComponent],\r\n  exports: [UX4GNativeOtpComponent],\r\n})\r\nexport class UX4GNativeOtpModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/dist/native/otp/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ux4g-components-angular" />
+export * from './public-api';
+//# sourceMappingURL=ux4g-components-angular-native-otp.d.ts.map

package/dist/native/otp/public-api.d.ts

@@ -0,0 +1,3 @@
+export { UX4GNativeOtpComponent } from './ux4g-native-otp.component';
+export { UX4GNativeOtpModule } from './ux4g-native-otp.module';
+//# sourceMappingURL=public-api.d.ts.map

package/dist/native/otp/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../src/native/otp/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/native/otp/ux4g-components-angular-native-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-components-angular-native-otp.d.ts","sourceRoot":"","sources":["../../../src/native/otp/ux4g-components-angular-native-otp.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}

package/dist/native/otp/ux4g-native-otp.component.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter, OnChanges, AfterViewInit, OnDestroy } from '@angular/core';
+import { BaseNativeComponent } from '@ux4g-native-shared';
+import * as i0 from "@angular/core";
+/**
+ * UX4GNativeOtpComponent — Angular Native Wrapper for the OTP Input component.
+ *
+ * Generates individual input cells using the shared DOM Generator.
+ * Implements auto-advance focus on input, backspace navigation,
+ * and paste distribution across cells.
+ *
+ * Implements ControlValueAccessor for Angular forms integration (ngModel/formControl).
+ */
+export declare class UX4GNativeOtpComponent extends BaseNativeComponent implements OnChanges, AfterViewInit, OnDestroy {
+    length: number;
+    set disabledInput(val: boolean);
+    get disabledInput(): boolean;
+    otpChange: EventEmitter<string>;
+    private inputElements;
+    private eventListenerCleanups;
+    ngOnChanges(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    protected renderComponent(): void;
+    private attachEventListeners;
+    private cleanupEventListeners;
+    private handleInput;
+    private handleKeyDown;
+    private handlePaste;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeOtpComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UX4GNativeOtpComponent, "ux4g-native-otp", never, { "length": { "alias": "length"; "required": false; }; "disabledInput": { "alias": "disabled"; "required": false; }; }, { "otpChange": "otpChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=ux4g-native-otp.component.d.ts.map

package/dist/native/otp/ux4g-native-otp.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-otp.component.d.ts","sourceRoot":"","sources":["../../../src/native/otp/ux4g-native-otp.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,EAGV,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAyB,MAAM,qBAAqB,CAAC;;AAEjF;;;;;;;;GAQG;AACH,qBAaa,sBACX,SAAQ,mBACR,YAAW,SAAS,EAAE,aAAa,EAAE,SAAS;IAErC,MAAM,EAAE,MAAM,CAAK;IAG5B,IACI,aAAa,CAAC,GAAG,EAAE,OAAO,EAE7B;IACD,IAAI,aAAa,IAAI,OAAO,CAE3B;IAES,SAAS,uBAA8B;IAEjD,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,qBAAqB,CAAsB;IAEnD,WAAW,IAAI,IAAI;IAInB,eAAe,IAAI,IAAI;IAId,WAAW,IAAI,IAAI;cAKT,eAAe,IAAI,IAAI;IA6B1C,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;yCAzHR,sBAAsB;2CAAtB,sBAAsB;CA4IlC"}

package/dist/native/otp/ux4g-native-otp.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ux4g-native-otp.component";
+export declare class UX4GNativeOtpModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UX4GNativeOtpModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UX4GNativeOtpModule, never, [typeof i1.UX4GNativeOtpComponent], [typeof i1.UX4GNativeOtpComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UX4GNativeOtpModule>;
+}
+//# sourceMappingURL=ux4g-native-otp.module.d.ts.map

package/dist/native/otp/ux4g-native-otp.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ux4g-native-otp.module.d.ts","sourceRoot":"","sources":["../../../src/native/otp/ux4g-native-otp.module.ts"],"names":[],"mappings":";;AAGA,qBAIa,mBAAmB;yCAAnB,mBAAmB;0CAAnB,mBAAmB;0CAAnB,mBAAmB;CAAG"}