npm - @acorex/components - Versions diffs - 19.10.9 → 19.10.11 - Mend

@acorex/components 19.10.9 → 19.10.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (498) hide show

package/fesm2022/acorex-components-otp.mjs CHANGED Viewed

@@ -1,11 +1,10 @@
 import { AXEvent, MXValueComponent, MXLookComponent } from '@acorex/components/common';
+import { NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { model, output, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 class AXOtpCompletedEvent extends AXEvent {
 }
@@ -166,16 +165,16 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXOtpComponent, isStandalone: false, 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 }, 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: "19.1.8", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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 }, 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),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem;position:relative}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500));border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-500));border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-50));color:rgba(var(--ax-sys-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem);padding:0}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-lighter-surface));border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-lighter-surface));border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-lighter-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem;position:relative}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500));border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-500));border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-50));color:rgba(var(--ax-sys-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem);padding:0}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-lighter-surface));border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-lighter-surface));border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-lighter-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "19.0.3", ngImport: i0, type: AXOtpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOtpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly', 'look'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -183,21 +182,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: forwardRef(() => AXOtpComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem;position:relative}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500));border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-500));border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-50));color:rgba(var(--ax-sys-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem);padding:0}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-lighter-surface));border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-lighter-surface));border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-lighter-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}\n"] }]
+                    ], imports: [NgStyle, FormsModule], template: "<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem;position:relative}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500));border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-500));border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-50));color:rgba(var(--ax-sys-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem);padding:0}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-lighter-surface));border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error:focus-within,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-sys-color-danger-lighter-surface));border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-dark ax-otp .ax-otp-input-container.ax-editor-container.ax-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input:focus-within{border-color:rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-sys-color-danger-lighter-surface));color:rgba(var(--ax-sys-color-on-danger-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-danger-lighter-surface))}.ax-dark ax-otp .ax-otp-input-container.ax-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-sys-color-danger-lighter-surface))}\n"] }]
         }], ctorParameters: () => [] });
 const COMPONENT = [AXOtpComponent];
 const MODULES = [CommonModule, FormsModule];
 class AXOtpModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXOtpModule, declarations: [AXOtpComponent], imports: [CommonModule, FormsModule], exports: [AXOtpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXOtpModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXOtpModule, imports: [CommonModule, FormsModule, AXOtpComponent], exports: [AXOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOtpModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXOtpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOtpModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
+                    imports: [...MODULES, ...COMPONENT],
                     exports: [...COMPONENT],
                     providers: [],
                 }]

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

	@@ -1 +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 isCompleted: boolean;\n}\n","import { MXLookComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n afterNextRender,\n computed,\n forwardRef,\n model,\n output,\n} from '@angular/core';\nimport { 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.scss'],\n inputs: ['state', 'disabled', 'readonly', 'look'],\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 standalone: false,\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\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 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.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 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 break;\n\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\n case 'Home':\n inputs[0].select();\n break;\n\n case 'End':\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 this.commitValue(this.inputValues.join(''), true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value: this.inputValues.join(''),\n isCompleted: this.inputValues.filter((c) => c).length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n (paste)=\"_handleOnPaste($event)\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n class=\"ax-input\"\n type=\"number\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-success]=\"state === 'success'\"\n [class.ax-state-error]=\"state === 'error'\"\n maxlength=\"1\"\n [ngModel]=\"inputValues[i]\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n (input)=\"_handleOnInput($event, i)\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [attr.disabled]=\"disabled\"\n />\n }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule, FormsModule];\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":";;;;;;;;;AAEM,MAAO,mBAAoB,SAAQ,OAAO,CAAA;AAG/C;;ACUD;;;AAGG;AAkBG,MAAO,cAAe,SAAQ,OAAO,EAAC,gBAAwB,GAAE,eAAe,CAAC,CAAA;;AA6BpF,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AA7BT;;AAEG;QACH,IAAM,CAAA,MAAA,GAAG,KAAK,EAAU;AAExB;;;AAGG;QACH,IAAW,CAAA,WAAA,GAAG,MAAM,EAAuB;AAE3C;;AAEG;QACO,IAAW,CAAA,WAAA,GAAa,EAAE;AAEpC;;AAEG;AACO,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;YAC/B,IAAI,CAAC,YAAY,EAAE;;AAEnB,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;iBACvB,IAAI,CAAC,CAAC;iBACN,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AACrB,SAAC,CAAC;QAKA,eAAe,CAAC,MAAK;YACnB,IAAI,CAAC,YAAY,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC,CAAC;;AAGJ;;AAEG;IACH,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf;;AAEF,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAChC,YAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;AACzB,SAAC,CAAC;;AAGJ;;AAEG;IACM,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE;AAClD,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAKpB,cAAc,CAAC,KAAU,EAAE,CAAS,EAAA;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAmB,WAAW,CAAC;QACpF,MAAM,WAAW,GAAG,OAAO;AAC3B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;AACzC,YAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;YACvB;;QAEF,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACjC,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AACvC,YAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;AACvB,YAAA,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;AAE7C,QAAA,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;YACjB,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;;QAExB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,IAAI,CAAC,eAAe,EAAE;;;AAIf,IAAA,gBAAgB,CAAC,KAAU,EAAA;QAClC,IAAI,KAAK,EAAE;AACT,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAQ;;AAEvD,QAAA,OAAO,KAAK;;;IAIJ,YAAY,GAAA;AACpB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa,CAAmB,WAAW,CAAC,EAAE,WAAW;AAC5F,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG;AAC3B,QAAA,IAAI,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAC;;;IAI/D,gBAAgB,CAAC,KAAoB,EAAE,CAAS,EAAA;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAmB,WAAW,CAAC;AACpF,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;AACd,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACpB,gBAAA,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;oBACjB,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;oBACrB,KAAK,CAAC,cAAc,EAAE;;AAExB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG;AACzB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;gBACjD;AAEF,YAAA,KAAK,YAAY;AACf,gBAAA,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;oBACjB,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;;gBAExB;AAEF,YAAA,KAAK,WAAW;AACd,gBAAA,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;oBACjB,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;;gBAExB;AAEF,YAAA,KAAK,MAAM;AACT,gBAAA,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE;gBAClB;AAEF,YAAA,KAAK,KAAK;gBACR,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;gBAClC;AAEF,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB;;;;AAKI,IAAA,cAAc,CAAC,KAAqB,EAAA;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAmB,WAAW,CAAC;QACpF,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;QAChD,MAAM,QAAQ,GAAG,KAAK;AAEtB,QAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACvB,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;AACjC,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACtC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;;YAE/B,IAAI,CAAC,eAAe,EAAE;;QAGxB,KAAK,CAAC,cAAc,EAAE;;;AAId,IAAA,YAAY,CAAC,CAAC,EAAA;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAAmB,WAAW,CAAC;AACpF,QAAA,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE;;;IAIV,eAAe,GAAA;;QAEvB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;AACjD,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AACpB,gBAAA,SAAS,EAAE,cAAc;gBACzB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gBAChC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;AACxE,aAAA,CAAC;AACJ,SAAC,CAAC;;8GA1KO,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EATd,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,cAAc,CAAC;AAC7C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCH,uyBAwBA,EAAA,MAAA,EAAA,CAAA,umMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,4EAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDYa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAjB1B,SAAS;+BACE,QAAQ,EAAA,MAAA,EAGV,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,EACxC,OAAA,EAAA,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,eAAA,EACzB,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAC1B,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,oBAAoB,CAAC;AAC7C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,QAAA,EAAA,uyBAAA,EAAA,MAAA,EAAA,CAAA,umMAAA,CAAA,EAAA;;;AE7BnB,MAAM,SAAS,GAAG,CAAC,cAAc,CAAC;AAClC,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,WAAW,CAAC;MAQ9B,WAAW,CAAA;8GAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,iBATL,cAAc,CAAA,EAAA,OAAA,EAAA,CAChB,YAAY,EAAE,WAAW,aADvB,cAAc,CAAA,EAAA,CAAA,CAAA;AASpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,YAJT,OAAO,CAAA,EAAA,CAAA,CAAA;;2FAIT,WAAW,EAAA,UAAA,EAAA,CAAA;kBANvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC;AACrB,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACbD;;AAEG;;;;"}
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 isCompleted: boolean;\n}\n","import { MXLookComponent, MXValueComponent } from '@acorex/components/common';\nimport { NgStyle } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, afterNextRender, computed, forwardRef, model, output } 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.scss'],\n inputs: ['state', 'disabled', 'readonly', 'look'],\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 imports: [NgStyle, FormsModule],\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\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 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.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 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 break;\n\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\n case 'Home':\n inputs[0].select();\n break;\n\n case 'End':\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 this.commitValue(this.inputValues.join(''), true);\n this.onCompleted.emit({\n component: AXOtpComponent,\n value: this.inputValues.join(''),\n isCompleted: this.inputValues.filter((c) => c).length === this.length(),\n });\n });\n }\n}\n","<div\n dir=\"ltr\"\n class=\"ax-otp-input-container ax-editor-container ax-{{ look }}\"\n [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n (paste)=\"_handleOnPaste($event)\"\n>\n @for (input of inputs(); let i = $index; track i) {\n <input\n class=\"ax-input\"\n type=\"number\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-success]=\"state === 'success'\"\n [class.ax-state-error]=\"state === 'error'\"\n maxlength=\"1\"\n [ngModel]=\"inputValues[i]\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus(i)\"\n (input)=\"_handleOnInput($event, i)\"\n (keydown)=\"_handleOnKeyDown($event, i)\"\n [attr.disabled]=\"disabled\"\n />\n }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule, FormsModule];\n\n@NgModule({\n imports: [...MODULES, ...COMPONENT],\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 CHANGED Viewed

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

package/fesm2022/acorex-components-paint.mjs CHANGED Viewed

@@ -1,16 +1,10 @@
-import * as i3$1 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i2 from '@acorex/components/color-box';
-import { AXColorBoxModule } from '@acorex/components/color-box';
-import * as i5 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/popover';
-import { AXPopoverModule } from '@acorex/components/popover';
-import * as i2$1 from '@acorex/components/range-slider';
-import { AXRangeSliderModule } from '@acorex/components/range-slider';
+import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
+import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
+import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
+import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i3 from '@acorex/components/tooltip';
-import { AXTooltipModule } from '@acorex/components/tooltip';
+import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
 import * as i0 from '@angular/core';
 import { signal, Injectable, forwardRef, ViewEncapsulation, Component, inject, HostBinding, model, effect, input, Renderer2, PLATFORM_ID, viewChild, ElementRef, afterNextRender, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
@@ -26,10 +20,10 @@ class AXPaintService {
         this.penType = signal('pen');
         this.toggleClear = signal(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
@@ -38,8 +32,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * @category Components
  */
 class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPaintContainerComponent, isStandalone: false, selector: "ax-paint-container", inputs: { look: "look" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXPaintContainerComponent, isStandalone: true, selector: "ax-paint-container", inputs: { look: "look" }, providers: [
             AXPaintService,
             { provide: AXComponent, useExisting: AXPaintContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },
@@ -52,7 +46,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
             },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-paint-container', encapsulation: ViewEncapsulation.None, inputs: ['look'], providers: [
                         AXPaintService,
@@ -65,7 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: forwardRef(() => AXPaintContainerComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}\n"] }]
+                    ], template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container>.ax-editor-container{display:block;height:100%;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}\n"] }]
         }] });
 /**
@@ -87,12 +81,12 @@ class AXPaintColorPickerComponent {
     get __hostClass() {
         return `.5rem`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPaintColorPickerComponent, isStandalone: false, selector: "ax-paint-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXPaintColorPickerComponent, isStandalone: true, selector: "ax-paint-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-color-picker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
+            args: [{ selector: 'ax-paint-color-picker', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, AXTooltipDirective, FormsModule], template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-paint-color-picker{margin-inline:0!important}ax-paint-color-picker .ax-submit-color{border:1px solid rgb(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-paint-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['style.marginInline']
@@ -142,12 +136,12 @@ class AXPaintPenModeChangerComponent {
     valueHandler(e) {
         this.service.lineWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPaintPenModeChangerComponent, isStandalone: false, selector: "ax-paint-pen-mode-changer", inputs: { defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, penTypes: { classPropertyName: "penTypes", publicName: "penTypes", isSignal: true, isRequired: false, transformFunction: null }, sizeSlider: { classPropertyName: "sizeSlider", publicName: "sizeSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultWidth: "defaultWidthChange" }, host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('pen')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'pen' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('highlight')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-paint-pen-mode-changer ax-popover .ax-overlay-pane{width:20px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPaintPenModeChangerComponent, isStandalone: true, selector: "ax-paint-pen-mode-changer", inputs: { defaultWidth: { classPropertyName: "defaultWidth", publicName: "defaultWidth", isSignal: true, isRequired: false, transformFunction: null }, penTypes: { classPropertyName: "penTypes", publicName: "penTypes", isSignal: true, isRequired: false, transformFunction: null }, sizeSlider: { classPropertyName: "sizeSlider", publicName: "sizeSlider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { defaultWidth: "defaultWidthChange" }, host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('pen')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'pen' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('highlight')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-paint-pen-mode-changer ax-popover .ax-overlay-pane{width:20px!important}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintPenModeChangerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintPenModeChangerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-pen-mode-changer', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('pen')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'pen' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('highlight')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-paint-pen-mode-changer ax-popover .ax-overlay-pane{width:20px!important}\n"] }]
+            args: [{ selector: 'ax-paint-pen-mode-changer', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent, AXPopoverComponent, AXRangeSliderComponent, FormsModule], template: "@if (penTypes().length > 1 || sizeSlider()) {\n  <ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n    @switch (service.penType()) {\n      @case ('pen') {\n        <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n      }\n      @case ('highlight') {\n        <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n      }\n      @case ('eraser') {\n        <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n      }\n    }\n  </ax-button>\n\n  <ax-popover\n    [adaptivityEnabled]=\"true\"\n    [openOn]=\"popoverOption.openOn\"\n    [closeOn]=\"popoverOption.closeOn\"\n    [target]=\"alignPop\"\n    [placement]=\"popoverOption.placement\"\n  >\n    <div class=\"ax-overlay-pane\">\n      @if (penTypes().includes('pen') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('pen')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'pen' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('highlight') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('highlight')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (penTypes().includes('eraser') && penTypes().length > 1) {\n        <ax-button\n          (click)=\"penTypeHandler('eraser')\"\n          look=\"blank\"\n          [selected]=\"this.service.penType() === 'eraser' ? true : false\"\n        >\n          <ax-icon class=\"ax-icon ax-icon-eraser\"></ax-icon>\n        </ax-button>\n      }\n\n      @if (sizeSlider()) {\n        <div class=\"ax-paint-width-slider\">\n          <ax-range-slider\n            [min]=\"2\"\n            [max]=\"20\"\n            [(ngModel)]=\"defaultWidth\"\n            (ngModelChange)=\"valueHandler($event)\"\n          ></ax-range-slider>\n        </div>\n      }\n    </div>\n  </ax-popover>\n}\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n", styles: ["ax-paint-pen-mode-changer{display:flex;align-items:center;margin-inline:0!important}ax-paint-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-paint-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-paint-pen-mode-changer ax-popover .ax-overlay-pane{width:20px!important}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['style.marginInline']
@@ -302,56 +296,28 @@ class AXPaintViewComponent {
     get __hostClass() {
         return [`${this.customClass()}`, `ax-${this.paintBackgroundColor()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXPaintViewComponent, isStandalone: false, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.8", type: AXPaintViewComponent, isStandalone: true, selector: "ax-paint-view", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, paintBackgroundColor: { classPropertyName: "paintBackgroundColor", publicName: "paintBackgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"] }]
+            args: [{ selector: 'ax-paint-view', encapsulation: ViewEncapsulation.None, template: "<canvas\n  #c\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n>\n</canvas>\n", styles: ["ax-paint-view{display:block;width:100%}ax-paint-view.ax-white{background-color:#fff}ax-paint-view.ax-black{background-color:#000}ax-paint-view .ax-canvas-element{border-bottom:1px solid rgb(var(--ax-sys-color-border-lightest-surface));cursor:crosshair;width:100%}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
-const COMPONENT = [
-    AXPaintContainerComponent,
-    AXPaintViewComponent,
-    AXPaintColorPickerComponent,
-    AXPaintPenModeChangerComponent,
-];
-const MODULES = [
-    FormsModule,
-    AXRangeSliderModule,
-    AXSelectBoxModule,
-    AXButtonModule,
-    AXColorBoxModule,
-    AXPopoverModule,
-    AXDecoratorModule,
-    AXTooltipModule,
-];
+const COMPONENT = [AXPaintContainerComponent, AXPaintViewComponent, AXPaintColorPickerComponent, AXPaintPenModeChangerComponent];
+const MODULES = [FormsModule, AXRangeSliderModule, AXSelectBoxModule, AXButtonModule, AXColorBoxModule, AXPopoverModule, AXDecoratorModule, AXTooltipModule];
 class AXPaintModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, declarations: [AXPaintContainerComponent,
-            AXPaintViewComponent,
-            AXPaintColorPickerComponent,
-            AXPaintPenModeChangerComponent], imports: [FormsModule,
-            AXRangeSliderModule,
-            AXSelectBoxModule,
-            AXButtonModule,
-            AXColorBoxModule,
-            AXPopoverModule,
-            AXDecoratorModule,
-            AXTooltipModule], exports: [AXPaintContainerComponent,
-            AXPaintViewComponent,
-            AXPaintColorPickerComponent,
-            AXPaintPenModeChangerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPaintModule, imports: [FormsModule, AXRangeSliderModule, AXSelectBoxModule, AXButtonModule, AXColorBoxModule, AXPopoverModule, AXDecoratorModule, AXTooltipModule, AXPaintContainerComponent, AXPaintViewComponent, AXPaintColorPickerComponent, AXPaintPenModeChangerComponent], exports: [AXPaintContainerComponent, AXPaintViewComponent, AXPaintColorPickerComponent, AXPaintPenModeChangerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintColorPickerComponent, AXPaintPenModeChangerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
+                    imports: [...MODULES, ...COMPONENT],
                     exports: [...COMPONENT],
                     providers: [],
                 }]