@acorex/components 7.2.8 → 7.3.2

package/fesm2022/acorex-components-otp.mjs

@@ -1,18 +1,16 @@
-import { AXEvent, MXValueComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { AXEvent, MXValueComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
-import { classes } from 'polytype';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class AXOtpCompletedEvent extends AXEvent {
 }
 
-class AXOtpComponent extends classes((MXValueComponent), MXInteractiveComponent) {
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this.length = 6;
+class AXOtpComponent extends MXValueComponent {
+    constructor() {
+        super(...arguments);
+        this.length = 4;
         this.inputs = [];
         this.onCompleted = new EventEmitter();
         this._numbers = [];
@@ -24,11 +22,11 @@ class AXOtpComponent extends classes((MXValueComponent), MXInteractiveComponent)
             .map((x, i) => i);
     }
     ngAfterViewInit() {
-        this.elementRef.nativeElement.querySelectorAll('.ax-input')[0].focus();
+        this.getHostElement().querySelector('.ax-input').focus();
     }
     onInput(event, i) {
-        const input = this.elementRef.nativeElement.querySelectorAll('.ax-input');
-        var numberRegex = /^\d+$/;
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const numberRegex = /^\d+$/;
         if (!numberRegex.test(event.target.value)) {
             event.target.value = '';
             return;
@@ -38,54 +36,44 @@ class AXOtpComponent extends classes((MXValueComponent), MXInteractiveComponent)
             event.target.value = '';
             event.target.value = currentValue.slice(-1);
         }
-        if (input[i + 1]) {
-            input[i + 1].focus();
+        if (inputs[i + 1]) {
+            inputs[i + 1].select();
         }
         this._numbers[i] = event.target.value;
         if (this._numbers.filter((c) => c).length === this.length) {
+            this.setState('success');
             this.onCompleted.emit({
                 component: AXOtpComponent,
                 value: this._numbers.join(''),
             });
         }
-        // console.log(this._numbers);
-        // if (this._numbers.filter(c => c).length === this.length) {
-        //   this.setState('success');
-        //   this.onCompleted.emit({
-        //     component: AXOtpComponent,
-        //     value: this._numbers.join(''),
-        //   });
-        // } else {
-        //   this.setState('error');
-        // }
-        // this.value = '124';
     }
     onKeyDown(event, i) {
-        const input = this.elementRef.nativeElement.querySelectorAll('.ax-input');
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
         switch (event.key) {
             case 'Backspace':
-                input[i].value = '';
-                if (input[i - 1]) {
-                    input[i - 1].focus();
+                inputs[i].value = '';
+                if (inputs[i - 1]) {
+                    inputs[i - 1].select();
                     event.preventDefault();
                 }
-                this._numbers[i] = undefined;
+                this._numbers[i] = NaN;
                 break;
             case 'ArrowRight':
-                if (input[i + 1]) {
-                    input[i + 1].focus();
+                if (inputs[i + 1]) {
+                    inputs[i + 1].select();
                 }
                 break;
             case 'ArrowLeft':
-                if (input[i - 1]) {
-                    input[i - 1].focus();
+                if (inputs[i - 1]) {
+                    inputs[i - 1].select();
                 }
                 break;
             case 'Home':
-                input[0].focus();
+                inputs[0].focus();
                 break;
             case 'End':
-                input[this.length - 1].focus();
+                inputs[this.length - 1].select();
                 break;
             case 'ArrowUp':
             case 'ArrowDown':
@@ -94,23 +82,25 @@ class AXOtpComponent extends classes((MXValueComponent), MXInteractiveComponent)
         }
     }
     onPaste(event) {
-        let paste = event.clipboardData.getData('text');
-        const input = this.elementRef.nativeElement.querySelectorAll('.ax-input');
-        input[input.length - 1].focus();
+        const data = event.clipboardData.getData('text');
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        inputs[inputs.length - 1].focus();
         this._numbers = [];
-        for (let i = 0; i < paste.length; i++) {
-            this._numbers[i] = paste[i];
+        for (let i = 0; i < data.length; i++) {
+            this._numbers[i] = data[i];
         }
-        console.log(this._numbers);
-        console.log(paste);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXOtpComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXOtpComponent, selector: "ax-otp", inputs: { length: "length" }, outputs: { onCompleted: "onCompleted" }, host: { classAttribute: "ax-otp" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-otp-input-container ax-editor-container\" [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input class=\"ax-input\" type=\"number\" [value]=\"_numbers[i]\" (input)=\"onInput($event, i)\" (keydown)=\"onKeyDown($event, i)\" maxlength=\"1\" [disabled]=\"disabled\" [readonly]=\"readonly\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    onClick(event, i) {
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        inputs[i].select();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXOtpComponent, selector: "ax-otp", inputs: { state: "state", disabled: "disabled", length: "length" }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", onCompleted: "onCompleted" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-otp-input-container ax-editor-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"onPaste($event)\"\n>\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      maxlength=\"1\"\n      [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"onClick($event, i)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXOtpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXOtpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-otp', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-otp' }, template: "<div class=\"ax-otp-input-container ax-editor-container\" [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input class=\"ax-input\" type=\"number\" [value]=\"_numbers[i]\" (input)=\"onInput($event, i)\" (keydown)=\"onKeyDown($event, i)\" maxlength=\"1\" [disabled]=\"disabled\" [readonly]=\"readonly\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { length: [{
+            args: [{ selector: 'ax-otp', inputs: ['state', 'disabled'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ax-otp-input-container ax-editor-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"onPaste($event)\"\n>\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      maxlength=\"1\"\n      [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"onClick($event, i)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { length: [{
                 type: Input
             }], onCompleted: [{
                 type: Output
@@ -119,11 +109,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 const COMPONENT = [AXOtpComponent];
 const MODULES = [CommonModule];
 class AXOtpModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXOtpModule, declarations: [AXOtpComponent], imports: [CommonModule], exports: [AXOtpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXOtpModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXOtpModule, declarations: [AXOtpComponent], imports: [CommonModule], exports: [AXOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXOtpModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXOtpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXOtpModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-otp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../libs/components/otp/src/lib/otp.class.ts","../../../../libs/components/otp/src/lib/otp.component.ts","../../../../libs/components/otp/src/lib/otp.component.html","../../../../libs/components/otp/src/lib/otp.module.ts","../../../../libs/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/components/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n  value: string;\n}\n","import {\n  Component,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  ElementRef,\n  ChangeDetectorRef,\n  Input,\n  ViewChild,\n  ViewChildren,\n  QueryList,\n  Output,\n  EventEmitter,\n} from '@angular/core';\nimport { classes } from 'polytype';\nimport { MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'ax-otp' },\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXInteractiveComponent) {\n  @Input() length: number = 6;\n  inputs: number[] = [];\n\n  @Output() onCompleted: EventEmitter<AXOtpCompletedEvent> =\n    new EventEmitter<AXOtpCompletedEvent>();\n\n  _numbers: number[] = [];\n\n  constructor(private elementRef: ElementRef) {\n    super();\n  }\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this.inputs = Array(this.length)\n      .fill(1)\n      .map((x, i) => i);\n  }\n\n  protected override ngAfterViewInit(): void {\n    this.elementRef.nativeElement.querySelectorAll('.ax-input')[0].focus();\n  }\n\n  onInput(event: any, i: number) {\n    const input = this.elementRef.nativeElement.querySelectorAll('.ax-input');\n    var numberRegex = /^\\d+$/;\n    if (!numberRegex.test(event.target.value)) {\n      event.target.value = '';\n      return;\n    }\n    if (event.target.value.length > 1) {\n      const currentValue = event.target.value;\n      event.target.value = '';\n      event.target.value = currentValue.slice(-1);\n    }\n    if (input[i + 1]) {\n      input[i + 1].focus();\n    }\n    this._numbers[i] = event.target.value;\n    if (this._numbers.filter((c) => c).length === this.length) {\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value: this._numbers.join(''),\n      });\n    }\n    // console.log(this._numbers);\n    // if (this._numbers.filter(c => c).length === this.length) {\n    //   this.setState('success');\n    //   this.onCompleted.emit({\n    //     component: AXOtpComponent,\n    //     value: this._numbers.join(''),\n    //   });\n    // } else {\n    //   this.setState('error');\n    // }\n\n    // this.value = '124';\n  }\n  onKeyDown(event: KeyboardEvent, i: number) {\n    const input: any[] = this.elementRef.nativeElement.querySelectorAll('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        input[i].value = '';\n        if (input[i - 1]) {\n          input[i - 1].focus();\n          event.preventDefault();\n        }\n        this._numbers[i] = undefined;\n        break;\n      case 'ArrowRight':\n        if (input[i + 1]) {\n          input[i + 1].focus();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (input[i - 1]) {\n          input[i - 1].focus();\n        }\n        break;\n      case 'Home':\n        input[0].focus();\n        break;\n      case 'End':\n        input[this.length - 1].focus();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n  onPaste(event: any) {\n    let paste = event.clipboardData.getData('text');\n    const input: any[] = this.elementRef.nativeElement.querySelectorAll('.ax-input');\n    input[input.length - 1].focus();\n    this._numbers = [];\n    for (let i = 0; i < paste.length; i++) {\n      this._numbers[i] = paste[i];\n    }\n    console.log(this._numbers);\n    console.log(paste);\n  }\n}\n","<div class=\"ax-otp-input-container ax-editor-container\" [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input class=\"ax-input\" type=\"number\" [value]=\"_numbers[i]\" (input)=\"onInput($event, i)\" (keydown)=\"onKeyDown($event, i)\" maxlength=\"1\" [disabled]=\"disabled\" [readonly]=\"readonly\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../libs/components/otp/src/lib/otp.class.ts","../../../../libs/components/otp/src/lib/otp.component.ts","../../../../libs/components/otp/src/lib/otp.component.html","../../../../libs/components/otp/src/lib/otp.module.ts","../../../../libs/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/components/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n  value: string;\n}\n","import { MXValueComponent } from '@acorex/components/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.scss'],\n  inputs: ['state', 'disabled'],\n  outputs: ['stateChange', 'disabledChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXOtpComponent extends MXValueComponent<string> implements OnInit, AfterViewInit {\n  @Input() length = 4;\n  inputs: number[] = [];\n\n  @Output() onCompleted: EventEmitter<AXOtpCompletedEvent> = new EventEmitter<AXOtpCompletedEvent>();\n\n  protected _numbers: number[] = [];\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this.inputs = Array(this.length)\n      .fill(1)\n      .map((x, i) => i);\n  }\n\n  override ngAfterViewInit(): void {\n    this.getHostElement().querySelector<HTMLInputElement>('.ax-input').focus();\n  }\n\n  onInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const numberRegex = /^\\d+$/;\n    if (!numberRegex.test(event.target.value)) {\n      event.target.value = '';\n      return;\n    }\n    if (event.target.value.length > 1) {\n      const currentValue = event.target.value;\n      event.target.value = '';\n      event.target.value = currentValue.slice(-1);\n    }\n    if (inputs[i + 1]) {\n      inputs[i + 1].select();\n    }\n    this._numbers[i] = event.target.value;\n    if (this._numbers.filter((c) => c).length === this.length) {\n      this.setState('success');\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value: this._numbers.join(''),\n      });\n    }\n  }\n\n  onKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n          event.preventDefault();\n        }\n        this._numbers[i] = NaN;\n        break;\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n        }\n        break;\n      case 'Home':\n        inputs[0].focus();\n        break;\n      case 'End':\n        inputs[this.length - 1].select();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n  onPaste(event: any) {\n    const data = event.clipboardData.getData('text');\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[inputs.length - 1].focus();\n    this._numbers = [];\n    for (let i = 0; i < data.length; i++) {\n      this._numbers[i] = data[i];\n    }\n  }\n\n  onClick(event: any, i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[i].select();\n  }\n}\n","<div\n  class=\"ax-otp-input-container ax-editor-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"onPaste($event)\"\n>\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      maxlength=\"1\"\n      [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"onClick($event, i)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-page.mjs

@@ -1,21 +1,23 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Inject, Output, Input, ViewChild, NgModule } from '@angular/core';
+import { inject, EventEmitter, Injectable, ViewChild, Output, Input, Inject, NgModule } from '@angular/core';
+import { MXBaseComponent } from '@acorex/components/common';
+import '@acorex/components/decorators';
 import { AXLoadingService } from '@acorex/components/loading';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import { AXDecoratorFooterComponent } from '@acorex/components/decorators';
 
-class AXPageComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, _loadingService) {
-        super(elementRef, cdr);
-        this._loadingService = _loadingService;
+class AXBasePageComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._loadingService = inject(AXLoadingService);
         this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
+        this._isPopup = false;
+        this.onClosed = new EventEmitter();
     }
     get isLoading() {
         return this._isLoading;
     }
     set isLoading(v) {
-        this._setOption({
+        this.setOption({
             name: 'isLoading',
             value: v,
             afterCallback: () => {
@@ -24,77 +26,74 @@ class AXPageComponent extends AXBaseComponentMixin {
                     this._loadingId = 0;
                 }
                 if (v) {
-                    this._loadingId = this._loadingService.show(this._getHostElement());
+                    this._loadingId = this._loadingService.show({ location: this.getHostElement().closest('.ax-loading-container') });
                 }
-                this._cdr.markForCheck();
+                this.cdr.markForCheck();
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageComponent }); }
+    get isPopup() {
+        return this._isPopup;
+    }
+    close(data) {
+        this.onClosed.emit({
+            component: this,
+            data: data,
+        });
+    }
+    onClosing(e) { }
+    ngOnDestroy() {
+        this.onClosed.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXBasePageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [AXLoadingService]
-                }] }]; }, propDecorators: { isLoadingChange: [{
+        }], propDecorators: { footer: [{
+                type: ViewChild,
+                args: ["ax-footer", { static: true }]
+            }], isLoadingChange: [{
                 type: Output
             }], isLoading: [{
                 type: Input
             }] } });
 
-class AXBasePageComponent extends AXBaseComponentMixin {
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+class AXPageComponent extends MXBaseComponent {
+    constructor(_loadingService) {
+        super();
+        this._loadingService = _loadingService;
         this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
-        this._isPopup = false;
-        this.onClosed = new EventEmitter();
     }
     get isLoading() {
         return this._isLoading;
     }
     set isLoading(v) {
-        this._setOption({
+        this.setOption({
             name: 'isLoading',
             value: v,
             afterCallback: () => {
-                if (this.pageContainer) {
-                    this.pageContainer.isLoading = this.isLoading;
+                if (this._loadingId && !v) {
+                    this._loadingService.hide(this._loadingId);
+                    this._loadingId = 0;
                 }
-                this._cdr.markForCheck();
+                if (v) {
+                    this._loadingId = this._loadingService.show(this.getHostElement());
+                }
+                this.cdr.markForCheck();
             },
         });
     }
-    get isPopup() {
-        return this._isPopup;
-    }
-    close(data) {
-        this.onClosed.emit({
-            component: this,
-            data: data,
-        });
-    }
-    onClosing(e) { }
-    ngOnDestroy() {
-        this.onClosed.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXBasePageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXBasePageComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXBasePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pageContainer: [{
-                type: ViewChild,
-                args: [AXPageComponent, { static: true }]
-            }], footer: [{
-                type: ViewChild,
-                args: [AXDecoratorFooterComponent, { static: true }]
-            }], isLoadingChange: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AXLoadingService]
+                }] }]; }, propDecorators: { isLoadingChange: [{
                 type: Output
             }], isLoading: [{
                 type: Input
@@ -102,11 +101,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
 
 // TODO: Module is empty!?
 class AXPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXPageModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],

package/fesm2022/acorex-components-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-page.mjs","sources":["../../../../libs/components/page/src/lib/page.component.ts","../../../../libs/components/page/src/lib/base-page.class.ts","../../../../libs/components/page/src/lib/page.module.ts","../../../../libs/components/page/src/acorex-components-page.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Injectable,\n  Input,\n  Output,\n} from '@angular/core';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { AXBaseComponentMixin } from '@acorex/components/mixin';\n\n@Injectable()\nexport abstract class AXPageComponent extends AXBaseComponentMixin {\n  constructor(\n    elementRef: ElementRef,\n    cdr: ChangeDetectorRef,\n    @Inject(AXLoadingService) private _loadingService\n  ) {\n    super(elementRef, cdr);\n  }\n\n  private _loadingId: number;\n\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  private _isLoading: boolean = false;\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this._setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this._loadingId && !v) {\n          this._loadingService.hide(this._loadingId);\n          this._loadingId = 0;\n        }\n        if (v) {\n          this._loadingId = this._loadingService.show(this._getHostElement());\n        }\n        this._cdr.markForCheck();\n      },\n    });\n  }\n}\n","import {\n  ChangeDetectorRef,\n  ElementRef,\n  EventEmitter,\n  Injectable,\n  Input,\n  Output,\n  ViewChild,\n} from '@angular/core';\nimport { AXPageComponent } from './page.component';\nimport { AXDecoratorFooterComponent } from '@acorex/components/decorators';\nimport { AXBaseComponentMixin } from '@acorex/components/mixin';\nimport { AXComponentCloseEvent, AXComponentClosing } from '@acorex/components/common';\n\n@Injectable()\nexport class AXBasePageComponent extends AXBaseComponentMixin {\n  /**\n   *  @ignore\n   */\n  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {\n    super(elementRef, cdr);\n  }\n\n  @ViewChild(AXPageComponent, { static: true })\n  private pageContainer: AXPageComponent;\n\n  @ViewChild(AXDecoratorFooterComponent, { static: true })\n  footer: AXDecoratorFooterComponent;\n\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  private _isLoading: boolean = false;\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this._setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this.pageContainer) {\n          this.pageContainer.isLoading = this.isLoading;\n        }\n        this._cdr.markForCheck();\n      },\n    });\n  }\n\n  private _isPopup: boolean = false;\n  public get isPopup(): boolean {\n    return this._isPopup;\n  }\n\n  onClosed: EventEmitter<AXComponentCloseEvent> = new EventEmitter<AXComponentCloseEvent>();\n\n  close(data?: any) {\n    this.onClosed.emit({\n      component: this,\n      data: data,\n    });\n  }\n\n  onClosing(e: AXComponentClosing): void | Promise<void> {}\n\n  override ngOnDestroy() {\n    this.onClosed.unsubscribe();\n  }\n}\n","import { NgModule } from '@angular/core';\n\n\n// TODO: Module is empty!?\n@NgModule({\n    imports: [],\n    exports: [],\n    declarations: [],\n    providers: [],\n})\nexport class AXPageModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-page.mjs","sources":["../../../../libs/components/page/src/lib/base-page.class.ts","../../../../libs/components/page/src/lib/page.component.ts","../../../../libs/components/page/src/lib/page.module.ts","../../../../libs/components/page/src/acorex-components-page.ts"],"sourcesContent":["import {\n  EventEmitter,\n  Injectable,\n  Input,\n  Output,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport { AXComponentCloseEvent, AXComponentClosing, MXBaseComponent } from '@acorex/components/common';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingService } from '@acorex/components/loading';\n\n@Injectable()\nexport class AXBasePageComponent extends MXBaseComponent {\n\n  private _loadingId: number;\n  private _loadingService = inject(AXLoadingService);\n\n  @ViewChild(\"ax-footer\", { static: true })\n  footer: AXDecoratorGenericComponent;\n\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  private _isLoading = false;\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this._loadingId && !v) {\n          this._loadingService.hide(this._loadingId);\n          this._loadingId = 0;\n        }\n        if (v) {\n          this._loadingId = this._loadingService.show({ location: this.getHostElement().closest('.ax-loading-container') });\n        }\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  private _isPopup = false;\n  public get isPopup(): boolean {\n    return this._isPopup;\n  }\n\n  onClosed: EventEmitter<AXComponentCloseEvent> = new EventEmitter<AXComponentCloseEvent>();\n\n  close(data?: unknown) {\n    this.onClosed.emit({\n      component: this,\n      data: data,\n    });\n  }\n\n  onClosing(e: AXComponentClosing): void | Promise<void> { }\n\n  ngOnDestroy() {\n    this.onClosed.unsubscribe();\n  }\n}\n","import {\n  EventEmitter,\n  Inject,\n  Injectable,\n  Input,\n  Output,\n} from '@angular/core';\nimport { AXLoadingService } from '@acorex/components/loading';\nimport { MXBaseComponent } from '@acorex/components/common';\n\n@Injectable()\nexport abstract class AXPageComponent extends MXBaseComponent {\n  constructor(\n    @Inject(AXLoadingService) private _loadingService\n  ) {\n    super();\n  }\n\n  private _loadingId: number;\n\n  @Output()\n  isLoadingChange = new EventEmitter<boolean>();\n\n  private _isLoading: boolean = false;\n  @Input()\n  public get isLoading(): boolean {\n    return this._isLoading;\n  }\n  public set isLoading(v: boolean) {\n    this.setOption({\n      name: 'isLoading',\n      value: v,\n      afterCallback: () => {\n        if (this._loadingId && !v) {\n          this._loadingService.hide(this._loadingId);\n          this._loadingId = 0;\n        }\n        if (v) {\n          this._loadingId = this._loadingService.show(this.getHostElement());\n        }\n        this.cdr.markForCheck();\n      },\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\n\n\n// TODO: Module is empty!?\n@NgModule({\n    imports: [],\n    exports: [],\n    declarations: [],\n    providers: [],\n})\nexport class AXPageModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-password-box.mjs

@@ -1,10 +1,10 @@
-import { AXBaseTextBoxMixin } from '@acorex/components/mixin';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, NgModule } from '@angular/core';
+import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, NgModule } from '@angular/core';
+import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXClearableComponent } from '@acorex/components/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
@@ -13,21 +13,19 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
  *
  * @category Components
  */
-class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
-    /**
-     *  @ignore
-     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+class AXPasswordBoxComponent extends MXInputBaseValueComponent {
+    constructor() {
+        super(...arguments);
         this._type = 'password';
         this._icon = 'ax-icon-visibility';
+        this.autoComplete = 'one-time-code';
         /**
          *  A flag for showing or hiding password button.
          */
         this.showToggleButton = true;
     }
-    focus() {
-        this.input.nativeElement.focus();
+    _handleModelChange(value) {
+        this.commitValue(value, true);
     }
     toggleType() {
         if (this._type === 'password') {
@@ -39,31 +37,44 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
             this._icon = 'ax-icon-visibility';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", value: "value", name: "name", checked: "checked", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-password-box ax-editor-container" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\n\n<ng-content select=\"ax-suffix\">\n\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>\n<button class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", autoComplete: "autoComplete", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { classAttribute: "ax-editor-container" }, providers: [
+            { provide: AXComponent, useExisting: AXPasswordBoxComponent },
+            { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
+            { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXPasswordBoxComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: [
                         'disabled',
                         'readonly',
                         'tabIndex',
-                        'cssClass',
-                        'size',
                         'placeholder',
-                        'maxLength',
-                        'allowNull',
-                        'type',
-                        'autoComplete',
-                        'readonly',
-                        'allowNull',
                         'value',
+                        'state',
                         'name',
-                        'checked',
-                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-password-box ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\">\n\n<ng-content select=\"ax-suffix\">\n\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>\n<button class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
+                        'id'
+                    ], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, providers: [
+                        { provide: AXComponent, useExisting: AXPasswordBoxComponent },
+                        { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
+                        { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXPasswordBoxComponent),
+                            multi: true
+                        }
+                    ], template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>" }]
+        }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
+            }], autoComplete: [{
+                type: Input
             }], showToggleButton: [{
                 type: Input
             }] } });
@@ -76,14 +87,14 @@ const MODULES = [
     AXDecoratorModule,
 ];
 class AXPasswordBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule], exports: [AXPasswordBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],