npm - @acorex/components - Versions diffs - 4.1.6 → 4.1.8 - Mend

@acorex/components 4.1.6 → 4.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/fesm2015/acorex-components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, ViewContainerRef } from '@angular/core';
+import { ElementRef, Component, Inject, Optional, Input, Injectable, EventEmitter, Output, Directive, ViewChild, ContentChild, TemplateRef, ViewEncapsulation, HostListener, NgModule, ChangeDetectionStrategy, Attribute, ContentChildren, ViewChildren, ViewContainerRef, HostBinding } from '@angular/core';
 import * as i1$2 from '@acorex/core';
 import { AXTranslator, AXHtmlUtil, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXColorUtil } from '@acorex/core';
 import * as i1$3 from '@angular/cdk/portal';
@@ -20,7 +20,6 @@ import { TextMaskModule } from 'angular2-text-mask';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __awaiter, __asyncValues } from 'tslib';
 import { differenceBy } from 'lodash';
 import * as i1$4 from '@angular/router';
@@ -790,6 +789,8 @@ class AXBasePageComponent {
     }
     onClosing(e) {
     }
+    onActivated() {
+    }
     ngOnDestroy() {
         this.onClosed.unsubscribe();
     }
@@ -902,19 +903,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['document:keydown.escape', ['$event']]
             }] } });
-const COMPONENT$7 = [AXButtonComponent];
-const MODULES$7 = [CommonModule];
+const COMPONENT$8 = [AXButtonComponent];
+const MODULES$8 = [CommonModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent], imports: [CommonModule], exports: [AXButtonComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$7]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$8]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
@@ -1289,10 +1290,10 @@ class AXCalendarBoxComponent {
     }
 }
 AXCalendarBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCalendarBoxComponent, 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=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [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):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\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):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dt": i1$2.AXDateTimePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCalendarBoxComponent, 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\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" (click)=\"next()\">\r\n                {{'common.next' | trans}}\r\n            </ax-button>\r\n        </div>\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" (click)=\"prev()\">\r\n                {{'common.prev' | trans}}\r\n            </ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\">{{w}}</div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\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):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$2.AXTranslatorPipe, "dt": i1$2.AXDateTimePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [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):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\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):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" (click)=\"next()\">\r\n                {{'common.next' | trans}}\r\n            </ax-button>\r\n        </div>\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" (click)=\"prev()\">\r\n                {{'common.prev' | trans}}\r\n            </ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\">{{w}}</div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\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):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\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)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -1457,13 +1458,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class AXCalendarBoxModule {
 }
 AXCalendarBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, declarations: [AXCalendarBoxComponent], imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule], exports: [AXCalendarBoxComponent] });
-AXCalendarBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule]] });
+AXCalendarBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, declarations: [AXCalendarBoxComponent], imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule, AXTranslatorModule], exports: [AXCalendarBoxComponent] });
+AXCalendarBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule, AXTranslatorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCalendarBoxComponent],
-                    imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule],
+                    imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule, AXTranslatorModule],
                     exports: [AXCalendarBoxComponent],
                     providers: []
                 }]
@@ -2955,7 +2956,7 @@ AXMenu2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             (showSubMenu)="showSubmenu($event)">
         </ax-menu-item>
      </div>
-    `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{cursor:not-allowed!important}\n"], components: [{ type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"], components: [{ type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenu2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu2', template: `
@@ -2967,7 +2968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (showSubMenu)="showSubmenu($event)">
         </ax-menu-item>
      </div>
-    `, encapsulation: ViewEncapsulation.None, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{cursor:not-allowed!important}\n"] }]
+    `, encapsulation: ViewEncapsulation.None, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:.875rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
                 type: Input
             }], selected: [{
@@ -3090,7 +3091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class AXCheckBoxItemClick extends AXHtmlEvent {
 }
-class AXCheckBoxComponent extends AXBaseComponent {
+class AXCheckBoxComponent extends AXValidatableComponent {
     constructor(cdr, ref) {
         super();
         this.cdr = cdr;
@@ -3447,7 +3448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
-class AXSelectionListComponent extends AXBaseComponent {
+class AXSelectionListComponent extends AXValidatableComponent {
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -4924,10 +4925,10 @@ class AXToastMessageComponent {
     }
 }
 AXToastMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;padding:1rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AXToastMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;height:6px;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastMessageComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;padding:1rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8rem 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer;font-size:1rem}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;height:6px;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
                 type: Input
             }], message: [{
@@ -5441,10 +5442,10 @@ class AXToolbarFilterViewComponent {
     }
 }
 AXToolbarFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:inherit}\n"], components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+AXToolbarFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"], components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toolbar-filter-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:inherit}\n"] }]
+            args: [{ selector: 'ax-toolbar-filter-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
@@ -5500,53 +5501,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [AXValidatableComponent]
             }] } });
-const COMPONENT$6 = [AXFormGroupComponent];
-const MODULES$6 = [CommonModule];
+const COMPONENT$7 = [AXFormGroupComponent];
+const MODULES$7 = [CommonModule];
 class AXFormGroupModule {
 }
 AXFormGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXFormGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, declarations: [AXFormGroupComponent], imports: [CommonModule], exports: [AXFormGroupComponent] });
-AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$6]] });
+AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
                     providers: [],
                 }]
         }] });
-const COMPONENT$5 = [AXTextBoxComponent];
-const MODULES$5 = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
+const COMPONENT$6 = [AXTextBoxComponent];
+const MODULES$6 = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
 class AXTextBoxModule {
 }
 AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule, AXButtonModule, TextMaskModule, FormsModule], exports: [AXTextBoxComponent] });
-AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$5]] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$6]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$5],
-                    imports: [...MODULES$5],
-                    exports: [...COMPONENT$5],
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
                     providers: []
                 }]
         }] });
-const COMPONENT$4 = [AXDropdownComponent];
-const MODULES$4 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
+const COMPONENT$5 = [AXDropdownComponent];
+const MODULES$5 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
 class AXDropdownModule {
 }
 AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent], imports: [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule], exports: [AXDropdownComponent] });
-AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$4]] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$5]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$4],
-                    imports: [...MODULES$4],
-                    exports: [...COMPONENT$4],
+                    declarations: [...COMPONENT$5],
+                    imports: [...MODULES$5],
+                    exports: [...COMPONENT$5],
                     providers: [],
                 }]
         }] });
@@ -6174,10 +6175,10 @@ class AXPopupComponent extends AXBaseComponent {
     }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-light-color);color:var(--ax-gray-fore-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1rem;font-weight:500;padding:.5rem .7rem}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{border-radius:50%;font-size:1.1rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popupBody: [{
                 type: ViewChild,
                 args: ['popupBody', { read: ViewContainerRef, static: true }]
@@ -6418,69 +6419,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXPopupService }]; } });
+class AXComponent {
+}
+AXComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClosbaleComponent extends AXComponent {
+}
+AXClosbaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+AXClosbaleComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXClosbaleComponent, decorators: [{
+            type: Injectable
+        }] });
 class AXDrawerComponent {
-    constructor() {
-        this.width = 300;
-        this.drawerState = 'out';
+    constructor(_elementRef, _cdr, _zone) {
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this.locationChange = new EventEmitter();
+        this.modeChange = new EventEmitter();
+        this._mode = 'overlay';
+        this.collapsedChange = new EventEmitter();
+        this._collapsed = true;
+        this._elementRef.nativeElement['__axContext__'] = this;
     }
-    ngOnDestroy() {
-        document.querySelector('body').classList.remove('ax-drawer-underlay');
+    get location() {
+        return this._location;
     }
-    toggle() {
-        const body = document.querySelector('body');
-        if (this.drawerState === 'out') {
-            this.drawerState = 'in';
-            body.classList.add('ax-drawer-underlay');
+    set location(v) {
+        if (v != this._location) {
+            this._location = v;
+            this.locationChange.emit(v);
+            this._checkProps();
         }
-        else {
-            this.drawerState = 'out';
-            body.classList.remove('ax-drawer-underlay');
+    }
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        if (v != this._mode) {
+            this._mode = v;
+            this.modeChange.emit(v);
+            this._checkProps();
+        }
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
+    set collapsed(v) {
+        if (v != this._collapsed) {
+            this._collapsed = v;
+            this.collapsedChange.emit(v);
+            this._checkProps();
+        }
+    }
+    ngAfterViewInit() {
+        this._detectBoundingSize();
+    }
+    ngDoCheck() {
+        this._detectBoundingSize();
+    }
+    _detectBoundingSize() {
+        this._zone.runOutsideAngular(() => {
+            const host = this._elementRef.nativeElement;
+            if (host.clientWidth)
+                host.style.setProperty('--ax-el-width', `${host.clientWidth}px`);
+        });
+    }
+    _checkProps() {
+        this._detectBoundingSize();
+        this._removeBackdrop();
+        if (this.mode == 'overlay') {
+            if (!this.collapsed) {
+                this._addBackdrop();
+            }
         }
     }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    close() {
+        this.collapsed = true;
+    }
+    open() {
+        debugger;
+        this.collapsed = false;
+    }
+    get __hostClass() {
+        //return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'} ${!this._loaded ? 'ax-preload' : ''}`;
+        return `ax-drawer-${this.mode} ax-drawer-${this.location} ${this.collapsed ? 'ax-collapsed' : 'ax-expanded'}`;
+    }
+    // private _loaded: boolean = false;
+    _addBackdrop() {
+        this._zone.runOutsideAngular(() => {
+            var _a;
+            this._backdropElement = document.createElement('div');
+            this._backdropElement.classList.add('ax-backdrop');
+            this._backdropElement.onclick = () => {
+                this._zone.run(() => {
+                    this.close();
+                });
+            };
+            (_a = this._elementRef.nativeElement.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(this._backdropElement);
+        });
+    }
+    _removeBackdrop() {
+        this._zone.runOutsideAngular(() => {
+            var _a;
+            if (this._backdropElement) {
+                (_a = this._elementRef.nativeElement.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._backdropElement);
+                this._backdropElement = null;
+            }
+        });
+    }
 }
-AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDrawerComponent, selector: "ax-drawer", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", animations: [
-        trigger('slideInOut', [
-            state('in', style({
-                transform: 'translate3d(0,0,0)',
-            })),
-            state('out', style({
-                transform: 'translate3d(100%, 0, 0)',
-            })),
-            transition('in => out', animate('200ms ease-in-out')),
-            transition('out => in', animate('200ms ease-in-out')),
-        ]),
-    ] });
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDrawerComponent, selector: "ax-drawer", inputs: { location: "location", mode: "mode", collapsed: "collapsed" }, outputs: { locationChange: "locationChange", modeChange: "modeChange", collapsedChange: "collapsedChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-drawer" }, providers: [
+        { provide: AXComponent, useExisting: AXDrawerComponent },
+        { provide: AXClosbaleComponent, useExisting: AXDrawerComponent }
+    ], ngImport: i0, template: `
+    <ng-content select=".header"> </ng-content>
+    <ng-content> </ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-drawer', animations: [
-                        trigger('slideInOut', [
-                            state('in', style({
-                                transform: 'translate3d(0,0,0)',
-                            })),
-                            state('out', style({
-                                transform: 'translate3d(100%, 0, 0)',
-                            })),
-                            transition('in => out', animate('200ms ease-in-out')),
-                            transition('out => in', animate('200ms ease-in-out')),
-                        ]),
-                    ], template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+            args: [{
+                    selector: 'ax-drawer',
+                    template: `
+    <ng-content select=".header"> </ng-content>
+    <ng-content> </ng-content>
+  `,
+                    host: { class: 'ax-drawer' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        { provide: AXComponent, useExisting: AXDrawerComponent },
+                        { provide: AXClosbaleComponent, useExisting: AXDrawerComponent }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { locationChange: [{
+                type: Output
+            }], location: [{
+                type: Input
+            }], modeChange: [{
+                type: Output
+            }], mode: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }], collapsed: [{
                 type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
+class AXDecoratorContentComponent {
+    constructor(elementRef, cdr) {
+    }
+}
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDecoratorContentComponent, selector: "ax-content", ngImport: i0, template: ` <ng-content> </ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-content',
+                    template: ` <ng-content> </ng-content> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+class AXDrawerContainerComponent {
+    constructor(elementRef, cdr, _zone) {
+        this.elementRef = elementRef;
+        this._zone = _zone;
+    }
+    ngDoCheck() {
+        const host = this.elementRef.nativeElement;
+        Array.from(host.querySelectorAll('ax-drawer'))
+            .map((c) => c['__axContext__'])
+            .some((c) => !(c === null || c === void 0 ? void 0 : c.collapsed))
+            ? host.classList.add('ax-visible')
+            : host.classList.remove('ax-visible');
+    }
+}
+AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDrawerContainerComponent, selector: "ax-drawer-container", ngImport: i0, template: `
+    <ng-content select="ax-drawer[location='start']"> </ng-content>
+    <ng-content> </ng-content>
+    <ng-content select="ax-drawer[location='end']"> </ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drawer-container',
+                    template: `
+    <ng-content select="ax-drawer[location='start']"> </ng-content>
+    <ng-content> </ng-content>
+    <ng-content select="ax-drawer[location='end']"> </ng-content>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
+const COMPONENT$4 = [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent];
+const MODULES$4 = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent], imports: [CommonModule, BrowserAnimationsModule], exports: [AXDrawerComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[CommonModule, BrowserAnimationsModule]] });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDecoratorContentComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$4]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXDrawerComponent],
-                    imports: [CommonModule, BrowserAnimationsModule],
-                    exports: [AXDrawerComponent],
-                    providers: []
+                    declarations: [...COMPONENT$4],
+                    imports: [...MODULES$4],
+                    exports: [...COMPONENT$4],
+                    providers: [],
                 }]
         }] });
@@ -8355,10 +8514,10 @@ class AXSelectBoxComponent extends AXValidatableComponent {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>" }]
+            args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBoxComponent }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showDropDownButton: [{
                 type: Input
             }], rowTemplate: [{
@@ -8588,7 +8747,7 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
                 text: AXTranslator.get('common.cancel'),
                 name: 'cancel',
                 style: 'ax light',
-                icon: 'far fa-times-circle'
+                icon: 'far fa-times'
             }
         ];
     }
@@ -9107,10 +9266,10 @@ class AXQueryBuilderRuleComponent {
     }
 }
 AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
+AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"condition\" *ngIf=\"parent\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { selectBox: [{
                 type: ViewChild,
                 args: ['selectBox']
@@ -9824,10 +9983,10 @@ class AXSelectBox2Component extends AXValidatableComponent {
     }
 }
 AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBox2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>" }]
+            args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXSelectBox2Component }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { span: [{
                 type: ViewChild,
                 args: [AXTextBoxComponent, { static: true }]
@@ -10204,6 +10363,14 @@ class AXTabPageHostComponent {
     ngOnInit() {
         this.isLoading = true;
     }
+    active() {
+        var _a, _b;
+        const func = (_b = (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.onActivated;
+        if (func) {
+            const f = func.bind(this.componentRef.instance);
+            f();
+        }
+    }
     ngAfterViewInit() {
         return __awaiter(this, void 0, void 0, function* () {
             this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-tab-page-host-container'));
@@ -10310,6 +10477,7 @@ class AXTabPageRendererComponent {
             if (v) {
                 v.location.nativeElement.hidden = false;
                 v.changeDetectorRef.reattach();
+                v.instance.active();
             }
             else {
                 try {
@@ -10321,6 +10489,7 @@ class AXTabPageRendererComponent {
                     this.childs.push(componentRef);
                     setTimeout(() => {
                         componentRef.changeDetectorRef.detectChanges();
+                        //host.active();
                     }, 10);
                 }
                 catch (error) {
@@ -10550,10 +10719,10 @@ class AXTabViewComponent {
     }
 }
 AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: 'fullWidth', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabViewComponent, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times-circle\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
+AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabViewComponent, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times-circle\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""] }]
+            args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
                         type: Attribute,
@@ -12153,10 +12322,10 @@ class AXTreeSideMenuComponent extends AXBaseComponent {
     }
 }
 AXTreeSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTreeSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", 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-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+AXTreeSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", 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-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n        \r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>" }]
+            args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n        \r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { nodeTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
@@ -13107,10 +13276,10 @@ class AXUploadFileComponent extends AXBaseComponent {
     }
 }
 AXUploadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n<div class=\"ax upload-file-box\" (click)=\"open()\" *ngIf=\"type == 'box'\" #dropRef>\r\n</div>\r\n\r\n<div class=\"ax upload-file-inline\" *ngIf=\"type == 'inline'\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <div class=\"ax buttons\">\r\n      <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\"  [tabIndex]=\"-1\">\r\n       \r\n      </ax-button>\r\n      <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\"  [tabIndex]=\"-1\">\r\n      </ax-button>\r\n    </div>\r\n  </ax-form-group>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n<div class=\"ax upload-file-box\" (click)=\"open()\" *ngIf=\"type == 'box'\" #dropRef>\r\n</div>\r\n\r\n<div class=\"ax upload-file-inline\" *ngIf=\"type == 'inline'\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <div class=\"ax buttons\">\r\n      <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\"  [tabIndex]=\"-1\">\r\n       \r\n      </ax-button>\r\n      <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\"  [tabIndex]=\"-1\">\r\n      </ax-button>\r\n    </div>\r\n  </ax-form-group>\r\n</div>" }]
+            args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n\r\n<ng-container *ngIf=\"type == 'inline'; else elseTemplate\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n    <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\" [tabIndex]=\"-1\">\r\n    </ax-button>\r\n  </ax-form-group>\r\n</ng-container>\r\n\r\n<ng-template #elseTemplate>\r\n  <div class=\"ax upload-file-box\" (click)=\"open()\" #dropRef>\r\n  </div>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropRef: [{
                 type: Input
             }], progressRef: [{
@@ -13227,6 +13396,7 @@ class AXProperyEditorComponent {
         return this._value;
     }
     set value(v) {
+        console.log('value set');
         if (v !== this._value) {
             this._value = v;
             this.valueChange.emit(v);
@@ -13262,7 +13432,7 @@ class AXPropertyDecorator {
 // @dynamic
 class AXPropertyDecorators {
     static register(cls, property, options) {
-        const item = AXPropertyDecorators.REGISTRY.find(c => c.cls === cls && c.property === property);
+        const item = AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
         if (item) {
             item.options = options;
         }
@@ -13271,14 +13441,14 @@ class AXPropertyDecorators {
         }
     }
     static has(cls, property) {
-        return AXPropertyDecorators.REGISTRY.some(c => c.cls === cls && c.property === property);
+        return AXPropertyDecorators.REGISTRY.some((c) => c.cls === cls && c.property === property);
     }
     static get(cls, property) {
-        return AXPropertyDecorators.REGISTRY.find(c => c.cls === cls && c.property === property);
+        return AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
     }
     static isValid(property) {
         if (property) {
-            return AXPropertyDecorators.REGISTRY.some(c => c.property === property);
+            return AXPropertyDecorators.REGISTRY.some((c) => c.property === property);
         }
         return false;
     }
@@ -13290,7 +13460,7 @@ class AXPropertyDecorators {
             p.push(superClass.constructor);
             superClass = Object.getPrototypeOf(superClass);
         }
-        list.push(...AXPropertyDecorators.REGISTRY.filter(c => p.includes(c.cls.constructor)));
+        list.push(...AXPropertyDecorators.REGISTRY.filter((c) => p.includes(c.cls.constructor)));
         return list;
     }
 }
@@ -13452,199 +13622,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
-class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.clearButton = false;
-    }
-    handleValueChange(e) {
-        super.handleValueChange(e.value);
-    }
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
-        this.onRenderCompleted.emit();
-    }
-}
-AXTextPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                type: ViewChild,
-                args: [AXTextBoxComponent]
-            }] } });
-class AXTextPropertyEditorModule {
-    constructor() {
-    }
-}
-AXTextPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, declarations: [AXTextPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule], exports: [AXTextPropertyEditorComponent] });
-AXTextPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXTextPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule],
-                    exports: [AXTextPropertyEditorComponent],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
-class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent {
+class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
-        this.showSeparator = true;
-        this.decimalNumber = 2;
-        this.minValue = null;
-        this.maxValue = null;
-        this.clearButton = false;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.readonly = false;
+        this.size = 'md';
     }
     handleValueChange(e) {
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
+        this.registerForValidationForm(this.checkBox);
         this.onRenderCompleted.emit();
     }
 }
-AXNumberBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXNumberBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ax-number-box (onValueChanged)="handleValueChange($event)"
-            [value]="value"
-            [showSeparator]="showSeparator"
-            [decimalNumber]="decimalNumber"
-            [min]="minValue"
-            [max]="maxValue"
-            [allowClear]="clearButton"
-        >
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-number-box>
-    `, isInline: true, components: [{ type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, decorators: [{
+AXCheckBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCheckBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "checkBox", first: true, predicate: AXCheckBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-check-box
+        [disabled]="disabled"
+        [label]="label"
+        [size]="size"
+        [indeterminate]="indeterminate"
+        [readonly]="readonly"
+        [value]="value"
+        (onValueChanged)="handleValueChange($event)"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>
+    `, isInline: true, components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-        <ax-number-box (onValueChanged)="handleValueChange($event)"
-            [value]="value"
-            [showSeparator]="showSeparator"
-            [decimalNumber]="decimalNumber"
-            [min]="minValue"
-            [max]="maxValue"
-            [allowClear]="clearButton"
-        >
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-number-box>
+    <ax-check-box
+        [disabled]="disabled"
+        [label]="label"
+        [size]="size"
+        [indeterminate]="indeterminate"
+        [readonly]="readonly"
+        [value]="value"
+        (onValueChanged)="handleValueChange($event)"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checkBox: [{
                 type: ViewChild,
-                args: [AXNumberBoxComponent]
+                args: [AXCheckBoxComponent, { static: true }]
             }] } });
-class AXNumberBoxPropertyEditorModule {
-    constructor() {
-    }
+class AXCheckPropertyEditorModule {
 }
-AXNumberBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXNumberBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, declarations: [AXNumberBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule], exports: [AXNumberBoxPropertyEditorComponent] });
-AXNumberBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, decorators: [{
+AXCheckPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCheckPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, declarations: [AXCheckBoxPropertyEditorComponent], imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule], exports: [AXCheckBoxPropertyEditorComponent] });
+AXCheckPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, providers: [], imports: [[CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXNumberBoxPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule],
-                    exports: [AXNumberBoxPropertyEditorComponent],
-                    providers: []
+                    declarations: [AXCheckBoxPropertyEditorComponent],
+                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule],
+                    exports: [AXCheckBoxPropertyEditorComponent],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return []; } });
-class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.valueField = 'id';
-        this.textField = 'text';
-        this.selectionMode = 'single';
-        this.selectionDataMode = 'value';
-        this.allowSearch = true;
-        this.allowNull = false;
-        this.disabled = false;
-        this.items = [];
-        this.remoteOperation = false;
-        this.provideData = (e) => {
-            return new Promise((resolve) => {
-                const func = () => {
-                    if (Array.isArray(this.items)) {
-                        resolve(this.items.slice());
-                    }
-                    else if (typeof this.items === 'function') {
-                        const a = Object.assign(e, { sender: this });
-                        resolve(this.items(a));
-                    }
-                    else {
-                        resolve([]);
-                    }
-                };
-                const intVal = setInterval(() => {
-                    if (this.initiated) {
-                        func();
-                        clearInterval(intVal);
-                    }
-                }, 50);
-            });
-        };
-    }
-    get filter() {
-        return this._filter;
-    }
-    set filter(v) {
-        var _a;
-        this._filter = v;
-        if (this.value && this.initiated) {
-            this.value = null;
-            (_a = this.selectBox) === null || _a === void 0 ? void 0 : _a.refresh();
-        }
-    }
-    handleValueChange(e) {
-        super.handleValueChange(e.selectedValues);
-    }
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.selectBox);
-        this.onRenderCompleted.emit();
-    }
-}
-AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"selectionMode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [selectedValues]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<ax-select-box [mode]=\"selectionMode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [selectedValues]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectBox: [{
-                type: ViewChild,
-                args: [AXSelectBoxComponent, { static: true }]
-            }] } });
-class AXSelectBoxPropertyEditorModule {
-    constructor() {
-    }
-}
-AXSelectBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, declarations: [AXSelectBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule], exports: [AXSelectBoxPropertyEditorComponent] });
-AXSelectBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXSelectBoxPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
-                    exports: [AXSelectBoxPropertyEditorComponent],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 class AXColorBoxComponent extends AXValidatableComponent {
     constructor() {
@@ -14048,12 +14094,12 @@ class AXColorBoxComponent extends AXValidatableComponent {
 AXColorBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 AXColorBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:14px}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
-                    ], template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:14px}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
+                    ], template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:.875rem}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { onColorSelect: [{
                 type: Output
             }], valueChange: [{
@@ -14134,192 +14180,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
-class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr, popupService) {
-        super(cdr);
-        this.cdr = cdr;
-        this.popupService = popupService;
-        this.ranges = [];
-        this.showSeparator = true;
-        this.decimalNumber = 2;
-    }
-    ngOnInit() {
-        this.ranges = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
-        this.cdr.detectChanges();
-    }
-    ngAfterViewInit() {
-        this.onRenderCompleted.emit();
-    }
-    // getRanges() {
-    //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
-    // }
-    onFormInit(e) {
-        this.form = e.component;
-    }
-    handleEditClick(item) {
-        this.editRow = Object.assign({}, item);
-        const popup = this.popupService.open(this.tplEdit, {
-            size: 'sm',
-            footerButtons: [
-                {
-                    name: 'confirm',
-                    text: AXTranslator.get('common.confirm'),
-                    style: 'success',
-                    submitBehavior: true,
-                    cancelBehavior: false,
-                    onClick: () => {
-                        this.form.validate().then(c => {
-                            if (c.result) {
-                                super.handleValueChange(this.ranges);
-                                Object.assign(item, this.editRow);
-                                popup.close();
-                                this.editRow = null;
-                                this.cdr.detectChanges();
-                            }
-                        });
-                    }
-                },
-                {
-                    name: 'cancel',
-                    text: AXTranslator.get('common.cancel'),
-                    style: 'danger blank',
-                    submitBehavior: false,
-                    cancelBehavior: true,
-                    onClick: () => {
-                        popup.close();
-                        this.editRow = null;
-                        this.cdr.detectChanges();
-                    }
-                }
-            ],
-            title: AXTranslator.get('common.edit')
-        });
-    }
-    handleAddClick() {
-        var _a;
-        const min = ((_a = this.ranges) === null || _a === void 0 ? void 0 : _a.length) ? Math.max(...this.ranges.map(c => c.maxValue)) : 0;
-        this.editRow = {
-            title: '',
-            minValue: min,
-            maxValue: min + 1,
-            color: null
-        };
-        const popup = this.popupService.open(this.tplEdit, {
-            title: AXTranslator.get('common.add-item'),
-            size: 'sm',
-            footerButtons: [
-                {
-                    name: 'confirm',
-                    text: AXTranslator.get('common.confirm'),
-                    style: 'success',
-                    submitBehavior: true,
-                    cancelBehavior: false,
-                    onClick: () => {
-                        this.form.validate().then(c => {
-                            if (c.result) {
-                                super.handleValueChange(this.ranges);
-                                this.ranges.push(this.editRow);
-                                popup.close();
-                                this.editRow = null;
-                                this.cdr.detectChanges();
-                            }
-                        });
-                    }
-                },
-                {
-                    name: 'cancel',
-                    text: AXTranslator.get('common.cancel'),
-                    style: 'danger blank',
-                    submitBehavior: false,
-                    cancelBehavior: true,
-                    onClick: () => {
-                        popup.close();
-                        this.editRow = null;
-                        this.cdr.detectChanges();
-                    }
-                }
-            ],
-        });
-        this.cdr.detectChanges();
-    }
-    handleRemoveClick(item) {
-        this.ranges = this.ranges.filter(c => c.minValue !== item.minValue);
-        super.handleValueChange(this.ranges);
-    }
-}
-AXRangePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-AXRangePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
-                type: ViewChild,
-                args: ['tplEdit']
-            }] } });
-class AXColorPickerModule {
-}
-AXColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
-AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXColorPickerComponent, AXColorBoxComponent],
-                    imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule],
-                    exports: [AXColorPickerComponent, AXColorBoxComponent],
-                    providers: []
-                }]
-        }] });
-class AXRangePropertyEditorModule {
-    constructor() {
-    }
-}
-AXRangePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, declarations: [AXRangePropertyEditorComponent], imports: [CommonModule,
-        FormsModule,
-        AXTranslatorModule,
-        AXTextBoxModule,
-        AXNumberBoxModule,
-        AXColorPickerModule,
-        AXLabelModule,
-        AXPageModule,
-        AXValidationModule,
-        AXButtonModule], exports: [AXRangePropertyEditorComponent] });
-AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            AXTranslatorModule,
-            AXTextBoxModule,
-            AXNumberBoxModule,
-            AXColorPickerModule,
-            AXLabelModule,
-            AXPageModule,
-            AXValidationModule,
-            AXButtonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXRangePropertyEditorComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        AXTranslatorModule,
-                        AXTextBoxModule,
-                        AXNumberBoxModule,
-                        AXColorPickerModule,
-                        AXLabelModule,
-                        AXPageModule,
-                        AXValidationModule,
-                        AXButtonModule
-                    ],
-                    exports: [AXRangePropertyEditorComponent],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
 class AXColorPropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
@@ -14352,6 +14212,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [AXColorPickerComponent]
             }] } });
+class AXColorPickerModule {
+}
+AXColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
+AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXColorPickerComponent, AXColorBoxComponent],
+                    imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule],
+                    exports: [AXColorPickerComponent, AXColorBoxComponent],
+                    providers: []
+                }]
+        }] });
 class AXColorPropertyEditorModule {
     constructor() {
     }
@@ -14459,10 +14334,10 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
     }
 }
 ColumnPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid 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:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid 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:white;font-size:14px;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"] }]
+            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:.875rem;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
                 type: ViewChild,
                 args: ['tplEdit']
@@ -14741,25 +14616,498 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
-class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent {
+class AXDatePropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
+        this.showTodayButton = true;
+        this.selectableHoliday = true;
+        this.type = 'gregorian';
+        this.textAlign = null;
+        this.placeholder = '';
+        this.clearButton = false;
+        this.showToday = false;
+        this.size = 'md';
     }
     handleValueChange(e) {
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
+        this.registerForValidationForm(this.date);
         this.onRenderCompleted.emit();
     }
 }
-AXSwitchPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchPropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
-    `, isInline: true, components: [{ type: AXSwitchComponent, selector: "ax-switch", inputs: ["tabIndex", "value", "readonly", "disabled", "size"], outputs: ["onValueChanged", "valueChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{
+AXDatePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "date", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
+             [type]="type" [textAlign]="textAlign" [(value)]="value">
+             <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+    </ax-date-picker>
+         `, isInline: true, components: [{ 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"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
+             [type]="type" [textAlign]="textAlign" [(value)]="value">
+             <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+    </ax-date-picker>
+         `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { date: [{
+                type: ViewChild,
+                args: [AXDatePickerComponent]
+            }] } });
+class AXDatePropertyEditorModule {
+    constructor() {
+    }
+}
+AXDatePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDatePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, declarations: [AXDatePropertyEditorComponent], imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule], exports: [AXDatePropertyEditorComponent] });
+AXDatePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXDatePickerModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXDatePropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule],
+                    exports: [AXDatePropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.showSeparator = true;
+        this.decimalNumber = 2;
+        this.minValue = null;
+        this.maxValue = null;
+        this.clearButton = false;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e.value);
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+}
+AXNumberBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXNumberBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ax-number-box (onValueChanged)="handleValueChange($event)"
+            [value]="value"
+            [showSeparator]="showSeparator"
+            [decimalNumber]="decimalNumber"
+            [min]="minValue"
+            [max]="maxValue"
+            [allowClear]="clearButton"
+        >
+            <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+        </ax-number-box>
+    `, isInline: true, components: [{ type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ax-number-box (onValueChanged)="handleValueChange($event)"
+            [value]="value"
+            [showSeparator]="showSeparator"
+            [decimalNumber]="decimalNumber"
+            [min]="minValue"
+            [max]="maxValue"
+            [allowClear]="clearButton"
+        >
+            <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+        </ax-number-box>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
+                type: ViewChild,
+                args: [AXNumberBoxComponent]
+            }] } });
+class AXNumberBoxPropertyEditorModule {
+    constructor() {
+    }
+}
+AXNumberBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, declarations: [AXNumberBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule], exports: [AXNumberBoxPropertyEditorComponent] });
+AXNumberBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXNumberBoxPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule],
+                    exports: [AXNumberBoxPropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr, popupService) {
+        super(cdr);
+        this.cdr = cdr;
+        this.popupService = popupService;
+        this.ranges = [];
+        this.showSeparator = true;
+        this.decimalNumber = 2;
+    }
+    ngOnInit() {
+        this.ranges = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+        this.cdr.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+    // getRanges() {
+    //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
+    // }
+    onFormInit(e) {
+        this.form = e.component;
+    }
+    handleEditClick(item) {
+        this.editRow = Object.assign({}, item);
+        const popup = this.popupService.open(this.tplEdit, {
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                Object.assign(item, this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+            title: AXTranslator.get('common.edit')
+        });
+    }
+    handleAddClick() {
+        var _a;
+        const min = ((_a = this.ranges) === null || _a === void 0 ? void 0 : _a.length) ? Math.max(...this.ranges.map(c => c.maxValue)) : 0;
+        this.editRow = {
+            title: '',
+            minValue: min,
+            maxValue: min + 1,
+            color: null
+        };
+        const popup = this.popupService.open(this.tplEdit, {
+            title: AXTranslator.get('common.add-item'),
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                this.ranges.push(this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+        });
+        this.cdr.detectChanges();
+    }
+    handleRemoveClick(item) {
+        this.ranges = this.ranges.filter(c => c.minValue !== item.minValue);
+        super.handleValueChange(this.ranges);
+    }
+}
+AXRangePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
+AXRangePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
+                type: ViewChild,
+                args: ['tplEdit']
+            }] } });
+class AXRangePropertyEditorModule {
+    constructor() {
+    }
+}
+AXRangePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, declarations: [AXRangePropertyEditorComponent], imports: [CommonModule,
+        FormsModule,
+        AXTranslatorModule,
+        AXTextBoxModule,
+        AXNumberBoxModule,
+        AXColorPickerModule,
+        AXLabelModule,
+        AXPageModule,
+        AXValidationModule,
+        AXButtonModule], exports: [AXRangePropertyEditorComponent] });
+AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXTranslatorModule,
+            AXTextBoxModule,
+            AXNumberBoxModule,
+            AXColorPickerModule,
+            AXLabelModule,
+            AXPageModule,
+            AXValidationModule,
+            AXButtonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXRangePropertyEditorComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXTranslatorModule,
+                        AXTextBoxModule,
+                        AXNumberBoxModule,
+                        AXColorPickerModule,
+                        AXLabelModule,
+                        AXPageModule,
+                        AXValidationModule,
+                        AXButtonModule
+                    ],
+                    exports: [AXRangePropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.valueField = 'id';
+        this.textField = 'text';
+        this.mode = 'single';
+        this.selectionDataMode = 'value';
+        this.allowSearch = true;
+        this.allowNull = false;
+        this.disabled = false;
+        this.items = [];
+        this.remoteOperation = false;
+        this.returnAllData = false;
+        this.provideData = (e) => {
+            return new Promise((resolve) => {
+                const func = () => {
+                    if (Array.isArray(this.items)) {
+                        resolve(this.items.slice());
+                    }
+                    else if (typeof this.items === 'function') {
+                        const a = Object.assign(e, { sender: this });
+                        resolve(this.items(a));
+                    }
+                    else {
+                        resolve([]);
+                    }
+                };
+                const intVal = setInterval(() => {
+                    if (this.initiated) {
+                        func();
+                        clearInterval(intVal);
+                    }
+                }, 50);
+            });
+        };
+    }
+    get filter() {
+        return this._filter;
+    }
+    set filter(v) {
+        var _a;
+        this._filter = v;
+        if (this.value && this.initiated) {
+            this.value = null;
+            (_a = this.selectBox) === null || _a === void 0 ? void 0 : _a.refresh();
+        }
+    }
+    handleValueChange(e) {
+        if (this.returnAllData) {
+            super.handleValueChange(e.selectedItems);
+        }
+        else {
+            super.handleValueChange(e.selectedValues);
+        }
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectBox);
+        this.onRenderCompleted.emit();
+    }
+}
+AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectBox: [{
+                type: ViewChild,
+                args: [AXSelectBoxComponent, { static: true }]
+            }] } });
+class AXSelectBoxPropertyEditorModule {
+    constructor() {
+    }
+}
+AXSelectBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, declarations: [AXSelectBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule], exports: [AXSelectBoxPropertyEditorComponent] });
+AXSelectBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXSelectBoxPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
+                    exports: [AXSelectBoxPropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+class AXSelectionListPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.readonly = false;
+        this.size = 'md';
+        this.items = [];
+        this.mode = 'single';
+        this.direction = 'horizontal';
+        this.textField = null;
+        this.valueField = null;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e);
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectionList);
+        this.onRenderCompleted.emit();
+    }
+}
+AXSelectionListPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectionListPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectionListPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: AXSelectionListComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-selection-list
+        [disabled]="disabled"
+        [size]="size"
+        [readonly]="readonly"
+        [value]="value"
+        [items]="items"
+        [mode]="mode"
+        (selectedItemsChange)="handleValueChange($event)"
+        [textField]="textField"
+        [valueField]="valueField"
+        [direction]="direction"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-selection-list>
+    `, isInline: true, components: [{ type: AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectedItemsChange", "selectedValuesChange"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-selection-list
+        [disabled]="disabled"
+        [size]="size"
+        [readonly]="readonly"
+        [value]="value"
+        [items]="items"
+        [mode]="mode"
+        (selectedItemsChange)="handleValueChange($event)"
+        [textField]="textField"
+        [valueField]="valueField"
+        [direction]="direction"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-selection-list>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionList: [{
+                type: ViewChild,
+                args: [AXSelectionListComponent, { static: true }]
+            }] } });
+class AXSelectionPropertyEditorModule {
+}
+AXSelectionPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectionPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, declarations: [AXSelectionListPropertyEditorComponent], imports: [CommonModule, AXSelectionListModule, FormsModule, AXValidationModule], exports: [AXSelectionListPropertyEditorComponent] });
+AXSelectionPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, providers: [], imports: [[CommonModule, AXSelectionListModule, FormsModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXSelectionListPropertyEditorComponent],
+                    imports: [CommonModule, AXSelectionListModule, FormsModule, AXValidationModule],
+                    exports: [AXSelectionListPropertyEditorComponent],
+                    providers: [],
+                }]
+        }] });
+class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e.value);
+    }
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+}
+AXSwitchPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchPropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
+    `, isInline: true, components: [{ type: AXSwitchComponent, selector: "ax-switch", inputs: ["tabIndex", "value", "readonly", "disabled", "size"], outputs: ["onValueChanged", "valueChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
                     template: `
         <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
     `,
@@ -14783,64 +15131,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
-class AXDatePropertyEditorComponent extends AXProperyEditorComponent {
+class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
-        this.showTodayButton = true;
-        this.selectableHoliday = true;
-        this.type = 'gregorian';
-        this.textAlign = null;
-        this.placeholder = '';
         this.clearButton = false;
-        this.showToday = false;
-        this.size = 'md';
     }
     handleValueChange(e) {
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.registerForValidationForm(this.date);
+        this.registerForValidationForm(this.textBox);
         this.onRenderCompleted.emit();
     }
 }
-AXDatePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "date", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
-             [type]="type" [textAlign]="textAlign" [(value)]="value">
-             <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-    </ax-date-picker>
-         `, isInline: true, components: [{ 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"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, decorators: [{
+AXTextPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
             type: Component,
+            args: [{ template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
+                type: ViewChild,
+                args: [AXTextBoxComponent]
+            }] } });
+class AXTextPropertyEditorModule {
+    constructor() {
+    }
+}
+AXTextPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, declarations: [AXTextPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule], exports: [AXTextPropertyEditorComponent] });
+AXTextPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, decorators: [{
+            type: NgModule,
             args: [{
-                    template: `
-    <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
-             [type]="type" [textAlign]="textAlign" [(value)]="value">
-             <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-    </ax-date-picker>
-         `,
+                    declarations: [AXTextPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule],
+                    exports: [AXTextPropertyEditorComponent],
+                    providers: []
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { date: [{
+        }], ctorParameters: function () { return []; } });
+class AXTextareaPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.clearButton = false;
+        this.placeholder = null;
+        this.rows = 3;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e.value);
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
+    }
+}
+AXTextareaPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextareaPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextareaPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n", components: [{ type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
                 type: ViewChild,
-                args: [AXDatePickerComponent]
+                args: [AXTextBoxComponent]
             }] } });
-class AXDatePropertyEditorModule {
+class AXTextareaPropertyEditorModule {
     constructor() {
     }
 }
-AXDatePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDatePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, declarations: [AXDatePropertyEditorComponent], imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule], exports: [AXDatePropertyEditorComponent] });
-AXDatePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXDatePickerModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, decorators: [{
+AXTextareaPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextareaPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, declarations: [AXTextareaPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule], exports: [AXTextareaPropertyEditorComponent] });
+AXTextareaPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextAreaModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXDatePropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule],
-                    exports: [AXDatePropertyEditorComponent],
+                    declarations: [AXTextareaPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule],
+                    exports: [AXTextareaPropertyEditorComponent],
                     providers: []
                 }]
         }], ctorParameters: function () { return []; } });
@@ -14900,49 +15270,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
-class AXTextareaPropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.clearButton = false;
-        this.placeholder = null;
-        this.rows = 3;
-    }
-    handleValueChange(e) {
-        super.handleValueChange(e.value);
-    }
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
-        this.onRenderCompleted.emit();
-    }
-}
-AXTextareaPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextareaPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextareaPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n", components: [{ type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                type: ViewChild,
-                args: [AXTextBoxComponent]
-            }] } });
-class AXTextareaPropertyEditorModule {
-    constructor() {
-    }
-}
-AXTextareaPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextareaPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, declarations: [AXTextareaPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule], exports: [AXTextareaPropertyEditorComponent] });
-AXTextareaPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextAreaModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXTextareaPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule],
-                    exports: [AXTextareaPropertyEditorComponent],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
 const WDIGET_MODULES = [
     AXNumberBoxPropertyEditorModule,
     AXTextPropertyEditorModule,
@@ -14955,7 +15282,9 @@ const WDIGET_MODULES = [
     AXDatePropertyEditorModule,
     AXTimePropertyEditorModule,
     AXTimePropertyEditorModule,
-    AXTextareaPropertyEditorModule
+    AXTextareaPropertyEditorModule,
+    AXCheckPropertyEditorModule,
+    AXSelectionPropertyEditorModule
 ];
 class AXProppertyEditorModule {
 }
@@ -14971,10 +15300,20 @@ AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         AXDatePropertyEditorModule,
         AXTimePropertyEditorModule,
         AXTimePropertyEditorModule,
-        AXTextareaPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
+        AXTextareaPropertyEditorModule,
+        AXCheckPropertyEditorModule,
+        AXSelectionPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
 AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, providers: [], imports: [[
             WDIGET_MODULES,
             RouterModule.forChild([
+                {
+                    path: 'ax/editors/selection',
+                    component: AXSelectionListPropertyEditorComponent
+                },
+                {
+                    component: AXCheckBoxPropertyEditorComponent,
+                    path: 'ax/editors/check'
+                },
                 {
                     component: AXTextPropertyEditorComponent,
                     path: 'ax/editors/text'
@@ -15026,6 +15365,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         WDIGET_MODULES,
                         RouterModule.forChild([
+                            {
+                                path: 'ax/editors/selection',
+                                component: AXSelectionListPropertyEditorComponent
+                            },
+                            {
+                                component: AXCheckBoxPropertyEditorComponent,
+                                path: 'ax/editors/check'
+                            },
                             {
                                 component: AXTextPropertyEditorComponent,
                                 path: 'ax/editors/text'
@@ -15083,5 +15430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
+export { AXAccordionComponent, AXAccordionModule, AXAsyncEventArgs, AXBaseButtonComponent, AXBaseComponent, AXBaseDropdownComponent, AXBaseEvent, AXBaseInputChangeEvent, AXBasePageComponent, AXBasePopupPageComponent, AXBaseTextComponent, AXButtonComponent, AXButtonModule, AXCalendarBoxComponent, AXCalendarBoxModule, AXCheckBoxComponent, AXCheckBoxItemClick, AXCheckBoxModule, AXColorBoxComponent, AXColorPickerComponent, AXColorPickerModule, AXColorPropertyEditorComponent, AXColorPropertyEditorModule, AXConditionalColorPropertyEditorComponent, AXConditionalColorPropertyEditorModule, AXContextMenuComponent, AXContextMenuDirective, AXContextMenuItemClickEvent, AXContextMenuModule, AXDataEvent, AXDataListComponent, AXDataPickerChangeEvent, AXDataSourceComponent, AXDataSourceModule, AXDataSourceRead, AXDataSourceReceivedEvent, AXDataSourceReceivedResult, AXDatePickerComponent, AXDatePickerModule, AXDecoratorContentComponent, AXDialogAlertResult, AXDialogComponent, AXDialogConfirmResult, AXDialogModule, AXDialogResult, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXEvent, AXFieldsetComponent, AXFieldsetModule, AXFilterColumnComponent, AXFilterColumnDateComponent, AXFilterColumnNumberComponent, AXFilterColumnSelectionComponent, AXFilterColumnStringComponent, AXFilterModule, AXFilterPanelComponent, AXFormGroupComponent, AXFormGroupModule, AXHtmlEvent, AXLabelComponent, AXLabelModule, AXListComponent, AXListModule, AXLoadingIndicatorComponent, AXLoadingModule, AXLoadingPanelComponent, AXLoadingService, AXMenu2Component, AXMenuComponent, AXMenuItemClickEvent, AXMenuItemComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageContentComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPanelBoxComponent, AXPanelBoxModule, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXPropertyDecorator, AXPropertyDecorators, AXPropertyEditorRendererDirective, AXProperyEditorComponent, AXProppertyEditorModule, AXQueryBuilderComponent, AXQueryBuilderControl, AXQueryBuilderField, AXQueryBuilderGroup, AXQueryBuilderGroupEvent, AXQueryBuilderModule, AXQueryBuilderPopup, AXQueryBuilderRule, AXQueryBuilderRuleEvent, AXQueryBuilderService, AXRangePropertyEditorComponent, AXRangePropertyEditorModule, AXSchedulerAgendaViewComponent, AXSchedulerBaseViewComponent, AXSchedulerComponent, AXSchedulerDayTimeViewComponent, AXSchedulerEventChangeArgs, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerTimelineViewComponent, AXSchedulerViewProperty, AXSchedulerViewsProperty, AXSearchBoxComponent, AXSearchBoxModule, AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule, AXSelectBoxPropertyEditorComponent, AXSelectBoxPropertyEditorModule, AXSelectBoxSelectionChangedEvent, AXSelectBoxValueChangedEvent, AXSelectionListComponent, AXSelectionListModule, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabPageHostComponent, AXTabPageModule, AXTabPageRendererComponent, AXTabPageService, AXTabStripChangedEvent, AXTabStripComponent, AXTabStripModule, AXTabViewComponent, AXTabViewModule, AXTextAreaComponent, AXTextAreaModule, AXTextBoxComponent, AXTextBoxModule, AXTextPropertyEditorComponent, AXTextPropertyEditorModule, AXTimePickerChangedEvent, AXTimePickerComponent, AXTimePickerItemChangedEvent, AXTimePickerModule, AXToastMessageComponent, AXToastModule, AXToastService, AXToastWrapperComponent, AXToolbarButtonGroupComponent, AXToolbarComponent, AXToolbarFilterViewComponent, AXToolbarItem, AXToolbarListViewComponent, AXToolbarMenuComponent, AXToolbarModule, AXToolbarSchedulerNavigatorComponent, AXToolbarSchedulerViewsComponent, AXToolbarSearchComponent, AXToolbarTitleComponent, AXTooltipDirective, AXTooltipModule, AXTreeSideMenuComponent, AXTreeSideMenuItemClick, AXTreeSideMenuItemData, AXTreeSideMenuItemMovedEvent, AXTreeSideMenuModule, AXTreeSideMenuNode, AXTreeSideMenuSelectionChangedEvent, AXTreeViewComponent, AXTreeViewItemClick, AXTreeViewItemData, AXTreeViewItemMovedEvent, AXTreeViewModule, AXTreeViewNode, AXTreeViewselectionChangedEvent, AXTreeViewseletedKeyFieldsChangedEvent, AXUploadFileComponent, AXUploadFileModule, AXValidatableComponent, AXValidation, AXValidationComponent, AXValidationFormComponent, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueEvent, DynamicTabsDirective, TAB_META_KEY, propertyEditor };
 //# sourceMappingURL=acorex-components.mjs.map