@acorex/components 16.19.1 → 16.19.2

package/fesm2022/acorex-components.mjs

@@ -6,7 +6,7 @@ import * as i1 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
-import { merge, Subject, Observable } from 'rxjs';
+import { merge, Subject, Observable, debounceTime as debounceTime$1, takeUntil } from 'rxjs';
 import * as i2 from '@angular/cdk/bidi';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
@@ -17,6 +17,7 @@ import * as i2$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from 'ngx-mask';
 import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
+import moment from 'jalali-moment';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -4021,20 +4022,21 @@ class AXTextBoxComponent extends AXBaseTextComponent {
     maskGuid = false;
     maskPlaceholder = '_';
     maskKeepCharPositions = false;
+    leadZeroDateTime = false;
     constructor(cdr, ref) {
         super(cdr, ref);
         this.cdr = cdr;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTextBoxComponent, isStandalone: false, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTextBoxComponent, isStandalone: false, selector: "ax-text-box", inputs: { mask: "mask", showMask: "showMask", type: "type", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions", leadZeroDateTime: "leadZeroDateTime" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div class=\"ax form-control input {{ size }}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\">\n      <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{ size }}\" [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" [mask]=\"mask\" [showMaskTyped]=\"showMask\" [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div\n      class=\"ax form-control input {{ size }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n    >\n      <input\n        #input\n        [autocomplete]=\"autocomplete\"\n        [name]=\"name\"\n        class=\"ax {{ size }}\"\n        [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\"\n        [mask]=\"mask\"\n        [leadZeroDateTime]=\"leadZeroDateTime\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXTextBoxComponent },
-                    ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div class=\"ax form-control input {{ size }}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\">\n      <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{ size }}\" [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\" [mask]=\"mask\" [showMaskTyped]=\"showMask\" [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>" }]
+                    ], standalone: false, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div\n      class=\"ax form-control input {{ size }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n    >\n      <input\n        #input\n        [autocomplete]=\"autocomplete\"\n        [name]=\"name\"\n        class=\"ax {{ size }}\"\n        [attr.type]=\"type\"\n        [attr.maxlength]=\"maxLength\"\n        [mask]=\"mask\"\n        [leadZeroDateTime]=\"leadZeroDateTime\"\n        [showMaskTyped]=\"showMask\"\n        [(ngModel)]=\"value\"\n        placeholder=\"{{ placeholder }}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"far fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { mask: [{
                 type: Input
             }], showMask: [{
@@ -4049,6 +4051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], maskKeepCharPositions: [{
                 type: Input
+            }], leadZeroDateTime: [{
+                type: Input
             }] } });
 
 class AXDataPickerChangeEvent extends AXValueEvent {
@@ -4062,13 +4066,19 @@ class AXDatePickerComponent extends AXValidatableComponent {
     input;
     dayStyle = [];
     dayMinMaxResoan = '';
-    // mmddyyyy: any = [/[0-1]/, /[0-9]/, '-', /[0-1]/, /[0-9]/, '-', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/];
     yyyyMMdd = '0000/00/00';
     ddMMyyyy = '00/00/0000';
-    yyyyddMM = '0000-00-00';
-    // yyyyMMdd1: any = [/[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '/', /[0-1]/, /[0-9]/, '/', /[0-3]/, /[0-9]/];
-    // ddMMyyyy2: any = [/[0-3]/, /[0-9]/, '/', /[0-1]/, /[0-9]/, '/', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/];
-    // yyyyddMM3: any = [/[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '/', /[0-3]/, /[0-9]/, '/', /[0-1]/, /[0-9]/];
+    MMddyyyy = '00/d0/0000';
+    convertToAXFormatDate = {
+        DDMMYYYY: 'DD/MM/YYYY',
+        MMDDYYYY: 'MM/DD/YYYY',
+        YYYYMMDD: 'YYYYMMDD',
+    };
+    calendarValue;
+    isTypeDate = false;
+    setLoading = false;
+    textChangeSubject = new Subject();
+    destroy$ = new Subject();
     _contentValidation;
     _validation;
     get validation() {
@@ -4097,7 +4107,6 @@ class AXDatePickerComponent extends AXValidatableComponent {
         super();
         this.ref = ref;
         this.cdr = cdr;
-        // set defaults
         if (AXConfig.get('dateTime.type')) {
             this.type = AXConfig.get('dateTime.type');
         }
@@ -4122,7 +4131,6 @@ class AXDatePickerComponent extends AXValidatableComponent {
         this.value = new Date();
     }
     focus() {
-        // this.dropdown.focus();
         this.input.focus();
     }
     convertMaskToDate(text) {
@@ -4141,46 +4149,92 @@ class AXDatePickerComponent extends AXValidatableComponent {
         switch (this.dateType) {
             case this.yyyyMMdd:
                 y = date.slice(0, 4);
-                m = date.slice(5, 7);
-                d = date.slice(8, 10);
+                m = date.slice(4, 6);
+                d = date.slice(6, 8);
                 break;
             case this.ddMMyyyy:
-                y = date.slice(6, 10);
-                m = date.slice(3, 5);
                 d = date.slice(0, 2);
+                m = date.slice(2, 4);
+                y = date.slice(4, 8);
                 break;
-            case this.yyyyddMM:
-                y = date.slice(0, 4);
-                m = date.slice(8, 10);
-                d = date.slice(5, 7);
+            case this.MMddyyyy:
+                y = date.slice(4, 8);
+                m = date.slice(0, 2);
+                d = date.slice(2, 4);
                 break;
         }
-        return { year: y, monnth: m, day: d };
+        return { year: y, month: m, day: d };
     }
     textChange(e) {
-        this.text = e.value;
-        const date = this.convertMask(this.text);
+        if (this.setLoading || !e.isUserChange) {
+            return;
+        }
+        if (e.value) {
+            this.text = e.value.replace(/\//g, '');
+        }
         if (this.text &&
             this.text.indexOf('_') === -1 &&
-            this.text.length == 10 &&
-            this.type == 'jalali') {
-            this.userChange = e.isUserChange;
-            this.value = this.convertMaskToDate(date.year + '-' + date.monnth + '-' + date.day);
+            this.text.length == 8 &&
+            (this.type == 'jalali' || this.type == 'gregorian')) {
+            this.isTypeDate = true;
+            this.textChangeSubject.next(this.text);
         }
-        else if (this.text &&
-            this.text.indexOf('_') === -1 &&
-            this.text.length == 10 &&
-            this.type == 'gregorian') {
-            this.userChange = e.isUserChange;
-            this.value = this.convertMaskToDate(date.year + '-' + date.monnth + '-' + date.day);
+    }
+    isValidDate(year, month, day) {
+        if (this.type === 'jalali') {
+            return this.isValidJalaliDate(+year, +month, +day);
+        }
+        else if (this.type === 'gregorian') {
+            return this.isValidGregorianDate(+year, +month, +day);
+        }
+        return false;
+    }
+    isValidGregorianDate(year, month, day) {
+        if (month < 1 || month > 12 || day < 1 || day > 31)
+            return false;
+        const date = new Date(year, month - 1, day);
+        return (date.getFullYear() === year &&
+            date.getMonth() + 1 === month &&
+            date.getDate() === day);
+    }
+    isValidJalaliDate(year, month, day) {
+        try {
+            const jDate = moment(`${year}-${month}-${day}`, 'jYYYY-jMM-jDD', true);
+            if (jDate.isValid() && jDate.jDate() === day) {
+                return jDate;
+            }
+            else {
+                return false;
+            }
+        }
+        catch {
+            return false;
         }
     }
+    clearTextBox() {
+        this.text = '';
+        this.value = null;
+    }
     ngOnInit() {
+        this.textChangeSubject
+            .pipe(debounceTime$1(300), takeUntil(this.destroy$))
+            .subscribe((text) => this.handleDebouncedChange(text));
         this._setDateType();
     }
+    handleDebouncedChange(text) {
+        const date = this.convertMask(text);
+        if (this.isValidDate(date.year, date.month, date.day)) {
+            this.setLoading = true;
+            this.value = this.convertMaskToDate(`${date.year}-${date.month}-${date.day}`);
+            this.isTypeDate = false;
+            this.setLoading = false;
+        }
+        else {
+            this.clearTextBox();
+        }
+    }
     ngAfterViewInit() {
         setTimeout(() => {
-            this.text = this._value?.toString();
             if (this.showToday && !this.value) {
                 this.selectToday();
             }
@@ -4218,7 +4272,17 @@ class AXDatePickerComponent extends AXValidatableComponent {
         if (!unValidDate) {
             if ((!v && oldValue) ||
                 (this._value && !this._value.equal(oldValue, 'day'))) {
-                this.text = this._value?.toString();
+                switch (this.dateType) {
+                    case this.ddMMyyyy:
+                        this.text = this._value.format(this.convertToAXFormatDate.DDMMYYYY);
+                        break;
+                    case this.MMddyyyy:
+                        this.text = this._value.format(this.convertToAXFormatDate.MMDDYYYY);
+                        break;
+                    default:
+                        this.text = this._value.format(this.convertToAXFormatDate.YYYYMMDD);
+                        break;
+                }
                 setTimeout(() => {
                     this.valueChange.emit(v);
                     this.onValueChanged.emit({
@@ -4243,8 +4307,8 @@ class AXDatePickerComponent extends AXValidatableComponent {
             case 'ddMMyyyy':
                 this.dateType = this.ddMMyyyy;
                 break;
-            case 'yyyyddMM':
-                this.dateType = this.yyyyddMM;
+            case 'MMddyyyy':
+                this.dateType = this.MMddyyyy;
                 break;
             default:
                 if (this.type == 'gregorian') {
@@ -4276,6 +4340,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
         return r;
     }
     onDateChange(e) {
+        this.value = this.calendarValue;
         this.userChange = true;
         this.dropdown.close();
         //this.clearValidationStyle(this.ref.nativeElement);
@@ -4305,13 +4370,13 @@ class AXDatePickerComponent extends AXValidatableComponent {
         // this.input.input.nativeElement.focus();
     }
     handleInputBlur() {
-        if (this.text && this.text.indexOf('_') != -1) {
-            this.text = '';
-            this.value = null;
+        if (this.text.length < 8) {
+            this.clearTextBox();
         }
     }
     handleButtonClick() {
         this._renderPicker = true;
+        this.calendarValue = this.value;
         setTimeout(() => {
             this.dropdown.toggle();
         });
@@ -4818,7 +4883,7 @@ class AXDatePickerComponent extends AXValidatableComponent {
                         }
                     }
                     break;
-                case this.yyyyddMM:
+                case this.MMddyyyy:
                     if (e.type === 'keypress') {
                         if ((ind9 === '1' && ind10 == '_' && inputChar >= '3') ||
                             (((ind6 == '0' && ind7 == '_') || (ind9 == '0' && ind10)) &&
@@ -5073,16 +5138,20 @@ class AXDatePickerComponent extends AXValidatableComponent {
     navigate(value) {
         this.calendarRef.navigate(value);
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXDatePickerComponent, isStandalone: false, 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: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      [mask]=\"dateType\"\n      [showMask]=\"true\"\n      #input\n      [textAlign]=\"textAlign\"\n      [value]=\"text\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onBlur)=\"handleInputBlur()\"\n      (click)=\"handleClick()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"calendarValue\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXValidatableComponent, useExisting: AXDatePickerComponent },
-                    ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      #input\n      [textAlign]=\"textAlign\"\n      [(value)]=\"text\"\n      [mask]=\"dateType\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onkey)=\"handleKeyPress($event)\"\n      (onFocus)=\"handleInputFocus()\"\n      (click)=\"handleClick()\"\n      (onBlur)=\"handleInputBlur()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"value\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
+                    ], host: { style: 'width: 100%' }, standalone: false, template: "<ax-drop-down\n  [readonly]=\"readonly\"\n  [fitParent]=\"false\"\n  [size]=\"size\"\n  [showDropDownButton]=\"false\"\n  icon=\"far fa-calendar-alt\"\n  #dropdown\n  maxHeight=\"unset\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <ax-text-box\n      [mask]=\"dateType\"\n      [showMask]=\"true\"\n      #input\n      [textAlign]=\"textAlign\"\n      [value]=\"text\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [size]=\"size\"\n      (onBlur)=\"handleInputBlur()\"\n      (click)=\"handleClick()\"\n      (onValueChanged)=\"textChange($event)\"\n    ></ax-text-box>\n  </ng-container>\n  <ng-container panel>\n    <ax-calendar-box\n      #calendarRef\n      *ngIf=\"_renderPicker\"\n      [showTodayButton]=\"showTodayButton\"\n      [selectableHoliday]=\"selectableHoliday\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [size]=\"size\"\n      (onClick)=\"onClick($event)\"\n      (onValueChanged)=\"onDateChange($event)\"\n      [type]=\"type\"\n      [(value)]=\"calendarValue\"\n      [dayStyle]=\"dayStyle\"\n      [dayMinMaxResoan]=\"dayMinMaxResoan\"\n    >\n    </ax-calendar-box>\n  </ng-container>\n  <ng-container end>\n    <ax-button\n      end\n      *ngIf=\"allowClear && value\"\n      [disabled]=\"disabled\"\n      icon=\"far fa-times icon\"\n      type=\"blank danger\"\n      (click)=\"clear()\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      end\n      icon=\"far fa-calendar-alt icon\"\n      type=\"light blank\"\n      (click)=\"handleButtonClick()\"\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n</ax-drop-down>\n", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
@@ -5357,7 +5426,7 @@ class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
         </ax-text-box>
     </div>
 </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
             type: Component,
@@ -5541,7 +5610,7 @@ class AXFilterColumnStringComponent extends AXFilterColumnComponent {
         </ax-text-box>
     </div>
 </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
             type: Component,
@@ -5984,7 +6053,7 @@ class AXFilterPanelComponent {
         }, 50);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXFilterPanelComponent, isStandalone: false, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n    <div class=\"saved-list\" #savedList>\n        <ax-panel-box #fb>\n            <ng-template #header>\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\n                    <ax-toolbar>\n                        <ax-toolbar-title>\n                            <div>\n                                <i class=\"far fa-filter\"></i>\n                                <span>SAVED FILTERS</span>\n                            </div>\n                        </ax-toolbar-title>\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n                        </ax-toolbar-menu>\n                    </ax-toolbar>\n                </div>\n            </ng-template>\n\n            <div class=\"list\">\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n                    <ul>\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n                                <li (click)=\"setFilterByName(f.name)\">\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\n                                                (click)=\"removeFilter(f)\"></i></span>\n                                    </div>\n                                </li>\n                            </ng-container>\n                            <ng-template #editMode>\n                                <li>\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n                                        (onKey)=\"tbxNameOnKey($event)\">\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n                                            <i class=\"far fa-check\"></i>\n                                        </ax-button>\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n                                            <i class=\"far fa-times\"></i>\n                                        </ax-button>\n                                        <ax-validation>\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\n                                            </ax-validation-rule>\n                                        </ax-validation>\n                                    </ax-text-box>\n                                </li>\n                            </ng-template>\n                        </ng-container>\n                    </ul>\n                </ng-container>\n                <ng-template #emptyList>\n                    <div class=\"empty-list\">\n                        Empty\n                    </div>\n                </ng-template>\n            </div>\n        </ax-panel-box>\n    </div>\n    <div class=\"body\" #body>\n        <ng-container *ngFor=\"let g of groups\">\n            <ax-panel-box #fb>\n                <ng-template #header>\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n                        <i\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n                        <span>{{g.caption}}</span>\n                    </div>\n                </ng-template>\n                <ng-container *ngFor=\"let c of g.columns\">\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n                            [(value)]=\"c.active\">\n                        </ax-check-box>\n                    </div>\n                    <div [hidden]=\"!c.active\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <ng-container *ngSwitchCase=\"'selection'\">\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n                                    [dataType]=\"c.options.dataType\">\n                                </ax-filter-column-selection>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'date'\">\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-date>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'number'\">\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-number>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-string>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ax-panel-box>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n        <div class=\"filter-panel\">\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n                <i class=\"far fa-filter\"></i>\n                Apply Filter\n            </ax-button>\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n                <i class=\"far fa-eraser\"></i>\n                Clear\n            </ax-button>\n        </div>\n    </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXFilterPanelComponent, isStandalone: false, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n    <div class=\"saved-list\" #savedList>\n        <ax-panel-box #fb>\n            <ng-template #header>\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\n                    <ax-toolbar>\n                        <ax-toolbar-title>\n                            <div>\n                                <i class=\"far fa-filter\"></i>\n                                <span>SAVED FILTERS</span>\n                            </div>\n                        </ax-toolbar-title>\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n                        </ax-toolbar-menu>\n                    </ax-toolbar>\n                </div>\n            </ng-template>\n\n            <div class=\"list\">\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n                    <ul>\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n                                <li (click)=\"setFilterByName(f.name)\">\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\n                                                (click)=\"removeFilter(f)\"></i></span>\n                                    </div>\n                                </li>\n                            </ng-container>\n                            <ng-template #editMode>\n                                <li>\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n                                        (onKey)=\"tbxNameOnKey($event)\">\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n                                            <i class=\"far fa-check\"></i>\n                                        </ax-button>\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n                                            <i class=\"far fa-times\"></i>\n                                        </ax-button>\n                                        <ax-validation>\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\n                                            </ax-validation-rule>\n                                        </ax-validation>\n                                    </ax-text-box>\n                                </li>\n                            </ng-template>\n                        </ng-container>\n                    </ul>\n                </ng-container>\n                <ng-template #emptyList>\n                    <div class=\"empty-list\">\n                        Empty\n                    </div>\n                </ng-template>\n            </div>\n        </ax-panel-box>\n    </div>\n    <div class=\"body\" #body>\n        <ng-container *ngFor=\"let g of groups\">\n            <ax-panel-box #fb>\n                <ng-template #header>\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n                        <i\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n                        <span>{{g.caption}}</span>\n                    </div>\n                </ng-template>\n                <ng-container *ngFor=\"let c of g.columns\">\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n                            [(value)]=\"c.active\">\n                        </ax-check-box>\n                    </div>\n                    <div [hidden]=\"!c.active\">\n                        <ng-container [ngSwitch]=\"c.type\">\n                            <ng-container *ngSwitchCase=\"'selection'\">\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n                                    [dataType]=\"c.options.dataType\">\n                                </ax-filter-column-selection>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'date'\">\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-date>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'number'\">\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-number>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n                                    [(active)]=\"c.active\">\n                                </ax-filter-column-string>\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ax-panel-box>\n        </ng-container>\n    </div>\n\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n        <div class=\"filter-panel\">\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n                <i class=\"far fa-filter\"></i>\n                Apply Filter\n            </ax-button>\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n                <i class=\"far fa-eraser\"></i>\n                Clear\n            </ax-button>\n        </div>\n    </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
             type: Component,
@@ -9753,7 +9822,7 @@ class AXSelectBoxComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSelectBoxComponent, isStandalone: false, 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", dropdownWidth: "dropdownWidth", multiLine: "multiLine", onDemandTranslate: "onDemandTranslate", 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\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], 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\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -10233,7 +10302,7 @@ class AXQueryBuilderRuleComponent {
         return this.rule.control.options ? this.rule.control.options[name] : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXQueryBuilderRuleComponent, isStandalone: false, 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\">\n    <div class=\"text {{parent.condition}}\">\n        <span>{{parent.condition}}</span>\n    </div>\n</div>\n<div class=\"handler\">\n    <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n                mode=\"single\">\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #fieldsTemplate>\n        <div (click)=\"handleEditClick()\">\n            {{rule.caption}}\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n                <ax-data-source [provideData]=\"provideDataOperator\">\n                </ax-data-source>\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #operatorTemplate>\n        <div class=\"text\" (click)=\"handleEditClick()\">\n            {{('queryBuilder.'+rule.operator) | trans}}\n        </div>\n    </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n            <div *ngSwitchCase=\"'textBox'\">\n                <ax-form-group>\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\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'selectBox'\">\n                <ax-form-group>\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\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')\"\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n                        #selectBoxValue>\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n            </div>\n\n            <div *ngSwitchCase=\"'numberBox'\">\n                <ax-form-group>\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\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\" [(value)]=\"rule.value\">\n                    </ax-number-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'datetime'\">\n                <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n                </ax-date-picker>\n\n            </div>\n            <div *ngSwitchCase=\"'boolean'\">\n\n                <ax-form-group>\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\n                        </ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n\n            </div>\n            <div *ngSwitchDefault>\n                <ax-form-group>\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\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n\n                </ax-form-group>\n\n            </div>\n        </div>\n\n        <div *ngIf=\"isOnDemandLabel\">\n\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\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\">\n                <!-- <ax-validation>\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                </ax-validation> -->\n            </ax-text-box>\n\n\n        </div>\n\n    </ng-container>\n    <ng-template #valueTemplate>\n        <div (click)=\"handleEditClick()\">\n\n            {{rule.text}}\n\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\n        <i class=\"far fa-dollar-sign\"></i>\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n        </ax-check-box>\n    </div>\n\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n        <i class=\"far fa-check\"></i>\n    </div>\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n        <i class=\"far fa-times\"></i>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXQueryBuilderRuleComponent, isStandalone: false, 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\">\n    <div class=\"text {{parent.condition}}\">\n        <span>{{parent.condition}}</span>\n    </div>\n</div>\n<div class=\"handler\">\n    <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n                mode=\"single\">\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #fieldsTemplate>\n        <div (click)=\"handleEditClick()\">\n            {{rule.caption}}\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n                <ax-data-source [provideData]=\"provideDataOperator\">\n                </ax-data-source>\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #operatorTemplate>\n        <div class=\"text\" (click)=\"handleEditClick()\">\n            {{('queryBuilder.'+rule.operator) | trans}}\n        </div>\n    </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n            <div *ngSwitchCase=\"'textBox'\">\n                <ax-form-group>\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\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'selectBox'\">\n                <ax-form-group>\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\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')\"\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n                        #selectBoxValue>\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n            </div>\n\n            <div *ngSwitchCase=\"'numberBox'\">\n                <ax-form-group>\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\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\" [(value)]=\"rule.value\">\n                    </ax-number-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'datetime'\">\n                <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n                </ax-date-picker>\n\n            </div>\n            <div *ngSwitchCase=\"'boolean'\">\n\n                <ax-form-group>\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\n                        </ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n\n            </div>\n            <div *ngSwitchDefault>\n                <ax-form-group>\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\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n\n                </ax-form-group>\n\n            </div>\n        </div>\n\n        <div *ngIf=\"isOnDemandLabel\">\n\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\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\">\n                <!-- <ax-validation>\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                </ax-validation> -->\n            </ax-text-box>\n\n\n        </div>\n\n    </ng-container>\n    <ng-template #valueTemplate>\n        <div (click)=\"handleEditClick()\">\n\n            {{rule.text}}\n\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\n        <i class=\"far fa-dollar-sign\"></i>\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n        </ax-check-box>\n    </div>\n\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n        <i class=\"far fa-check\"></i>\n    </div>\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n        <i class=\"far fa-times\"></i>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
             type: Component,
@@ -10418,7 +10487,7 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXQueryBuilderPopupComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n    <ax-validation-form #form>\n        <div *ngFor=\"let rule of items\">\n\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n                <div *ngSwitchCase=\"'textBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'selectBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\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\"\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'numberBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-number-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'datetime'\">\n                  <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n                  </ax-date-picker>\n                </div>\n                <div *ngSwitchCase=\"'boolean'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\n                            </ax-data-source>\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchDefault>\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n\n                    </ax-form-group>\n\n                </div>\n            </div>\n\n\n\n\n        </div>\n\n    </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXQueryBuilderPopupComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n    <ax-validation-form #form>\n        <div *ngFor=\"let rule of items\">\n\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n                <div *ngSwitchCase=\"'textBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'selectBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\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\"\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'numberBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-number-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'datetime'\">\n                  <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n                  </ax-date-picker>\n                </div>\n                <div *ngSwitchCase=\"'boolean'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\n                            </ax-data-source>\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchDefault>\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n\n                    </ax-form-group>\n\n                </div>\n            </div>\n\n\n\n\n        </div>\n\n    </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
             type: Component,
@@ -11354,7 +11423,7 @@ class AXSelectBox2Component extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSelectBox2Component, isStandalone: false, 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\"\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n                [title]=\"item[textField]\">\n                <span class=\"chips-text\">\n                    {{item[textField]}}\n                </span>\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\n                    <i class=\"far fa-times close\"></i>\n                </span>\n            </div>\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n                    [disabled]=\"disabled\"  [size]=\"size\">\n                </ax-text-box>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container end>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n            </ax-search-box>\n        </div>\n        <div class=\"ax list-container\">\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\n                <ng-template #thenTemplate>\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n                        [class.selected]=\"isItemSelected(item)\">\n                        <div>\n                            <div>\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n                                    (onClick)=\"handleItemClick($event,item)\">\n                                </ax-check-box>\n                            </div>\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n                                [title]=\"item[textField]\"\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n                                {{ item[textField] }}\n                            </div>\n                        </div>\n                    </div>\n                </ng-template>\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n                </div>\n                <ng-template #elseTemplate>\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\n                    <ng-template #searchTemplate>\n                        <div class=\"list-item\">\n                            {{'common.searching' | trans}}\n                        </div>\n                    </ng-template>\n                    <ng-template #noDataTemplate>\n                        <div class=\"list-item\">\n                            {{'common.noDataFound' | trans}}\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </div>\n        </div>\n    </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "directive", type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], 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\"\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n                [title]=\"item[textField]\">\n                <span class=\"chips-text\">\n                    {{item[textField]}}\n                </span>\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\n                    <i class=\"far fa-times close\"></i>\n                </span>\n            </div>\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n                    [disabled]=\"disabled\"  [size]=\"size\">\n                </ax-text-box>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container end>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n            </ax-search-box>\n        </div>\n        <div class=\"ax list-container\">\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\n                <ng-template #thenTemplate>\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n                        [class.selected]=\"isItemSelected(item)\">\n                        <div>\n                            <div>\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n                                    (onClick)=\"handleItemClick($event,item)\">\n                                </ax-check-box>\n                            </div>\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n                                [title]=\"item[textField]\"\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n                                {{ item[textField] }}\n                            </div>\n                        </div>\n                    </div>\n                </ng-template>\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n                </div>\n                <ng-template #elseTemplate>\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\n                    <ng-template #searchTemplate>\n                        <div class=\"list-item\">\n                            {{'common.searching' | trans}}\n                        </div>\n                    </ng-template>\n                    <ng-template #noDataTemplate>\n                        <div class=\"list-item\">\n                            {{'common.noDataFound' | trans}}\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </div>\n        </div>\n    </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "directive", type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectBox2Component, decorators: [{
             type: Component,
@@ -12538,7 +12607,7 @@ class AXColorBoxComponent extends AXValidatableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXColorBoxComponent, isStandalone: false, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\n    <div class=\"color-box-pallet\">\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n            (click)=\"onColorClick(item)\">\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\n        </div>\n    </div>\n    <div class=\"text-input\">\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n                <span>RGB</span>\n            </div>\n        </ng-container>\n        <ng-template #hexTemplate>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n                <span>HEX</span>\n            </div> -->\n        </ng-template>\n\n    </div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\n    <div class=\"color-box-pallet\">\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\n            (click)=\"onColorClick(item)\">\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\n        </div>\n    </div>\n    <div class=\"text-input\">\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\n                <span>RGB</span>\n            </div>\n        </ng-container>\n        <ng-template #hexTemplate>\n            <div class=\"color-part\">\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\n                </ax-text-box>\n            </div>\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\n                <span>HEX</span>\n            </div> -->\n        </ng-template>\n\n    </div>\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
@@ -12792,7 +12861,7 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
         return Promise.resolve(this.columnTypeData);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnPropertyEditorComponent, isStandalone: false, 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\">\n    <div>\n        <div>{{c.fieldName}} - {{c.caption}}</div>\n    </div>\n    <div>\n        <div>\n        </div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <div class=\"ax-mrg-md\"></div>\n                <div class=\"table\">\n                    <div class=\"thead\">\n                        <div class=\"tr\">\n                            <div class=\"th\">\n                                <div style=\"width: 5px;\"></div>\n                                \u0646\u0627\u0645\n                            </div>\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\n                            <div class=\"th\">\u0646\u0648\u0639</div>\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\n                        </div>\n                    </div>\n                    <div class=\"tbody\">\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\n                                <div class=\"td\">\n                                    <div>\n                                    </div>\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\n                                    </ax-select-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\n                                    </ax-button>\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\n                                    </ax-button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\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\n                </ax-button>\n            </div>\n        </ax-page-content>\n    </ax-page>\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{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 rgba(0,0,0,.1607843137);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:#fff;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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ColumnPropertyEditorComponent, isStandalone: false, 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\">\n    <div>\n        <div>{{c.fieldName}} - {{c.caption}}</div>\n    </div>\n    <div>\n        <div>\n        </div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <div class=\"ax-mrg-md\"></div>\n                <div class=\"table\">\n                    <div class=\"thead\">\n                        <div class=\"tr\">\n                            <div class=\"th\">\n                                <div style=\"width: 5px;\"></div>\n                                \u0646\u0627\u0645\n                            </div>\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\n                            <div class=\"th\">\u0646\u0648\u0639</div>\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\n                        </div>\n                    </div>\n                    <div class=\"tbody\">\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\n                                <div class=\"td\">\n                                    <div>\n                                    </div>\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\n                                    </ax-select-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\n                                </div>\n                                <div class=\"td\">\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\n                                    </ax-button>\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\n                                    </ax-button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\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\n                </ax-button>\n            </div>\n        </ax-page-content>\n    </ax-page>\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{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 rgba(0,0,0,.1607843137);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:#fff;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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,
@@ -13004,7 +13073,7 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXConditionalColorPropertyEditorComponent, isStandalone: false, 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)\">\n    <div>\n        <div [style.background-color]=\"r.color\"></div>\n        <div>{{ r.display }}</div>\n    </div>\n    <div [attr.title]=\"getTitle(r.operator)\">\n        <div class=\"value\">{{r.value}}</div>\n        <div>\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\n        </div>\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\n</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n                                [allowNull]=\"false\" [items]=\"operators\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-select-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\n                            <div [ngSwitch]=\"dataType\">\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-text-box>\n                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-select-box>\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-number-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\n                            <ax-color-picker [(value)]=\"editRow.color\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-color-picker>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\n                            <ax-text-box [(value)]=\"editRow.display\">\n                            </ax-text-box>\n                        </div>\n                    </div>\n                </ax-validation-form>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n        </ax-page-content>\n    </ax-page>\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{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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXConditionalColorPropertyEditorComponent, isStandalone: false, 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)\">\n    <div>\n        <div [style.background-color]=\"r.color\"></div>\n        <div>{{ r.display }}</div>\n    </div>\n    <div [attr.title]=\"getTitle(r.operator)\">\n        <div class=\"value\">{{r.value}}</div>\n        <div>\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\n        </div>\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\n</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n                                [allowNull]=\"false\" [items]=\"operators\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-select-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\n                            <div [ngSwitch]=\"dataType\">\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-text-box>\n                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-select-box>\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n                                    <ax-validation>\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                    </ax-validation>\n                                </ax-number-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\n                            <ax-color-picker [(value)]=\"editRow.color\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-color-picker>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\n                            <ax-text-box [(value)]=\"editRow.display\">\n                            </ax-text-box>\n                        </div>\n                    </div>\n                </ax-validation-form>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n        </ax-page-content>\n    </ax-page>\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{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"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
             type: Component,
@@ -13378,7 +13447,7 @@ class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
         super.handleValueChange(this.ranges);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXRangePropertyEditorComponent, isStandalone: false, selector: "ng-component", 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)\">\n    <div>\n        <div [style.background-color]=\"r.color\"></div>\n        <div>{{r.title}}</div>\n    </div>\n    <div>\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n        <div>\n            <i class=\"far fa-long-arrow-left\"></i>\n        </div>\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\n</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\n                            <ax-text-box [(value)]=\"editRow.title\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-text-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-6\">\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n                                [decimalNumber]=\"decimalNumber\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-number-box>\n                        </div>\n                        <div class=\"col-6\">\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n                                [decimalNumber]=\"decimalNumber\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-number-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\n                            <ax-color-picker [(value)]=\"editRow.color\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-color-picker>\n                        </div>\n                    </div>\n                </ax-validation-form>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n        </ax-page-content>\n    </ax-page>\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{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.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXRangePropertyEditorComponent, isStandalone: false, selector: "ng-component", 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)\">\n    <div>\n        <div [style.background-color]=\"r.color\"></div>\n        <div>{{r.title}}</div>\n    </div>\n    <div>\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n        <div>\n            <i class=\"far fa-long-arrow-left\"></i>\n        </div>\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n    </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\n</ax-button>\n<ng-template #tplEdit>\n    <ax-page>\n        <ax-page-content>\n            <div class=\"container\">\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\n                            <ax-text-box [(value)]=\"editRow.title\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-text-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-6\">\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n                                [decimalNumber]=\"decimalNumber\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-number-box>\n                        </div>\n                        <div class=\"col-6\">\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n                                [decimalNumber]=\"decimalNumber\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-number-box>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12\">\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\n                            <ax-color-picker [(value)]=\"editRow.color\">\n                                <ax-validation>\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                                </ax-validation>\n                            </ax-color-picker>\n                        </div>\n                    </div>\n                </ax-validation-form>\n            </div>\n            <div class=\"ax-mrg-md\"></div>\n        </ax-page-content>\n    </ax-page>\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{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.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"], outputs: ["clickLabel"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
             type: Component,
@@ -13800,7 +13869,7 @@ class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTextPropertyEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\"\n    [allowClear]=\"clearButton\" [mask]=\"mask\" [showMask]=\"showMask\">\n    <ax-validation [rules]=\"validation?.rules\">\n    </ax-validation>\n</ax-text-box>", dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTextPropertyEditorComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\"\n    [allowClear]=\"clearButton\" [mask]=\"mask\" [showMask]=\"showMask\">\n    <ax-validation [rules]=\"validation?.rules\">\n    </ax-validation>\n</ax-text-box>", dependencies: [{ kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
             type: Component,
@@ -17749,7 +17818,7 @@ class AXUploadFileComponent extends AXBaseComponent {
         this.dropRef.classList.add('ax-upload-drop-over');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXUploadFileComponent, isStandalone: false, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXUploadFileComponent, isStandalone: false, selector: "ax-upload-file", inputs: { contentType: "contentType", dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress", onRemove: "onRemove" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  [accept]=\"accessTypes.join(',')\"\n  style=\"display: none\"\n  (change)=\"onFileChange($event)\"\n/>\n\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\n  <ax-form-group size=\"{{ size }}\">\n    <ax-text-box\n      [value]=\"fileName\"\n      readonly=\"true\"\n      [disabled]=\"disabled\"\n    ></ax-text-box>\n    <ax-button\n      type=\"blank light\"\n      icon=\"far fa-times\"\n      (click)=\"remove()\"\n      *ngIf=\"fileName\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n    <ax-button\n      type=\"primary blank\"\n      icon=\"far fa-upload\"\n      (click)=\"open()\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n    >\n    </ax-button>\n  </ax-form-group>\n</ng-container>\n\n<ng-template #elseTemplate>\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef></div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions", "leadZeroDateTime"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size", "labelMode"], outputs: ["labelModeChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXUploadFileComponent, decorators: [{
             type: Component,