@acorex/components 4.2.57 → 4.2.59

package/fesm2015/acorex-components.mjs

@@ -3556,6 +3556,7 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
         this.loading = false;
         this.dropdownToggle = new EventEmitter();
         this.onButtonClick = new EventEmitter();
+        this.dropdownWidth = "300px";
     }
     onKeydownHandler(e) {
         if (!this.disabled && e.key === 'Enter' && e.type === 'keydown') {
@@ -3584,13 +3585,10 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
         // Todo: chech fitparent
         setTimeout(() => {
             if (this.endButtons && this.endButtons.nativeElement.childNodes.length !== 0) {
-                this.content.nativeElement.style.paddingInlineEnd = this.endButtons.nativeElement.clientWidth + 'px';
+                this.content.nativeElement.style.paddingInlineEnd = `${this.endButtons.nativeElement.clientWidth}px`;
             }
             if (this.fitParent == true) {
-                this.dropdownWidth = this.dropdownEL.nativeElement.offsetWidth;
-            }
-            else {
-                this.dropdownWidth = 260;
+                this.dropdownWidth = `${this.dropdownEL.nativeElement.offsetWidth}px`;
             }
         }, 5);
     }
@@ -3684,10 +3682,10 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
     focus() { }
 }
 AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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\"\r\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n            [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>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading", dropdownWidth: "dropdownWidth" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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\"\r\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n            [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 : 'unset'}\">\r\n        <ng-content select=\"ng-container[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, 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\"\r\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n            [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>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
+            args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, 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\"\r\n            icon=\"far fa-angle-down icon\" type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"\r\n            [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 : 'unset'}\">\r\n        <ng-content select=\"ng-container[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { baseTemplate: [{
                 type: ViewChild,
                 args: ['baseTemplate']
@@ -3713,6 +3711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], dropdownWidth: [{
+                type: Input
             }] } });
 
 class AXTextBoxComponent extends AXBaseTextComponent {
@@ -3861,9 +3861,6 @@ class AXDatePickerComponent extends AXValidatableComponent {
             if (this.showToday && !this.value) {
                 this.selectToday();
             }
-            if (this.dropdown.dropdownWidth > 200 || this.dropdown.dropdownWidth < 200) {
-                this.dropdown.dropdownWidth = 320;
-            }
             this.cdr.markForCheck();
         });
     }
@@ -4384,10 +4381,10 @@ 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]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\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        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\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"], 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\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\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        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\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 });
 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]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\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        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
+            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\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\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        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -7696,6 +7693,7 @@ class AXSelectBoxComponent extends AXValidatableComponent {
         this.textAlign = null;
         this.bufferSize = 20;
         this.remoteOperation = false;
+        this.fitParent = true;
         this.dropdownToggle = new EventEmitter();
         // this input is Private and only use in LOV
         this.currentfocusedIndex = -1;
@@ -8516,10 +8514,10 @@ class AXSelectBoxComponent extends AXValidatableComponent {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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 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;flex: 1;\"\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;flex: 1;\"\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>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", fitParent: "fitParent", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [fitParent]=\"fitParent\" [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 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;flex: 1;\"\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;flex: 1;\"\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>", 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: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], 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 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;flex: 1;\"\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;flex: 1;\"\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>" }]
+            args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], template: "<ax-drop-down [size]=\"size\" [fitParent]=\"fitParent\" [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 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;flex: 1;\"\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;flex: 1;\"\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>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showDropDownButton: [{
                 type: Input
             }], rowTemplate: [{
@@ -8562,6 +8560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], remoteOperation: [{
                 type: Input
+            }], fitParent: [{
+                type: Input
             }], dropdownToggle: [{
                 type: Output
             }], _contentDataSource: [{
@@ -8755,7 +8755,7 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
     }
 }
 AXQueryBuilderPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-number-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n                </div>\r\n                <div *ngSwitchCase=\"'boolean'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>", components: [{ type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+AXQueryBuilderPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-number-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n                </div>\r\n                <div *ngSwitchCase=\"'boolean'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>", components: [{ type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
             type: Component,
             args: [{ template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-number-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n                </div>\r\n                <div *ngSwitchCase=\"'boolean'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\r\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                        </ax-text-box>\r\n\r\n                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>" }]
@@ -9268,7 +9268,7 @@ class AXQueryBuilderRuleComponent {
     }
 }
 AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
+AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>" }]
@@ -9985,7 +9985,7 @@ class AXSelectBox2Component extends AXValidatableComponent {
     }
 }
 AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\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 *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\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) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times 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\"  [size]=\"size\">\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    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\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                </div>\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                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\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 *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\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) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times 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\"  [size]=\"size\">\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    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\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                </div>\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                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", 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: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\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 *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\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) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times 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\"  [size]=\"size\">\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    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\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                </div>\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                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>" }]
@@ -10295,6 +10295,7 @@ class AXSearchBarComponent {
         this.size = 'md';
         this.disabled = false;
         this.fitParent = false;
+        this.dropdownWidth = "600px";
         this.rtl = AXConfig.get('layout.rtl');
         this.onValueChange = new EventEmitter();
         this.onSearchValue = new EventEmitter();
@@ -10491,10 +10492,10 @@ class AXSearchBarComponent {
     }
 }
 AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", fitParent: "fitParent", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\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\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <ax-validation-form #form>\r\n                <div *ngFor=\"let item of _items\" class=\"row\">\r\n                    <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                        <!-- <ax-form-group> -->\r\n                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\r\n                        <!-- </ax-form-group> -->\r\n                    </div>\r\n                </div>\r\n                <div class=\"footer-button\">\r\n                    <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                    <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
+AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", fitParent: "fitParent", dropdownWidth: "dropdownWidth", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\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\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <ax-validation-form #form>\r\n                <div *ngFor=\"let item of _items\" class=\"row\">\r\n                    <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                        <!-- <ax-form-group> -->\r\n                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\r\n                        <!-- </ax-form-group> -->\r\n                    </div>\r\n                </div>\r\n                <div class=\"footer-button\">\r\n                    <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                    <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', template: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\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\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <ax-validation-form #form>\r\n                <div *ngFor=\"let item of _items\" class=\"row\">\r\n                    <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                        <!-- <ax-form-group> -->\r\n                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\r\n                        <!-- </ax-form-group> -->\r\n                    </div>\r\n                </div>\r\n                <div class=\"footer-button\">\r\n                    <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                    <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
+            args: [{ selector: 'ax-search-bar', template: "<div>\r\n    <ax-drop-down [fitParent]=\"fitParent\" [dropdownWidth]=\"dropdownWidth\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\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\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\" style=\"direction:rtl;\">\r\n                    <b>{{_handleShowTitleSelected(item)}}</b> {{_handleShowValueSelected(item)}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <ax-validation-form #form>\r\n                <div *ngFor=\"let item of _items\" class=\"row\">\r\n                    <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                        <!-- <ax-form-group> -->\r\n                        <div *ngIf=\"prop.property.visible != false\">\r\n                            <ax-label>{{prop.property.title}}</ax-label>\r\n                            <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\r\n                                [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                        </div>\r\n                        <!-- </ax-form-group> -->\r\n                    </div>\r\n                </div>\r\n                <div class=\"footer-button\">\r\n                    <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                    <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n                </div>\r\n            </ax-validation-form>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n</div>", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -10510,6 +10511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], fitParent: [{
                 type: Input
+            }], dropdownWidth: [{
+                type: Input
             }], items: [{
                 type: Input
             }], rtl: [{
@@ -11146,7 +11149,7 @@ class AXColorPickerComponent extends AXColorBoxComponent {
 AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
         { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
-    ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\"  [rtl]=\"rtl\">\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\r\n        <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n            <div class=\"content\" #content>\r\n                <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n                    <ng-container *ngIf=\"value; else elseTemplate\">\r\n                        <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\r\n                            style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\r\n                            {{value}}&nbsp;</div>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        {{placeholder}}&nbsp;\r\n                    </ng-template>\r\n                </div>\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    <ng-container panel>\r\n        <ax-color-box [(value)]=\"value\" \r\n            (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\"  [rtl]=\"rtl\">\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\r\n        <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n            <div class=\"content\" #content>\r\n                <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n                    <ng-container *ngIf=\"value; else elseTemplate\">\r\n                        <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\r\n                            style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\r\n                            {{value}}&nbsp;</div>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        {{placeholder}}&nbsp;\r\n                    </ng-template>\r\n                </div>\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    <ng-container panel>\r\n        <ax-color-box [(value)]=\"value\" \r\n            (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', providers: [
@@ -11330,7 +11333,7 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
     }
 }
 ColumnPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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"] }] });
+ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
@@ -11537,7 +11540,7 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
     }
 }
 AXConditionalColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-AXConditionalColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-text-box>\r\n                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AXConditionalColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-text-box>\r\n                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-text-box>\r\n                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"] }]
@@ -11976,7 +11979,7 @@ class AXSearchBarSelectBoxEditorComponent extends AXProperyEditorComponent {
     }
 }
 AXSearchBarSelectBoxEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarSelectBoxEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBarSelectBoxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarSelectBoxEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"mode\" [textField]=\"textField\" [valueField]=\"valueField\" [remoteOperation]=\"remoteOperation\"\r\n    [selectedItems]=\"value\" [allowSearch]=\"allowSearch\" [allowNull]=\"allowNull\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+AXSearchBarSelectBoxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarSelectBoxEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"mode\" [textField]=\"textField\" [valueField]=\"valueField\" [remoteOperation]=\"remoteOperation\"\r\n    [selectedItems]=\"value\" [allowSearch]=\"allowSearch\" [allowNull]=\"allowNull\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarSelectBoxEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<ax-select-box [mode]=\"mode\" [textField]=\"textField\" [valueField]=\"valueField\" [remoteOperation]=\"remoteOperation\"\r\n    [selectedItems]=\"value\" [allowSearch]=\"allowSearch\" [allowNull]=\"allowNull\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>" }]
@@ -12047,7 +12050,7 @@ class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
     }
 }
 AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n" }]