@acorex/components 21.0.2-next.4 → 21.0.2-next.41

package/fesm2022/acorex-components-otp.mjs

@@ -17,11 +17,18 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     /** @ignore */
     constructor() {
         super();
-        this.type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls how entered digits are displayed in each input.
+         * - `number`: shows the actual digit
+         * - `dot`: shows a dot character
+         * - `star`: shows an asterisk character
+         */
+        this.mode = input('number', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
          * Holds the length of the OTP input field.
          */
-        this.length = model(...(ngDevMode ? [undefined, { debugName: "length" }] : []));
+        this.length = model(...(ngDevMode ? [undefined, { debugName: "length" }] : /* istanbul ignore next */ []));
         /**
          * @event
          * Emits an event when the OTP input is completed.
@@ -40,7 +47,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             return Array(this.length())
                 .fill(1)
                 .map((x, i) => i);
-        }, ...(ngDevMode ? [{ debugName: "inputs" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
         afterNextRender(() => {
             this.calcFontSize();
             this.mapValueToInputs();
@@ -64,12 +71,12 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     reset() {
         this.inputValues = [];
         for (let index = 0; index < this.length(); index++) {
-            this.inputValues.push(' ');
+            this.inputValues.push('');
         }
     }
     /** @ignore */
     _handleOnInput(event, i) {
-        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
         if (this.type() === 'number') {
             const numberRegex = /^\d+$/;
             if (!numberRegex.test(event.target.value)) {
@@ -96,14 +103,31 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
         return value;
     }
     /** @ignore */
+    displayValue(i) {
+        const val = this.inputValues[i];
+        return val && val.trim() ? val : '';
+    }
+    /** @ignore */
+    isMasked() {
+        return this.mode() !== 'number';
+    }
+    /** @ignore */
+    hasValue(i) {
+        return !!this.displayValue(i);
+    }
+    /** @ignore */
+    _maskCharacter() {
+        return this.mode() === 'dot' ? '•' : '*';
+    }
+    /** @ignore */
     calcFontSize() {
-        const size = this.getHostElement().querySelector('.ax-input')?.clientWidth;
+        const size = this.getHostElement().querySelector('ax-otp .ax-input')?.clientWidth;
         const fontSize = size * 0.5;
         this.getHostElement().style.setProperty('--font-size', fontSize + 'px');
     }
     /** @ignore */
     _handleOnKeyDown(event, i) {
-        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
         switch (event.key) {
             case 'Backspace':
                 if (this.readonly || this.disabled)
@@ -113,7 +137,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
                     inputs[i - 1].focus();
                     event.preventDefault();
                 }
-                this.inputValues[i] = ' ';
+                this.inputValues[i] = '';
                 this.commitValue(this.inputValues.join(''), true);
                 inputs[i].value = '';
                 break;
@@ -145,7 +169,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     }
     /** @ignore */
     _handleOnPaste(event) {
-        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
         const data = event.clipboardData.getData('text');
         const isNumber = /\d+/;
         if (isNumber.test(data)) {
@@ -160,14 +184,14 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     }
     /** @ignore */
     _handleFocus(i) {
-        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const inputs = this.getHostElement().querySelectorAll('ax-otp .ax-input');
         inputs[i].select();
     }
     /** @ignore */
     _emitOnComplete() {
         // TODO: Check Value delay
         setTimeout(() => {
-            const filteredValues = this.inputValues.filter((c) => c && c !== ' ');
+            const filteredValues = this.inputValues.filter((c) => !!c);
             const value = filteredValues.join('').trim();
             this.commitValue(value, true);
             this.onCompleted.emit({
@@ -177,8 +201,8 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXOtpComponent, isStandalone: true, selector: "ax-otp", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", length: "lengthChange", onCompleted: "onCompleted" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXOtpComponent),
@@ -190,9 +214,9 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             },
             { provide: AXValuableComponent, useExisting: AXOtpComponent },
             { provide: AXFocusableComponent, useExisting: AXOtpComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:calc(var(--spacing,.25rem) * 0)!important;display:grid!important}ax-otp input{padding:calc(var(--spacing,.25rem) * 0);text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <div\n      class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    >\n      <input\n        [name]=\"name\"\n        [type]=\"type()\"\n        maxlength=\"1\"\n        class=\"ax-input\"\n        [class.ax-otp-masked]=\"isMasked()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (focus)=\"_handleFocus(i)\"\n        [ngModel]=\"displayValue(i)\"\n        [attr.disabled]=\"disabled\"\n        (input)=\"_handleOnInput($event, i)\"\n        [class.ax-state-disabled]=\"disabled\"\n        (keydown)=\"_handleOnKeyDown($event, i)\"\n        [class.ax-state-error]=\"state === 'error'\"\n        [class.ax-state-success]=\"state === 'success'\"\n      />\n      @if (isMasked() && hasValue(i)) {\n        <span\n          class=\"ax-otp-mask\"\n          [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n          [class.ax-otp-mask-star]=\"mode() === 'star'\"\n          aria-hidden=\"true\"\n        >{{ _maskCharacter() }}</span>\n      }\n    </div>\n  }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{gap:.5rem;display:grid;position:relative}ax-otp .ax-otp-input-cell{display:block;position:relative}ax-otp .ax-otp-input-cell.ax-editor-container{height:auto;min-height:0;overflow:initial;padding:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask{font-size:var(--font-size,2rem);pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask.ax-otp-mask-star{font-size:calc(var(--font-size,2rem) * .85);transform:translateY(.12em)}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input{aspect-ratio:1;text-align:center;width:100%;font-size:var(--font-size,2rem);padding:0;overflow:hidden}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked{color:#0000;caret-color:#0000}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked::selection{color:#0000;background:0 0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]{-webkit-appearance:textfield;appearance:textfield}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.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: "21.1.3", ngImport: i0, type: AXOtpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly', 'look', 'name'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -206,15 +230,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         },
                         { provide: AXValuableComponent, useExisting: AXOtpComponent },
                         { provide: AXFocusableComponent, useExisting: AXOtpComponent },
-                    ], imports: [NgStyle, FormsModule], template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}ax-otp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}ax-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp input[type=number]{-moz-appearance:textfield}ax-otp .ax-editor-container{padding-inline:calc(var(--spacing,.25rem) * 0)!important;display:grid!important}ax-otp input{padding:calc(var(--spacing,.25rem) * 0);text-align:center;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}:is(ax-otp .ax-solid,ax-otp .ax-outline) input{border-color:var(--color-border-default);text-align:center}:is(ax-otp .ax-solid,ax-otp .ax-outline) input:not(:last-child){border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], onCompleted: [{ type: i0.Output, args: ["onCompleted"] }] } });
+                    ], imports: [NgStyle, FormsModule], template: "<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <div\n      class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    >\n      <input\n        [name]=\"name\"\n        [type]=\"type()\"\n        maxlength=\"1\"\n        class=\"ax-input\"\n        [class.ax-otp-masked]=\"isMasked()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (focus)=\"_handleFocus(i)\"\n        [ngModel]=\"displayValue(i)\"\n        [attr.disabled]=\"disabled\"\n        (input)=\"_handleOnInput($event, i)\"\n        [class.ax-state-disabled]=\"disabled\"\n        (keydown)=\"_handleOnKeyDown($event, i)\"\n        [class.ax-state-error]=\"state === 'error'\"\n        [class.ax-state-success]=\"state === 'success'\"\n      />\n      @if (isMasked() && hasValue(i)) {\n        <span\n          class=\"ax-otp-mask\"\n          [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n          [class.ax-otp-mask-star]=\"mode() === 'star'\"\n          aria-hidden=\"true\"\n        >{{ _maskCharacter() }}</span>\n      }\n    </div>\n  }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{gap:.5rem;display:grid;position:relative}ax-otp .ax-otp-input-cell{display:block;position:relative}ax-otp .ax-otp-input-cell.ax-editor-container{height:auto;min-height:0;overflow:initial;padding:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask{font-size:var(--font-size,2rem);pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;top:0;right:0;bottom:0;left:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-otp-mask.ax-otp-mask-star{font-size:calc(var(--font-size,2rem) * .85);transform:translateY(.12em)}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input{aspect-ratio:1;text-align:center;width:100%;font-size:var(--font-size,2rem);padding:0;overflow:hidden}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked{color:#0000;caret-color:#0000}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input.ax-otp-masked::selection{color:#0000;background:0 0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]{-webkit-appearance:textfield;appearance:textfield}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}ax-otp .ax-otp-input-cell.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }, { type: i0.Output, args: ["lengthChange"] }], onCompleted: [{ type: i0.Output, args: ["onCompleted"] }] } });
 
 class AXOtpModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent], exports: [AXOtpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent], exports: [AXOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, imports: [AXOtpComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXOtpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXOtpModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXOtpComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-otp.mjs","sources":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n  value: string;\n  isCompleted: boolean;\n}\n","import {\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXLookComponent,\n  MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.compiled.css'],\n  inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n  outputs: ['stateChange', 'disabledChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXOtpComponent),\n      multi: true,\n    },\n    {\n      provide: AXComponent,\n      useExisting: AXOtpComponent,\n    },\n    { provide: AXValuableComponent, useExisting: AXOtpComponent },\n    { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n  ],\n  imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n  type = input<'number' | 'text'>('number');\n\n  /**\n   * Holds the length of the OTP input field.\n   */\n  length = model<number>();\n\n  /**\n   * @event\n   * Emits an event when the OTP input is completed.\n   */\n  onCompleted = output<AXOtpCompletedEvent>();\n\n  /**\n   * Stores the values entered in the OTP input fields.\n   */\n  protected inputValues: string[] = [];\n\n  /**\n   * Holds the input values as a signal.\n   */\n  protected inputs = computed(() => {\n    this.calcFontSize();\n    //\n    return Array(this.length())\n      .fill(1)\n      .map((x, i) => i);\n  });\n\n  /** @ignore */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.calcFontSize();\n      this.mapValueToInputs();\n    });\n  }\n\n  /**\n   * Converts the value string to input values and updates the inputValues array.\n   */\n  mapValueToInputs() {\n    this._emitOnComplete();\n    if (!this.value) {\n      return;\n    }\n    this.value.split('').map((v, i) => {\n      this.inputValues[i] = v;\n    });\n  }\n\n  /**\n   * Resets the input values to an empty array.\n   */\n  override reset() {\n    this.inputValues = [];\n    for (let index = 0; index < this.length(); index++) {\n      this.inputValues.push(' ');\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    if (this.type() === 'number') {\n      const numberRegex = /^\\d+$/;\n      if (!numberRegex.test(event.target.value)) {\n        event.target.value = '';\n        return;\n      }\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.inputValues[i] = event.target.value;\n    this._emitOnComplete();\n  }\n\n  /** @ignore */\n  override internalSetValue(value: any): string {\n    if (value) {\n      this.inputValues = value?.toString().split('') as any;\n    }\n    return value;\n  }\n\n  /** @ignore */\n  protected calcFontSize() {\n    const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n    const fontSize = size * 0.5;\n    this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n  }\n\n  /** @ignore */\n  protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        if (this.readonly || this.disabled) return;\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].focus();\n          event.preventDefault();\n        }\n        this.inputValues[i] = ' ';\n        this.commitValue(this.inputValues.join(''), true);\n        inputs[i].value = '';\n        break;\n\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          event.preventDefault();\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          event.preventDefault();\n          inputs[i - 1].select();\n        }\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        inputs[0].select();\n        break;\n\n      case 'End':\n        event.preventDefault();\n        inputs[this.length() - 1].select();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnPaste(event: ClipboardEvent) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const data = event.clipboardData.getData('text');\n    const isNumber = /\\d+/;\n\n    if (isNumber.test(data)) {\n      inputs[inputs.length - 1].focus();\n      this.inputValues = [];\n      for (let i = 0; i < inputs.length; i++) {\n        this.inputValues[i] = data[i];\n      }\n      this._emitOnComplete();\n    }\n\n    event.preventDefault();\n  }\n\n  /** @ignore */\n  protected _handleFocus(i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[i].select();\n  }\n\n  /** @ignore */\n  protected _emitOnComplete() {\n    // TODO: Check Value delay\n    setTimeout(() => {\n      const filteredValues = this.inputValues.filter((c) => c && c !== ' ');\n      const value = filteredValues.join('').trim();\n      this.commitValue(value, true);\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value,\n        isCompleted: filteredValues.length === this.length(),\n      });\n    });\n  }\n}\n","<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container ax-editor-container ax-default {{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      [name]=\"name\"\n      [type]=\"type()\"\n      maxlength=\"1\"\n      class=\"ax-input\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      [ngModel]=\"inputValues[i]\"\n      [attr.disabled]=\"disabled\"\n      (input)=\"_handleOnInput($event, i)\"\n      [class.ax-state-disabled]=\"disabled\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    />\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n  imports: [AXOtpComponent],\n  exports: [AXOtpComponent],\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":["../../../../packages/components/otp/src/lib/otp.class.ts","../../../../packages/components/otp/src/lib/otp.component.ts","../../../../packages/components/otp/src/lib/otp.component.html","../../../../packages/components/otp/src/lib/otp.module.ts","../../../../packages/components/otp/src/acorex-components-otp.ts"],"sourcesContent":["import { AXEvent } from '@acorex/cdk/common';\n\nexport type AXOtpMode = 'number' | 'dot' | 'star';\n\nexport class AXOtpCompletedEvent extends AXEvent {\n  value: string;\n  isCompleted: boolean;\n}\n","import {\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXLookComponent,\n  MXValueComponent,\n} from '@acorex/cdk/common';\nimport { NgStyle } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent, AXOtpMode } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.compiled.css'],\n  inputs: ['state', 'disabled', 'readonly', 'look', 'name'],\n  outputs: ['stateChange', 'disabledChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXOtpComponent),\n      multi: true,\n    },\n    {\n      provide: AXComponent,\n      useExisting: AXOtpComponent,\n    },\n    { provide: AXValuableComponent, useExisting: AXOtpComponent },\n    { provide: AXFocusableComponent, useExisting: AXOtpComponent },\n  ],\n  imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n  type = input<'number' | 'text'>('number');\n\n  /**\n   * Controls how entered digits are displayed in each input.\n   * - `number`: shows the actual digit\n   * - `dot`: shows a dot character\n   * - `star`: shows an asterisk character\n   */\n  mode = input<AXOtpMode>('number');\n\n  /**\n   * Holds the length of the OTP input field.\n   */\n  length = model<number>();\n\n  /**\n   * @event\n   * Emits an event when the OTP input is completed.\n   */\n  onCompleted = output<AXOtpCompletedEvent>();\n\n  /**\n   * Stores the values entered in the OTP input fields.\n   */\n  protected inputValues: string[] = [];\n\n  /**\n   * Holds the input values as a signal.\n   */\n  protected inputs = computed(() => {\n    this.calcFontSize();\n    //\n    return Array(this.length())\n      .fill(1)\n      .map((x, i) => i);\n  });\n\n  /** @ignore */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.calcFontSize();\n      this.mapValueToInputs();\n    });\n  }\n\n  /**\n   * Converts the value string to input values and updates the inputValues array.\n   */\n  mapValueToInputs() {\n    this._emitOnComplete();\n    if (!this.value) {\n      return;\n    }\n    this.value.split('').map((v, i) => {\n      this.inputValues[i] = v;\n    });\n  }\n\n  /**\n   * Resets the input values to an empty array.\n   */\n  override reset() {\n    this.inputValues = [];\n    for (let index = 0; index < this.length(); index++) {\n      this.inputValues.push('');\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n    if (this.type() === 'number') {\n      const numberRegex = /^\\d+$/;\n      if (!numberRegex.test(event.target.value)) {\n        event.target.value = '';\n        return;\n      }\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.inputValues[i] = event.target.value;\n    this._emitOnComplete();\n  }\n\n  /** @ignore */\n  override internalSetValue(value: any): string {\n    if (value) {\n      this.inputValues = value?.toString().split('') as any;\n    }\n    return value;\n  }\n\n  /** @ignore */\n  protected displayValue(i: number): string {\n    const val = this.inputValues[i];\n    return val && val.trim() ? val : '';\n  }\n\n  /** @ignore */\n  protected isMasked(): boolean {\n    return this.mode() !== 'number';\n  }\n\n  /** @ignore */\n  protected hasValue(i: number): boolean {\n    return !!this.displayValue(i);\n  }\n\n  /** @ignore */\n  protected _maskCharacter(): string {\n    return this.mode() === 'dot' ? '•' : '*';\n  }\n\n  /** @ignore */\n  protected calcFontSize() {\n    const size = this.getHostElement().querySelector<HTMLInputElement>('ax-otp .ax-input')?.clientWidth;\n    const fontSize = size * 0.5;\n    this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n  }\n\n  /** @ignore */\n  protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        if (this.readonly || this.disabled) return;\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].focus();\n          event.preventDefault();\n        }\n        this.inputValues[i] = '';\n        this.commitValue(this.inputValues.join(''), true);\n        inputs[i].value = '';\n        break;\n\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          event.preventDefault();\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          event.preventDefault();\n          inputs[i - 1].select();\n        }\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        inputs[0].select();\n        break;\n\n      case 'End':\n        event.preventDefault();\n        inputs[this.length() - 1].select();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnPaste(event: ClipboardEvent) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n    const data = event.clipboardData.getData('text');\n    const isNumber = /\\d+/;\n\n    if (isNumber.test(data)) {\n      inputs[inputs.length - 1].focus();\n      this.inputValues = [];\n      for (let i = 0; i < inputs.length; i++) {\n        this.inputValues[i] = data[i];\n      }\n      this._emitOnComplete();\n    }\n\n    event.preventDefault();\n  }\n\n  /** @ignore */\n  protected _handleFocus(i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('ax-otp .ax-input');\n    inputs[i].select();\n  }\n\n  /** @ignore */\n  protected _emitOnComplete() {\n    // TODO: Check Value delay\n    setTimeout(() => {\n      const filteredValues = this.inputValues.filter((c) => !!c);\n      const value = filteredValues.join('').trim();\n      this.commitValue(value, true);\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value,\n        isCompleted: filteredValues.length === this.length(),\n      });\n    });\n  }\n}\n","<div\n  dir=\"ltr\"\n  (paste)=\"_handleOnPaste($event)\"\n  class=\"ax-otp-input-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <div\n      class=\"ax-otp-input-cell ax-editor-container ax-default {{ look }}\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-error]=\"state === 'error'\"\n      [class.ax-state-success]=\"state === 'success'\"\n    >\n      <input\n        [name]=\"name\"\n        [type]=\"type()\"\n        maxlength=\"1\"\n        class=\"ax-input\"\n        [class.ax-otp-masked]=\"isMasked()\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (focus)=\"_handleFocus(i)\"\n        [ngModel]=\"displayValue(i)\"\n        [attr.disabled]=\"disabled\"\n        (input)=\"_handleOnInput($event, i)\"\n        [class.ax-state-disabled]=\"disabled\"\n        (keydown)=\"_handleOnKeyDown($event, i)\"\n        [class.ax-state-error]=\"state === 'error'\"\n        [class.ax-state-success]=\"state === 'success'\"\n      />\n      @if (isMasked() && hasValue(i)) {\n        <span\n          class=\"ax-otp-mask\"\n          [class.ax-otp-mask-dot]=\"mode() === 'dot'\"\n          [class.ax-otp-mask-star]=\"mode() === 'star'\"\n          aria-hidden=\"true\"\n        >{{ _maskCharacter() }}</span>\n      }\n    </div>\n  }\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n<div class=\"ax-error-container\"></div>\n","import { NgModule } from '@angular/core';\nimport { AXOtpComponent } from './otp.component';\n\n@NgModule({\n  imports: [AXOtpComponent],\n  exports: [AXOtpComponent],\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

@@ -47,10 +47,10 @@ class AXBasePageComponent extends MXBaseComponent {
     ngOnDestroy() {
         this.onClosed.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBasePageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
         }], propDecorators: { footer: [{
                 type: ViewChild,
@@ -101,10 +101,10 @@ class AXPageComponent extends MXBaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -117,11 +117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 // TODO: Module is empty!?
 class AXPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],