@acorex/components 4.2.21 → 4.2.22

package/fesm2015/acorex-components.mjs

@@ -3447,7 +3447,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;
@@ -10159,6 +10159,7 @@ class AXPropertyEditorRendererDirective {
     }
     createComponent() {
         this.renderService.findLoadedComponentByRoute(this.property.property.editorClass).then(c => {
+            debugger;
             if (c) {
                 const factory = this.componentFactoryResolver.resolveComponentFactory(c.component);
                 const cmpRef = this.target.createComponent(factory);
@@ -10293,6 +10294,7 @@ class AXSearchBarComponent {
         this.disabled = false;
         this.items = [];
         this.rtl = AXConfig.get('layout.rtl');
+        this.onValueChange = new EventEmitter();
         this.onSearchValue = new EventEmitter();
         this._items = [];
         this._filterItems = [];
@@ -10313,6 +10315,7 @@ class AXSearchBarComponent {
                 value: e.value
             });
         }
+        this.onValueChange.emit(e);
     }
     handleItemRemoveClick(item) {
         this._editors.forEach(e => {
@@ -10371,25 +10374,15 @@ class AXSearchBarComponent {
                 });
             }
         });
-        if (this.rtl == null) {
-            this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-        }
-        setTimeout(() => {
-            this.ref.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
-            this.el.nativeElement.classList.add(this.rtl ? 'rtl' : 'ltr');
-        }, 5);
         this._items = _.chain(this.items).groupBy(x => x.property.row).map((value, key) => ({ row: key, items: value })).value();
     }
 }
 AXSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items", rtl: "rtl" }, outputs: { onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
+AXSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { size: "size", disabled: "disabled", items: "items", rtl: "rtl" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <!-- <ax-form-group> -->\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    <!-- </ax-form-group> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }], pipes: { "trans": i1$2.AXTranslatorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    </ax-form-group>\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { el: [{
-                type: ViewChild,
-                args: ['dropdown', { static: true }]
-            }], dropdown: [{
+            args: [{ selector: 'ax-search-bar', template: "<ax-drop-down [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-sliders-h\" #dropdown\r\n    maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\">\r\n            <div class=\"chips\" *ngFor=\"let item of _filterItems\">\r\n                <span class=\"chips-text\">\r\n                    <b>{{item.title}} :</b> {{item.value}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\">\r\n                    <i class=\"far fa-times close\"></i>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"panel-box\">\r\n            <div *ngFor=\"let item of _items\" class=\"row\">\r\n                <div *ngFor=\"let prop of item.items\" class=\"{{renderCol(prop.property.col)}}\">\r\n                    <!-- <ax-form-group> -->\r\n                        <ax-label>{{prop.property.title}}</ax-label>\r\n                        <ng-container ax-property-editor-renderer [property]=\"prop\" [context]=\"_context\"\r\n                            (onValueChange)=\"handleValueChange($event)\"></ng-container>\r\n                    <!-- </ax-form-group> -->\r\n                </div>\r\n            </div>\r\n            <div class=\"footer-button\">\r\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\r\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'dataGrid.clearFilter' | trans}}</ax-button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end icon=\"far fa-sliders-h icon\" type=\"light blank\" [disabled]=\"disabled\" [size]=\"size\"\r\n            [tabIndex]=\"-1\" (click)=\"handleButtonClick()\">{{'common.search' | trans}}</ax-button>\r\n    </ng-container>\r\n\r\n</ax-drop-down>\r\n", styles: [".ax.chips-container{height:100%}.panel-box{padding:1rem}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
             }], _editors: [{
@@ -10403,6 +10396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], rtl: [{
                 type: Input
+            }], onValueChange: [{
+                type: Output
             }], onSearchValue: [{
                 type: Output
             }] } });
@@ -10505,199 +10500,75 @@ function propertyEditor(options) {
     };
 }
 
-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: [{
-                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 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: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { checkBox: [{
                 type: ViewChild,
-                args: [AXSelectBoxComponent, { static: true }]
+                args: [AXCheckBoxComponent, { static: true }]
             }] } });
 
-class AXSelectBoxPropertyEditorModule {
-    constructor() {
-    }
+class AXCheckPropertyEditorModule {
 }
-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: [{
+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: [AXSelectBoxPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
-                    exports: [AXSelectBoxPropertyEditorComponent],
-                    providers: []
+                    declarations: [AXCheckBoxPropertyEditorComponent],
+                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule],
+                    exports: [AXCheckBoxPropertyEditorComponent],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class AXColorBoxComponent extends AXValidatableComponent {
     constructor() {
@@ -11187,199 +11058,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
-class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr, popupService) {
+class AXColorPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
         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);
-        this.cdr = cdr;
-    }
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
+        this.registerForValidationForm(this.textBox);
         this.onRenderCompleted.emit();
     }
 }
@@ -11405,6 +11090,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() {
     }
@@ -11794,89 +11494,556 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class AXSwitchComponent extends AXBaseComponent {
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-        this.onValueChanged = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.tabIndex = 0;
-        this.size = 'md';
-    }
-    get value() {
-        return this._value;
-    }
-    set value(v) {
-        if (this._value !== v) {
-            const oldValue = this._value;
-            this._value = v;
-            this.valueChange.emit(v);
-            this.onValueChanged.emit({
-                component: this,
-                oldValue,
-                value: v
-            });
-        }
-    }
-    focus() { }
-}
-AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { onValueChanged: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], tabIndex: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
-
-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: [{
+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-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
-    `,
+    <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 }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { date: [{
+                type: ViewChild,
+                args: [AXDatePickerComponent]
+            }] } });
 
-class AXSwitchModule {
+class AXDatePropertyEditorModule {
+    constructor() {
+    }
 }
-AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
-AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, decorators: [{
+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: [AXSwitchComponent],
-                    imports: [CommonModule, FormsModule],
-                    exports: [AXSwitchComponent],
+                    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.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 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"
+        (selectedValuesChange)="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"
+        (selectedValuesChange)="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 AXSwitchComponent extends AXBaseComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.onValueChanged = new EventEmitter();
+        this.valueChange = new EventEmitter();
+        this.tabIndex = 0;
+        this.size = 'md';
+    }
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        if (this._value !== v) {
+            const oldValue = this._value;
+            this._value = v;
+            this.valueChange.emit(v);
+            this.onValueChanged.emit({
+                component: this,
+                oldValue,
+                value: v
+            });
+        }
+    }
+    focus() { }
+}
+AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { onValueChanged: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], tabIndex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+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>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class AXSwitchModule {
+}
+AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
+AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXSwitchComponent],
+                    imports: [CommonModule, FormsModule],
+                    exports: [AXSwitchComponent],
                     providers: []
                 }]
         }] });
@@ -11891,71 +12058,132 @@ AXSwitchPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXSwitchPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule],
-                    exports: [AXSwitchPropertyEditorComponent],
+                    declarations: [AXSwitchPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule],
+                    exports: [AXSwitchPropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+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 AXDatePropertyEditorComponent extends AXProperyEditorComponent {
+class AXTextAreaComponent extends AXBaseTextComponent {
+    constructor(cdr, ref) {
+        super(cdr, ref);
+        this.cdr = cdr;
+        this.rows = 0;
+        this.cols = 0;
+        this.maxLength = null;
+    }
+}
+AXTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-text-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+
+class AXTextareaPropertyEditorComponent 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';
+        this.placeholder = null;
+        this.rows = 3;
     }
     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: [{
+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-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: [{
+            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 {
+const COMPONENT = [AXTextAreaComponent];
+const MODULES = [CommonModule];
+class AXTextAreaModule {
+}
+AXTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, declarations: [AXTextAreaComponent], imports: [CommonModule], exports: [AXTextAreaComponent] });
+AXTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, providers: [], imports: [[...MODULES]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+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 []; } });
@@ -12894,21 +13122,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
-class AXTimePickerModule {
-}
-AXTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, declarations: [AXTimePickerComponent], imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule], exports: [AXTimePickerComponent] });
-AXTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXButtonModule, TextMaskModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXTimePickerComponent],
-                    imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule],
-                    exports: [AXTimePickerComponent],
-                    providers: [],
-                }]
-        }] });
-
 class AXTimePropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
@@ -12947,6 +13160,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [AXDatePickerComponent]
             }] } });
 
+class AXTimePickerModule {
+}
+AXTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, declarations: [AXTimePickerComponent], imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule], exports: [AXTimePickerComponent] });
+AXTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXButtonModule, TextMaskModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXTimePickerComponent],
+                    imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule],
+                    exports: [AXTimePickerComponent],
+                    providers: [],
+                }]
+        }] });
+
 class AXTimePropertyEditorModule {
     constructor() {
     }
@@ -12964,148 +13192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class AXTextAreaComponent extends AXBaseTextComponent {
-    constructor(cdr, ref) {
-        super(cdr, ref);
-        this.cdr = cdr;
-        this.rows = 0;
-        this.cols = 0;
-        this.maxLength = null;
-    }
-}
-AXTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-text-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { rows: [{
-                type: Input
-            }], cols: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
-
-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]
-            }] } });
-
-const COMPONENT = [AXTextAreaComponent];
-const MODULES = [CommonModule];
-class AXTextAreaModule {
-}
-AXTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, declarations: [AXTextAreaComponent], imports: [CommonModule], exports: [AXTextAreaComponent] });
-AXTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, providers: [], imports: [[...MODULES]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
-        }] });
-
-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 []; } });
-
-class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.disabled = false;
-        this.indeterminate = false;
-        this.readonly = false;
-        this.size = 'md';
-    }
-    ngAfterViewInit() {
-        console.log('checkbox');
-        this.registerForValidationForm(this.textBox);
-        this.onRenderCompleted.emit();
-    }
-}
-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: "textBox", first: true, predicate: AXCheckBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ax-check-box 
-    [disabled]="disabled"
-    [label]="label" 
-    [size]="size"
-    [indeterminate]="indeterminate"
-    [readonly]="readonly"
-    [value]="value">
-        <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-check-box 
-    [disabled]="disabled"
-    [label]="label" 
-    [size]="size"
-    [indeterminate]="indeterminate"
-    [readonly]="readonly"
-    [value]="value">
-        <ax-validation [rules]="validation?.rules">
-        </ax-validation>
-    </ax-check-box>`,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                type: ViewChild,
-                args: [AXCheckBoxComponent]
-            }] } });
-
-class AXCheckPropertyEditorModule {
-}
-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] });
-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: [AXCheckBoxPropertyEditorComponent],
-                    imports: [CommonModule, AXCheckBoxModule, FormsModule, AXValidationModule],
-                    exports: [],
-                    providers: [],
-                }]
-        }] });
-
 const WDIGET_MODULES = [
     AXNumberBoxPropertyEditorModule,
     AXTextPropertyEditorModule,
@@ -13119,7 +13205,8 @@ const WDIGET_MODULES = [
     AXTimePropertyEditorModule,
     AXTimePropertyEditorModule,
     AXTextareaPropertyEditorModule,
-    AXCheckPropertyEditorModule
+    AXCheckPropertyEditorModule,
+    AXSelectionPropertyEditorModule
 ];
 class AXProppertyEditorModule {
 }
@@ -13136,12 +13223,17 @@ AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         AXTimePropertyEditorModule,
         AXTimePropertyEditorModule,
         AXTextareaPropertyEditorModule,
-        AXCheckPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
+        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([
                 {
-                    component: AXCheckPropertyEditorModule,
+                    path: 'ax/editors/selection',
+                    component: AXSelectionListPropertyEditorComponent
+                },
+                {
+                    component: AXCheckBoxPropertyEditorComponent,
                     path: 'ax/editors/check'
                 },
                 {
@@ -13196,7 +13288,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         WDIGET_MODULES,
                         RouterModule.forChild([
                             {
-                                component: AXCheckPropertyEditorModule,
+                                path: 'ax/editors/selection',
+                                component: AXSelectionListPropertyEditorComponent
+                            },
+                            {
+                                component: AXCheckBoxPropertyEditorComponent,
                                 path: 'ax/editors/check'
                             },
                             {