@acorex/components 16.0.2 → 17.0.1

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

@@ -0,0 +1,331 @@
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, NgModule } from '@angular/core';
+import * as i2 from 'angular-imask';
+import { IMaskDirective, IMaskModule } from 'angular-imask';
+import { createMask } from 'imask';
+import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { toNumber, isEmpty } from 'lodash-es';
+import { classes } from 'polytype';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { CommonModule } from '@angular/common';
+
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        this._padDecimalZeros = false;
+        /**
+         *  Specifies the value that is used to increment or decrement the **Integer** part of number
+         */
+        this.step = 1;
+        this._decimals = 0;
+        /**
+         *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
+         */
+        this.decimalStep = 'auto';
+        /**
+         *  Specifies whether the Up and Down spin buttons will be rendered or not
+         */
+        this.showSpinButtons = true;
+        this._minValue = Number.MIN_SAFE_INTEGER;
+        this._maxValue = Number.MAX_SAFE_INTEGER;
+    }
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get thousandsSeparator() {
+        return this._thousandsSeparator;
+    }
+    set thousandsSeparator(v) {
+        this.setOption({
+            name: 'thousandsSeparator',
+            value: v ?? '',
+        });
+    }
+    /**
+     *  A character value that specifies the separator character.
+     */
+    get padDecimalZeros() {
+        return this._padDecimalZeros;
+    }
+    set padDecimalZeros(v) {
+        this.setOption({
+            name: 'padDecimalZeros',
+            value: v,
+        });
+    }
+    /**
+     *  Specifies the number of decimals that the user can enter
+     */
+    get decimals() {
+        return this._decimals;
+    }
+    set decimals(v) {
+        this.setOption({
+            name: 'decimals',
+            value: v ?? 0,
+        });
+    }
+    /**
+     *  Specifies the smallest value that is valid
+     */
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this.setOption({
+            name: 'minValue',
+            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
+        });
+    }
+    /**
+     *  Specifies the greatest value that is valid
+     */
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this.setOption({
+            name: 'maxValue',
+            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
+        });
+    }
+    ngAfterViewInit() {
+        this._updateMask();
+    }
+    internalOptionChanged() {
+        this._updateMask();
+    }
+    clear() {
+        this.input.nativeElement.value = null;
+        super.clear(true);
+    }
+    internalSetValue(value) {
+        // || (value == 0 && !this._maskObj.value)
+        if (value == null) {
+            return this.defaultValue;
+        }
+        const v = toNumber(value);
+        if (v < this.minValue)
+            return this.minValue;
+        if (v > this.maxValue)
+            return this.maxValue;
+        return v;
+    }
+    _updateMask() {
+        if (!this._maskObj) {
+            this._maskObj = createMask({
+                mask: Number,
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
+            });
+            this._maskObj.format = (v, m) => {
+                return !isNaN(v)
+                    ? v.toLocaleString('en-US', {
+                        useGrouping: false,
+                        maximumFractionDigits: 20,
+                    })
+                    : '';
+            };
+        }
+        else {
+            this._maskObj.updateOptions({
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros,
+            });
+        }
+        this._maskDirective?.maskRef?.updateValue();
+        this._maskDirective?.maskRef?.updateControl();
+    }
+    _handleModelChange(value) {
+        if (value == 0 && isEmpty(this.input?.nativeElement?.value)) {
+            value = null;
+        }
+        this.commitValue(value, true);
+    }
+    _handleOnKeydownEvent(e) {
+        if (this.disabled || this.readonly)
+            return;
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const input = e.target;
+        const valStr = input.value;
+        const decimalPointIndex = valStr.indexOf('.');
+        const _cursorPos = input.selectionStart;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (decimalPointIndex > 0 &&
+                _cursorPos > decimalPointIndex &&
+                this.decimals > 0) {
+                e.key === 'ArrowDown'
+                    ? this.decimalStepDown(true)
+                    : this.decimalStepUp(true);
+            }
+            else {
+                e.key === 'ArrowDown' ? this.stepDown(true) : this.stepUp(true);
+            }
+            ignore();
+            setTimeout(() => {
+                input.setSelectionRange(_cursorPos, _cursorPos);
+            }, 5);
+        }
+        super.emitOnKeydownEvent(e);
+    }
+    _handleUpDownClick(v) {
+        if (this.disabled || this.readonly)
+            return;
+        v == 1 ? this.stepUp(true) : this.stepDown(true);
+    }
+    stepUp(u = false) {
+        if (!this.value) {
+            this.commitValue(Math.max(this.minValue, 0), u);
+        }
+        this.commitValue(this.value + toNumber(this.step), u);
+    }
+    stepDown(u = false) {
+        if (!this.value) {
+            this.commitValue(Math.max(this.minValue, 0), u);
+        }
+        this.commitValue(this.value - toNumber(this.step), u);
+    }
+    decimalStepUp(u = false) {
+        if (!this.value) {
+            this.commitValue(Math.max(this.minValue, 0), u);
+        }
+        this.commitValue(this.value +
+            toNumber(this.decimalStep == 'auto'
+                ? 1 / Math.pow(10, this.decimals)
+                : this.decimalStep), u);
+    }
+    decimalStepDown(u = false) {
+        if (!this.value) {
+            this.commitValue(Math.max(this.minValue, 0), u);
+        }
+        this.commitValue(this.value -
+            toNumber(this.decimalStep == 'auto'
+                ? 1 / Math.pow(10, this.decimals)
+                : this.decimalStep), u);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id", look: "look", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", classNames: ["class", "classNames"] }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress" }, providers: [
+            { provide: AXComponent, useExisting: AXNumberBoxComponent },
+            { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
+            { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
+            { provide: AXValuableComponent, useExisting: AXNumberBoxComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXNumberBoxComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container ax-look-{{look}} {{classNames}}\" [class.ax-state-disabled]=\"disabled\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input #input class=\"ax-input\" type=\"text\" [id]=\"id\" [name]=\"name\" [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\" [imask]=\"_maskObj\" [unmask]=\"'typed'\" [attr.min]=\"minValue\" [attr.max]=\"maxValue\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"_handleOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" />\n  @if(input.value && !disabled && !readonly){\n  <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if(showSpinButtons){\n  <div class=\"ax-number-box-control\">\n    <button type=\"button\" class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n      [class.ax-state-disabled]=\"disabled\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\" [disabled]=\"disabled\">\n      <span class=\"ax-icon ax-icon-solid ax-icon-arrow-up\"></span>\n    </button>\n    <button type=\"button\" class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n      [class.ax-state-disabled]=\"disabled\" (click)=\"_handleUpDownClick(-1)\" [disabled]=\"disabled\">\n      <span class=\"ax-icon ax-icon-solid ax-icon-arrow-down\" tabindex=\"-1\"></span>\n    </button>\n  </div>\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>", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem 0}.ax-number-box-control .ax-general-button{display:flex;height:1rem;width:1.25rem;border-radius:.25rem}.ax-number-box-control .ax-general-button.ax-number-box-increment i:hover,.ax-number-box-control .ax-general-button.ax-number-box-decrement i:hover{align-items:center}\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"] }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-number-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'placeholder',
+                        'value',
+                        'state',
+                        'name',
+                        'id',
+                        'look',
+                    ], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                        'onKeyDown',
+                        'onKeyUp',
+                        'onKeyPress',
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXNumberBoxComponent },
+                        { provide: AXFocusableComponent, useExisting: AXNumberBoxComponent },
+                        { provide: AXClearableComponent, useExisting: AXNumberBoxComponent },
+                        { provide: AXValuableComponent, useExisting: AXNumberBoxComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXNumberBoxComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ax-editor-container ax-look-{{look}} {{classNames}}\" [class.ax-state-disabled]=\"disabled\">\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input #input class=\"ax-input\" type=\"text\" [id]=\"id\" [name]=\"name\" [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"'off'\" [imask]=\"_maskObj\" [unmask]=\"'typed'\" [attr.min]=\"minValue\" [attr.max]=\"maxValue\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"value\" (ngModelChange)=\"_handleModelChange($event)\"\n    (keydown)=\"_handleOnKeydownEvent($event)\" (keyup)=\"emitOnKeyupEvent($event)\"\n    (keypress)=\"emitOnKeypressEvent($event)\" (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" />\n  @if(input.value && !disabled && !readonly){\n  <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  @if(showSpinButtons){\n  <div class=\"ax-number-box-control\">\n    <button type=\"button\" class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n      [class.ax-state-disabled]=\"disabled\" (click)=\"_handleUpDownClick(1)\" tabindex=\"-1\" [disabled]=\"disabled\">\n      <span class=\"ax-icon ax-icon-solid ax-icon-arrow-up\"></span>\n    </button>\n    <button type=\"button\" class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n      [class.ax-state-disabled]=\"disabled\" (click)=\"_handleUpDownClick(-1)\" [disabled]=\"disabled\">\n      <span class=\"ax-icon ax-icon-solid ax-icon-arrow-down\" tabindex=\"-1\"></span>\n    </button>\n  </div>\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>", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem 0}.ax-number-box-control .ax-general-button{display:flex;height:1rem;width:1.25rem;border-radius:.25rem}.ax-number-box-control .ax-general-button.ax-number-box-increment i:hover,.ax-number-box-control .ax-general-button.ax-number-box-decrement i:hover{align-items:center}\n"] }]
+        }], propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input']
+            }], thousandsSeparator: [{
+                type: Input
+            }], padDecimalZeros: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], decimals: [{
+                type: Input
+            }], decimalStep: [{
+                type: Input
+            }], showSpinButtons: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], classNames: [{
+                type: Input,
+                args: ['class']
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
+            }] } });
+
+const COMPONENT = [AXNumberBoxComponent];
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    IMaskModule,
+];
+class AXNumberBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            IMaskModule], exports: [AXNumberBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXNumberBoxComponent, AXNumberBoxModule };
+//# sourceMappingURL=acorex-components-number-box.mjs.map

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

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

package/fesm2022/acorex-components-otp.mjs

@@ -0,0 +1,186 @@
+import { AXEvent, MXValueComponent, MXLookComponent } from '@acorex/components/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { classes } from 'polytype';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class AXOtpCompletedEvent extends AXEvent {
+}
+
+class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        this.inputs = [];
+        this.lengthChange = new EventEmitter();
+        this.onCompleted = new EventEmitter();
+        this._numbers = [];
+    }
+    get length() {
+        return this._length;
+    }
+    set length(v) {
+        this.setOption({
+            name: 'length',
+            afterCallback: () => {
+                this._render();
+                this.calcFontSize();
+            },
+            value: v,
+        });
+    }
+    clear() {
+        this._numbers = [];
+        this.setState('clear');
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._render();
+    }
+    _render() {
+        this.inputs = Array(this.length)
+            .fill(1)
+            .map((x, i) => i);
+    }
+    ngAfterViewInit() {
+        this.calcFontSize();
+    }
+    _handleOnInput(event, i) {
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const numberRegex = /^\d+$/;
+        if (!numberRegex.test(event.target.value)) {
+            event.target.value = '';
+            return;
+        }
+        if (event.target.value.length > 1) {
+            const currentValue = event.target.value;
+            event.target.value = '';
+            event.target.value = currentValue.slice(-1);
+        }
+        if (inputs[i + 1]) {
+            inputs[i + 1].select();
+        }
+        this._numbers[i] = event.target.value;
+        // if (this._numbers.filter((c) => c).length === this.length) {
+        //   this.setState('success');
+        // } else {
+        //   this.setState('error');
+        // }
+        this.onCompleted.emit({
+            component: AXOtpComponent,
+            value: this._numbers.join(''),
+            isCompleted: this._numbers.filter((c) => c).length === this.length,
+        });
+    }
+    internalSetValue(value) {
+        if (value) {
+            this._numbers = value?.toString().split('');
+        }
+        return value;
+    }
+    calcFontSize() {
+        const size = this.getHostElement().querySelector('.ax-input')?.clientWidth;
+        const fontSize = Math.min(size, size) * 0.5;
+        this.getHostElement().style.setProperty('--font-size', fontSize + 'px');
+    }
+    _handleOnKeyDown(event, i) {
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        switch (event.key) {
+            case 'Backspace':
+                inputs[i].value = '';
+                if (inputs[i - 1]) {
+                    inputs[i - 1].select();
+                    event.preventDefault();
+                }
+                this._numbers[i] = null;
+                break;
+            case 'ArrowRight':
+                if (inputs[i + 1]) {
+                    inputs[i + 1].select();
+                }
+                break;
+            case 'ArrowLeft':
+                if (inputs[i - 1]) {
+                    inputs[i - 1].select();
+                }
+                break;
+            case 'Home':
+                inputs[0].focus();
+                break;
+            case 'End':
+                inputs[this.length - 1].select();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+        }
+    }
+    _handleOnPaste(event) {
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        const data = event.clipboardData.getData('text');
+        const isNumber = /\d+/;
+        if (isNumber.test(data)) {
+            inputs[inputs.length - 1].focus();
+            this._numbers = [];
+            for (let i = 0; i < inputs.length; i++) {
+                this._numbers[i] = +data[i];
+            }
+        }
+        event.preventDefault();
+    }
+    _handleOnClick(i) {
+        const inputs = this.getHostElement().querySelectorAll('.ax-input');
+        inputs[i].select();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXOtpComponent, selector: "ax-otp", inputs: { state: "state", disabled: "disabled", readonly: "readonly", look: "look", length: "length" }, outputs: { stateChange: "stateChange", disabledChange: "disabledChange", lengthChange: "lengthChange", onCompleted: "onCompleted" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXOtpComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div dir=\"ltr\" 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 class=\"ax-input\" type=\"number\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-success]=\"state === 'success'\" [class.ax-state-error]=\"state === 'error'\" maxlength=\"1\"\n    [ngModel]=\"_numbers[i]\" [disabled]=\"disabled\" [readonly]=\"readonly\" (click)=\"_handleOnClick(i)\"\n    (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" [attr.disabled]=\"disabled\" />\n  }\n</div>\n<ng-template #name></ng-template>", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500));border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input{border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem)}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXOtpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-otp', inputs: ['state', 'disabled', 'readonly', 'look'], outputs: ['stateChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXOtpComponent),
+                            multi: true,
+                        },
+                    ], template: "<div dir=\"ltr\" 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 class=\"ax-input\" type=\"number\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-success]=\"state === 'success'\" [class.ax-state-error]=\"state === 'error'\" maxlength=\"1\"\n    [ngModel]=\"_numbers[i]\" [disabled]=\"disabled\" [readonly]=\"readonly\" (click)=\"_handleOnClick(i)\"\n    (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" [attr.disabled]=\"disabled\" />\n  }\n</div>\n<ng-template #name></ng-template>", styles: ["ax-otp{display:block}ax-otp .ax-otp-input-container{display:grid;gap:.5rem}ax-otp .ax-otp-input-container.ax-editor-container{height:auto;border-style:none;outline-color:transparent;overflow:initial;background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container:focus-within,ax-otp .ax-otp-input-container.ax-editor-container:focus{border:none!important;box-shadow:none!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-input-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error:focus-within,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 1px rgba(var(--ax-color-danger-500));border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-solid .ax-input.ax-state-error .ax-input::placeholder,ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input{border-radius:0;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input:focus-within{border-color:rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{border-color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-outline .ax-input{background-color:transparent!important}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input{border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-on-surface))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-primary-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{background-color:rgba(var(--ax-color-danger-50));color:rgba(var(--ax-color-danger-fore-tint))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{box-shadow:0 0 0 2px rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{color:rgba(var(--ax-color-danger-500))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1/1;overflow:hidden;text-align:center;font-size:var(--font-size, 2rem)}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:read-only{cursor:text;opacity:.75}ax-otp .ax-otp-input-container.ax-editor-container .ax-input:disabled{cursor:not-allowed;opacity:.5}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]{-moz-appearance:textfield}ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-inner-spin-button,ax-otp .ax-otp-input-container.ax-editor-container .ax-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { lengthChange: [{
+                type: Output
+            }], length: [{
+                type: Input
+            }], onCompleted: [{
+                type: Output
+            }] } });
+
+const COMPONENT = [AXOtpComponent];
+const MODULES = [CommonModule, FormsModule];
+class AXOtpModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXOtpModule, declarations: [AXOtpComponent], imports: [CommonModule, FormsModule], exports: [AXOtpComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXOtpModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXOtpModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXOtpCompletedEvent, AXOtpComponent, AXOtpModule };
+//# sourceMappingURL=acorex-components-otp.mjs.map

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

@@ -0,0 +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  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\nimport { AXOtpCompletedEvent } from './otp.class';\n\n@Component({\n  selector: 'ax-otp',\n  templateUrl: './otp.component.html',\n  styleUrls: ['./otp.component.scss'],\n  inputs: ['state', 'disabled', 'readonly', '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})\nexport class AXOtpComponent extends classes(MXValueComponent<string>, MXLookComponent) implements OnInit, AfterViewInit {\n  inputs: number[] = [];\n\n  @Output()\n  lengthChange: EventEmitter<number> = new EventEmitter();\n\n  private _length: number;\n\n  @Input()\n  public get length(): number {\n    return this._length;\n  }\n  public set length(v: number) {\n    this.setOption({\n      name: 'length',\n      afterCallback: () => {\n        this._render();\n        this.calcFontSize();\n      },\n      value: v,\n    });\n  }\n\n  override clear() {\n    this._numbers = [];\n    this.setState('clear');\n  }\n\n  @Output() onCompleted: EventEmitter<AXOtpCompletedEvent> = new EventEmitter<AXOtpCompletedEvent>();\n\n  protected _numbers: number[] = [];\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._render();\n  }\n\n  private _render() {\n    this.inputs = Array(this.length)\n      .fill(1)\n      .map((x, i) => i);\n  }\n\n  ngAfterViewInit(): void {\n    this.calcFontSize();\n  }\n\n  protected _handleOnInput(event: any, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    const numberRegex = /^\\d+$/;\n    if (!numberRegex.test(event.target.value)) {\n      event.target.value = '';\n      return;\n    }\n    if (event.target.value.length > 1) {\n      const currentValue = event.target.value;\n      event.target.value = '';\n      event.target.value = currentValue.slice(-1);\n    }\n    if (inputs[i + 1]) {\n      inputs[i + 1].select();\n    }\n    this._numbers[i] = event.target.value;\n    // if (this._numbers.filter((c) => c).length === this.length) {\n    //   this.setState('success');\n    // } else {\n    //   this.setState('error');\n    // }\n    this.onCompleted.emit({\n      component: AXOtpComponent,\n      value: this._numbers.join(''),\n      isCompleted: this._numbers.filter((c) => c).length === this.length,\n    });\n  }\n\n  override internalSetValue(value: any): string {\n    if (value) {\n      this._numbers = value?.toString().split('') as any;\n    }\n    return value;\n  }\n\n  protected calcFontSize() {\n    const size = this.getHostElement().querySelector<HTMLInputElement>('.ax-input')?.clientWidth;\n    const fontSize = Math.min(size, size) * 0.5;\n    this.getHostElement().style.setProperty('--font-size', fontSize + 'px');\n  }\n\n  protected _handleOnKeyDown(event: KeyboardEvent, i: number) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    switch (event.key) {\n      case 'Backspace':\n        inputs[i].value = '';\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n          event.preventDefault();\n        }\n        this._numbers[i] = null;\n        break;\n      case 'ArrowRight':\n        if (inputs[i + 1]) {\n          inputs[i + 1].select();\n        }\n        break;\n\n      case 'ArrowLeft':\n        if (inputs[i - 1]) {\n          inputs[i - 1].select();\n        }\n        break;\n      case 'Home':\n        inputs[0].focus();\n        break;\n      case 'End':\n        inputs[this.length - 1].select();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        event.preventDefault();\n        break;\n    }\n  }\n\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._numbers = [];\n      for (let i = 0; i < inputs.length; i++) {\n        this._numbers[i] = +data[i];\n      }\n    }\n\n    event.preventDefault();\n  }\n\n  protected _handleOnClick(i) {\n    const inputs = this.getHostElement().querySelectorAll<HTMLInputElement>('.ax-input');\n    inputs[i].select();\n  }\n}\n","<div dir=\"ltr\" 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 class=\"ax-input\" type=\"number\" [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-success]=\"state === 'success'\" [class.ax-state-error]=\"state === 'error'\" maxlength=\"1\"\n    [ngModel]=\"_numbers[i]\" [disabled]=\"disabled\" [readonly]=\"readonly\" (click)=\"_handleOnClick(i)\"\n    (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" [attr.disabled]=\"disabled\" />\n  }\n</div>\n<ng-template #name></ng-template>","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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"}