@acorex/components 19.10.0-next.0 → 19.10.0-next.2

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  isCompleted: boolean;\n}\n","import { MXLookComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  forwardRef,\n  model,\n  output,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.scss'],\n  inputs: ['state', 'disabled', 'readonly', 'look'],\n  outputs: ['stateChange', 'disabledChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXOtpComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n  /**\n   * Holds the length of the OTP input field.\n   */\n  length = model<number>();\n\n  /**\n   * @event\n   * Emits an event when the OTP input is completed.\n   */\n  onCompleted = output<AXOtpCompletedEvent>();\n\n  /**\n   * Stores the values entered in the OTP input fields.\n   */\n  protected inputValues: string[] = [];\n\n  /**\n   * Holds the input values as a signal.\n   */\n  protected inputs = computed(() => {\n    this.calcFontSize();\n    //\n    return Array(this.length())\n      .fill(1)\n      .map((x, i) => i);\n  });\n\n  /** @ignore */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.calcFontSize();\n      this.mapValueToInputs();\n    });\n  }\n\n  /**\n   * Converts the value string to input values and updates the inputValues array.\n   */\n  mapValueToInputs() {\n    this._emitOnComplete();\n    if (!this.value) {\n      return;\n    }\n    this.value.split('').map((v, i) => {\n      this.inputValues[i] = v;\n    });\n  }\n\n  /**\n   * Resets the input values to an empty array.\n   */\n  override reset() {\n    this.inputValues = [];\n    for (let index = 0; index < this.length(); index++) {\n      this.inputValues.push(' ');\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const numberRegex = /^\\d+$/;\n    if (!numberRegex.test(event.target.value)) {\n      event.target.value = '';\n      return;\n    }\n    if (event.target.value.length > 1) {\n      const currentValue = event.target.value;\n      event.target.value = '';\n      event.target.value = currentValue.slice(-1);\n    }\n    if (inputs[i + 1]) {\n      inputs[i + 1].select();\n    }\n    this.inputValues[i] = event.target.value;\n    this._emitOnComplete();\n  }\n\n  /** @ignore */\n  override internalSetValue(value: any): string {\n    if (value) {\n      this.inputValues = value?.toString().split('') as any;\n    }\n    return value;\n  }\n\n  /** @ignore */\n  protected calcFontSize() {\n    const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n    const fontSize = size * 0.5;\n    this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n  }\n\n  /** @ignore */\n  protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].focus();\n          event.preventDefault();\n        }\n        this.inputValues[i] = ' ';\n        this.commitValue(this.inputValues.join(''), true);\n        break;\n\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n        }\n        break;\n\n      case 'Home':\n        inputs[0].select();\n        break;\n\n      case 'End':\n        inputs[this.length() - 1].select();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnPaste(event: ClipboardEvent) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const data = event.clipboardData.getData('text');\n    const isNumber = /\\d+/;\n\n    if (isNumber.test(data)) {\n      inputs[inputs.length - 1].focus();\n      this.inputValues = [];\n      for (let i = 0; i < inputs.length; i++) {\n        this.inputValues[i] = data[i];\n      }\n      this._emitOnComplete();\n    }\n\n    event.preventDefault();\n  }\n\n  /** @ignore */\n  protected _handleFocus(i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[i].select();\n  }\n\n  /** @ignore */\n  protected _emitOnComplete() {\n    // TODO: Check Value delay\n    setTimeout(() => {\n      this.commitValue(this.inputValues.join(''), true);\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value: this.inputValues.join(''),\n        isCompleted: this.inputValues.filter((c) => c).length === this.length(),\n      });\n    });\n  }\n}\n","<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-look-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule, FormsModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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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  isCompleted: boolean;\n}\n","import { MXLookComponent, MXValueComponent } from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  forwardRef,\n  model,\n  output,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n/**\n * @category\n * A component for OTP input fields with state management and custom styling support.\n */\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.scss'],\n  inputs: ['state', 'disabled', 'readonly', 'look'],\n  outputs: ['stateChange', 'disabledChange'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXOtpComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) {\n  /**\n   * Holds the length of the OTP input field.\n   */\n  length = model<number>();\n\n  /**\n   * @event\n   * Emits an event when the OTP input is completed.\n   */\n  onCompleted = output<AXOtpCompletedEvent>();\n\n  /**\n   * Stores the values entered in the OTP input fields.\n   */\n  protected inputValues: string[] = [];\n\n  /**\n   * Holds the input values as a signal.\n   */\n  protected inputs = computed(() => {\n    this.calcFontSize();\n    //\n    return Array(this.length())\n      .fill(1)\n      .map((x, i) => i);\n  });\n\n  /** @ignore */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.calcFontSize();\n      this.mapValueToInputs();\n    });\n  }\n\n  /**\n   * Converts the value string to input values and updates the inputValues array.\n   */\n  mapValueToInputs() {\n    this._emitOnComplete();\n    if (!this.value) {\n      return;\n    }\n    this.value.split('').map((v, i) => {\n      this.inputValues[i] = v;\n    });\n  }\n\n  /**\n   * Resets the input values to an empty array.\n   */\n  override reset() {\n    this.inputValues = [];\n    for (let index = 0; index < this.length(); index++) {\n      this.inputValues.push(' ');\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const numberRegex = /^\\d+$/;\n    if (!numberRegex.test(event.target.value)) {\n      event.target.value = '';\n      return;\n    }\n    if (event.target.value.length > 1) {\n      const currentValue = event.target.value;\n      event.target.value = '';\n      event.target.value = currentValue.slice(-1);\n    }\n    if (inputs[i + 1]) {\n      inputs[i + 1].select();\n    }\n    this.inputValues[i] = event.target.value;\n    this._emitOnComplete();\n  }\n\n  /** @ignore */\n  override internalSetValue(value: any): string {\n    if (value) {\n      this.inputValues = value?.toString().split('') as any;\n    }\n    return value;\n  }\n\n  /** @ignore */\n  protected calcFontSize() {\n    const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n    const fontSize = size * 0.5;\n    this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n  }\n\n  /** @ignore */\n  protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].focus();\n          event.preventDefault();\n        }\n        this.inputValues[i] = ' ';\n        this.commitValue(this.inputValues.join(''), true);\n        break;\n\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n        }\n        break;\n\n      case 'Home':\n        inputs[0].select();\n        break;\n\n      case 'End':\n        inputs[this.length() - 1].select();\n        break;\n\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected _handleOnPaste(event: ClipboardEvent) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const data = event.clipboardData.getData('text');\n    const isNumber = /\\d+/;\n\n    if (isNumber.test(data)) {\n      inputs[inputs.length - 1].focus();\n      this.inputValues = [];\n      for (let i = 0; i < inputs.length; i++) {\n        this.inputValues[i] = data[i];\n      }\n      this._emitOnComplete();\n    }\n\n    event.preventDefault();\n  }\n\n  /** @ignore */\n  protected _handleFocus(i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[i].select();\n  }\n\n  /** @ignore */\n  protected _emitOnComplete() {\n    // TODO: Check Value delay\n    setTimeout(() => {\n      this.commitValue(this.inputValues.join(''), true);\n      this.onCompleted.emit({\n        component: AXOtpComponent,\n        value: this.inputValues.join(''),\n        isCompleted: this.inputValues.filter((c) => c).length === this.length(),\n      });\n    });\n  }\n}\n","<div\n  dir=\"ltr\"\n  class=\"ax-otp-input-container ax-editor-container ax-look-{{ look }}\"\n  [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputs().length + ', minmax(0, 1fr))' }\"\n  (paste)=\"_handleOnPaste($event)\"\n>\n  @for (input of inputs(); let i = $index; track i) {\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"inputValues[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (focus)=\"_handleFocus(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      [attr.disabled]=\"disabled\"\n    />\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXOtpComponent } from './otp.component';\n\nconst COMPONENT = [AXOtpComponent];\nconst MODULES = [CommonModule, FormsModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-paint.mjs

@@ -50,7 +50,7 @@ class AXPaintContainerComponent extends classes((MXInputBaseValueComponent), MXL
                 useExisting: forwardRef(() => AXPaintContainerComponent),
                 multi: true,
             },
-        ], 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-editor-container{--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: .75;--ax-comp-editor-font-size: .675rem;--ax-comp-editor-padding-x: .188rem;--ax-comp-editor-decorator-padding-x: .125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: .875;--ax-comp-editor-font-size: .75rem;--ax-comp-editor-padding-x: .375rem;--ax-comp-editor-decorator-padding-x: .25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: .875rem;--ax-comp-editor-padding-x: .75rem;--ax-comp-editor-decorator-padding-x: .5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: .875rem;--ax-comp-editor-decorator-padding-x: .75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: .875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color))}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-color-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 0 0 1px 0}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-width:var(--ax-comp-editor-border-width, 0);border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden;position:relative}.ax-editor-container:focus,.ax-editor-container:focus-within,.ax-editor-container:focus-visible{box-shadow:var(--ax-comp-editor-box-shadow)}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:transparent}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, .75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color),var(--ax-comp-editor-button-text-color-opacity, .6));display:flex;align-items:center;justify-content:center}ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPaintContainerComponent, decorators: [{
             type: Component,
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: forwardRef(() => AXPaintContainerComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: [".ax-editor-container{--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: .75;--ax-comp-editor-font-size: .675rem;--ax-comp-editor-padding-x: .188rem;--ax-comp-editor-decorator-padding-x: .125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: .875;--ax-comp-editor-font-size: .75rem;--ax-comp-editor-padding-x: .375rem;--ax-comp-editor-decorator-padding-x: .25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: .875rem;--ax-comp-editor-padding-x: .75rem;--ax-comp-editor-decorator-padding-x: .5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: .875rem;--ax-comp-editor-decorator-padding-x: .75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: .875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color))}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-color-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 0 0 1px 0}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-width:var(--ax-comp-editor-border-width, 0);border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden;position:relative}.ax-editor-container:focus,.ax-editor-container:focus-within,.ax-editor-container:focus-visible{box-shadow:var(--ax-comp-editor-box-shadow)}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:transparent}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, .75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color),var(--ax-comp-editor-button-text-color-opacity, .6));display:flex;align-items:center;justify-content:center}ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important;width:100%}\n"] }]
+                    ], standalone: false, template: "<div class=\"ax-editor-container ax-{{ look }}\">\n  <ng-content></ng-content>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-paint-container{width:100%}ax-paint-container>.ax-editor-container{display:block;height:auto!important;width:100%}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-paint.mjs","sources":["../../../../libs/components/paint/src/lib/paint/paint.service.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.html","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.ts","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.html","../../../../libs/components/paint/src/lib/paint.module.ts","../../../../libs/components/paint/src/acorex-components-paint.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXPaintService {\n  penColor = signal<string | CanvasGradient | CanvasPattern>('');\n  lineWidth = signal<number>(10);\n  penType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n  toggleClear = signal(false);\n}\n","import {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { Component, ViewEncapsulation, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * paint container.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-container',\n  templateUrl: './paint-container.component.html',\n  styleUrl: './paint-container.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['look'],\n  providers: [\n    AXPaintService,\n    { provide: AXComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXClearableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPaintContainerComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXPaintContainerComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {}\n","<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","import { Component, HostBinding, ViewEncapsulation, inject, signal } from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint color picker.\n * @category Components\n */\n@Component({\n    selector: 'ax-paint-color-picker',\n    templateUrl: './paint-color-picker.component.html',\n    styleUrl: './paint-color-picker.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    standalone: false\n})\nexport class AXPaintColorPickerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected selectedColor = signal('rgb(12, 12, 12)');\n\n  /** @ignore */\n  protected changeColorHandler(e: string) {\n    this.service.penColor.set(e);\n    this.selectedColor.set(e);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n}\n","<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"solid\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n","import { AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport {\n  Component,\n  effect,\n  HostBinding,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint mode.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-pen-mode-changer',\n  templateUrl: './paint-pen-mode-changer.component.html',\n  styleUrl: './paint-pen-mode-changer.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintPenModeChangerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  defaultWidth = model(10);\n\n  #defaultWidthChange = effect(() => {\n    if (this.defaultWidth()) {\n      this.valueHandler(this.defaultWidth());\n    }\n  });\n\n  /** @ignore */\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  /** @ignore */\n  protected selectedPenType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n\n  penTypes = input<('pen' | 'highlight' | 'eraser')[]>(['pen', 'highlight', 'eraser']);\n\n  sizeSlider = input(true);\n\n  /** @ignore */\n  protected penTypeHandler(e: 'pen' | 'highlight' | 'eraser') {\n    this.service.penType.set(e);\n  }\n\n  /** @ignore */\n  protected clear() {\n    this.service.toggleClear.update((prev) => !prev);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n\n  /** @ignore */\n  protected valueHandler(e: number) {\n    this.service.lineWidth.set(e);\n  }\n}\n","@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","import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  OnDestroy,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintContainerComponent } from '../paint-container/paint-container.component';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * @category Components\n * paint view\n */\n@Component({\n  selector: 'ax-paint-view',\n  templateUrl: './paint-view.component.html',\n  styleUrl: './paint-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintViewComponent implements OnDestroy {\n  /** @ignore */\n  parent = inject(AXPaintContainerComponent);\n\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected renderer = inject(Renderer2);\n\n  private platformID = inject(PLATFORM_ID);\n\n  /** @ignore */\n  resizeEvent;\n\n  /**\n   * Specifies the class that pass to component.\n   *\n   */\n  customClass = input<string>('', { alias: 'class' });\n\n  /** @ignore */\n  protected canvasElem = viewChild<ElementRef<HTMLCanvasElement>>('c');\n\n  /** @ignore */\n  protected ctx = signal<CanvasRenderingContext2D>(null);\n\n  /** @ignore */\n  protected isPainting = signal(false);\n\n  /** @ignore */\n  protected isUserInteract = signal(false);\n\n  /** @ignore */\n  constructor() {\n    afterNextRender(() => {\n      this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));\n      this.resizeEventHandler();\n      this.ctx().lineJoin = 'round';\n      this.ctx().lineCap = 'round';\n      this.ctx().strokeStyle = this.service.penColor();\n      this.ctx().lineWidth = this.service.lineWidth();\n    });\n\n    effect(() => {\n      this.isUserInteract.set(false);\n      this.service.toggleClear();\n      this.ctx()?.clearRect(\n        0,\n        0,\n        this.getBoundingCanvasHandler()?.width,\n        this.getBoundingCanvasHandler()?.height,\n      );\n    });\n\n    if (isPlatformBrowser(this.platformID)) {\n      this.resizeEvent = this.renderer.listen(window, 'resize', this.resizeEventHandler.bind(this));\n    }\n  }\n\n  /** @ignore */\n  ngOnDestroy(): void {\n    if (isPlatformBrowser(this.platformID) && this.resizeEvent) {\n      this.resizeEvent();\n    }\n  }\n\n  /** @ignore */\n  protected resizeEventHandler() {\n    this.ctx().canvas.width = this.getBoundingCanvasHandler()?.width;\n    this.ctx().canvas.height = this.getBoundingCanvasHandler()?.height;\n  }\n\n  /** @ignore */\n  protected penConfigHandler(penType: 'eraser' | 'pen' | 'highlight') {\n    switch (penType) {\n      case 'pen':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n      case 'eraser':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'destination-out';\n        break;\n      case 'highlight':\n        this.ctx().globalAlpha = 0.008;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected getBoundingCanvasHandler() {\n    return this.canvasElem().nativeElement.getBoundingClientRect();\n  }\n\n  /** @ignore */\n  protected mouseDownHandler(e: MouseEvent) {\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(e.offsetX, e.offsetY);\n    this.ctx().lineTo(e.offsetX, e.offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected mouseMoveHandler(e: MouseEvent) {\n    if (this.isPainting()) {\n      this.ctx().lineTo(e.offsetX, e.offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected mouseUpHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /** @ignore */\n  protected touchStartHandler(e: TouchEvent) {\n    const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n    const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(offsetX, offsetY);\n    this.ctx().lineTo(offsetX, offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected touchMoveHandler(e: TouchEvent) {\n    e.preventDefault(); // prevent page from scroll\n    if (this.isPainting()) {\n      const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n      const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n      this.ctx().lineTo(offsetX, offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected touchEndHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /**\n   * @param e - output file type\n   */\n  getOutPut(e: 'image/webp' | 'image/png' | 'image/jpeg') {\n    const base64 = this.canvasElem().nativeElement.toDataURL(e, 0.1);\n    if (this.isUserInteract()) {\n      this.parent.commitValue(base64);\n    } else {\n      this.parent.commitValue(null);\n    }\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.customClass()}`;\n  }\n}\n","<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","import { AXButtonModule } from '@acorex/components/button';\nimport { AXColorBoxModule } from '@acorex/components/color-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXRangeSliderModule } from '@acorex/components/range-slider';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { AXTooltipModule } from '@acorex/components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPaintContainerComponent } from './paint/paint-container/paint-container.component';\nimport { AXPaintColorPickerComponent } from './paint/paint-tools/paint-color-picker/paint-color-picker.component';\nimport { AXPaintPenModeChangerComponent } from './paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component';\nimport { AXPaintViewComponent } from './paint/paint-view/paint-view.component';\n\nconst COMPONENT = [\n  AXPaintContainerComponent,\n\n  AXPaintViewComponent,\n  AXPaintColorPickerComponent,\n  AXPaintPenModeChangerComponent,\n];\n\nconst MODULES = [\n  FormsModule,\n  AXRangeSliderModule,\n  AXSelectBoxModule,\n  AXButtonModule,\n  AXColorBoxModule,\n  AXPopoverModule,\n  AXDecoratorModule,\n  AXTooltipModule,\n];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPaintModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i3","i6"],"mappings":"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"}
+{"version":3,"file":"acorex-components-paint.mjs","sources":["../../../../libs/components/paint/src/lib/paint/paint.service.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.ts","../../../../libs/components/paint/src/lib/paint/paint-container/paint-container.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-color-picker/paint-color-picker.component.html","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.ts","../../../../libs/components/paint/src/lib/paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component.html","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.ts","../../../../libs/components/paint/src/lib/paint/paint-view/paint-view.component.html","../../../../libs/components/paint/src/lib/paint.module.ts","../../../../libs/components/paint/src/acorex-components-paint.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable()\nexport class AXPaintService {\n  penColor = signal<string | CanvasGradient | CanvasPattern>('');\n  lineWidth = signal<number>(10);\n  penType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n  toggleClear = signal(false);\n}\n","import {\n  AXClearableComponent,\n  AXComponent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { Component, ViewEncapsulation, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * paint container.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-container',\n  templateUrl: './paint-container.component.html',\n  styleUrl: './paint-container.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['look'],\n  providers: [\n    AXPaintService,\n    { provide: AXComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXFocusableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXClearableComponent, useExisting: AXPaintContainerComponent },\n    { provide: AXValuableComponent, useExisting: AXPaintContainerComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPaintContainerComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXPaintContainerComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {}\n","<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","import { Component, HostBinding, ViewEncapsulation, inject, signal } from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint color picker.\n * @category Components\n */\n@Component({\n    selector: 'ax-paint-color-picker',\n    templateUrl: './paint-color-picker.component.html',\n    styleUrl: './paint-color-picker.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    standalone: false\n})\nexport class AXPaintColorPickerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected selectedColor = signal('rgb(12, 12, 12)');\n\n  /** @ignore */\n  protected changeColorHandler(e: string) {\n    this.service.penColor.set(e);\n    this.selectedColor.set(e);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n}\n","<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"solid\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n","import { AXPlacement } from '@acorex/components/common';\nimport { AXPopoverCloseTrigger, AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport {\n  Component,\n  effect,\n  HostBinding,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintService } from '../../paint.service';\n\n/**\n * paint mode.\n * @category Components\n */\n@Component({\n  selector: 'ax-paint-pen-mode-changer',\n  templateUrl: './paint-pen-mode-changer.component.html',\n  styleUrl: './paint-pen-mode-changer.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintPenModeChangerComponent {\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  defaultWidth = model(10);\n\n  #defaultWidthChange = effect(() => {\n    if (this.defaultWidth()) {\n      this.valueHandler(this.defaultWidth());\n    }\n  });\n\n  /** @ignore */\n  protected popoverOption: {\n    openOn: AXPopoverOpenTrigger;\n    closeOn: AXPopoverCloseTrigger;\n    placement: AXPlacement;\n    offsetX: number;\n    offsetY: number;\n  } = {\n    openOn: 'click',\n    closeOn: 'clickOut',\n    placement: 'top',\n    offsetX: 0,\n    offsetY: 0,\n  };\n\n  /** @ignore */\n  protected selectedPenType = signal<'pen' | 'highlight' | 'eraser'>('pen');\n\n  penTypes = input<('pen' | 'highlight' | 'eraser')[]>(['pen', 'highlight', 'eraser']);\n\n  sizeSlider = input(true);\n\n  /** @ignore */\n  protected penTypeHandler(e: 'pen' | 'highlight' | 'eraser') {\n    this.service.penType.set(e);\n  }\n\n  /** @ignore */\n  protected clear() {\n    this.service.toggleClear.update((prev) => !prev);\n  }\n\n  @HostBinding('style.marginInline')\n  get __hostClass(): string {\n    return `.5rem`;\n  }\n\n  /** @ignore */\n  protected valueHandler(e: number) {\n    this.service.lineWidth.set(e);\n  }\n}\n","@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","import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  OnDestroy,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPaintContainerComponent } from '../paint-container/paint-container.component';\nimport { AXPaintService } from '../paint.service';\n\n/**\n * @category Components\n * paint view\n */\n@Component({\n  selector: 'ax-paint-view',\n  templateUrl: './paint-view.component.html',\n  styleUrl: './paint-view.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXPaintViewComponent implements OnDestroy {\n  /** @ignore */\n  parent = inject(AXPaintContainerComponent);\n\n  /** @ignore */\n  protected service = inject(AXPaintService);\n\n  /** @ignore */\n  protected renderer = inject(Renderer2);\n\n  private platformID = inject(PLATFORM_ID);\n\n  /** @ignore */\n  resizeEvent;\n\n  /**\n   * Specifies the class that pass to component.\n   *\n   */\n  customClass = input<string>('', { alias: 'class' });\n\n  /** @ignore */\n  protected canvasElem = viewChild<ElementRef<HTMLCanvasElement>>('c');\n\n  /** @ignore */\n  protected ctx = signal<CanvasRenderingContext2D>(null);\n\n  /** @ignore */\n  protected isPainting = signal(false);\n\n  /** @ignore */\n  protected isUserInteract = signal(false);\n\n  /** @ignore */\n  constructor() {\n    afterNextRender(() => {\n      this.ctx.set(this.canvasElem().nativeElement.getContext('2d'));\n      this.resizeEventHandler();\n      this.ctx().lineJoin = 'round';\n      this.ctx().lineCap = 'round';\n      this.ctx().strokeStyle = this.service.penColor();\n      this.ctx().lineWidth = this.service.lineWidth();\n    });\n\n    effect(() => {\n      this.isUserInteract.set(false);\n      this.service.toggleClear();\n      this.ctx()?.clearRect(\n        0,\n        0,\n        this.getBoundingCanvasHandler()?.width,\n        this.getBoundingCanvasHandler()?.height,\n      );\n    });\n\n    if (isPlatformBrowser(this.platformID)) {\n      this.resizeEvent = this.renderer.listen(window, 'resize', this.resizeEventHandler.bind(this));\n    }\n  }\n\n  /** @ignore */\n  ngOnDestroy(): void {\n    if (isPlatformBrowser(this.platformID) && this.resizeEvent) {\n      this.resizeEvent();\n    }\n  }\n\n  /** @ignore */\n  protected resizeEventHandler() {\n    this.ctx().canvas.width = this.getBoundingCanvasHandler()?.width;\n    this.ctx().canvas.height = this.getBoundingCanvasHandler()?.height;\n  }\n\n  /** @ignore */\n  protected penConfigHandler(penType: 'eraser' | 'pen' | 'highlight') {\n    switch (penType) {\n      case 'pen':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n      case 'eraser':\n        this.ctx().globalAlpha = 1;\n        this.ctx().globalCompositeOperation = 'destination-out';\n        break;\n      case 'highlight':\n        this.ctx().globalAlpha = 0.008;\n        this.ctx().globalCompositeOperation = 'source-over';\n        break;\n    }\n  }\n\n  /** @ignore */\n  protected getBoundingCanvasHandler() {\n    return this.canvasElem().nativeElement.getBoundingClientRect();\n  }\n\n  /** @ignore */\n  protected mouseDownHandler(e: MouseEvent) {\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(e.offsetX, e.offsetY);\n    this.ctx().lineTo(e.offsetX, e.offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected mouseMoveHandler(e: MouseEvent) {\n    if (this.isPainting()) {\n      this.ctx().lineTo(e.offsetX, e.offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected mouseUpHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /** @ignore */\n  protected touchStartHandler(e: TouchEvent) {\n    const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n    const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n\n    this.isPainting.set(true);\n    this.isUserInteract.set(true);\n\n    this.penConfigHandler(this.service.penType());\n\n    this.ctx().strokeStyle = this.service.penColor();\n    this.ctx().lineWidth = this.service.lineWidth();\n\n    this.ctx().beginPath();\n    this.ctx().moveTo(offsetX, offsetY);\n    this.ctx().lineTo(offsetX, offsetY);\n    this.ctx().stroke();\n  }\n\n  /** @ignore */\n  protected touchMoveHandler(e: TouchEvent) {\n    e.preventDefault(); // prevent page from scroll\n    if (this.isPainting()) {\n      const offsetX = e.touches[0].clientX - this.getBoundingCanvasHandler().left;\n      const offsetY = e.touches[0].clientY - this.getBoundingCanvasHandler().top;\n      this.ctx().lineTo(offsetX, offsetY);\n      this.ctx().stroke();\n    }\n  }\n\n  /** @ignore */\n  protected touchEndHandler() {\n    this.ctx().closePath();\n    this.isPainting.set(false);\n  }\n\n  /**\n   * @param e - output file type\n   */\n  getOutPut(e: 'image/webp' | 'image/png' | 'image/jpeg') {\n    const base64 = this.canvasElem().nativeElement.toDataURL(e, 0.1);\n    if (this.isUserInteract()) {\n      this.parent.commitValue(base64);\n    } else {\n      this.parent.commitValue(null);\n    }\n  }\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.customClass()}`;\n  }\n}\n","<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","import { AXButtonModule } from '@acorex/components/button';\nimport { AXColorBoxModule } from '@acorex/components/color-box';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXRangeSliderModule } from '@acorex/components/range-slider';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { AXTooltipModule } from '@acorex/components/tooltip';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPaintContainerComponent } from './paint/paint-container/paint-container.component';\nimport { AXPaintColorPickerComponent } from './paint/paint-tools/paint-color-picker/paint-color-picker.component';\nimport { AXPaintPenModeChangerComponent } from './paint/paint-tools/paint-pen-mode-changer/paint-pen-mode-changer.component';\nimport { AXPaintViewComponent } from './paint/paint-view/paint-view.component';\n\nconst COMPONENT = [\n  AXPaintContainerComponent,\n\n  AXPaintViewComponent,\n  AXPaintColorPickerComponent,\n  AXPaintPenModeChangerComponent,\n];\n\nconst MODULES = [\n  FormsModule,\n  AXRangeSliderModule,\n  AXSelectBoxModule,\n  AXButtonModule,\n  AXColorBoxModule,\n  AXPopoverModule,\n  AXDecoratorModule,\n  AXTooltipModule,\n];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPaintModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2","i3","i6"],"mappings":"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"}

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

@@ -64,7 +64,7 @@ class AXPasswordBoxComponent extends classes((MXInputBaseValueComponent), MXLook
                 useExisting: forwardRef(() => AXPasswordBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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-editor-container{--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: .75;--ax-comp-editor-font-size: .675rem;--ax-comp-editor-padding-x: .188rem;--ax-comp-editor-decorator-padding-x: .125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: .875;--ax-comp-editor-font-size: .75rem;--ax-comp-editor-padding-x: .375rem;--ax-comp-editor-decorator-padding-x: .25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: .875rem;--ax-comp-editor-padding-x: .75rem;--ax-comp-editor-decorator-padding-x: .5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: .875rem;--ax-comp-editor-decorator-padding-x: .75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: .875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color))}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-color-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 0 0 1px 0}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-width:var(--ax-comp-editor-border-width, 0);border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden;position:relative}.ax-editor-container:focus,.ax-editor-container:focus-within,.ax-editor-container:focus-visible{box-shadow:var(--ax-comp-editor-box-shadow)}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:transparent}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, .75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color),var(--ax-comp-editor-button-text-color-opacity, .6));display:flex;align-items:center;justify-content:center}ax-password-box ax-password-strength-validation{margin-top:.25rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}\n"], dependencies: [{ 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 }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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 ax-password-strength-validation{margin-top:.25rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}\n"], dependencies: [{ 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.0.3", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
@@ -89,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: forwardRef(() => AXPasswordBoxComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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-editor-container{--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: .75;--ax-comp-editor-font-size: .675rem;--ax-comp-editor-padding-x: .188rem;--ax-comp-editor-decorator-padding-x: .125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: .875;--ax-comp-editor-font-size: .75rem;--ax-comp-editor-padding-x: .375rem;--ax-comp-editor-decorator-padding-x: .25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: .875rem;--ax-comp-editor-padding-x: .75rem;--ax-comp-editor-decorator-padding-x: .5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: .875rem;--ax-comp-editor-decorator-padding-x: .75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: .875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color))}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-color-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 0 0 1px 0}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);--ax-comp-editor-box-shadow: 0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-width:var(--ax-comp-editor-border-width, 0);border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden;position:relative}.ax-editor-container:focus,.ax-editor-container:focus-within,.ax-editor-container:focus-visible{box-shadow:var(--ax-comp-editor-box-shadow)}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:transparent}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, .75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color),var(--ax-comp-editor-button-text-color-opacity, .6));display:flex;align-items:center;justify-content:center}ax-password-box ax-password-strength-validation{margin-top:.25rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}\n"] }]
+                    ], standalone: false, template: "<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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 ax-password-strength-validation{margin-top:.25rem}ax-password-box .ax-state-disabled{opacity:.55;cursor:not-allowed}ax-password-box .ax-state-readonly{opacity:.75}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

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-strength-validation/password-strength-validation.component.ts","../../../../libs/components/password-box/src/lib/password-strength-validation/password-strength-validation.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  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\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: ['readonly', 'disabled', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'],\n  styleUrl: './password-box.component.scss',\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n    'onKeyDown',\n    'onKeyUp',\n    'onKeyPress',\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXPasswordBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPasswordBoxComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXPasswordBoxComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {\n  /** @ignore */\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  /** @ignore */\n  protected _type: 'password' | 'text' = 'password';\n\n  /** @ignore */\n  protected _icon: 'ax-icon-visibility' | 'ax-icon-visibility-off' = 'ax-icon-visibility';\n\n  /**\n   * Sets the autocomplete behavior for the input field.\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 = true;\n\n  /**\n   * Defines custom CSS classes to apply to the component.\n   */\n  @Input('class')\n  classNames: string;\n\n  /** @ignore */\n  _handleModelChange(value: string) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   * Toggles the input type between 'password' and 'text' to show or hide the password.\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","<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPasswordBoxComponent } from '../password-box.component';\n\n@Component({\n  selector: 'ax-password-strength-validation',\n  templateUrl: './password-strength-validation.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  styleUrl: './password-strength-validation.component.scss',\n  standalone: false,\n})\nexport class AXPasswordStrengthValidationComponent {\n  protected passwordStrength = signal(0);\n  protected updatedPassword = signal('');\n  protected strengthLabel = signal('fragile');\n  protected strengthLabelColor = signal('danger');\n  protected parent = inject(AXPasswordBoxComponent);\n\n  /**\n   * Hint status.\n   */\n  showHint = input(false);\n\n  /**\n   * Progress status.\n   */\n  showProgress = input(true);\n\n  protected isLenghtgraterThan8 = signal({ regex: /.{8,}/, state: false });\n  protected isUseUpperCase = signal({ regex: /[A-Z]/, state: false });\n  protected isUseLowerCase = signal({ regex: /[a-z]/, state: false });\n  protected isUseNumber = signal({ regex: /\\d/, state: false });\n  protected isUseSpecialCharacter = signal({\n    regex: /[!@#$%^&*(),.?\":{}|<>]/,\n    state: false,\n  });\n\n  #onComponentInit = afterNextRender(() => {\n    this.parent.onValueChanged.subscribe((v) => {\n      if (v.value) {\n        this.updatedPassword.set(v.value);\n      } else {\n        this.updatedPassword.set('');\n      }\n      this.checkPasswordStrength();\n    });\n  });\n\n  private checkRegexHandler(inter) {\n    if (inter().regex.test(this.updatedPassword())) {\n      inter.update((prev) => ({ ...prev, state: true }));\n      return true;\n    }\n    inter.update((prev) => ({ ...prev, state: false }));\n    return false;\n  }\n\n  protected checkPasswordStrength() {\n    let strength = 0;\n\n    this.checkRegexHandler(this.isLenghtgraterThan8) && strength++;\n    this.checkRegexHandler(this.isUseUpperCase) && strength++;\n    this.checkRegexHandler(this.isUseLowerCase) && strength++;\n    this.checkRegexHandler(this.isUseNumber) && strength++;\n    this.checkRegexHandler(this.isUseSpecialCharacter) && strength++;\n\n    const strengthLabels = ['fragile', 'fragile', 'weak', 'good', 'strong', 'unbreakable'];\n    this.strengthLabel.set(strengthLabels[strength]);\n    this.strengthLabelColor.set(strength <= 2 ? 'danger' : strength <= 3 ? 'warning' : 'success');\n    this.passwordStrength.set((strength * 100) / 5);\n  }\n}\n","@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","import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXProgressBarModule } from '@acorex/components/progress-bar';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPasswordBoxComponent } from './password-box.component';\nimport { AXPasswordStrengthValidationComponent } from './password-strength-validation/password-strength-validation.component';\n\nconst COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];\nconst MODULES = [\n  CommonModule,\n  FormsModule,\n  AXButtonModule,\n  AXDecoratorModule,\n  AXProgressBarModule,\n  AXBadgeModule,\n  AXTranslationModule,\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":["i1"],"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-strength-validation/password-strength-validation.component.ts","../../../../libs/components/password-box/src/lib/password-strength-validation/password-strength-validation.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  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\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: ['readonly', 'disabled', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'],\n  styleUrl: './password-box.component.scss',\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'readonlyChange',\n    'disabledChange',\n    'onKeyDown',\n    'onKeyUp',\n    'onKeyPress',\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: AXComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXPasswordBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXPasswordBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPasswordBoxComponent),\n      multi: true,\n    },\n  ],\n  standalone: false,\n})\nexport class AXPasswordBoxComponent extends classes(MXInputBaseValueComponent<string>, MXLookComponent) {\n  /** @ignore */\n  @ViewChild('input') input: ElementRef<HTMLInputElement>;\n\n  /** @ignore */\n  protected _type: 'password' | 'text' = 'password';\n\n  /** @ignore */\n  protected _icon: 'ax-icon-visibility' | 'ax-icon-visibility-off' = 'ax-icon-visibility';\n\n  /**\n   * Sets the autocomplete behavior for the input field.\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 = true;\n\n  /**\n   * Defines custom CSS classes to apply to the component.\n   */\n  @Input('class')\n  classNames: string;\n\n  /** @ignore */\n  _handleModelChange(value: string) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   * Toggles the input type between 'password' and 'text' to show or hide the password.\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","<div\n  class=\"ax-editor-container {{ classNames }} ax-{{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\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","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXPasswordBoxComponent } from '../password-box.component';\n\n@Component({\n  selector: 'ax-password-strength-validation',\n  templateUrl: './password-strength-validation.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  styleUrl: './password-strength-validation.component.scss',\n  standalone: false,\n})\nexport class AXPasswordStrengthValidationComponent {\n  protected passwordStrength = signal(0);\n  protected updatedPassword = signal('');\n  protected strengthLabel = signal('fragile');\n  protected strengthLabelColor = signal('danger');\n  protected parent = inject(AXPasswordBoxComponent);\n\n  /**\n   * Hint status.\n   */\n  showHint = input(false);\n\n  /**\n   * Progress status.\n   */\n  showProgress = input(true);\n\n  protected isLenghtgraterThan8 = signal({ regex: /.{8,}/, state: false });\n  protected isUseUpperCase = signal({ regex: /[A-Z]/, state: false });\n  protected isUseLowerCase = signal({ regex: /[a-z]/, state: false });\n  protected isUseNumber = signal({ regex: /\\d/, state: false });\n  protected isUseSpecialCharacter = signal({\n    regex: /[!@#$%^&*(),.?\":{}|<>]/,\n    state: false,\n  });\n\n  #onComponentInit = afterNextRender(() => {\n    this.parent.onValueChanged.subscribe((v) => {\n      if (v.value) {\n        this.updatedPassword.set(v.value);\n      } else {\n        this.updatedPassword.set('');\n      }\n      this.checkPasswordStrength();\n    });\n  });\n\n  private checkRegexHandler(inter) {\n    if (inter().regex.test(this.updatedPassword())) {\n      inter.update((prev) => ({ ...prev, state: true }));\n      return true;\n    }\n    inter.update((prev) => ({ ...prev, state: false }));\n    return false;\n  }\n\n  protected checkPasswordStrength() {\n    let strength = 0;\n\n    this.checkRegexHandler(this.isLenghtgraterThan8) && strength++;\n    this.checkRegexHandler(this.isUseUpperCase) && strength++;\n    this.checkRegexHandler(this.isUseLowerCase) && strength++;\n    this.checkRegexHandler(this.isUseNumber) && strength++;\n    this.checkRegexHandler(this.isUseSpecialCharacter) && strength++;\n\n    const strengthLabels = ['fragile', 'fragile', 'weak', 'good', 'strong', 'unbreakable'];\n    this.strengthLabel.set(strengthLabels[strength]);\n    this.strengthLabelColor.set(strength <= 2 ? 'danger' : strength <= 3 ? 'warning' : 'success');\n    this.passwordStrength.set((strength * 100) / 5);\n  }\n}\n","@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","import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXProgressBarModule } from '@acorex/components/progress-bar';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXPasswordBoxComponent } from './password-box.component';\nimport { AXPasswordStrengthValidationComponent } from './password-strength-validation/password-strength-validation.component';\n\nconst COMPONENT = [AXPasswordBoxComponent, AXPasswordStrengthValidationComponent];\nconst MODULES = [\n  CommonModule,\n  FormsModule,\n  AXButtonModule,\n  AXDecoratorModule,\n  AXProgressBarModule,\n  AXBadgeModule,\n  AXTranslationModule,\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":["i1"],"mappings":"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"}

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

@@ -164,7 +164,7 @@ class AXPhoneBoxComponent extends classes((MXInputBaseValueComponent), MXLookCom
                 useExisting: forwardRef(() => AXPhoneBoxComponent),
                 multi: true,
             },
-        ], 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-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-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-200))}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i4.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.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: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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-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-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-200))}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "selectedItems", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: i4.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.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: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPhoneBoxComponent, decorators: [{
             type: Component,