@acorex/components 16.19.19 → 16.19.21

package/fesm2022/acorex-components.mjs

@@ -404,7 +404,7 @@ class AXBaseTextComponent extends AXValidatableComponent {
     textAlign = null;
     size = 'md';
     placeholder;
-    autocomplete;
+    autocomplete = 'off';
     name;
     userChange = false;
     constructor(cdr, ref) {
@@ -613,11 +613,12 @@ class AXOverlayService {
         this.overlayService2 = overlayService2;
         this.appRef = appRef;
     }
+    activeOverlays = [];
     show(content, context, configs) {
         configs = Object.assign({
             hasBackdrop: true,
             transparentBackdrop: true,
-            closeOnClickOutside: true
+            closeOnClickOutside: true,
         }, configs || {});
         // get root viewref
         const viewRef = this.appRef.components[0].instance.viewRef;
@@ -638,11 +639,17 @@ class AXOverlayService {
             positionStrategy = this.overlayService
                 .position()
                 .flexibleConnectedTo(configs.targetElement)
-                .withPositions(Array.isArray(configs.position) ? configs.position : [configs.position])
+                .withPositions(Array.isArray(configs.position)
+                ? configs.position
+                : [configs.position])
                 .withPush(true);
         }
         else {
-            positionStrategy = this.overlayService.position().global().centerHorizontally().centerVertically();
+            positionStrategy = this.overlayService
+                .position()
+                .global()
+                .centerHorizontally()
+                .centerVertically();
         }
         let scrollStrategy = this.overlayService.scrollStrategies.reposition({ autoClose: true });
         if (configs.scroll === 'block') {
@@ -653,11 +660,20 @@ class AXOverlayService {
             scrollStrategy,
             hasBackdrop: configs.hasBackdrop,
             disposeOnNavigation: true,
-            backdropClass: configs.backdropClass ? configs.backdropClass : configs.transparentBackdrop ? 'cdk-overlay-transparent-backdrop' : undefined,
-            panelClass: configs.panelClass ? configs.panelClass : ['animate__animated', 'animate__fadeIn']
+            backdropClass: configs.backdropClass
+                ? configs.backdropClass
+                : configs.transparentBackdrop
+                    ? 'cdk-overlay-transparent-backdrop'
+                    : undefined,
+            panelClass: configs.panelClass
+                ? configs.panelClass
+                : ['animate__animated', 'animate__fadeIn'],
         };
         // joon nanat dorost sho
-        let overlayRef = configs.containerElement ? this.overlayService.createOn(configs.containerElement, config) : this.overlayService2.create(config);
+        let overlayRef = configs.containerElement
+            ? this.overlayService.createOn(configs.containerElement, config)
+            : this.overlayService2.create(config);
+        this.activeOverlays.push(overlayRef);
         const host = overlayRef.attach(portal);
         if (host.instance) {
             Object.assign(host.instance, context);
@@ -679,9 +695,17 @@ class AXOverlayService {
         return {
             instance: host.instance,
             dispose: overlayRef.dispose.bind(overlayRef),
-            overlayRef: overlayRef
+            overlayRef: overlayRef,
         };
     }
+    closeOverlay(overlayRef) {
+        overlayRef.dispose();
+        this.activeOverlays = this.activeOverlays.filter((ref) => ref !== overlayRef);
+    }
+    closeAllOverlays() {
+        this.activeOverlays.forEach((ref) => ref.dispose());
+        this.activeOverlays = [];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
 }
@@ -1281,7 +1305,12 @@ class AXCalendarBoxComponent {
             this.matrix = this.matrixify(this.applyStyle(this.viewRange.enumurate('month', this.type)), 3);
         }
         else if (this.view === 'year') {
-            this.matrix = this.matrixify(this.applyStyle(this.viewRange.enumurate('year', this.type)), 3);
+            const range = this.viewRange.enumurate('year', this.type);
+            if (range.length > 9) {
+                range.pop();
+                this.viewRange.endTime = new AXDateTime(this.viewRange.endTime.toISOString()).add('year', -1);
+            }
+            this.matrix = this.matrixify(this.applyStyle(range), 3);
         }
         this.cdr.detectChanges();
     }
@@ -1402,11 +1431,11 @@ class AXCalendarBoxComponent {
         return item.date.date.getTime();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXCalendarBoxComponent, isStandalone: false, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor='let w of weekdays'>\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\n                            (click)=\"setDayClick($event,d)\">\n                            {{d.date.dayInMonth}}</div>\n                    </ng-container>\n\n                </div>\n            </ng-container>\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\n                        <strong>\n                            {{d.date| dt:\"MMM\"}}\n                        </strong>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n\n    </div>\n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXCalendarBoxComponent, isStandalone: false, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXDateTimePipe, name: "dt" }, { 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: AXCalendarBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\n    <div class=\"ax-calendar-header\">\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"next()\">\n                {{'common.next' | trans}}\n            </ax-button>\n        </div>\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\n                <ng-container *ngSwitchCase=\"'day'\">\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'month'\">\n                    {{viewRange.startTime | dt:\"YYYY\"}}\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\n                </ng-container>\n            </ax-button>\n        </div>\n        <div class=\"ax-controll-button\">\n            <ax-button type=\"light blank\" (click)=\"prev()\">\n                {{'common.prev' | trans}}\n            </ax-button>\n        </div>\n    </div>\n    <div class=\"ax-calendar-body\">\n        <ng-container [ngSwitch]=\"view\">\n            <ng-container *ngSwitchCase=\"'day'\">\n                <div class=\"ax-month-items\">\n                    <ng-container *ngFor='let w of weekdays'>\n                        <div class=\"ax-month-item\">{{w}}</div>\n                    </ng-container>\n                </div>\n                <div class=\"ax-day-items\">\n                    <ng-container *ngFor=\"let r of matrix\">\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\n                            (click)=\"setDayClick($event,d)\">\n                            {{d.date.dayInMonth}}</div>\n                    </ng-container>\n\n                </div>\n            </ng-container>\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n                <ng-container *ngFor=\"let r of matrix\">\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\n                        <strong>\n                            {{d.date| dt:\"MMM\"}}\n                        </strong>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n\n    </div>\n    <div class=\"ax-calendar-footer\">\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n            {{getTodayName()}}\n        </ax-button>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"ax-calendar-container {{ size }}\" [ngClass]=\"type\">\n  <div class=\"ax-calendar-header\">\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"next()\">\n        {{ 'common.next' | trans }}\n      </ax-button>\n    </div>\n    <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\n      <ax-button type=\"light blank\" (click)=\"changeView()\">\n        <ng-container *ngSwitchCase=\"'day'\">\n          {{ viewRange.startTime.add('day', 10) | dt : 'MMM YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          {{ viewRange.startTime | dt : 'YYYY' }}\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{ viewRange.startTime | dt : 'YYYY' }} -\n          {{ viewRange.endTime | dt : 'YYYY' }}\n        </ng-container>\n      </ax-button>\n    </div>\n    <div class=\"ax-controll-button\">\n      <ax-button type=\"light blank\" (click)=\"prev()\">\n        {{ 'common.prev' | trans }}\n      </ax-button>\n    </div>\n  </div>\n  <div class=\"ax-calendar-body\">\n    <ng-container [ngSwitch]=\"view\">\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"ax-month-items\">\n          <ng-container *ngFor=\"let w of weekdays\">\n            <div class=\"ax-month-item\">{{ w }}</div>\n          </ng-container>\n        </div>\n        <div class=\"ax-day-items\">\n          <ng-container *ngFor=\"let r of matrix\">\n            <div\n              class=\"ax-day-item ax-state-event\"\n              *ngFor=\"let d of r; trackBy: trackByFn\"\n              [title]=\"getTitle(d.date)\"\n              [ngClass]=\"{\n                selected: d.selected,\n                focused: d.focused,\n                today: d.today,\n                'next-month': d.nextMonth,\n                holiday: d.holiday,\n                unselect: d.unselect\n              }\"\n              [ngStyle]=\"findDay(d.date) ? getStyle(d.date) : ''\"\n              (click)=\"setDayClick($event, d)\"\n            >\n              {{ d.date.dayInMonth }}\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n      <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\n        <ng-container *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-month-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setMonthClick($event, d.date)\"\n          >\n            <strong>\n              {{ d.date | dt : 'MMM' }}\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\n        <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\n          <div\n            class=\"ax-year-item\"\n            *ngFor=\"let d of r; trackBy: trackByFn\"\n            [ngClass]=\"{\n              selected: d.selected,\n              focused: d.focused,\n              today: d.today\n            }\"\n            (click)=\"setYearClick($event, d.date)\"\n          >\n            <strong>{{ d.date | dt : 'YYYY' }}</strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"ax-calendar-footer\">\n    <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\n      {{ getTodayName() }}\n    </ax-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -3344,7 +3373,6 @@ class AXCheckBoxComponent extends AXValidatableComponent {
     label = '';
     tabIndex = 0;
     indeterminate = false;
-    useTreeView;
     focus() { }
     constructor(cdr, ref) {
         super();
@@ -3378,10 +3406,11 @@ class AXCheckBoxComponent extends AXValidatableComponent {
     //   this.value = val;
     // }
     ngOnInit() {
+        const insideTreeView = this.isInsideTreeView();
         if (this.indeterminate) {
             this.value = null;
         }
-        else if (!this.useTreeView && this.value !== true) {
+        else if (!insideTreeView && this.value !== true) {
             this.value = false;
         }
     }
@@ -3401,8 +3430,18 @@ class AXCheckBoxComponent extends AXValidatableComponent {
         }
         //  }, 100);
     }
+    isInsideTreeView() {
+        let parent = this.ref.nativeElement.parentElement;
+        while (parent) {
+            if (parent.tagName === 'AX-TREE-VIEW') {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXCheckBoxComponent, isStandalone: false, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", useTreeView: "useTreeView", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXCheckBoxComponent, isStandalone: false, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXCheckBoxComponent },
         ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\n  (click)=\"handleClick($event)\">\n  {{ label }}\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\n    [disabled]=\"disabled || readonly\" />\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\n\n</label> -->\n\n\n<!-- [(ngModel)]=\"value\" -->\n<!-- (click)=\"handleClick($event)\"  -->\n\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\n\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\n    [disabled]=\"disabled || readonly\" />\n\n\n  <span>{{ label ? label : '&nbsp;' }}</span>\n</label>", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -3426,8 +3465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], indeterminate: [{
                 type: Input
-            }], useTreeView: [{
-                type: Input
             }], onValueChanged: [{
                 type: Output
             }], valueChange: [{
@@ -3800,7 +3837,7 @@ class AXSelectionListComponent extends AXValidatableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSelectionListComponent, isStandalone: false, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\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: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXSelectionListComponent, isStandalone: false, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngIf=\"mode == 'multiple'; then checkboxList; else radioButtonList\"\n></ng-container>\n<ng-template #checkboxList>\n  <div\n    class=\"ax selection-list {{ size }}\"\n    style=\"flex-wrap: wrap; gap: 4px\"\n    [ngClass]=\"direction\"\n  >\n    <ax-check-box\n      label=\"{{ item[textField] }}\"\n      *ngFor=\"let item of items\"\n      [disabled]=\"item.disable || disabled\"\n      [readonly]=\"item.readonly || readonly\"\n      [value]=\"selectedValues.indexOf(item[valueField]) > -1\"\n      (onValueChanged)=\"onCheckValueChange(item, $event.value)\"\n      (onClick)=\"checkBoxClick($event, item)\"\n    >\n    </ax-check-box>\n  </div>\n</ng-template>\n<ng-template #radioButtonList>\n  <div\n    style=\"flex-wrap: wrap; gap: 4px\"\n    class=\"ax selection-list {{ size }}\"\n    [ngClass]=\"direction\"\n  >\n    <label\n      class=\"ax radio\"\n      for=\"{{ uid }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      *ngFor=\"let item of items\"\n      (click)=\"onvalueChanged(item)\"\n    >\n      {{ item[textField] }}\n      <input\n        type=\"radio\"\n        (change)=\"onCheckValueChange(item[valueField], true)\"\n        [value]=\"item[valueField]\"\n        [checked]=\"selectedValues == item[valueField]\"\n        [name]=\"uid\"\n        [disabled]=\"item.disable || disabled\"\n        [readonly]=\"item.readonly || readonly\"\n      />\n      <span class=\"checkmark\"></span>\n    </label>\n  </div>\n</ng-template>\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: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
@@ -6052,7 +6089,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", "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 });
+    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", "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,
@@ -8553,21 +8590,47 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
         super(cdr, ref);
         this.cdr = cdr;
     }
-    type = 'password';
+    allowAutocomplete = input(false);
+    type = 'text';
     eyeIcon = 'far fa-eye';
-    handleShowPassword() {
-        this.eyeIcon = 'far fa-eye-slash';
-        if (this.type === 'password') {
+    ngAfterViewInit() {
+        if (this.allowAutocomplete()) {
+            this.type = 'password';
+        }
+        else {
             this.type = 'text';
-            this.eyeIcon = 'far fa-eye-slash';
+            this.getInputElement()?.classList.add('ax-password-mask');
+        }
+    }
+    handleShowPassword() {
+        if (this.allowAutocomplete()) {
+            if (this.type === 'password') {
+                this.type = 'text';
+                this.eyeIcon = 'far fa-eye-slash';
+            }
+            else {
+                this.type = 'password';
+                this.eyeIcon = 'far fa-eye';
+            }
         }
         else {
-            this.type = 'password';
-            this.eyeIcon = 'far fa-eye';
+            const inputEl = this.getInputElement();
+            const isMasked = inputEl.classList.contains('ax-password-mask');
+            if (isMasked) {
+                inputEl.classList.remove('ax-password-mask');
+                this.eyeIcon = 'far fa-eye-slash';
+            }
+            else {
+                inputEl.classList.add('ax-password-mask');
+                this.eyeIcon = 'far fa-eye';
+            }
         }
     }
+    getInputElement() {
+        return this.ref.nativeElement.querySelector('input');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXPasswordBoxComponent, isStandalone: false, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: AXPasswordBoxComponent, isStandalone: false, selector: "ax-password-box", inputs: { allowAutocomplete: { classPropertyName: "allowAutocomplete", publicName: "allowAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n  <div class=\"ax items-wrapper\">\n    <ng-content select=\"[start]\"> </ng-content>\n    <i class=\"form-item-icon {{ icon }}\" *ngIf=\"icon\"></i>\n  </div>\n  <div class=\"content\" #content>\n    <div\n      class=\"ax input form-control {{ size }}\"\n      [class.disabled]=\"disabled\"\n      [class.readonly]=\"readonly\"\n      [class.icon]=\"icon\"\n    >\n      <input\n        (focus)=\"handleInputFocus($event)\"\n        (blur)=\"handleInputBlur($event)\"\n        [autocomplete]=\"autocomplete\"\n        [name]=\"name\"\n        #input\n        [type]=\"type\"\n        class=\"ax {{ size }}\"\n        value=\"{{ value }}\"\n        placeholder=\"{{ placeholder }}\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"setTextAlign()\"\n        [class.clear]=\"value && allowClear\"\n      />\n    </div>\n  </div>\n  <div class=\"ax items-wrapper\">\n    <ax-button\n      *ngIf=\"value && allowClear\"\n      icon=\"fas fa-times\"\n      type=\"danger blank\"\n      (click)=\"clear()\"\n      [tabIndex]=\"-1\"\n    ></ax-button>\n    <ax-button\n      [disabled]=\"disabled\"\n      [icon]=\"eyeIcon\"\n      type=\"light blank\"\n      size=\"{{ size }}\"\n      (click)=\"handleShowPassword()\"\n      [tabIndex]=\"-1\"\n    >\n      <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -9821,7 +9884,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", "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 });
+        ], 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", "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,
@@ -10301,7 +10364,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", "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 });
+    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", "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,
@@ -11422,7 +11485,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", "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 });
+        ], 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", "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,
@@ -12191,7 +12254,7 @@ class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent {
     >
       <ax-validation [rules]="validation?.rules"> </ax-validation>
     </ax-check-box>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { 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: AXCheckBoxPropertyEditorComponent, decorators: [{
             type: Component,
@@ -12888,7 +12951,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", "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"] }] });
+    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", "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,
@@ -17516,11 +17579,11 @@ class AXTreeViewComponent extends AXBaseComponent {
         return keyFields;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTreeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AXTreeViewComponent, isStandalone: false, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", disabled: "disabled", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items"], outputs: ["onItemClick", "onClosed"] }, { kind: "directive", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AXTreeViewComponent, isStandalone: false, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", disabled: "disabled", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    @for (item of list; track $index) {\n    <li\n      class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n      [class.bordered]=\"bordered\"\n      [class.selected]=\"item.select\"\n      [draggable]=\"allowDrag\"\n      (dragstart)=\"onDragStart($event, item)\"\n      [attr.data-id]=\"item[keyField]\"\n      (dragleave)=\"onDragEnd($event, item)\"\n      (dragend)=\"drop($event)\"\n    >\n      <div\n        [class.disabled]=\"disabled\"\n        axContextMenu\n        [contextDataItem]=\"item\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [contextMenu]=\"menu\"\n        (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n        style=\"display: flex; cursor: pointer; align-items: center\"\n      >\n        <div class=\"start-side\">\n          @if (item[hasChildField]) {\n          <div\n            class=\"collapse-icon\"\n            (click)=\"handleOnNodeClick($event, item, true)\"\n          >\n            <i\n              class=\"fal\"\n              [ngClass]=\"{\n                'fa-minus': !!item.toggle,\n                'fa-plus': !item.toggle,\n                'fa-spinner fa-spin': item.loading\n              }\"\n            ></i>\n          </div>\n          } @if (showSelectBox) {\n          <ax-check-box\n            [disabled]=\"item.disabledCheckBox || disabled\"\n            [size]=\"size\"\n            [value]=\"item.select\"\n            (onClick)=\"internalSelectItem(item)\"\n          >\n          </ax-check-box>\n          }\n        </div>\n        <div\n          class=\"text-list\"\n          (click)=\"nodeClick(item)\"\n          (dblclick)=\"itemdbClick($event, item)\"\n        >\n          @if (nodeTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n          ></ng-container>\n          }@else{\n          {{ item.title }}\n          }\n        </div>\n      </div>\n      @if (item.loading) {\n      <ul>\n        <i class=\"far\"></i>\n      </ul>\n      } @if (item.toggle) {\n      <ul class=\"child\" style=\"background-color: white !important\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            recursiveList;\n            context: { $implicit: item.childeren }\n          \"\n        >\n        </ng-container>\n      </ul>\n      }\n    </li>\n    }\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items"], outputs: ["onItemClick", "onClosed"] }, { kind: "directive", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n        [class.bordered]=\"bordered\"\n        [class.selected]=\"item.select\"\n        [draggable]=\"allowDrag\"\n        (dragstart)=\"onDragStart($event, item)\"\n        [attr.data-id]=\"item[keyField]\"\n        (dragleave)=\"onDragEnd($event, item)\"\n        (dragend)=\"drop($event)\"\n      >\n        <div\n          [class.disabled]=\"disabled\"\n          axContextMenu\n          [contextDataItem]=\"item\"\n          [contextMenuItems]=\"contextMenuItems\"\n          [contextMenu]=\"menu\"\n          (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n          style=\"display: flex; cursor: pointer; align-items: center\"\n        >\n          <div class=\"start-side\">\n            <div\n              *ngIf=\"item[hasChildField]\"\n              class=\"collapse-icon\"\n              (click)=\"handleOnNodeClick($event, item, true)\"\n            >\n              <i\n                class=\"fal\"\n                [ngClass]=\"{\n                  'fa-minus': !!item.toggle,\n                  'fa-plus': !item.toggle,\n                  'fa-spinner fa-spin': item.loading\n                }\"\n              ></i>\n            </div>\n\n            <ax-check-box\n              *ngIf=\"showSelectBox\"\n              [disabled]=\"item.disabledCheckBox || disabled\"\n              [size]=\"size\"\n              [useTreeView]=\"true\"\n              [value]=\"item.select\"\n              (onClick)=\"internalSelectItem(item)\"\n            >\n            </ax-check-box>\n          </div>\n          <div\n            class=\"text-list\"\n            (click)=\"nodeClick(item)\"\n            (dblclick)=\"itemdbClick($event, item)\"\n          >\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #elseTemplate>\n              {{ item.title }}\n            </ng-template>\n          </div>\n        </div>\n        <ul *ngIf=\"item.loading\">\n          <i class=\"far\"></i>\n        </ul>\n        <ul\n          class=\"child\"\n          *ngIf=\"item.toggle\"\n          style=\"background-color: white !important\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              recursiveList;\n              context: { $implicit: item.childeren }\n            \"\n          >\n          </ng-container>\n        </ul>\n      </li>\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n" }]
+            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ul class=\"ax treeview {{ size }}\">\n  <ng-template #recursiveList let-list>\n    @for (item of list; track $index) {\n    <li\n      class=\"active {{ item[hasChildField] ? '' : 'node' }}\"\n      [class.bordered]=\"bordered\"\n      [class.selected]=\"item.select\"\n      [draggable]=\"allowDrag\"\n      (dragstart)=\"onDragStart($event, item)\"\n      [attr.data-id]=\"item[keyField]\"\n      (dragleave)=\"onDragEnd($event, item)\"\n      (dragend)=\"drop($event)\"\n    >\n      <div\n        [class.disabled]=\"disabled\"\n        axContextMenu\n        [contextDataItem]=\"item\"\n        [contextMenuItems]=\"contextMenuItems\"\n        [contextMenu]=\"menu\"\n        (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\n        style=\"display: flex; cursor: pointer; align-items: center\"\n      >\n        <div class=\"start-side\">\n          @if (item[hasChildField]) {\n          <div\n            class=\"collapse-icon\"\n            (click)=\"handleOnNodeClick($event, item, true)\"\n          >\n            <i\n              class=\"fal\"\n              [ngClass]=\"{\n                'fa-minus': !!item.toggle,\n                'fa-plus': !item.toggle,\n                'fa-spinner fa-spin': item.loading\n              }\"\n            ></i>\n          </div>\n          } @if (showSelectBox) {\n          <ax-check-box\n            [disabled]=\"item.disabledCheckBox || disabled\"\n            [size]=\"size\"\n            [value]=\"item.select\"\n            (onClick)=\"internalSelectItem(item)\"\n          >\n          </ax-check-box>\n          }\n        </div>\n        <div\n          class=\"text-list\"\n          (click)=\"nodeClick(item)\"\n          (dblclick)=\"itemdbClick($event, item)\"\n        >\n          @if (nodeTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item }\"\n          ></ng-container>\n          }@else{\n          {{ item.title }}\n          }\n        </div>\n      </div>\n      @if (item.loading) {\n      <ul>\n        <i class=\"far\"></i>\n      </ul>\n      } @if (item.toggle) {\n      <ul class=\"child\" style=\"background-color: white !important\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            recursiveList;\n            context: { $implicit: item.childeren }\n          \"\n        >\n        </ng-container>\n      </ul>\n      }\n    </li>\n    }\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"recursiveList; context: { $implicit: list }\"\n  ></ng-container>\n</ul>\n\n<ax-context-menu #menu></ax-context-menu>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nodeTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]