npm - @acorex/components - Versions diffs - 7.12.2 → 7.12.5 - Mend

@acorex/components 7.12.2 → 7.12.5

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

Files changed (117) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { AXPopoverOpenTrigger } from '@acorex/components/popover';\n\nexport class AXRootMenu {\n orientation: AXOrientation;\n openOn: AXPopoverOpenTrigger;\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n Output,\n QueryList,\n ViewChild,\n inject,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\n\n@Component({\n selector: 'ax-menu-item',\n inputs: ['disabled'],\n templateUrl: './menu-item.component.html',\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent implements AfterViewInit {\n offsetY = 0;\n offsetX = 0;\n\n @ViewChild(AXPopoverComponent)\n private popover: AXPopoverComponent;\n\n private _text: string;\n /*\n Providing a string value for its text state\n /\n @Input()\n public get text(): string {\n return this._text;\n }\n public set text(v: string) {\n this.setOption({\n name: 'text',\n value: v,\n });\n }\n\n @Output()\n activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n private _active = false;\n /\n Providing a string value for its text state\n /\n @Input()\n public get active(): boolean {\n return this._active;\n }\n public set active(v: boolean) {\n this.setOption({\n name: 'active',\n value: v,\n });\n }\n\n @Output()\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n isRoot = false;\n parent?: AXMenuItemComponent;\n\n rootMenu = inject(AXRootMenu);\n\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.parent = this;\n });\n\n this.offsetY = this.isRoot ? 8 : 0;\n this.offsetX = this.isRoot ? 0 : 4;\n\n this.getPlacement();\n }\n\n close() {\n this.popover?.close();\n }\n\n // @HostListener('mouseleave', ['$event'])\n // private onMouseHover(e: MouseEvent) {\n // console.log('a');\n // this.children.forEach((c) => {\n // c.close();\n // });\n // }\n\n _handleOnOpened() {\n this.parent.children.forEach((c) => {\n if (c != this) {\n c.close();\n }\n });\n }\n\n _handleOnClosed() {\n this.children.forEach((c) => {\n c.close();\n });\n }\n\n getIcon() {\n switch (this.rootMenu.orientation) {\n case 'vertical':\n return 'ax-icon-arrow-right';\n case 'horizontal':\n return 'ax-icon-arrow-down';\n }\n }\n\n getPlacement() {\n switch (this.rootMenu.orientation) {\n case 'horizontal':\n if (this.isRoot) {\n return 'bottom-start';\n } else {\n return 'end-top';\n }\n break;\n case 'vertical':\n if (this.isRoot) {\n return 'end-top';\n } else {\n return 'end-top';\n }\n break;\n default:\n return 'bottom-start';\n }\n }\n\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active ? 'ax-state-active' : ''}`];\n }\n\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n if (!this.disabled) {\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n }\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" ngIf=\"children.length\"></i>\n\n<ax-popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY\"\n [offsetX]=\"offsetX\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport { AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n HostBinding,\n Input,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Component({\n selector: 'ax-menu',\n template: `<ng-content select=\"ax-menu-item,ng-container\"></ng-content>`,\n styleUrls: ['./menu.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXRootMenu,\n useExisting: AXMenuComponent,\n },\n ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n @Input() orientation: AXOrientation = 'horizontal';\n @Input() openOn: AXPopoverOpenTrigger = 'click';\n\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.isRoot = true;\n c.parent = this as unknown as AXMenuItemComponent;\n });\n }\n\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-orientation-${this.orientation}`;\n }\n}\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXMenuModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { AXPopoverOpenTrigger } from '@acorex/components/popover';\n\nexport class AXRootMenu {\n orientation: AXOrientation;\n openOn: AXPopoverOpenTrigger;\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n Output,\n QueryList,\n ViewChild,\n inject,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\n\n@Component({\n selector: 'ax-menu-item',\n inputs: ['disabled'],\n templateUrl: './menu-item.component.html',\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent implements AfterViewInit {\n offsetY = 0;\n offsetX = 0;\n\n @ViewChild(AXPopoverComponent)\n private popover: AXPopoverComponent;\n\n private _text: string;\n /*\n Providing a string value for its text state\n /\n @Input()\n public get text(): string {\n return this._text;\n }\n public set text(v: string) {\n this.setOption({\n name: 'text',\n value: v,\n });\n }\n\n @Output()\n activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n private _active = false;\n /\n Providing a string value for its text state\n /\n @Input()\n public get active(): boolean {\n return this._active;\n }\n public set active(v: boolean) {\n this.setOption({\n name: 'active',\n value: v,\n });\n }\n\n @Output()\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n isRoot = false;\n parent?: AXMenuItemComponent;\n\n rootMenu = inject(AXRootMenu);\n\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.parent = this;\n });\n\n this.offsetY = this.isRoot ? 8 : 0;\n this.offsetX = this.isRoot ? 0 : 4;\n\n this.getPlacement();\n }\n\n close() {\n this.popover?.close();\n }\n\n // @HostListener('mouseleave', ['$event'])\n // private onMouseHover(e: MouseEvent) {\n // this.children.forEach((c) => {\n // c.close();\n // });\n // }\n\n _handleOnOpened() {\n this.parent.children.forEach((c) => {\n if (c != this) {\n c.close();\n }\n });\n }\n\n _handleOnClosed() {\n this.children.forEach((c) => {\n c.close();\n });\n }\n\n getIcon() {\n switch (this.rootMenu.orientation) {\n case 'vertical':\n return 'ax-icon-arrow-right';\n case 'horizontal':\n return 'ax-icon-arrow-down';\n }\n }\n\n getPlacement() {\n switch (this.rootMenu.orientation) {\n case 'horizontal':\n if (this.isRoot) {\n return 'bottom-start';\n } else {\n return 'end-top';\n }\n break;\n case 'vertical':\n if (this.isRoot) {\n return 'end-top';\n } else {\n return 'end-top';\n }\n break;\n default:\n return 'bottom-start';\n }\n }\n\n @HostBinding('class')\n get __hostClass(): string[] {\n return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active ? 'ax-state-active' : ''}`];\n }\n\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n if (!this.disabled) {\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n }\n }\n}\n","<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" ngIf=\"children.length\"></i>\n\n<ax-popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn\"\n [target]=\"getHostElement()\"\n [offsetY]=\"offsetY\"\n [offsetX]=\"offsetX\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport { AXPopoverOpenTrigger } from '@acorex/components/popover';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n HostBinding,\n Input,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Component({\n selector: 'ax-menu',\n template: `<ng-content select=\"ax-menu-item,ng-container\"></ng-content>`,\n styleUrls: ['./menu.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: AXRootMenu,\n useExisting: AXMenuComponent,\n },\n ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n @Input() orientation: AXOrientation = 'horizontal';\n @Input() openOn: AXPopoverOpenTrigger = 'click';\n\n @ContentChildren(AXMenuItemComponent)\n children: QueryList<AXMenuItemComponent>;\n\n ngAfterViewInit() {\n this.children.forEach((c) => {\n c.isRoot = true;\n c.parent = this as unknown as AXMenuItemComponent;\n });\n }\n\n @HostBinding('class')\n get __hostClass(): string {\n return `ax-orientation-${this.orientation}`;\n }\n}\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXMenuModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -104,6 +104,10 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
     internalOptionChanged() {
         this._updateMask();
     }
+    clear() {
+        this.input.nativeElement.value = null;
+        super.clear(true);
+    }
     internalSetValue(value) {
         // || (value == 0 && !this._maskObj.value)
         if (value == null) {
@@ -219,7 +223,7 @@ class AXNumberBoxComponent extends classes((MXInputBaseValueComponent), MXLookCo
                 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: "<ng-content select=\"ax-prefix\"> </ng-content>\n<input\n  #input\n  class=\"ax-input\"\n  type=\"text\"\n  [id]=\"id\"\n  [name]=\"name\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocomplete]=\"'off'\"\n  [imask]=\"_maskObj\"\n  [unmask]=\"'typed'\"\n  [attr.min]=\"minValue\"\n  [attr.max]=\"maxValue\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [tabindex]=\"tabIndex\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (keydown)=\"_handleOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\n<ng-content select=\"ax-clear-button\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}.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}.ax-number-box-control .ax-general-button.ax-number-box-increment{align-items:flex-start}.ax-number-box-control .ax-general-button.ax-number-box-decrement{align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<input\n  #input\n  class=\"ax-input\"\n  type=\"text\"\n  [id]=\"id\"\n  [name]=\"name\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocomplete]=\"'off'\"\n  [imask]=\"_maskObj\"\n  [unmask]=\"'typed'\"\n  [attr.min]=\"minValue\"\n  [attr.max]=\"maxValue\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [tabindex]=\"tabIndex\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (keydown)=\"_handleOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\n<ng-content select=\"ax-clear-button\" *ngIf=\"input.value && !disabled && !readonly\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}.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}.ax-number-box-control .ax-general-button.ax-number-box-increment{align-items:flex-start}.ax-number-box-control .ax-general-button.ax-number-box-decrement{align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: "16.2.6", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
@@ -240,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
                             useExisting: forwardRef(() => AXNumberBoxComponent),
                             multi: true,
                         },
-                    ], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<input\n  #input\n  class=\"ax-input\"\n  type=\"text\"\n  [id]=\"id\"\n  [name]=\"name\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocomplete]=\"'off'\"\n  [imask]=\"_maskObj\"\n  [unmask]=\"'typed'\"\n  [attr.min]=\"minValue\"\n  [attr.max]=\"maxValue\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [tabindex]=\"tabIndex\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (keydown)=\"_handleOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\n<ng-content select=\"ax-clear-button\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}.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}.ax-number-box-control .ax-general-button.ax-number-box-increment{align-items:flex-start}.ax-number-box-control .ax-general-button.ax-number-box-decrement{align-items:flex-end}\n"] }]
+                    ], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<input\n  #input\n  class=\"ax-input\"\n  type=\"text\"\n  [id]=\"id\"\n  [name]=\"name\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocomplete]=\"'off'\"\n  [imask]=\"_maskObj\"\n  [unmask]=\"'typed'\"\n  [attr.min]=\"minValue\"\n  [attr.max]=\"maxValue\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [tabindex]=\"tabIndex\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"_handleModelChange($event)\"\n  (keydown)=\"_handleOnKeydownEvent($event)\"\n  (keyup)=\"emitOnKeyupEvent($event)\"\n  (keypress)=\"emitOnKeypressEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n/>\n<ng-content select=\"ax-clear-button\" *ngIf=\"input.value && !disabled && !readonly\"></ng-content>\n<div class=\"ax-number-box-control\" *ngIf=\"showSpinButtons\">\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-increment\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(1)\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-up\"></span>\n  </button>\n  <button\n    type=\"button\"\n    class=\"ax-general-button ax-button-icon ax-number-box-decrement\"\n    [class.ax-state-disabled]=\"disabled\"\n    (click)=\"_handleUpDownClick(-1)\"\n    [disabled]=\"disabled\"\n  >\n    <span class=\"ax-icon ax-icon-arrow-down\" tabindex=\"-1\"></span>\n  </button>\n</div>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-number-box-control{margin-inline-end:.25rem;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}.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}.ax-number-box-control .ax-general-button.ax-number-box-increment{align-items:flex-start}.ax-number-box-control .ax-general-button.ax-number-box-decrement{align-items:flex-end}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

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

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

@@ -1,20 +1,21 @@
 import { AXEvent, MXValueComponent, MXLookComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, NgModule } 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';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 class AXOtpCompletedEvent extends AXEvent {
 }
+/* eslint-disable no-debugger */
 class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
     constructor() {
         super(...arguments);
-        this.lengthChange = new EventEmitter();
         this.inputs = [];
+        this.lengthChange = new EventEmitter();
         this.onCompleted = new EventEmitter();
         this._numbers = [];
     }
@@ -26,10 +27,15 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             name: 'length',
             afterCallback: () => {
                 this._render();
+                this.calcFontSize();
             },
             value: v,
         });
     }
+    clear() {
+        this._numbers = [];
+        this.setState('clear');
+    }
     ngOnInit() {
         super.ngOnInit();
         this._render();
@@ -39,12 +45,8 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             .fill(1)
             .map((x, i) => i);
     }
-    clear() {
-        this._numbers = [];
-        this.setState('clear');
-    }
     ngAfterViewInit() {
-        this.getHostElement().querySelector('.ax-input').focus();
+        this.calcFontSize();
     }
     _handleOnInput(event, i) {
         const inputs = this.getHostElement().querySelectorAll('.ax-input');
@@ -70,6 +72,17 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
             });
         }
     }
+    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) {
@@ -104,24 +117,40 @@ class AXOtpComponent extends classes((MXValueComponent), MXLookComponent) {
         }
     }
     _handleOnPaste(event) {
-        const data = event.clipboardData.getData('text');
         const inputs = this.getHostElement().querySelectorAll('.ax-input');
-        inputs[inputs.length - 1].focus();
-        this._numbers = [];
-        for (let i = 0; i < data.length; i++) {
-            this._numbers[i] = data[i];
+        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(event, i) {
+    _handleOnClick(i) {
         const inputs = this.getHostElement().querySelectorAll('.ax-input');
         inputs[i].select();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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" }, usesInheritance: true, ngImport: i0, template: "<div 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  <ng-container *ngFor=\"let input of inputs; let i = index\">\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($event, i)\"\n      (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" disabled=\"disabled\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>", styles: ["ax-otp{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;background-color:transparent;outline-color:transparent;overflow:initial}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));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-input-surface),var(--tw-bg-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}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{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-danger), var(--tw-ring-opacity))}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{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-text-opacity)),black 30%)}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1 / 1;overflow:hidden;text-align:center;font-size:200%}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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", 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\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  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_handleOnClick(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: ["ax-otp{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));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-input-surface),var(--tw-bg-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}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{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-danger), var(--tw-ring-opacity))}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{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-text-opacity)),black 30%)}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.2.6", 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, template: "<div 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  <ng-container *ngFor=\"let input of inputs; let i = index\">\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($event, i)\"\n      (input)=\"_handleOnInput($event, i)\" (keydown)=\"_handleOnKeyDown($event, i)\" disabled=\"disabled\" />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>", styles: ["ax-otp{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;background-color:transparent;outline-color:transparent;overflow:initial}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));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-input-surface),var(--tw-bg-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}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{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-danger), var(--tw-ring-opacity))}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{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-text-opacity)),black 30%)}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}ax-otp .ax-otp-input-container.ax-editor-container .ax-input{aspect-ratio:1 / 1;overflow:hidden;text-align:center;font-size:200%}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"] }]
+            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\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  <ng-container *ngFor=\"let input of inputs; let i = index\">\n    <input\n      class=\"ax-input\"\n      type=\"number\"\n      [class.ax-state-disabled]=\"disabled\"\n      [class.ax-state-success]=\"state === 'success'\"\n      [class.ax-state-error]=\"state === 'error'\"\n      maxlength=\"1\"\n      [ngModel]=\"_numbers[i]\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_handleOnClick(i)\"\n      (input)=\"_handleOnInput($event, i)\"\n      (keydown)=\"_handleOnKeyDown($event, i)\"\n      disabled=\"disabled\"\n    />\n  </ng-container>\n</div>\n<ng-template #name></ng-template>\n", styles: ["ax-otp{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));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-input-surface),var(--tw-bg-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}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{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-danger), var(--tw-ring-opacity))}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{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-primary),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error{--tw-border-opacity: 1;border-color:rgba(var(--ax-color-danger),var(--tw-border-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-flat .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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);--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error{--tw-bg-opacity: 1;background-color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-bg-opacity)) 30%,white);--tw-text-opacity: 1;color:color-mix(in srgb,rgba(var(--ax-color-danger),var(--tw-text-opacity)),black 30%)}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-color-primary), var(--tw-ring-opacity))}ax-otp .ax-otp-input-container.ax-editor-container.ax-look-fill .ax-input.ax-state-error .ax-input::placeholder{--tw-text-opacity: 1;color:rgba(var(--ax-color-danger),var(--tw-text-opacity))}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: [{

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

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

@@ -196,6 +196,7 @@ class AXPopoverComponent extends MXBaseComponent {
             });
             //
             this._overlayEvents.scroll = this._platform.scroll.subscribe((c) => {
+                //__axContext__
                 const el = c.nativeEvent.target;
                 if (!this.isActionsheetStyle) {
                     if (el == document) {
@@ -271,7 +272,7 @@ class AXPopoverComponent extends MXBaseComponent {
                     .flexibleConnectedTo(targetRef)
                     .withPositions(this._placements)
                     .withPush(false),
-                scrollStrategy: this._overlay.scrollStrategies.close(),
+                scrollStrategy: this._overlay.scrollStrategies.noop(),
                 disposeOnNavigation: true,
                 panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
                 maxHeight: 'unset',
@@ -302,6 +303,9 @@ class AXPopoverComponent extends MXBaseComponent {
             });
             this._overlayRef?.attach(this._portal);
         }
+        if (this.componentRef?.instance) {
+            this.componentRef.instance['abc'] = '2016';
+        }
     }
     get isOpen() {
         return this._overlayRef ? this._overlayRef.hasAttached() : false;