@acorex/components 19.11.0-next.1 → 19.11.0-next.2

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, HostListener, NgModule } from '@angular/core';
+import { forwardRef, HostListener, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import { createMask } from 'imask';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toNumber, isEmpty } from 'lodash-es';
 import { classes } from 'polytype';
 import { AXButtonModule } from '@acorex/components/button';
@@ -289,8 +289,8 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXNumberBoxComponent, isStandalone: true, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", changeOnScroll: "changeOnScroll", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { listeners: { "wheel": "onWheel($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXNumberBoxComponent, isStandalone: true, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", changeOnScroll: "changeOnScroll", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, host: { listeners: { "wheel": "onWheel($event)" } }, providers: [
             { provide: AXComponent, useExisting: AXNumberBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
             { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
@@ -302,7 +302,7 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
             },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container {{ classNames }} ax-{{ look }}\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    class=\"ax-input\"\n    type=\"text\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\"\n    [imask]=\"_maskObj\"\n    [unmask]=\"'typed'\"\n    [attr.min]=\"minValue\"\n    [attr.max]=\"maxValue\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"_handleOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n  @if (input.value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showSpinButtons) {\n    <div class=\"ax-number-box-control\">\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-up ax-arrow-button\"></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [class.ax-state-disabled]=\"disabled\"\n        (click)=\"_handleUpDownClick(-1, $event)\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled\"\n      >\n        <span class=\"ax-icon ax-icon-chevron-down ax-arrow-button\"></span>\n      </button>\n    </div>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: [".ax-number-box-control{display:flex;flex-direction:column;height:100%;--ax-comp-editor-button-height: 50%;--ax-comp-editor-button-font-size: .75rem}.ax-number-box-control button{font-size:.75rem}.ax-number-box-control button:first-child{align-items:flex-end;display:flex}.ax-number-box-control button:last-child{align-items:flex-start;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange', 'onKeyDown', 'onKeyUp', 'onKeyPress'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXNumberBoxComponent },
@@ -368,11 +368,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXNumberBoxComponent];
 const MODULES = [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, IMaskModule];
 class AXNumberBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxModule, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, IMaskModule, AXNumberBoxComponent], exports: [AXNumberBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxModule, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, IMaskModule, AXNumberBoxComponent], exports: [AXNumberBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-otp.mjs

@@ -1,9 +1,9 @@
 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, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { model, output, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
 
 class AXOtpCompletedEvent extends AXEvent {
@@ -165,8 +165,8 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", 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: [
+    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),
@@ -174,7 +174,7 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             },
         ], 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.1.7", 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: [
                         {
@@ -188,11 +188,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXOtpComponent];
 const MODULES = [CommonModule, FormsModule];
 class AXOtpModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXOtpModule, imports: [CommonModule, FormsModule, AXOtpComponent], exports: [AXOtpComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXOtpModule, imports: [MODULES, COMPONENT] }); }
+    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.1.7", ngImport: i0, type: AXOtpModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXOtpModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-page.mjs

@@ -2,7 +2,7 @@ import { MXBaseComponent } from '@acorex/components/common';
 import '@acorex/components/decorators';
 import { AXLoadingService } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Injectable, ViewChild, Output, Input, Inject, NgModule } from '@angular/core';
+import { inject, EventEmitter, Input, Output, ViewChild, Injectable, Inject, NgModule } from '@angular/core';
 
 class AXBasePageComponent extends MXBaseComponent {
     constructor() {
@@ -47,10 +47,10 @@ class AXBasePageComponent extends MXBaseComponent {
     ngOnDestroy() {
         this.onClosed.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXBasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", 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.1.7", 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.1.7", ngImport: i0, type: AXPageComponent, deps: [{ token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", 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.1.7", 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.1.7", ngImpor
 
 // TODO: Module is empty!?
 class AXPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPageModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", 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.1.7", 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

@@ -6,7 +6,7 @@ import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
 import * as i0 from '@angular/core';
-import { signal, Injectable, forwardRef, Component, ViewEncapsulation, inject, HostBinding, model, effect, input, Renderer2, PLATFORM_ID, viewChild, ElementRef, afterNextRender, NgModule } 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';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
@@ -20,10 +20,10 @@ class AXPaintService {
         this.penType = signal('pen');
         this.toggleClear = signal(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPaintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", 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.1.7", ngImport: i0, type: AXPaintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintService, decorators: [{
             type: Injectable
         }] });
 
@@ -32,8 +32,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * @category Components
  */
 class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPaintContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXPaintContainerComponent, isStandalone: true, 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 },
@@ -46,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.1.7", 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,
@@ -81,10 +81,10 @@ class AXPaintColorPickerComponent {
     get __hostClass() {
         return `.5rem`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPaintColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", 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 }); }
+    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.1.7", 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, 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: [{
@@ -136,10 +136,10 @@ class AXPaintPenModeChangerComponent {
     valueHandler(e) {
         this.service.lineWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPaintPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", 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 }); }
+    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.1.7", 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, 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: [{
@@ -296,10 +296,10 @@ class AXPaintViewComponent {
     get __hostClass() {
         return [`${this.customClass()}`, `ax-${this.paintBackgroundColor()}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPaintViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.7", 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 }); }
+    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.1.7", 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, 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: [{
@@ -310,11 +310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 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.1.7", ngImport: i0, type: AXPaintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", 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.7", ngImport: i0, type: AXPaintModule, imports: [MODULES, AXPaintColorPickerComponent, AXPaintPenModeChangerComponent] }); }
+    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.1.7", ngImport: i0, type: AXPaintModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPaintModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

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

@@ -1,8 +1,8 @@
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, signal, inject, input, afterNextRender, NgModule } from '@angular/core';
+import { forwardRef, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, inject, input, afterNextRender, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXButtonModule } from '@acorex/components/button';
@@ -49,8 +49,8 @@ class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLook
             this._icon = 'ax-icon-visibility';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXPasswordBoxComponent, isStandalone: true, selector: "ax-password-box", inputs: { readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", autoComplete: "autoComplete", showToggleButton: "showToggleButton", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPasswordBoxComponent, isStandalone: true, selector: "ax-password-box", inputs: { readonly: "readonly", disabled: "disabled", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", autoComplete: "autoComplete", showToggleButton: "showToggleButton", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, providers: [
             { provide: AXComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
@@ -62,7 +62,7 @@ class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLook
             },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container {{ classNames }} ax-{{ look }}\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n\n  <input\n    #input\n    class=\"ax-input\"\n    [name]=\"name\"\n    [type]=\"_type\"\n    [id]=\"id\"\n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\"\n    [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\"\n    (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\"\n  />\n\n  @if (value && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if (showToggleButton) {\n    <button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\">\n      <span class=\"ax-icon {{ _icon }}\"></span>\n    </button>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-password-strength-validation\" [showHint]=\"showStrength()\"></ng-content>\n", styles: ["ax-password-box{display:flex;flex-direction:column;gap:.2rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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.1.7", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: ['readonly', 'disabled', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange', 'onKeyDown', 'onKeyUp', 'onKeyPress'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXComponent, useExisting: AXPasswordBoxComponent },
@@ -143,10 +143,10 @@ class AXPasswordStrengthValidationComponent {
         this.strengthLabelColor.set(strength <= 2 ? 'danger' : strength <= 3 ? 'warning' : 'success');
         this.passwordStrength.set((strength * 100) / 5);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXPasswordStrengthValidationComponent, isStandalone: true, selector: "ax-password-strength-validation", inputs: { showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password{display:block;margin-bottom:.375rem}.ax-state-password.ax-text-red{color:rgb(var(--ax-sys-color-danger-surface))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-sys-color-warning-surface))}.ax-state-password.ax-text-green{color:rgb(var(--ax-sys-color-success-surface))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container ax-badge{margin-inline-end:.25rem}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordStrengthValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPasswordStrengthValidationComponent, isStandalone: true, selector: "ax-password-strength-validation", inputs: { showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password{display:block;margin-bottom:.375rem}.ax-state-password.ax-text-red{color:rgb(var(--ax-sys-color-danger-surface))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-sys-color-warning-surface))}.ax-state-password.ax-text-green{color:rgb(var(--ax-sys-color-success-surface))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container ax-badge{margin-inline-end:.25rem}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordStrengthValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-strength-validation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AXBadgeComponent, AsyncPipe, AXTranslatorPipe], template: "@if (showProgress()) {\n  <small\n    class=\"ax-state-password\"\n    [class.ax-text-red]=\"strengthLabelColor() === 'danger'\"\n    [class.ax-text-orange]=\"strengthLabelColor() === 'warning'\"\n    [class.ax-text-green]=\"strengthLabelColor() === 'success'\"\n  >\n    {{ strengthLabel() | translate | async }}\n  </small>\n\n  <ax-progress-bar\n    [color]=\"strengthLabelColor()\"\n    [progress]=\"passwordStrength()\"\n    [height]=\"4\"\n  ></ax-progress-bar>\n}\n@if (showHint()) {\n  <div class=\"ax-hint-container\">\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isLenghtgraterThan8().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'at-least-8-characters' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseUpperCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-upper-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseLowerCase().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'english-lower-case-letter' | translate | async }}\n      </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseNumber().state ? 'success' : 'danger'\"></ax-badge\n      ><span> {{ 'digits' | translate | async }} </span>\n    </small>\n    <small class=\"ax-hint-state\">\n      <ax-badge [color]=\"isUseSpecialCharacter().state ? 'success' : 'danger'\"></ax-badge>\n      <span>\n        {{ 'special-character' | translate | async }}\n      </span>\n    </small>\n  </div>\n}\n", styles: [".ax-state-password{display:block;margin-bottom:.375rem}.ax-state-password.ax-text-red{color:rgb(var(--ax-sys-color-danger-surface))}.ax-state-password.ax-text-orange{color:rgb(var(--ax-sys-color-warning-surface))}.ax-state-password.ax-text-green{color:rgb(var(--ax-sys-color-success-surface))}.ax-hint-container{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-hint-container ax-badge{margin-inline-end:.25rem}\n"] }]
         }] });
@@ -154,11 +154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];
 const MODULES = [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXProgressBarModule, AXBadgeModule, AXTranslationModule];
 class AXPasswordBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordBoxModule, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXProgressBarModule, AXBadgeModule, AXTranslationModule, AXPasswordBoxComponent, AXPasswordStrengthValidationComponent], exports: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxModule, imports: [CommonModule, FormsModule, AXButtonModule, AXDecoratorModule, AXProgressBarModule, AXBadgeModule, AXTranslationModule, AXPasswordBoxComponent, AXPasswordStrengthValidationComponent], exports: [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-pdf-reader.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { inject, input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class AXPdfReaderComponent {
@@ -7,10 +7,10 @@ class AXPdfReaderComponent {
         this.sanitizer = inject(DomSanitizer);
         this.src = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXPdfReaderComponent, isStandalone: true, selector: "ax-pdf-reader", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["ax-pdf-reader{width:100%}ax-pdf-reader iframe{min-width:30vw;min-height:calc(60vh - 2rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXPdfReaderComponent, isStandalone: true, selector: "ax-pdf-reader", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["ax-pdf-reader{width:100%}ax-pdf-reader iframe{min-width:30vw;min-height:calc(60vh - 2rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-pdf-reader', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<iframe [src]=\"src()\" frameborder=\"0\"></iframe>\n", styles: ["ax-pdf-reader{width:100%}ax-pdf-reader iframe{min-width:30vw;min-height:calc(60vh - 2rem)}\n"] }]
         }] });
@@ -18,11 +18,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXPdfReaderComponent];
 const MODULES = [];
 class AXPdfReaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderModule, imports: [AXPdfReaderComponent], exports: [AXPdfReaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderModule, imports: [AXPdfReaderComponent], exports: [AXPdfReaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPdfReaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPdfReaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

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

@@ -6,9 +6,9 @@ import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box
 import { COUNTRIES_FLAG_BASE64, COUNTRIES } from '@acorex/core/constants';
 import { NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, input, model, viewChild, effect, afterNextRender, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, NgModule } from '@angular/core';
+import { signal, input, model, viewChild, effect, afterNextRender, forwardRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { filter } from 'lodash-es';
 import { classes } from 'polytype';
 import { AXButtonModule } from '@acorex/components/button';
@@ -148,8 +148,8 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
     _handleCountryValueChanged(event) {
         this.selectedCountry.set(event.component.selectedItems[0]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXPhoneBoxComponent, isStandalone: true, selector: "ax-phone-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, precode: { classPropertyName: "precode", publicName: "precode", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, included: { classPropertyName: "included", publicName: "included", isSignal: true, isRequired: false, transformFunction: null }, excluded: { classPropertyName: "excluded", publicName: "excluded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", country: "countryChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXPhoneBoxComponent, isStandalone: true, selector: "ax-phone-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, allowNull: { classPropertyName: "allowNull", publicName: "allowNull", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, classNames: { classPropertyName: "classNames", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, precode: { classPropertyName: "precode", publicName: "precode", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, included: { classPropertyName: "included", publicName: "included", isSignal: true, isRequired: false, transformFunction: null }, excluded: { classPropertyName: "excluded", publicName: "excluded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", country: "countryChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXComponent, useExisting: AXPhoneBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXPhoneBoxComponent },
             { provide: AXClearableComponent, useExisting: AXPhoneBoxComponent },
@@ -161,7 +161,7 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
             },
         ], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["s"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  dir=\"ltr\"\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [mask-options]=\"{ mask: selectedCountry()?.format }\"\n  [placeholder]=\"selectedCountry()?.format\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (onBlur)=\"emitOnBlurEvent($event.nativeEvent)\"\n  (onFocus)=\"emitOnFocusEvent($event.nativeEvent)\"\n  (onKeyDown)=\"emitOnKeydownEvent($event.nativeEvent)\"\n  (onKeyPress)=\"emitOnKeypressEvent($event.nativeEvent)\"\n  (onKeyUp)=\"emitOnKeyupEvent($event.nativeEvent)\"\n>\n  <ax-prefix>\n    @if (precode()) {\n      <ax-text>{{ precode() }}</ax-text>\n    } @else {\n      <ax-select-box\n        #s\n        look=\"blank\"\n        [disabled]=\"disabled || readonly\"\n        [readonly]=\"readonly\"\n        [dropdownWidth]=\"320\"\n        [dataSource]=\"dataSource\"\n        [ngModel]=\"selectedCountry()\"\n        [textField]=\"'iso2code'\"\n        [multiple]=\"false\"\n        [valueField]=\"'code'\"\n        [itemTemplate]=\"customItemTemplate\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onValueChanged)=\"_handleCountryValueChanged($event)\"\n        (onClosed)=\"handleCountryOnClosed()\"\n        [tabIndex]=\"included().length === 1 ? '-1' : '1'\"\n      >\n        <ax-search-box class=\"ax-sm\" look=\"fill\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        <ng-template #customItemTemplate let-item>\n          <div class=\"ax-country-item\">\n            <div\n              class=\"ax-country-flag\"\n              [ngStyle]=\"{\n                'background-position': item.data.bkPosition?.x + ' ' + item.data.bkPosition?.y,\n                'background-image': 'url(' + flags() + ')',\n              }\"\n            ></div>\n            <div>\n              <span class=\"ax-country-name\">{{ item.data.name }}</span>\n              <span class=\"ax-iso2code\">{{ item.data.iso2code }}</span>\n            </div>\n          </div>\n        </ng-template>\n        <ng-template #selectedTemplate let-item>\n          <div class=\"ax-selected-country\">\n            <span>{{ item.data.iso2code }}</span>\n          </div>\n        </ng-template>\n        <ng-template #loading></ng-template>\n      </ax-select-box>\n    }\n  </ax-prefix>\n</ax-text-box>\n\n<ng-content select=\"ax-clear-button \"></ng-content>\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-phone-box .ax-editor-container{--ax-comp-editor-space-start-size: 0}ax-phone-box ax-select-box ax-dropdown-box{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-border-width: 0px !important;--ax-comp-editor-border-color: transparent !important}ax-phone-box ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-box-outline-width: 0;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-phone-box ax-select-box ax-dropdown-box .ax-editor,ax-phone-box ax-select-box ax-dropdown-box .ax-input{--ax-comp-editor-space-start-size: 0}.ax-country-item{padding:.75rem .5rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}.ax-country-item:hover{background-color:rgba(var(--ax-sys-color-ghost-lighter-surface))}.ax-country-item .ax-country-name{font-weight:500;margin-inline-end:.5rem}.ax-country-item .ax-iso2code{opacity:.7}.ax-country-flag{width:25px!important;height:20px!important;background-repeat:no-repeat}.ax-selected-country{display:flex;gap:.5rem;align-items:center;padding-inline-start:.5rem}\n"], dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { 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"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-phone-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'id', 'placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'look'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', 'readonlyChange', 'disabledChange', 'onKeyDown', 'onKeyUp', 'onKeyPress'], providers: [
                         { provide: AXComponent, useExisting: AXPhoneBoxComponent },
@@ -185,11 +185,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXPhoneBoxComponent];
 const MODULES = [CommonModule, FormsModule, IMaskModule, AXSelectBoxModule, AXSearchBoxModule, AXDecoratorModule, AXButtonModule, AXTextBoxModule];
 class AXPhoneBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxModule, imports: [CommonModule, FormsModule, IMaskModule, AXSelectBoxModule, AXSearchBoxModule, AXDecoratorModule, AXButtonModule, AXTextBoxModule, AXPhoneBoxComponent], exports: [AXPhoneBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxModule, imports: [CommonModule, FormsModule, IMaskModule, AXSelectBoxModule, AXSearchBoxModule, AXDecoratorModule, AXButtonModule, AXTextBoxModule, AXPhoneBoxComponent], exports: [AXPhoneBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPhoneBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPhoneBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],