@acorex/components 3.0.55 → 3.0.59

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 (29) hide show
  1. package/acorex-components.metadata.json +1 -1
  2. package/bundles/acorex-components.umd.js +23 -14
  3. package/bundles/acorex-components.umd.js.map +1 -1
  4. package/bundles/acorex-components.umd.min.js +1 -1
  5. package/bundles/acorex-components.umd.min.js.map +1 -1
  6. package/esm2015/lib/base/element.class.js +10 -1
  7. package/esm2015/lib/dropdown/dropdown.component.js +8 -8
  8. package/esm2015/lib/form-group/form-group.component.js +2 -2
  9. package/esm2015/lib/number-box/number-box.component.js +2 -2
  10. package/esm2015/lib/password-box/password-box.component.js +2 -2
  11. package/esm2015/lib/popup/popup.component.js +1 -1
  12. package/esm2015/lib/selectbox/selectbox.component.js +2 -2
  13. package/esm2015/lib/textarea/textarea.component.js +2 -2
  14. package/esm2015/lib/textbox/textbox.component.js +2 -2
  15. package/esm5/lib/base/element.class.js +10 -1
  16. package/esm5/lib/dropdown/dropdown.component.js +8 -8
  17. package/esm5/lib/form-group/form-group.component.js +2 -2
  18. package/esm5/lib/number-box/number-box.component.js +2 -2
  19. package/esm5/lib/password-box/password-box.component.js +2 -2
  20. package/esm5/lib/popup/popup.component.js +1 -1
  21. package/esm5/lib/selectbox/selectbox.component.js +2 -2
  22. package/esm5/lib/textarea/textarea.component.js +2 -2
  23. package/esm5/lib/textbox/textbox.component.js +2 -2
  24. package/fesm2015/acorex-components.js +23 -14
  25. package/fesm2015/acorex-components.js.map +1 -1
  26. package/fesm5/acorex-components.js +23 -14
  27. package/fesm5/acorex-components.js.map +1 -1
  28. package/lib/base/element.class.d.ts +2 -0
  29. package/package.json +1 -1
@@ -446,6 +446,14 @@ __decorate([
446
446
  Input(),
447
447
  __metadata("design:type", String)
448
448
  ], AXBaseTextComponent.prototype, "placeholder", void 0);
449
+ __decorate([
450
+ Input(),
451
+ __metadata("design:type", String)
452
+ ], AXBaseTextComponent.prototype, "autocomplete", void 0);
453
+ __decorate([
454
+ Input(),
455
+ __metadata("design:type", String)
456
+ ], AXBaseTextComponent.prototype, "name", void 0);
449
457
  __decorate([
450
458
  Output(),
451
459
  __metadata("design:type", EventEmitter)
@@ -483,6 +491,7 @@ class AXBaseButtonComponent extends AXBaseComponent {
483
491
  constructor() {
484
492
  super(...arguments);
485
493
  this.click = new EventEmitter();
494
+ this.size = "md";
486
495
  this.tabIndex = 0;
487
496
  }
488
497
  }
@@ -4259,7 +4268,7 @@ __decorate([
4259
4268
  AXTextBoxComponent = AXTextBoxComponent_1 = __decorate([
4260
4269
  Component({
4261
4270
  selector: 'ax-text-box',
4262
- template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n [class.icon]=\"icon\">\r\n <input #input class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n (blur)=\"handleInputBlur($event)\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>",
4271
+ template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n [class.icon]=\"icon\">\r\n <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n (blur)=\"handleInputBlur($event)\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>",
4263
4272
  encapsulation: ViewEncapsulation.None,
4264
4273
  changeDetection: ChangeDetectionStrategy.OnPush,
4265
4274
  host: { style: 'width: 100%' },
@@ -4967,12 +4976,12 @@ let AXDropdownComponent = class AXDropdownComponent extends AXBaseDropdownCompon
4967
4976
  }, 5);
4968
4977
  }
4969
4978
  ngAfterViewInit() {
4970
- if (this.fitParent === true) {
4971
- this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
4972
- }
4973
- else {
4974
- this.dropdownWidth = null;
4975
- }
4979
+ // Todo: chech fitparent
4980
+ // if (this.fitParent === true) {
4981
+ // this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
4982
+ // } else {
4983
+ // this.dropdownWidth = 260;
4984
+ // }
4976
4985
  setTimeout(() => {
4977
4986
  if (this.endButtons && this.endButtons.nativeElement.childNodes.length !== 0) {
4978
4987
  this.content.nativeElement.style.paddingInlineEnd = this.endButtons.nativeElement.clientWidth + 'px';
@@ -5119,7 +5128,7 @@ __decorate([
5119
5128
  AXDropdownComponent = __decorate([
5120
5129
  Component({
5121
5130
  selector: 'ax-drop-down',
5122
- template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\" icon=\"far fa-angle-down icon\"\r\n type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>",
5131
+ template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\">\r\n <ng-content select=\"ng-container[header]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\" icon=\"far fa-angle-down icon\"\r\n type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\" [tabIndex]=\"-1\">\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n <div class=\"ax-dropdown-container-bordered\" style=\"width: 260px;\">\r\n <ng-content select=\"ng-container[panel]\">\r\n </ng-content>\r\n </div>\r\n</ng-template>",
5123
5132
  encapsulation: ViewEncapsulation.None,
5124
5133
  changeDetection: ChangeDetectionStrategy.OnPush,
5125
5134
  host: { style: 'display:contents;' },
@@ -5916,7 +5925,7 @@ AXFormGroupComponent = __decorate([
5916
5925
  template: "<div class=\"ax form-group {{size}}\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n <div class=\"ax buttons start-buttons\" #startButtons>\r\n <ng-content select=\"ax-button[start]\"></ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"ax buttons end-buttons\" #endButtons>\r\n <ng-content select=\"ax-button[end]\"></ng-content>\r\n <ng-content select=\"ax-button\"></ng-content>\r\n </div>\r\n </div>\r\n</div>",
5917
5926
  encapsulation: ViewEncapsulation.None,
5918
5927
  changeDetection: ChangeDetectionStrategy.OnPush,
5919
- host: { style: 'width: 100%' }
5928
+ host: { style: 'width: 100%; display:contents;' }
5920
5929
  }),
5921
5930
  __metadata("design:paramtypes", [ChangeDetectorRef])
5922
5931
  ], AXFormGroupComponent);
@@ -6572,7 +6581,7 @@ AXPopupComponent = __decorate([
6572
6581
  Component({
6573
6582
  template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n <span>\r\n {{title}}\r\n </span>\r\n <span class=\"ax-buttons-containers\">\r\n <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n title=\"\u0628\u0633\u062A\u0646\"></i>\r\n </span>\r\n </div>\r\n <div class=\"ax-popup-body ax-loading-host\">\r\n <div class=\"ax-popup-body-container\">\r\n <div [hidden]=\"isLoading\">\r\n <ng-template #popupBody></ng-template>\r\n </div>\r\n </div>\r\n <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n <div class=\"ax-buttons-containers\">\r\n <ng-container *ngFor=\"let button of footerButtons\">\r\n <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n (click)=\"handleFooterButtonClick(button)\">\r\n {{button.text}}\r\n </ax-button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>",
6574
6583
  encapsulation: ViewEncapsulation.None,
6575
- styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width:1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width:1024px) and (max-width:1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width:768px) and (max-width:1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width:425px) and (max-width:767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md{width:460px!important}}@media all and (min-width:0px) and (max-width:424px){.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;min-height:100px;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}"]
6584
+ styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width:1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width:1024px) and (max-width:1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width:768px) and (max-width:1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width:425px) and (max-width:767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md{width:460px!important}}@media all and (min-width:0px) and (max-width:424px){.popup-wrapper .popup-container.lg,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}"]
6576
6585
  }),
6577
6586
  __metadata("design:paramtypes", [ComponentFactoryResolver,
6578
6587
  ElementRef,
@@ -7651,7 +7660,7 @@ __decorate([
7651
7660
  AXNumberBoxComponent = AXNumberBoxComponent_1 = __decorate([
7652
7661
  Component({
7653
7662
  selector: 'ax-number-box',
7654
- template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n [class.icon]=\"icon\">\r\n <input #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n (click)=\"clear()\"></ax-button>\r\n <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
7663
+ template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n [class.icon]=\"icon\">\r\n <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n (click)=\"clear()\"></ax-button>\r\n <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
7655
7664
  changeDetection: ChangeDetectionStrategy.OnPush,
7656
7665
  host: { style: 'width: 100%' },
7657
7666
  providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -7743,7 +7752,7 @@ AXPasswordBoxComponent.ctorParameters = () => [
7743
7752
  AXPasswordBoxComponent = AXPasswordBoxComponent_1 = __decorate([
7744
7753
  Component({
7745
7754
  selector: 'ax-password-box',
7746
- template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n <input #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\"></ax-button>\r\n <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\" [tabIndex]=\"-1\">\r\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n",
7755
+ template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n <div class=\"ax items-wrapper\">\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n </div>\r\n </div>\r\n <div class=\"ax items-wrapper\">\r\n <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\" [tabIndex]=\"-1\"></ax-button>\r\n <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\" [tabIndex]=\"-1\">\r\n <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n </ax-button>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </div>\r\n</div>\r\n",
7747
7756
  encapsulation: ViewEncapsulation.None,
7748
7757
  changeDetection: ChangeDetectionStrategy.OnPush,
7749
7758
  host: { style: 'width: 100%' },
@@ -8931,7 +8940,7 @@ __decorate([
8931
8940
  AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
8932
8941
  Component({
8933
8942
  selector: 'ax-select-box',
8934
- template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times-circle close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>",
8943
+ template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times-circle close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n (onClick)=\"handleItemClick($event,item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n [title]=\"item[textField]\"\r\n [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>",
8935
8944
  encapsulation: ViewEncapsulation.None,
8936
8945
  changeDetection: ChangeDetectionStrategy.OnPush,
8937
8946
  host: { style: 'width: 100%' },
@@ -11264,7 +11273,7 @@ __decorate([
11264
11273
  AXTextAreaComponent = AXTextAreaComponent_1 = __decorate([
11265
11274
  Component({
11266
11275
  selector: 'ax-text-area',
11267
- template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n <div class=\"content\">\r\n <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n <textarea [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n </div>\r\n </div>\r\n <div class=\"ax buttons\">\r\n <ng-content select=\"ax-button\">\r\n </ng-content>\r\n </div>\r\n</div>",
11276
+ template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n <div class=\"content\">\r\n <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n </div>\r\n </div>\r\n <div class=\"ax buttons\">\r\n <ng-content select=\"ax-button\">\r\n </ng-content>\r\n </div>\r\n</div>",
11268
11277
  encapsulation: ViewEncapsulation.None,
11269
11278
  changeDetection: ChangeDetectionStrategy.OnPush,
11270
11279
  host: { style: 'width: 100%' },