@acorex/components 4.1.7 → 4.1.9

package/fesm2015/acorex-components.mjs

@@ -789,6 +789,8 @@ class AXBasePageComponent {
     }
     onClosing(e) {
     }
+    onActivated() {
+    }
     ngOnDestroy() {
         this.onClosed.unsubscribe();
     }
@@ -3089,7 +3091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class AXCheckBoxItemClick extends AXHtmlEvent {
 }
-class AXCheckBoxComponent extends AXBaseComponent {
+class AXCheckBoxComponent extends AXValidatableComponent {
     constructor(cdr, ref) {
         super();
         this.cdr = cdr;
@@ -3446,7 +3448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
-class AXSelectionListComponent extends AXBaseComponent {
+class AXSelectionListComponent extends AXValidatableComponent {
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -5636,7 +5638,8 @@ class AXValidationFormComponent {
         });
     }
     addWidget(widget) {
-        this.widgets.push(widget);
+        if (widget)
+            this.widgets.push(widget);
     }
 }
 AXValidationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -10361,6 +10364,14 @@ class AXTabPageHostComponent {
     ngOnInit() {
         this.isLoading = true;
     }
+    active() {
+        var _a, _b;
+        const func = (_b = (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.onActivated;
+        if (func) {
+            const f = func.bind(this.componentRef.instance);
+            f();
+        }
+    }
     ngAfterViewInit() {
         return __awaiter(this, void 0, void 0, function* () {
             this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-tab-page-host-container'));
@@ -10467,6 +10478,7 @@ class AXTabPageRendererComponent {
             if (v) {
                 v.location.nativeElement.hidden = false;
                 v.changeDetectorRef.reattach();
+                v.instance.active();
             }
             else {
                 try {
@@ -10478,6 +10490,7 @@ class AXTabPageRendererComponent {
                     this.childs.push(componentRef);
                     setTimeout(() => {
                         componentRef.changeDetectorRef.detectChanges();
+                        //host.active();
                     }, 10);
                 }
                 catch (error) {
@@ -13384,6 +13397,7 @@ class AXProperyEditorComponent {
         return this._value;
     }
     set value(v) {
+        console.log('value set');
         if (v !== this._value) {
             this._value = v;
             this.valueChange.emit(v);
@@ -13419,7 +13433,7 @@ class AXPropertyDecorator {
 // @dynamic
 class AXPropertyDecorators {
     static register(cls, property, options) {
-        const item = AXPropertyDecorators.REGISTRY.find(c => c.cls === cls && c.property === property);
+        const item = AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
         if (item) {
             item.options = options;
         }
@@ -13428,14 +13442,14 @@ class AXPropertyDecorators {
         }
     }
     static has(cls, property) {
-        return AXPropertyDecorators.REGISTRY.some(c => c.cls === cls && c.property === property);
+        return AXPropertyDecorators.REGISTRY.some((c) => c.cls === cls && c.property === property);
     }
     static get(cls, property) {
-        return AXPropertyDecorators.REGISTRY.find(c => c.cls === cls && c.property === property);
+        return AXPropertyDecorators.REGISTRY.find((c) => c.cls === cls && c.property === property);
     }
     static isValid(property) {
         if (property) {
-            return AXPropertyDecorators.REGISTRY.some(c => c.property === property);
+            return AXPropertyDecorators.REGISTRY.some((c) => c.property === property);
         }
         return false;
     }
@@ -13447,7 +13461,7 @@ class AXPropertyDecorators {
             p.push(superClass.constructor);
             superClass = Object.getPrototypeOf(superClass);
         }
-        list.push(...AXPropertyDecorators.REGISTRY.filter(c => p.includes(c.cls.constructor)));
+        list.push(...AXPropertyDecorators.REGISTRY.filter((c) => p.includes(c.cls.constructor)));
         return list;
     }
 }
@@ -13609,199 +13623,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.clearButton = false;
-    }
-    handleValueChange(e) {
-        super.handleValueChange(e.value);
-    }
-    ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
-        this.onRenderCompleted.emit();
-    }
-}
-AXTextPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                type: ViewChild,
-                args: [AXTextBoxComponent]
-            }] } });
-
-class AXTextPropertyEditorModule {
-    constructor() {
-    }
-}
-AXTextPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, declarations: [AXTextPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule], exports: [AXTextPropertyEditorComponent] });
-AXTextPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXTextPropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule],
-                    exports: [AXTextPropertyEditorComponent],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
-
-class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent {
+class AXCheckBoxPropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
-        this.showSeparator = true;
-        this.decimalNumber = 2;
-        this.minValue = null;
-        this.maxValue = null;
-        this.clearButton = false;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.readonly = false;
+        this.size = 'md';
     }
     handleValueChange(e) {
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.registerForValidationForm(this.textBox);
+        this.registerForValidationForm(this.checkBox);
         this.onRenderCompleted.emit();
     }
 }
-AXNumberBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXNumberBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ax-number-box (onValueChanged)="handleValueChange($event)"
-            [value]="value"
-            [showSeparator]="showSeparator"
-            [decimalNumber]="decimalNumber"
-            [min]="minValue"
-            [max]="maxValue"
-            [allowClear]="clearButton"
-        >
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-number-box>
-    `, isInline: true, components: [{ type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, decorators: [{
+AXCheckBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCheckBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "checkBox", first: true, predicate: AXCheckBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-check-box 
+        [disabled]="disabled"
+        [label]="label" 
+        [size]="size"
+        [indeterminate]="indeterminate"
+        [readonly]="readonly"
+        [value]="value"
+        (onValueChanged)="handleValueChange($event)"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>
+    `, isInline: true, components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-        <ax-number-box (onValueChanged)="handleValueChange($event)"
-            [value]="value"
-            [showSeparator]="showSeparator"
-            [decimalNumber]="decimalNumber"
-            [min]="minValue"
-            [max]="maxValue"
-            [allowClear]="clearButton"
-        >
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-number-box>
+    <ax-check-box 
+        [disabled]="disabled"
+        [label]="label" 
+        [size]="size"
+        [indeterminate]="indeterminate"
+        [readonly]="readonly"
+        [value]="value"
+        (onValueChanged)="handleValueChange($event)"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-check-box>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                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() {
@@ -14291,226 +14181,55 @@ 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.registerForValidationForm(this.textBox);
         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.onRenderCompleted.emit();
-    }
-}
-AXColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXColorPickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ax-color-picker  [(value)]="value">
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-color-picker>
-    `, isInline: true, components: [{ type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <ax-color-picker  [(value)]="value">
-            <ax-validation [rules]="validation?.rules">
-            </ax-validation>
-        </ax-color-picker>
-    `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
-                type: ViewChild,
-                args: [AXColorPickerComponent]
-            }] } });
-
-class AXColorPropertyEditorModule {
-    constructor() {
+}
+AXColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXColorPickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ax-color-picker  [(value)]="value">
+            <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+        </ax-color-picker>
+    `, isInline: true, components: [{ type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ax-color-picker  [(value)]="value">
+            <ax-validation [rules]="validation?.rules">
+            </ax-validation>
+        </ax-color-picker>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
+                type: ViewChild,
+                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() {
     }
 }
 AXColorPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -14898,48 +14617,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-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 AXSwitchPropertyEditorModule {
-    constructor() {
-    }
-}
-AXSwitchPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSwitchPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, declarations: [AXSwitchPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule], exports: [AXSwitchPropertyEditorComponent] });
-AXSwitchPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule]] });
-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],
-                    providers: []
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class AXDatePropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
@@ -15002,57 +14679,496 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class AXTimePropertyEditorComponent extends AXProperyEditorComponent {
+class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent {
     constructor(cdr) {
         super(cdr);
         this.cdr = cdr;
-        this.showCurentTime = false;
+        this.showSeparator = true;
+        this.decimalNumber = 2;
+        this.minValue = null;
+        this.maxValue = null;
         this.clearButton = false;
     }
     handleValueChange(e) {
-        var _a;
-        super.handleValueChange((_a = e.value) === null || _a === void 0 ? void 0 : _a.time);
+        super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.registerForValidationForm(this.time);
+        this.registerForValidationForm(this.textBox);
         this.onRenderCompleted.emit();
     }
 }
-AXTimePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTimePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "time", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
-        <ax-validation [rules]="validation?.rules">
-        </ax-validation>
-    </ax-time-picker>
-         `, isInline: true, components: [{ type: AXTimePickerComponent, selector: "ax-time-picker", inputs: ["timeType", "showCurentTime"], outputs: ["onValueChanged"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
-        <ax-validation [rules]="validation?.rules">
-        </ax-validation>
-    </ax-time-picker>
-         `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { time: [{
-                type: ViewChild,
-                args: [AXDatePickerComponent]
+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 AXTimePropertyEditorModule {
+class AXNumberBoxPropertyEditorModule {
     constructor() {
     }
 }
-AXTimePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTimePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, declarations: [AXTimePropertyEditorComponent], imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule], exports: [AXTimePropertyEditorComponent] });
-AXTimePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTimePickerModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, decorators: [{
+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: [AXTimePropertyEditorComponent],
-                    imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule],
-                    exports: [AXTimePropertyEditorComponent],
+                    declarations: [AXNumberBoxPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule],
+                    exports: [AXNumberBoxPropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr, popupService) {
+        super(cdr);
+        this.cdr = cdr;
+        this.popupService = popupService;
+        this.ranges = [];
+        this.showSeparator = true;
+        this.decimalNumber = 2;
+    }
+    ngOnInit() {
+        this.ranges = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+        this.cdr.detectChanges();
+    }
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+    // getRanges() {
+    //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
+    // }
+    onFormInit(e) {
+        this.form = e.component;
+    }
+    handleEditClick(item) {
+        this.editRow = Object.assign({}, item);
+        const popup = this.popupService.open(this.tplEdit, {
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                Object.assign(item, this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+            title: AXTranslator.get('common.edit')
+        });
+    }
+    handleAddClick() {
+        var _a;
+        const min = ((_a = this.ranges) === null || _a === void 0 ? void 0 : _a.length) ? Math.max(...this.ranges.map(c => c.maxValue)) : 0;
+        this.editRow = {
+            title: '',
+            minValue: min,
+            maxValue: min + 1,
+            color: null
+        };
+        const popup = this.popupService.open(this.tplEdit, {
+            title: AXTranslator.get('common.add-item'),
+            size: 'sm',
+            footerButtons: [
+                {
+                    name: 'confirm',
+                    text: AXTranslator.get('common.confirm'),
+                    style: 'success',
+                    submitBehavior: true,
+                    cancelBehavior: false,
+                    onClick: () => {
+                        this.form.validate().then(c => {
+                            if (c.result) {
+                                super.handleValueChange(this.ranges);
+                                this.ranges.push(this.editRow);
+                                popup.close();
+                                this.editRow = null;
+                                this.cdr.detectChanges();
+                            }
+                        });
+                    }
+                },
+                {
+                    name: 'cancel',
+                    text: AXTranslator.get('common.cancel'),
+                    style: 'danger blank',
+                    submitBehavior: false,
+                    cancelBehavior: true,
+                    onClick: () => {
+                        popup.close();
+                        this.editRow = null;
+                        this.cdr.detectChanges();
+                    }
+                }
+            ],
+        });
+        this.cdr.detectChanges();
+    }
+    handleRemoveClick(item) {
+        this.ranges = this.ranges.filter(c => c.minValue !== item.minValue);
+        super.handleValueChange(this.ranges);
+    }
+}
+AXRangePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
+AXRangePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
+                type: ViewChild,
+                args: ['tplEdit']
+            }] } });
+
+class AXRangePropertyEditorModule {
+    constructor() {
+    }
+}
+AXRangePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, declarations: [AXRangePropertyEditorComponent], imports: [CommonModule,
+        FormsModule,
+        AXTranslatorModule,
+        AXTextBoxModule,
+        AXNumberBoxModule,
+        AXColorPickerModule,
+        AXLabelModule,
+        AXPageModule,
+        AXValidationModule,
+        AXButtonModule], exports: [AXRangePropertyEditorComponent] });
+AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXTranslatorModule,
+            AXTextBoxModule,
+            AXNumberBoxModule,
+            AXColorPickerModule,
+            AXLabelModule,
+            AXPageModule,
+            AXValidationModule,
+            AXButtonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXRangePropertyEditorComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXTranslatorModule,
+                        AXTextBoxModule,
+                        AXNumberBoxModule,
+                        AXColorPickerModule,
+                        AXLabelModule,
+                        AXPageModule,
+                        AXValidationModule,
+                        AXButtonModule
+                    ],
+                    exports: [AXRangePropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.valueField = 'id';
+        this.textField = 'text';
+        this.mode = 'single';
+        this.selectionDataMode = 'value';
+        this.allowSearch = true;
+        this.allowNull = false;
+        this.disabled = false;
+        this.items = [];
+        this.remoteOperation = false;
+        this.returnAllData = false;
+        this.provideData = (e) => {
+            return new Promise((resolve) => {
+                const func = () => {
+                    if (Array.isArray(this.items)) {
+                        resolve(this.items.slice());
+                    }
+                    else if (typeof this.items === 'function') {
+                        const a = Object.assign(e, { sender: this });
+                        resolve(this.items(a));
+                    }
+                    else {
+                        resolve([]);
+                    }
+                };
+                const intVal = setInterval(() => {
+                    if (this.initiated) {
+                        func();
+                        clearInterval(intVal);
+                    }
+                }, 50);
+            });
+        };
+    }
+    get filter() {
+        return this._filter;
+    }
+    set filter(v) {
+        var _a;
+        this._filter = v;
+        if (this.value && this.initiated) {
+            this.value = null;
+            (_a = this.selectBox) === null || _a === void 0 ? void 0 : _a.refresh();
+        }
+    }
+    handleValueChange(e) {
+        if (this.returnAllData) {
+            super.handleValueChange(e.selectedItems);
+        }
+        else {
+            super.handleValueChange(e.selectedValues);
+        }
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectBox);
+        this.onRenderCompleted.emit();
+    }
+}
+AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n", components: [{ type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<ng-container *ngIf=\"returnAllData; then thenTemplate; else elseTemplate\"></ng-container>\r\n<ng-template #thenTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [selectedItems]=\"value\" \r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\"\r\n                >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n<ng-template #elseTemplate>\r\n    <ax-select-box [mode]=\"mode\"\r\n            [textField]=\"textField\" \r\n            [valueField]=\"valueField\" \r\n            [remoteOperation]=\"remoteOperation\"\r\n            [selectedValues]=\"value\" \r\n            [allowSearch]=\"allowSearch\" \r\n            [allowNull]=\"allowNull\"\r\n            [readonly]=\"readonly\"\r\n            [disabled]=\"disabled\"\r\n            (selectionChanged)=\"handleValueChange($event)\"\r\n            >\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n    </ax-select-box>\r\n</ng-template>\r\n\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectBox: [{
+                type: ViewChild,
+                args: [AXSelectBoxComponent, { static: true }]
+            }] } });
+
+class AXSelectBoxPropertyEditorModule {
+    constructor() {
+    }
+}
+AXSelectBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, declarations: [AXSelectBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule], exports: [AXSelectBoxPropertyEditorComponent] });
+AXSelectBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXSelectBoxPropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule],
+                    exports: [AXSelectBoxPropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AXSelectionListPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.readonly = false;
+        this.size = 'md';
+        this.items = [];
+        this.mode = 'single';
+        this.direction = 'horizontal';
+        this.textField = null;
+        this.valueField = null;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e);
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.selectionList);
+        this.onRenderCompleted.emit();
+    }
+}
+AXSelectionListPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectionListPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectionListPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectionList", first: true, predicate: AXSelectionListComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-selection-list 
+        [disabled]="disabled"
+        [size]="size"
+        [readonly]="readonly"
+        [value]="value"
+        [items]="items"
+        [mode]="mode"
+        (selectedItemsChange)="handleValueChange($event)"
+        [textField]="textField"
+        [valueField]="valueField"
+        [direction]="direction"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-selection-list>
+    `, isInline: true, components: [{ type: AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectedItemsChange", "selectedValuesChange"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-selection-list 
+        [disabled]="disabled"
+        [size]="size"
+        [readonly]="readonly"
+        [value]="value"
+        [items]="items"
+        [mode]="mode"
+        (selectedItemsChange)="handleValueChange($event)"
+        [textField]="textField"
+        [valueField]="valueField"
+        [direction]="direction"
+    >
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-selection-list>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionList: [{
+                type: ViewChild,
+                args: [AXSelectionListComponent, { static: true }]
+            }] } });
+
+class AXSelectionPropertyEditorModule {
+}
+AXSelectionPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectionPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, declarations: [AXSelectionListPropertyEditorComponent], imports: [CommonModule, AXSelectionListModule, FormsModule, AXValidationModule], exports: [AXSelectionListPropertyEditorComponent] });
+AXSelectionPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, providers: [], imports: [[CommonModule, AXSelectionListModule, FormsModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionPropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXSelectionListPropertyEditorComponent],
+                    imports: [CommonModule, AXSelectionListModule, FormsModule, AXValidationModule],
+                    exports: [AXSelectionListPropertyEditorComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+    }
+    handleValueChange(e) {
+        super.handleValueChange(e.value);
+    }
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+}
+AXSwitchPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchPropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
+    `, isInline: true, components: [{ type: AXSwitchComponent, selector: "ax-switch", inputs: ["tabIndex", "value", "readonly", "disabled", "size"], outputs: ["onValueChanged", "valueChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class AXSwitchPropertyEditorModule {
+    constructor() {
+    }
+}
+AXSwitchPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, declarations: [AXSwitchPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule], exports: [AXSwitchPropertyEditorComponent] });
+AXSwitchPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule]] });
+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],
+                    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 []; } });
@@ -15100,6 +15216,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class AXTimePropertyEditorComponent extends AXProperyEditorComponent {
+    constructor(cdr) {
+        super(cdr);
+        this.cdr = cdr;
+        this.showCurentTime = false;
+        this.clearButton = false;
+    }
+    handleValueChange(e) {
+        var _a;
+        super.handleValueChange((_a = e.value) === null || _a === void 0 ? void 0 : _a.time);
+    }
+    ngAfterViewInit() {
+        this.registerForValidationForm(this.time);
+        this.onRenderCompleted.emit();
+    }
+}
+AXTimePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTimePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "time", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-time-picker>
+         `, isInline: true, components: [{ type: AXTimePickerComponent, selector: "ax-time-picker", inputs: ["timeType", "showCurentTime"], outputs: ["onValueChanged"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
+        <ax-validation [rules]="validation?.rules">
+        </ax-validation>
+    </ax-time-picker>
+         `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { time: [{
+                type: ViewChild,
+                args: [AXDatePickerComponent]
+            }] } });
+
+class AXTimePropertyEditorModule {
+    constructor() {
+    }
+}
+AXTimePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, declarations: [AXTimePropertyEditorComponent], imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule], exports: [AXTimePropertyEditorComponent] });
+AXTimePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTimePickerModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXTimePropertyEditorComponent],
+                    imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule],
+                    exports: [AXTimePropertyEditorComponent],
+                    providers: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
 const WDIGET_MODULES = [
     AXNumberBoxPropertyEditorModule,
     AXTextPropertyEditorModule,
@@ -15112,7 +15283,9 @@ const WDIGET_MODULES = [
     AXDatePropertyEditorModule,
     AXTimePropertyEditorModule,
     AXTimePropertyEditorModule,
-    AXTextareaPropertyEditorModule
+    AXTextareaPropertyEditorModule,
+    AXCheckPropertyEditorModule,
+    AXSelectionPropertyEditorModule
 ];
 class AXProppertyEditorModule {
 }
@@ -15128,10 +15301,20 @@ AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         AXDatePropertyEditorModule,
         AXTimePropertyEditorModule,
         AXTimePropertyEditorModule,
-        AXTextareaPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
+        AXTextareaPropertyEditorModule,
+        AXCheckPropertyEditorModule,
+        AXSelectionPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
 AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, providers: [], imports: [[
             WDIGET_MODULES,
             RouterModule.forChild([
+                {
+                    path: 'ax/editors/selection',
+                    component: AXSelectionListPropertyEditorComponent
+                },
+                {
+                    component: AXCheckBoxPropertyEditorComponent,
+                    path: 'ax/editors/check'
+                },
                 {
                     component: AXTextPropertyEditorComponent,
                     path: 'ax/editors/text'
@@ -15183,6 +15366,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         WDIGET_MODULES,
                         RouterModule.forChild([
+                            {
+                                path: 'ax/editors/selection',
+                                component: AXSelectionListPropertyEditorComponent
+                            },
+                            {
+                                component: AXCheckBoxPropertyEditorComponent,
+                                path: 'ax/editors/check'
+                            },
                             {
                                 component: AXTextPropertyEditorComponent,
                                 path: 'ax/editors/text'