@acorex/components 7.4.6 → 7.4.7

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

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, NgModule } from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, HostBinding, NgModule } from '@angular/core';
 import * as i3 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 import { createMask } from 'imask';
-import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXClearableComponent } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXAppearanceComponent, AXComponent, AXFocusableComponent, AXClearableComponent } from '@acorex/components/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { toNumber } from 'lodash-es';
+import { classes } from 'polytype';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXButtonModule } from '@acorex/components/button';
@@ -17,7 +18,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
  *
  * @category Components
  */
-class AXNumberBoxComponent extends MXInputBaseValueComponent {
+class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXAppearanceComponent) {
     constructor() {
         super(...arguments);
         this._padDecimalZeros = false;
@@ -100,7 +101,7 @@ class AXNumberBoxComponent extends MXInputBaseValueComponent {
     ngAfterViewInit() {
         this._updateMask();
     }
-    internalOptionChanged(option) {
+    internalOptionChanged() {
         this._updateMask();
     }
     internalSetValue(value) {
@@ -205,8 +206,11 @@ class AXNumberBoxComponent extends MXInputBaseValueComponent {
         }
         this.commitValue(this.value - toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep), u);
     }
+    get __hostClass() {
+        return `ax-editor-container ax-appearance-${this.appearance}`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { classAttribute: "ax-editor-container" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", appearance: "appearance", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXNumberBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
             { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
@@ -219,7 +223,7 @@ class AXNumberBoxComponent extends MXInputBaseValueComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-number-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], outputs: [
+            args: [{ selector: 'ax-number-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'appearance'], outputs: [
                         'valueChange',
                         'stateChange',
                         'onValueChanged',
@@ -227,7 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         'onFocus',
                         'readonlyChange',
                         'disabledChange',
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, providers: [
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXNumberBoxComponent },
                         { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
                         { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
@@ -259,6 +263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             }], _maskDirective: [{
                 type: ViewChild,
                 args: [IMaskDirective]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 const COMPONENT = [AXNumberBoxComponent];

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-number-box.mjs","sources":["../../../../libs/components/number-box/src/lib/number-box.component.ts","../../../../libs/components/number-box/src/lib/number-box.component.html","../../../../libs/components/number-box/src/lib/number-box.module.ts","../../../../libs/components/number-box/src/acorex-components-number-box.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { IMaskDirective } from 'angular-imask';\nimport { MaskedNumber, createMask } from 'imask';\n\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  MXComponentOptionChanged,\n  MXInputBaseValueComponent,\n} from '@acorex/components/common';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { toNumber } from 'lodash-es';\n\n/**\n * The NumberBox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-number-box',\n  templateUrl: './number-box.component.html',\n  styleUrls: ['./number-box.component.scss'],\n  inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'ax-editor-container' },\n  providers: [\n    { provide: AXComponent, useExisting: AXNumberBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXNumberBoxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXNumberBoxComponent extends MXInputBaseValueComponent<number> {\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  private _thousandsSeparator: string;\n  /**\n   *  A character value that specifies the separator character.\n   */\n  @Input()\n  public get thousandsSeparator(): string {\n    return this._thousandsSeparator;\n  }\n  public set thousandsSeparator(v: string) {\n    this.setOption({\n      name: 'thousandsSeparator',\n      value: v ?? '',\n    });\n  }\n\n  private _padDecimalZeros: boolean = false;\n  /**\n   *  A character value that specifies the separator character.\n   */\n  @Input()\n  public get padDecimalZeros(): boolean {\n    return this._padDecimalZeros;\n  }\n  public set padDecimalZeros(v: boolean) {\n    this.setOption({\n      name: 'padDecimalZeros',\n      value: v,\n    });\n  }\n\n  /**\n   *  Specifies the value that is used to increment or decrement the **Integer** part of number\n   */\n  @Input()\n  step: number = 1;\n\n  private _decimals: number = 0;\n  /**\n   *  Specifies the number of decimals that the user can enter\n   */\n  @Input()\n  public get decimals(): number {\n    return this._decimals;\n  }\n  public set decimals(v: number) {\n    this.setOption({\n      name: 'decimals',\n      value: v ?? 0,\n    });\n  }\n\n  /**\n   *  Specifies the value that is used to increment or decrement the **Deciaml** part of number\n   */\n  @Input()\n  decimalStep: number | 'auto' = 'auto';\n\n  /**\n   *  Specifies whether the Up and Down spin buttons will be rendered or not\n   */\n  @Input()\n  showSpinButtons: boolean = true;\n\n  private _minValue: number = Number.MIN_SAFE_INTEGER;\n  /**\n   *  Specifies the smallest value that is valid\n   */\n  @Input()\n  public get minValue(): number {\n    return this._minValue;\n  }\n  public set minValue(v: number) {\n    this.setOption({\n      name: 'minValue',\n      value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,\n    });\n  }\n\n  private _maxValue: number = Number.MAX_SAFE_INTEGER;\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get maxValue(): number {\n    return this._maxValue;\n  }\n  public set maxValue(v: number) {\n    this.setOption({\n      name: 'maxValue',\n      value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  _maskObj: MaskedNumber;\n\n  @ViewChild(IMaskDirective)\n  private _maskDirective: IMaskDirective<MaskedNumber>;\n\n  override ngAfterViewInit(): void {\n    this._updateMask();\n  }\n\n  override internalOptionChanged(option: MXComponentOptionChanged): void {\n    this._updateMask();\n  }\n\n  override internalSetValue(value: any): number {\n    // || (value == 0 && !this._maskObj.value)\n    if (value == null) {\n      return this.defaultValue;\n    }\n    const v = toNumber(value);\n    if (v < this.minValue) return this.minValue;\n    if (v > this.maxValue) return this.maxValue;\n    return v;\n  }\n\n  private _updateMask() {\n    if (!this._maskObj) {\n      this._maskObj = createMask({\n        mask: Number,\n        min: this.minValue,\n        max: this.maxValue,\n        thousandsSeparator: this.thousandsSeparator || '',\n        scale: this.decimals,\n        radix: '.',\n        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,\n      });\n\n      this._maskObj.format = (v: number, m) => {\n        return !isNaN(v)\n          ? v.toLocaleString('en-US', {\n              useGrouping: false,\n              maximumFractionDigits: 20,\n            })\n          : '';\n      };\n    } else {\n      this._maskObj.updateOptions({\n        min: this.minValue,\n        max: this.maxValue,\n        thousandsSeparator: this.thousandsSeparator || '',\n        scale: this.decimals,\n        radix: '.',\n        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,\n      });\n    }\n    this._maskDirective?.maskRef?.updateValue();\n    this._maskDirective?.maskRef?.updateControl();\n  }\n\n  _handleModelChange(value: number) {\n    this.commitValue(value, true);\n  }\n\n  _handleOnKeydownEvent(e: KeyboardEvent) {\n    if (this.disabled || this.readonly) return;\n    const ignore = () => {\n      e.preventDefault();\n      e.stopPropagation();\n    };\n    const input = e.target as HTMLInputElement;\n    const valStr = input.value;\n    const decimalPointIndex = valStr.indexOf('.');\n    const _cursorPos = input.selectionStart!;\n\n    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {\n        e.key === 'ArrowDown' ? this.decimalStepDown(true) : this.decimalStepUp(true);\n      } else {\n        e.key === 'ArrowDown' ? this.stepDown(true) : this.stepUp(true);\n      }\n      ignore();\n      setTimeout(() => {\n        input.setSelectionRange(_cursorPos, _cursorPos);\n      }, 5);\n    }\n    super.emitOnKeydownEvent(e);\n  }\n\n  _handleUpDownClick(v: -1 | 1) {\n    if (this.disabled || this.readonly) return;\n    v == 1 ? this.stepUp(true) : this.stepDown(true);\n  }\n\n  stepUp(u: boolean = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(this.value + toNumber(this.step), u);\n  }\n\n  stepDown(u: boolean = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(this.value - toNumber(this.step), u);\n  }\n\n  decimalStepUp(u: boolean = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(\n      this.value + toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep),\n      u,\n    );\n  }\n\n  decimalStepDown(u: boolean = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(\n      this.value - toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep),\n      u,\n    );\n  }\n}\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<ng-content select=\"ax-clear-button\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {IMaskModule} from 'angular-imask';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXNumberBoxComponent } from './number-box.component';\n\nconst COMPONENT = [AXNumberBoxComponent];\nconst MODULES = [\n    CommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    IMaskModule\n];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXNumberBoxModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-number-box.mjs","sources":["../../../../libs/components/number-box/src/lib/number-box.component.ts","../../../../libs/components/number-box/src/lib/number-box.component.html","../../../../libs/components/number-box/src/lib/number-box.module.ts","../../../../libs/components/number-box/src/acorex-components-number-box.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { IMaskDirective } from 'angular-imask';\nimport { MaskedNumber, createMask } from 'imask';\n\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  MXAppearanceComponent,\n  MXInputBaseValueComponent,\n} from '@acorex/components/common';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { toNumber } from 'lodash-es';\nimport { classes } from 'polytype';\n\n/**\n * The NumberBox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-number-box',\n  templateUrl: './number-box.component.html',\n  styleUrls: ['./number-box.component.scss'],\n  inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'appearance'],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: AXComponent, useExisting: AXNumberBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXNumberBoxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXNumberBoxComponent\n  extends classes(MXInputBaseValueComponent<number>, MXAppearanceComponent)\n  implements AfterViewInit\n{\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  private _thousandsSeparator: string;\n  /**\n   *  A character value that specifies the separator character.\n   */\n  @Input()\n  public get thousandsSeparator(): string {\n    return this._thousandsSeparator;\n  }\n  public set thousandsSeparator(v: string) {\n    this.setOption({\n      name: 'thousandsSeparator',\n      value: v ?? '',\n    });\n  }\n\n  private _padDecimalZeros = false;\n  /**\n   *  A character value that specifies the separator character.\n   */\n  @Input()\n  public get padDecimalZeros(): boolean {\n    return this._padDecimalZeros;\n  }\n  public set padDecimalZeros(v: boolean) {\n    this.setOption({\n      name: 'padDecimalZeros',\n      value: v,\n    });\n  }\n\n  /**\n   *  Specifies the value that is used to increment or decrement the **Integer** part of number\n   */\n  @Input()\n  step = 1;\n\n  private _decimals = 0;\n  /**\n   *  Specifies the number of decimals that the user can enter\n   */\n  @Input()\n  public get decimals(): number {\n    return this._decimals;\n  }\n  public set decimals(v: number) {\n    this.setOption({\n      name: 'decimals',\n      value: v ?? 0,\n    });\n  }\n\n  /**\n   *  Specifies the value that is used to increment or decrement the **Deciaml** part of number\n   */\n  @Input()\n  decimalStep: number | 'auto' = 'auto';\n\n  /**\n   *  Specifies whether the Up and Down spin buttons will be rendered or not\n   */\n  @Input()\n  showSpinButtons = true;\n\n  private _minValue: number = Number.MIN_SAFE_INTEGER;\n  /**\n   *  Specifies the smallest value that is valid\n   */\n  @Input()\n  public get minValue(): number {\n    return this._minValue;\n  }\n  public set minValue(v: number) {\n    this.setOption({\n      name: 'minValue',\n      value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,\n    });\n  }\n\n  private _maxValue: number = Number.MAX_SAFE_INTEGER;\n  /**\n   *  Specifies the greatest value that is valid\n   */\n  @Input()\n  public get maxValue(): number {\n    return this._maxValue;\n  }\n  public set maxValue(v: number) {\n    this.setOption({\n      name: 'maxValue',\n      value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  _maskObj: MaskedNumber;\n\n  @ViewChild(IMaskDirective)\n  private _maskDirective: IMaskDirective<MaskedNumber>;\n\n  override ngAfterViewInit(): void {\n    this._updateMask();\n  }\n\n  override internalOptionChanged(): void {\n    this._updateMask();\n  }\n\n  override internalSetValue(value: any): number {\n    // || (value == 0 && !this._maskObj.value)\n    if (value == null) {\n      return this.defaultValue;\n    }\n    const v = toNumber(value);\n    if (v < this.minValue) return this.minValue;\n    if (v > this.maxValue) return this.maxValue;\n    return v;\n  }\n\n  private _updateMask() {\n    if (!this._maskObj) {\n      this._maskObj = createMask({\n        mask: Number,\n        min: this.minValue,\n        max: this.maxValue,\n        thousandsSeparator: this.thousandsSeparator || '',\n        scale: this.decimals,\n        radix: '.',\n        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,\n      });\n\n      this._maskObj.format = (v: number, m) => {\n        return !isNaN(v)\n          ? v.toLocaleString('en-US', {\n              useGrouping: false,\n              maximumFractionDigits: 20,\n            })\n          : '';\n      };\n    } else {\n      this._maskObj.updateOptions({\n        min: this.minValue,\n        max: this.maxValue,\n        thousandsSeparator: this.thousandsSeparator || '',\n        scale: this.decimals,\n        radix: '.',\n        padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,\n      });\n    }\n    this._maskDirective?.maskRef?.updateValue();\n    this._maskDirective?.maskRef?.updateControl();\n  }\n\n  _handleModelChange(value: number) {\n    this.commitValue(value, true);\n  }\n\n  _handleOnKeydownEvent(e: KeyboardEvent) {\n    if (this.disabled || this.readonly) return;\n    const ignore = () => {\n      e.preventDefault();\n      e.stopPropagation();\n    };\n    const input = e.target as HTMLInputElement;\n    const valStr = input.value;\n    const decimalPointIndex = valStr.indexOf('.');\n    const _cursorPos = input.selectionStart!;\n\n    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {\n        e.key === 'ArrowDown' ? this.decimalStepDown(true) : this.decimalStepUp(true);\n      } else {\n        e.key === 'ArrowDown' ? this.stepDown(true) : this.stepUp(true);\n      }\n      ignore();\n      setTimeout(() => {\n        input.setSelectionRange(_cursorPos, _cursorPos);\n      }, 5);\n    }\n    super.emitOnKeydownEvent(e);\n  }\n\n  _handleUpDownClick(v: -1 | 1) {\n    if (this.disabled || this.readonly) return;\n    v == 1 ? this.stepUp(true) : this.stepDown(true);\n  }\n\n  stepUp(u = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(this.value + toNumber(this.step), u);\n  }\n\n  stepDown(u = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(this.value - toNumber(this.step), u);\n  }\n\n  decimalStepUp(u = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(\n      this.value + toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep),\n      u,\n    );\n  }\n\n  decimalStepDown(u = false) {\n    if (!this.value) {\n      this.commitValue(Math.max(this.minValue, 0), u);\n    }\n    this.commitValue(\n      this.value - toNumber(this.decimalStep == 'auto' ? 1 / Math.pow(10, this.decimals) : this.decimalStep),\n      u,\n    );\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-editor-container ax-appearance-${this.appearance}`;\n  }\n}\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<ng-content select=\"ax-clear-button\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {IMaskModule} from 'angular-imask';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXNumberBoxComponent } from './number-box.component';\n\nconst COMPONENT = [AXNumberBoxComponent];\nconst MODULES = [\n    CommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    IMaskModule\n];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXNumberBoxModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-otp.mjs

@@ -1,13 +1,14 @@
-import { AXEvent, MXValueComponent } from '@acorex/components/common';
+import { AXEvent, MXValueComponent, MXAppearanceComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, NgModule } from '@angular/core';
+import { classes } from 'polytype';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class AXOtpCompletedEvent extends AXEvent {
 }
 
-class AXOtpComponent extends MXValueComponent {
+class AXOtpComponent extends classes((MXValueComponent), MXAppearanceComponent) {
     constructor() {
         super(...arguments);
         this.lenghtChange = new EventEmitter();
@@ -20,11 +21,11 @@ class AXOtpComponent extends MXValueComponent {
     }
     set length(v) {
         this.setOption({
-            name: "length",
+            name: 'length',
             afterCallback: () => {
                 this._render();
             },
-            value: v
+            value: v,
         });
     }
     ngOnInit() {
@@ -114,11 +115,11 @@ class AXOtpComponent extends MXValueComponent {
         inputs[i].select();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXOtpComponent, selector: "ax-otp", inputs: { state: "state", disabled: "disabled", readonly: "readonly", length: "length" }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", lenghtChange: "lenghtChange", onCompleted: "onCompleted" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-otp-input-container ax-editor-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\">\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input class=\"ax-input\" type=\"number\" [class.ax-state-disabled]=\"disabled\" maxlength=\"1\" [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\" [readonly]=\"readonly\" (click)=\"_handleOnClick($event, i)\"\n      (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" disabled=\"disabled\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial;background-color:transparent}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-surface))}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXOtpComponent, selector: "ax-otp", inputs: { state: "state", disabled: "disabled", readonly: "readonly", appearance: "appearance", length: "length" }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", lenghtChange: "lenghtChange", onCompleted: "onCompleted" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-otp-input-container ax-editor-container ax-appearance-{{ appearance }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_handleOnClick($event, i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial;background-color:transparent}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input{background-color:rgba(var(--ax-color-input-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success{outline-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success .ax-input::placeholder,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-success{outline-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input{background-color:transparent!important}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input{background-color:rgba(var(--ax-color-input-surface-fill));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-color-danger-50))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success{background-color:rgba(var(--ax-color-success-50))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXOtpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-otp-input-container ax-editor-container\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\">\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input class=\"ax-input\" type=\"number\" [class.ax-state-disabled]=\"disabled\" maxlength=\"1\" [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\" [readonly]=\"readonly\" (click)=\"_handleOnClick($event, i)\"\n      (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" disabled=\"disabled\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial;background-color:transparent}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-error .ax-input:focus{border-color:rgba(var(--ax-color-danger-500));box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input:focus{border-color:rgba(var(--ax-color-success-500));box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-surface))}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}.ax-otp-input-container.ax-editor-container .ax-input:focus{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+            args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly', 'appearance'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ax-otp-input-container ax-editor-container ax-appearance-{{ appearance }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs.length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [value]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_handleOnClick($event, i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: [".ax-otp-input-container{display:grid;gap:.5rem}.ax-otp-input-container.ax-editor-container{border:none;height:auto;outline-color:transparent;overflow:initial;background-color:transparent}.ax-otp-input-container.ax-editor-container:focus-within,.ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input{background-color:rgba(var(--ax-color-input-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500));box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-error .ax-input::placeholder,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success{outline-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success:focus-within,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-solid .ax-input.ax-state-success .ax-input::placeholder,.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-success{outline-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-flat .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-outline .ax-input{background-color:transparent!important}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input{background-color:rgba(var(--ax-color-input-surface-fill));border-radius:var(--ax-rounded-border-default)}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-primary-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-color-danger-50))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success{background-color:rgba(var(--ax-color-success-50))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container.ax-appearance-fill .ax-input.ax-state-success .ax-input::placeholder{color:rgba(var(--ax-color-success-500))}.ax-otp-input-container.ax-editor-container .ax-input{text-align:center;font-size:200%;overflow:hidden;aspect-ratio:1}.ax-otp-input-container.ax-editor-container .ax-input:read-only{opacity:.8;cursor:text}.ax-otp-input-container.ax-editor-container .ax-input:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 599px){.ax-otp-input-container.ax-editor-container .ax-input{font-size:100%}}.ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,.ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], propDecorators: { lenghtChange: [{
                 type: Output
             }], length: [{

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

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

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

@@ -1,8 +1,9 @@
+import { MXInputBaseValueComponent, MXAppearanceComponent, AXComponent, AXFocusableComponent, AXClearableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, NgModule } from '@angular/core';
-import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXClearableComponent } from '@acorex/components/common';
+import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { classes } from 'polytype';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXButtonModule } from '@acorex/components/button';
@@ -13,7 +14,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
  *
  * @category Components
  */
-class AXPasswordBoxComponent extends MXInputBaseValueComponent {
+class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXAppearanceComponent) {
     constructor() {
         super(...arguments);
         this._type = 'password';
@@ -37,38 +38,40 @@ class AXPasswordBoxComponent extends MXInputBaseValueComponent {
             this._icon = 'ax-icon-visibility';
         }
     }
+    get __hostClass() {
+        return `ax-editor-container ax-appearance-${this.appearance}`;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPasswordBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", autoComplete: "autoComplete", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { classAttribute: "ax-editor-container" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", appearance: "appearance", autoComplete: "autoComplete", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
             { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXPasswordBoxComponent),
-                multi: true
-            }
+                multi: true,
+            },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'placeholder',
-                        'value',
-                        'state',
-                        'name',
-                        'id'
-                    ], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, providers: [
+            args: [{ selector: 'ax-password-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'appearance'], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXComponent, useExisting: AXPasswordBoxComponent },
                         { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },
                         { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AXPasswordBoxComponent),
-                            multi: true
-                        }
+                            multi: true,
+                        },
                     ], template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
@@ -77,6 +80,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                 type: Input
             }], showToggleButton: [{
                 type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 const COMPONENT = [AXPasswordBoxComponent];

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-password-box.mjs","sources":["../../../../libs/components/password-box/src/lib/password-box.component.ts","../../../../libs/components/password-box/src/lib/password-box.component.html","../../../../libs/components/password-box/src/lib/password-box.module.ts","../../../../libs/components/password-box/src/acorex-components-password-box.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { AXClearableComponent, AXComponent, AXFocusableComponent, MXInputBaseValueComponent } from '@acorex/components/common';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/**\n * The Textbox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-password-box',\n  templateUrl: 'password-box.component.html',\n  inputs: [\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'placeholder',\n    'value',\n    'state',\n    'name',\n    'id'\n  ],\n  outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'ax-editor-container' },\n  providers: [\n    { provide: AXComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPasswordBoxComponent),\n      multi: true\n    }\n  ]\n})\nexport class AXPasswordBoxComponent extends MXInputBaseValueComponent<string>  {\n\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  protected _type: 'password' | 'text' = 'password';\n  protected _icon: 'ax-icon-visibility' | 'ax-icon-visibility-off' = 'ax-icon-visibility';\n\n\n  @Input()\n  autoComplete: 'current-password' | 'new-password' | 'one-time-code' | 'off' = 'one-time-code';\n\n  /**\n   *  A flag for showing or hiding password button.\n   */\n  @Input()\n  showToggleButton: boolean = true;\n\n\n  _handleModelChange(value: string) {\n    this.commitValue(value, true);\n  }\n\n\n  toggleType() {\n    if (this._type === 'password') {\n      this._type = 'text';\n      this._icon = 'ax-icon-visibility-off';\n    } else {\n      this._type = 'password';\n      this._icon = 'ax-icon-visibility';\n    }\n  }\n}\n","<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPasswordBoxComponent } from './password-box.component';\nimport { FormsModule } from '@angular/forms';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\n\nconst COMPONENT = [AXPasswordBoxComponent];\nconst MODULES = [\n    CommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXPasswordBoxModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-password-box.mjs","sources":["../../../../libs/components/password-box/src/lib/password-box.component.ts","../../../../libs/components/password-box/src/lib/password-box.component.html","../../../../libs/components/password-box/src/lib/password-box.module.ts","../../../../libs/components/password-box/src/acorex-components-password-box.ts"],"sourcesContent":["import {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  MXAppearanceComponent,\n  MXInputBaseValueComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * The Textbox is a component which detects user interaction and triggers a corresponding event\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-password-box',\n  templateUrl: 'password-box.component.html',\n  inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'appearance'],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    { provide: AXComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPasswordBoxComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXPasswordBoxComponent extends classes(\n  MXInputBaseValueComponent<string>,\n  MXAppearanceComponent,\n) {\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  protected _type: 'password' | 'text' = 'password';\n  protected _icon: 'ax-icon-visibility' | 'ax-icon-visibility-off' = 'ax-icon-visibility';\n\n  @Input()\n  autoComplete: 'current-password' | 'new-password' | 'one-time-code' | 'off' = 'one-time-code';\n\n  /**\n   *  A flag for showing or hiding password button.\n   */\n  @Input()\n  showToggleButton: boolean = true;\n\n  _handleModelChange(value: string) {\n    this.commitValue(value, true);\n  }\n\n  toggleType() {\n    if (this._type === 'password') {\n      this._type = 'text';\n      this._icon = 'ax-icon-visibility-off';\n    } else {\n      this._type = 'password';\n      this._icon = 'ax-icon-visibility';\n    }\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-editor-container ax-appearance-${this.appearance}`;\n  }\n}\n","<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" [name]=\"name\" [type]=\"_type\" [id]=\"id\" [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" [attr.autocomplete]=\"autoComplete\"\n    (ngModelChange)=\"_handleModelChange($event)\" (keydown)=\"emitOnKeydownEvent($event)\"\n    (keyup)=\"emitOnKeyupEvent($event)\" (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\"\n    (blur)=\"emitOnBlurEvent($event)\">\n<ng-content select=\"ax-clear-button\"></ng-content>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"toggleType()\" [tabIndex]=\"-1\"\n    *ngIf=\"showToggleButton\">\n    <span class=\"ax-icon {{_icon}}\"></span>\n</button>\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPasswordBoxComponent } from './password-box.component';\nimport { FormsModule } from '@angular/forms';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\n\nconst COMPONENT = [AXPasswordBoxComponent];\nconst MODULES = [\n    CommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXPasswordBoxModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA;;;;AAIG;AA4BG,MAAO,sBAAuB,SAAQ,OAAO,EACjD,yBAAiC,GACjC,qBAAqB,CACtB,CAAA;AA9BD,IAAA,WAAA,GAAA;;QAiCY,IAAK,CAAA,KAAA,GAAwB,UAAU,CAAC;QACxC,IAAK,CAAA,KAAA,GAAoD,oBAAoB,CAAC;QAGxF,IAAY,CAAA,YAAA,GAAkE,eAAe,CAAC;AAE9F;;AAEG;QAEH,IAAgB,CAAA,gBAAA,GAAY,IAAI,CAAC;AAoBlC,KAAA;AAlBC,IAAA,kBAAkB,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;KAC/B;IAED,UAAU,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;AACpB,YAAA,IAAI,CAAC,KAAK,GAAG,wBAAwB,CAAC;AACvC,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;AACxB,YAAA,IAAI,CAAC,KAAK,GAAG,oBAAoB,CAAC;AACnC,SAAA;KACF;AAED,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,CAAqC,kCAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CAAC;KAC/D;8GAnCU,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAXtB,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,sBAAsB,EAAE;AAC7D,YAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,sBAAsB,EAAE;AACtE,YAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,sBAAsB,EAAE;AACtE,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,sBAAsB,CAAC;AACrD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClDH,0+BAgBa,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FDoCA,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBA3BlC,SAAS;+BACE,iBAAiB,EAAA,MAAA,EAEnB,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,EAChG,OAAA,EAAA;wBACP,aAAa;wBACb,aAAa;wBACb,gBAAgB;wBAChB,QAAQ;wBACR,SAAS;wBACT,gBAAgB;wBAChB,gBAAgB;AACjB,qBAAA,EAAA,aAAA,EACc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAEpC,SAAA,EAAA;AACT,wBAAA,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,wBAAwB,EAAE;AAC7D,wBAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,wBAAwB,EAAE;AACtE,wBAAA,EAAE,OAAO,EAAE,oBAAoB,EAAE,WAAW,wBAAwB,EAAE;AACtE,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,4BAA4B,CAAC;AACrD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,0+BAAA,EAAA,CAAA;8BAMmB,KAAK,EAAA,CAAA;sBAAxB,SAAS;uBAAC,OAAO,CAAA;gBAMlB,YAAY,EAAA,CAAA;sBADX,KAAK;gBAON,gBAAgB,EAAA,CAAA;sBADf,KAAK;gBAkBF,WAAW,EAAA,CAAA;sBADd,WAAW;uBAAC,OAAO,CAAA;;;AE7EtB,MAAM,SAAS,GAAG,CAAC,sBAAsB,CAAC,CAAC;AAC3C,MAAM,OAAO,GAAG;IACZ,YAAY;IACZ,WAAW;IACX,cAAc;IACd,iBAAiB;CACpB,CAAC;MAQW,mBAAmB,CAAA;8GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAAnB,mBAAmB,EAAA,YAAA,EAAA,CAdb,sBAAsB,CAAA,EAAA,OAAA,EAAA,CAErC,YAAY;YACZ,WAAW;YACX,cAAc;AACd,YAAA,iBAAiB,aALF,sBAAsB,CAAA,EAAA,CAAA,CAAA,EAAA;AAc5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAJf,OAAO,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAIX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC;AACrB,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AAChB,iBAAA,CAAA;;;ACpBD;;AAEG;;;;"}

package/fesm2022/acorex-components-popup.mjs

@@ -37,6 +37,7 @@ class AXPopupComponent extends MXBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
+        debugger;
         if (this._platform.is('Mobile')) {
             this.data.draggable = false;
         }
@@ -60,7 +61,7 @@ class AXPopupComponent extends MXBaseComponent {
         ref = ref;
         if (ref.instance) {
             this._componentRef = ref.instance;
-            Object.assign(this._componentRef, this.data);
+            Object.assign(this._componentRef, this.data.data);
             Object.assign(this._componentRef, { _isPopup: true });
             if (ref.instance.onClosed) {
                 ref.instance.onClosed.subscribe((e) => {
@@ -108,13 +109,13 @@ class AXPopupComponent extends MXBaseComponent {
             this.dialogRef.close({
                 component: this._componentRef,
                 htmlElement: this.getHostElement(),
-                data: data
+                data: data,
             });
         };
         if (typeof this._componentRef.onClosing === 'function') {
             const ee = {
                 cancel: false,
-                data
+                data,
             };
             const closingResult = this._componentRef.onClosing(ee);
             if (closingResult instanceof Promise) {
@@ -169,6 +170,7 @@ class AXPopupService {
             draggable: true,
             hasBackdrop: true,
             closeOnBackdropClick: false,
+            data: {},
         };
         if (typeof arg2 === 'string') {
             config.title = arg2;
@@ -186,12 +188,13 @@ class AXPopupService {
             backdropClass: config.backdropClass,
             disableClose: config.closeOnBackdropClick ? false : true,
         });
+        debugger;
         const promise = new AXComponentClosedPromise((resolve) => {
-            dialogRef.closed.subscribe(d => {
+            dialogRef.closed.subscribe((d) => {
                 if (resolve) {
                     resolve({
                         sender: d.component,
-                        data: d.data
+                        data: d.data,
                     });
                 }
             });