@acorex/components 3.0.57 → 3.0.61

package/fesm5/acorex-components.js

@@ -507,6 +507,14 @@ var AXBaseTextComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], AXBaseTextComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AXBaseTextComponent.prototype, "autocomplete", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AXBaseTextComponent.prototype, "name", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -547,6 +555,7 @@ var AXBaseButtonComponent = /** @class */ (function (_super) {
     function AXBaseButtonComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.click = new EventEmitter();
+        _this.size = "md";
         _this.tabIndex = 0;
         return _this;
     }
@@ -4524,7 +4533,7 @@ var AXTextBoxComponent = /** @class */ (function (_super) {
     AXTextBoxComponent = AXTextBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-text-box',
-            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>",
+            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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -5278,11 +5287,12 @@ var AXDropdownComponent = /** @class */ (function (_super) {
     };
     AXDropdownComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
+        // Todo: chech fitparent
         if (this.fitParent === true) {
             this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
         }
         else {
-            this.dropdownWidth = null;
+            this.dropdownWidth = 260;
         }
         setTimeout(function () {
             if (_this.endButtons && _this.endButtons.nativeElement.childNodes.length !== 0) {
@@ -5435,7 +5445,7 @@ var AXDropdownComponent = /** @class */ (function (_super) {
     AXDropdownComponent = __decorate([
         Component({
             selector: 'ax-drop-down',
-            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>",
+            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\" [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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'display:contents;' },
@@ -5576,8 +5586,8 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
             if (_this.showToday && !_this.value) {
                 _this.selectToday();
             }
-            console.log(Boolean(_this.dropdown.dropdownWidth > 200));
-            if (_this.dropdown.dropdownWidth > 200) {
+            debugger;
+            if (_this.dropdown.dropdownWidth > 200 || _this.dropdown.dropdownWidth < 200) {
                 _this.dropdown.dropdownWidth = 250;
             }
             _this.cdr.markForCheck();
@@ -6261,7 +6271,7 @@ var AXFormGroupComponent = /** @class */ (function (_super) {
             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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
-            host: { style: 'width: 100%' }
+            host: { style: 'width: 100%; display:contents;' }
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef])
     ], AXFormGroupComponent);
@@ -6976,7 +6986,7 @@ var AXPopupComponent = /** @class */ (function (_super) {
         Component({
             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>",
             encapsulation: ViewEncapsulation.None,
-            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}"]
+            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}"]
         }),
         __metadata("design:paramtypes", [ComponentFactoryResolver,
             ElementRef,
@@ -8097,7 +8107,7 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
     AXNumberBoxComponent = AXNumberBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-number-box',
-            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",
+            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",
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
             providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -8195,7 +8205,7 @@ var AXPasswordBoxComponent = /** @class */ (function (_super) {
     AXPasswordBoxComponent = AXPasswordBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-password-box',
-            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",
+            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",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -8565,10 +8575,12 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         }
     };
     AXSelectBoxComponent.prototype.scrolled = function (e) {
+        debugger;
         if (this.remoteOperation &&
             this.totalCount > this.items.length &&
             this.listContainer.nativeElement.scrollHeight != 0 &&
             this.listContainer.nativeElement.scrollHeight - this.listContainer.nativeElement.scrollTop - 300 < 50) {
+            debugger;
             if (this.skip !== this.items.length) {
                 this.showLoading = true;
                 this.skip = this.items.length;
@@ -9476,7 +9488,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
     AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-select-box',
-            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>",
+            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 class=\"list-container-items\" (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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -11968,7 +11980,7 @@ var AXTextAreaComponent = /** @class */ (function (_super) {
     AXTextAreaComponent = AXTextAreaComponent_1 = __decorate([
         Component({
             selector: 'ax-text-area',
-            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>",
+            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>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },