@acorex/components 6.5.49 → 6.5.51

package/fesm2020/acorex-components.mjs

@@ -13,12 +13,12 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/cdk/drag-drop';
 import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import * as i2$2 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from 'angular2-text-mask';
+import * as i4 from 'angular2-text-mask';
 import { TextMaskModule } from 'angular2-text-mask';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i4 from '@angular/cdk/a11y';
+import * as i4$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as _ from 'lodash';
 import { differenceBy } from 'lodash';
@@ -3735,10 +3735,10 @@ class AXTextBoxComponent extends AXBaseTextComponent {
     }
 }
 AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", type: "type", showMask: "showMask", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\n                (blur)=\"handleInputBlur($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", type: "type", showMask: "showMask", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\n                (blur)=\"handleInputBlur($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\n                (blur)=\"handleInputBlur($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\n                (blur)=\"handleInputBlur($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { mask: [{
                 type: Input
             }], type: [{
@@ -4386,7 +4386,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"false\" [size]=\"size\" [showDropDownButton]=\"false\"\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\n    </ng-container>\n    <ng-container panel>\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\n        </ax-calendar-box>\n    </ng-container>\n    <ng-container end>\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"false\" [size]=\"size\" [showDropDownButton]=\"false\"\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\n    </ng-container>\n    <ng-container panel>\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\n        </ax-calendar-box>\n    </ng-container>\n    <ng-container end>\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], host: { style: 'width: 100%' }, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"false\" [size]=\"size\" [showDropDownButton]=\"false\"\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\n    </ng-container>\n    <ng-container panel>\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\n        </ax-calendar-box>\n    </ng-container>\n    <ng-container end>\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
@@ -4657,7 +4657,7 @@ AXFilterColumnNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         </ax-text-box>
     </div>
 </div>
-    `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
             type: Component,
             args: [{
@@ -4836,7 +4836,7 @@ AXFilterColumnStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         </ax-text-box>
     </div>
 </div>
-    `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
             type: Component,
             args: [{
@@ -6180,7 +6180,7 @@ class AXPopupComponent extends AXBaseComponent {
     }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.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:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.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{border-radius:50%;font-size:1.1rem;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{position:relative;overflow:hidden;display:flex;flex-direction:column}.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: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}@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 (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.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:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.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{border-radius:50%;font-size:1.1rem;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{position:relative;overflow:hidden;display:flex;flex-direction:column}.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: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}@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 (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\n      <span>\n        {{title}}\n      </span>\n      <span class=\"ax-buttons-containers\">\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\n          title=\"\u0628\u0633\u062A\u0646\"></i>\n      </span>\n    </div>\n    <div class=\"ax-popup-body ax-loading-host\">\n      <div class=\"ax-popup-body-container\">\n        <div [hidden]=\"isLoading\">\n          <ng-template #popupBody></ng-template>\n        </div>\n      </div>\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\n        <div class=\"ax-buttons-containers\">\n          <ng-container *ngFor=\"let button of footerButtons\">\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\n              (click)=\"handleFooterButtonClick(button)\">\n              {{button.text}}\n            </ax-button>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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:calc(var(--ax-overlay-full-width) * var(--ax-vh));min-height:-moz-fit-content;min-height:fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.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:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh))}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.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{border-radius:50%;font-size:1.1rem;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{position:relative;overflow:hidden;display:flex;flex-direction:column}.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: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}@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 (max-width: 599px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:93vw!important;height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}}\n"] }]
@@ -6771,7 +6771,7 @@ AXLoadingPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ax-loading-indicator tabindex="0" cdkTrapFocus>
         </ax-loading-indicator>
     </div>
-  `, isInline: true, components: [{ type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+  `, isInline: true, components: [{ type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -7388,7 +7388,7 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
     }
 }
 AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: "min", max: "max", showSeparator: "showSeparator", showCurrency: "showCurrency", showCounter: "showCounter", scrollWeel: "scrollWeel", showDoubleCounter: "showDoubleCounter", maxLength: "maxLength", intStep: "intStep", decimalNumber: "decimalNumber", customStep: "customStep" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: "min", max: "max", showSeparator: "showSeparator", showCurrency: "showCurrency", showCounter: "showCounter", scrollWeel: "scrollWeel", showDoubleCounter: "showDoubleCounter", maxLength: "maxLength", intStep: "intStep", decimalNumber: "decimalNumber", customStep: "customStep" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\n            (click)=\"clear()\"></ax-button>\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\n        </div>\n    </div>\n\n</div>\n" }]
@@ -7513,10 +7513,10 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
     }
 }
 AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
 
 const COMPONENT$2 = [AXPasswordBoxComponent];
@@ -7655,10 +7655,10 @@ class AXSearchBoxComponent extends AXBaseTextComponent {
     }
 }
 AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { textChanged: [{
                 type: Output
             }], onButtonClick: [{
@@ -12255,7 +12255,7 @@ class AXSwitchComponent extends AXBaseComponent {
     focus() { }
 }
 AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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: "13.3.11", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" >\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\n    <span class=\"slider round\"></span>\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
@@ -13379,10 +13379,10 @@ class AXTimePickerComponent extends AXBaseTextComponent {
     }
 }
 AXTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePickerComponent, selector: "ax-time-picker", inputs: { timeType: "timeType", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AXTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePickerComponent, selector: "ax-time-picker", inputs: { timeType: "timeType", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->" }]
+            args: [{ selector: 'ax-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { onValueChanged: [{
                 type: Output
             }], timeType: [{