@acorex/components 3.0.44 → 3.0.48

package/fesm2015/acorex-components.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter, __asyncValues } from 'tslib';
 import { Input, Component, EventEmitter, ContentChildren, QueryList, Output, ViewChild, ContentChild, ElementRef, ɵɵdefineInjectable, ɵɵinject, Injectable, ComponentFactoryResolver, Injector, NgZone, Inject, RendererFactory2, INJECTOR, TemplateRef, ApplicationRef, ChangeDetectorRef, HostListener, ViewEncapsulation, NgModule, ChangeDetectionStrategy, Attribute, Directive, ViewContainerRef, Renderer2, ViewChildren } from '@angular/core';
-import { AXTranslator, AXHtmlUtil, AXRenderService, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXMenuItem, AXTranslatorModule, AXObjectUtil, AXScrollModule, getPropByPath, AXColorUtil } from '@acorex/core';
+import { AXTranslator, AXHtmlUtil, AXRenderService, AXConfig, AXDateTime, AXDateTimeRange, AXCoreModule, AXMenuItem, AXTranslatorModule, AXObjectUtil, AXScrollModule, setPropByPath, AXEventService, AXColorUtil } from '@acorex/core';
 import { OverlayContainer, Overlay, ScrollStrategyOptions, OverlayPositionBuilder, OverlayKeyboardDispatcher, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { merge, Subject, Observable } from 'rxjs';
@@ -1047,7 +1047,7 @@ let AXCalendarBoxComponent = class AXCalendarBoxComponent {
         return new AXDateTime(new Date(), this.type);
     }
     findDay(date) {
-        if (this.dayStyle.find((c) => c.date == date.toISOString().split('T')[0])) {
+        if (this.dayStyle.find((c) => c.date.split('T')[0] == date.toISOString().split('T')[0])) {
             return true;
         }
         else {
@@ -1055,8 +1055,8 @@ let AXCalendarBoxComponent = class AXCalendarBoxComponent {
         }
     }
     getStyle(date) {
-        if (this.dayStyle.find((c) => c.date == date.toISOString().split('T')[0])) {
-            return this.dayStyle.find((c) => c.date == date.toISOString().split('T')[0]).style;
+        if (this.dayStyle.find((c) => c.date.split('T')[0] == date.toISOString().split('T')[0])) {
+            return this.dayStyle.find((c) => c.date.split('T')[0] == date.toISOString().split('T')[0]).style;
         }
         else {
             return '';
@@ -3289,7 +3289,7 @@ let AXCheckBoxComponent = class AXCheckBoxComponent extends AXBaseComponent {
         return this._value;
     }
     set value(v) {
-        if (v != this._value || v !== undefined) {
+        if (v != this._value && v !== undefined) {
             const old = this._value;
             this._value = v;
             this.valueChange.emit(v);
@@ -3311,20 +3311,20 @@ let AXCheckBoxComponent = class AXCheckBoxComponent extends AXBaseComponent {
         }
     }
     handleClick(e) {
-        // e.preventDefault();
-        // e.stopPropagation();
-        setTimeout(() => {
-            if (!this.disabled && !this.readonly) {
-                //TODO: check intermddiate;
-                // this.value = !this.value;
-                this.onClick.emit({
-                    component: this,
-                    htmlElement: this.ref.nativeElement,
-                    htmlEvent: e,
-                    value: this.value
-                });
-            }
-        }, 100);
+        e.preventDefault();
+        e.stopPropagation();
+        //  setTimeout(() => {
+        if (!this.disabled && !this.readonly) {
+            //TODO: check intermddiate;
+            this.value = !this.value;
+            this.onClick.emit({
+                component: this,
+                htmlElement: this.ref.nativeElement,
+                htmlEvent: e,
+                value: this.value
+            });
+        }
+        //  }, 100);
     }
 };
 AXCheckBoxComponent.ctorParameters = () => [
@@ -3379,7 +3379,7 @@ __decorate([
 AXCheckBoxComponent = __decorate([
     Component({
         selector: 'ax-check-box',
-        template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n<label for=\"{{uid}}\" class=\"ax-checkbox-container\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  <input #input type=\"checkbox\" class=\"ax-checkbox\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"\r\n    id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\" [(ngModel)]=\"value\" [disabled]=\"disabled || readonly\" />\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
+        template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
         encapsulation: ViewEncapsulation.None,
         changeDetection: ChangeDetectionStrategy.OnPush
     }),
@@ -3714,7 +3714,7 @@ let AXSelectionListComponent = class AXSelectionListComponent extends AXBaseComp
         this.cdr.detectChanges();
     }
     get selectedValues() {
-        return this._selectedItems.map(c => c[this.valueField]) || [];
+        return this._selectedItems.map((c) => c[this.valueField]) || [];
     }
     set selectedValues(v) {
         const old = this.selectedValues;
@@ -3722,7 +3722,7 @@ let AXSelectionListComponent = class AXSelectionListComponent extends AXBaseComp
             v = [];
         }
         if (JSON.stringify(old) != JSON.stringify(v)) {
-            this.selectedItems = this.items.filter(c => v.includes(c[this.valueField]));
+            this.selectedItems = this.items.filter((c) => v.includes(c[this.valueField]));
             this.selectedValuesChange.emit(this.selectedValues);
         }
     }
@@ -3741,13 +3741,12 @@ let AXSelectionListComponent = class AXSelectionListComponent extends AXBaseComp
                     }
                 }
                 else {
-                    this.selectedValues = this.selectedValues.filter(c => c !== value);
+                    this.selectedValues = this.selectedValues.filter((c) => c !== value);
                 }
             }
         }
     }
-    focus() {
-    }
+    focus() { }
     onvalueChanged(e) {
         if (!this.disabled) {
             this.selectedItemsChange.emit([e]);
@@ -3814,7 +3813,7 @@ __decorate([
 AXSelectionListComponent = __decorate([
     Component({
         selector: 'ax-selection-list',
-        template: "<ng-container *ngIf=\" mode == 'multiple'; then checkboxList; else radioButtonList\"></ng-container>\r\n<ng-template #checkboxList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <ax-check-box label=\"{{item[textField]}}\" *ngFor=\"let item of items\" [disabled]=\"disabled\" [readonly]=\"disabled\"\r\n            [value]=\"selectedValues.indexOf(item[valueField])>-1\"\r\n            (onValueChanged)=\"onCheckValueChange(item[valueField],$event.value)\">\r\n        </ax-check-box>\r\n    </div>\r\n</ng-template>\r\n<ng-template #radioButtonList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <label class=\"ax radio\" for=\"{{uid}}\" [class.disabled]=\"disabled\" [class.readonly]=\"disabled\"\r\n            *ngFor=\"let item of items\" (click)=\"onvalueChanged(item)\">\r\n            {{ item[textField] }}\r\n            <input type=\"radio\" (change)=\"onCheckValueChange(item[valueField],true)\" [value]=\"item[valueField]\"\r\n                [checked]=\"selectedValues==item[valueField]\" [name]=\"uid\" [disabled]=\"disabled\" [readonly]=\"readonly\" />\r\n            <span class=\"checkmark\"></span>\r\n        </label>\r\n    </div>\r\n</ng-template>",
+        template: "<ng-container *ngIf=\" mode == 'multiple'; then checkboxList; else radioButtonList\"></ng-container>\r\n<ng-template #checkboxList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <ax-check-box label=\"{{item[textField]}}\" *ngFor=\"let item of items\" [disabled]=\"item.disable || disabled\"\r\n            [readonly]=\"item.readonly || readonly\" [value]=\"selectedValues.indexOf(item[valueField])>-1\"\r\n            (onValueChanged)=\"onCheckValueChange(item[valueField],$event.value)\">\r\n        </ax-check-box>\r\n    </div>\r\n</ng-template>\r\n<ng-template #radioButtonList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <label class=\"ax radio\" for=\"{{uid}}\" [class.disabled]=\"disabled\" [class.readonly]=\"disabled\"\r\n            *ngFor=\"let item of items\" (click)=\"onvalueChanged(item)\">\r\n            {{ item[textField] }}\r\n            <input type=\"radio\" (change)=\"onCheckValueChange(item[valueField],true)\" [value]=\"item[valueField]\"\r\n                [checked]=\"selectedValues==item[valueField]\" [name]=\"uid\" [disabled]=\"item.disable || disabled\"\r\n                [readonly]=\"item.readonly || readonly\" />\r\n            <span class=\"checkmark\"></span>\r\n        </label>\r\n    </div>\r\n</ng-template>",
         encapsulation: ViewEncapsulation.None,
         changeDetection: ChangeDetectionStrategy.OnPush
     }),
@@ -5224,8 +5223,9 @@ let AXDatePickerComponent = AXDatePickerComponent_1 = class AXDatePickerComponen
             if (this.showToday && !this.value) {
                 this.selectToday();
             }
-            if (this.dropdown.dropdownWidth < 200) {
-                this.dropdown.dropdownWidth = 200;
+            console.log(Boolean(this.dropdown.dropdownWidth > 200));
+            if (this.dropdown.dropdownWidth > 200) {
+                this.dropdown.dropdownWidth = 250;
             }
             this.cdr.markForCheck();
         });
@@ -5845,7 +5845,7 @@ __decorate([
 AXDatePickerComponent = AXDatePickerComponent_1 = __decorate([
     Component({
         selector: 'ax-date-picker',
-        template: "<ax-drop-down [readonly]=\"readonly\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\" [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\" (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\"\r\n            (onBlur)=\"handleInputBlur()\" (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\" [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\"\r\n            [dayStyle]=\"dayStyle\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\" (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
+        template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\" [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\" (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\"\r\n            (onBlur)=\"handleInputBlur()\" (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\" [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\"\r\n            [dayStyle]=\"dayStyle\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\" (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
         encapsulation: ViewEncapsulation.None,
         providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent_1 }],
         host: { style: 'width: 100%' },
@@ -7128,7 +7128,7 @@ let AXNumberBoxComponent = AXNumberBoxComponent_1 = class AXNumberBoxComponent e
     }
     calcSeparator(num) {
         if (this.showSeparator) {
-            return num + (+(num / 3));
+            return num + +(num / 3);
         }
         else {
             return num;
@@ -7152,9 +7152,11 @@ let AXNumberBoxComponent = AXNumberBoxComponent_1 = class AXNumberBoxComponent e
         if (this.disabled === false) {
             if (this.scrollWeel === true) {
                 setTimeout(() => {
-                    this.input.nativeElement.addEventListener('wheel', (e) => {
-                        this.handleWheel(e);
-                    });
+                    if (this.readonly === false) {
+                        this.input.nativeElement.addEventListener('wheel', (e) => {
+                            this.handleWheel(e);
+                        });
+                    }
                 }, 500);
             }
         }
@@ -7563,6 +7565,14 @@ let AXNumberBoxComponent = AXNumberBoxComponent_1 = class AXNumberBoxComponent e
             }
         }
     }
+    handleInputBlur(e) {
+        this.checkMinMax(this.textValue);
+        this.onBlur.emit({
+            component: this,
+            htmlElement: this.ref.nativeElement,
+            htmlEvent: e
+        });
+    }
 };
 AXNumberBoxComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
@@ -7615,7 +7625,7 @@ __decorate([
 AXNumberBoxComponent = AXNumberBoxComponent_1 = __decorate([
     Component({
         selector: 'ax-number-box',
-        template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
+        template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         host: { style: 'width: 100%' },
         providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -7983,7 +7993,10 @@ let AXSelectBoxComponent = AXSelectBoxComponent_1 = class AXSelectBoxComponent e
             v = [];
         }
         // const old = this.selectedItems;
-        if (JSON.stringify(old) !== JSON.stringify(v)) {
+        var f = differenceBy(old, v, this.valueField);
+        var s = differenceBy(v, old, this.valueField);
+        // if (JSON.stringify(old) !== JSON.stringify(v)) {
+        if (f.length != 0 || s.length != 0) {
             this._selectedItems = this.mode == 'single' ? v.slice(0, 1) : [...new Set(v)]; //[...new Set(v[0])] : [...new Set(v)];
             this._selectedItems.forEach((c) => (c.selected = true));
             this.selectedItemsChange.emit(this._selectedItems);
@@ -8865,7 +8878,7 @@ __decorate([
 AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
     Component({
         selector: 'ax-select-box',
-        template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" [class.selected]=\"isItemSelected(item)\"\r\n                        (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
+        template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" [class.selected]=\"isItemSelected(item)\"\r\n                        (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
         encapsulation: ViewEncapsulation.None,
         changeDetection: ChangeDetectionStrategy.OnPush,
         host: { style: 'width: 100%' },
@@ -9458,6 +9471,7 @@ let AXQueryBuilderService = class AXQueryBuilderService {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
                 var e_1, _a;
+                ;
                 var query;
                 if (group.items.length > 0) {
                     query = ' ( ';
@@ -9509,6 +9523,7 @@ let AXQueryBuilderService = class AXQueryBuilderService {
                                     codeOperator = item.operator;
                                     break;
                             }
+                            ;
                             query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
                         }
                         if (id !== group.items.length - 1 && query != ' ( ') {
@@ -9535,6 +9550,7 @@ let AXQueryBuilderService = class AXQueryBuilderService {
         let query = '';
         switch (type) {
             case 'simple':
+                ;
                 if (group.items.length > 0) {
                     query = ' ( ';
                 }
@@ -9673,6 +9689,7 @@ let AXQueryBuilderGroupComponent = class AXQueryBuilderGroupComponent {
         this.ruleChanged(null);
     }
     ruleChanged(e) {
+        ;
         // this.group.queryString = this.qs.getQueryString(this.group, 'simple');
         this.qs.getQueryStringSimple(this.group).then((c) => {
             this.group.queryString = c;
@@ -10934,13 +10951,15 @@ let AXTabStripComponent = class AXTabStripComponent {
     }
     ngOnInit() { }
     handleClick(i) {
-        this.items.forEach((c) => (c.active = false));
-        i.active = true;
-        this.onTabChanged.emit({
-            component: this,
-            seledtedTab: i,
-            htmlElement: this.ref.nativeElement
-        });
+        if (!i.disable) {
+            this.items.forEach((c) => (c.active = false));
+            i.active = true;
+            this.onTabChanged.emit({
+                component: this,
+                seledtedTab: i,
+                htmlElement: this.ref.nativeElement
+            });
+        }
     }
 };
 AXTabStripComponent.ctorParameters = () => [
@@ -10957,7 +10976,7 @@ __decorate([
 AXTabStripComponent = __decorate([
     Component({
         selector: 'ax-tab-strip',
-        template: "<ul class=\"tab-strip-container\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li [class.active]=\"item.active\" (click)=\"handleClick(item)\">{{item.text}}</li>\r\n    </ng-container>\r\n</ul>"
+        template: "<ul class=\"tab-strip-container\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\r\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\r\n    </ng-container>\r\n</ul>"
     }),
     __metadata("design:paramtypes", [ElementRef])
 ], AXTabStripComponent);
@@ -13043,7 +13062,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
                 }
             };
             node.parent.unSelectParent = () => {
-                if (item.parentNode['select'] != false) {
+                if (item.parentNode['select'] == true) {
                     this.internalSelectItem(item.parentNode, true);
                 }
             };
@@ -13058,7 +13077,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
             };
             node.children.unSelectChilds = () => {
                 item.childeren.forEach((element) => {
-                    if (element['select'] != false) {
+                    if (element['select'] == true) {
                         this.internalSelectItem(element, true);
                     }
                 });
@@ -13164,6 +13183,14 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
             flag
         });
     }
+    nodeClick(item) {
+        if (item[this.hasChildField] == true) {
+            this.toggleNode(item, true);
+        }
+        else {
+            this.internalSelectItem(item, true);
+        }
+    }
     toggleNode(item, flag = false) {
         //item[this.hasChildField] === false &&
         if (this.selectionMode === 'single' && !flag) {
@@ -13637,7 +13664,7 @@ __decorate([
 AXTreeViewComponent = __decorate([
     Component({
         selector: 'ax-tree-view',
-        template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\" [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\" [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\" (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\" style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\" [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\" [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"handleOnNodeClick($event,item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>",
+        template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\"\r\n                [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\"\r\n                [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\"\r\n                    (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\r\n                    style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\"\r\n                            (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\"\r\n                                [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\"\r\n                            [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"nodeClick(item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>",
         encapsulation: ViewEncapsulation.None
     }),
     __metadata("design:paramtypes", [ElementRef])
@@ -13912,9 +13939,17 @@ class AXProperyEditorComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.readonly = false;
-        this.initiated = false;
+        this._initiated = false;
+        this._valueBound = false;
         this.validatableComponentRegistered = new Subject();
         this.valueChange = new EventEmitter();
+        this.onRenderCompleted = new EventEmitter();
+        this.onRenderCompleted.subscribe(() => {
+            this._initiated = true;
+        });
+    }
+    get initiated() {
+        return this._initiated && this._valueBound;
     }
     registerForValidationForm(component) {
         this.validatableComponentRegistered.next(component);
@@ -13927,18 +13962,24 @@ class AXProperyEditorComponent {
             this._value = v;
             this.valueChange.emit(v);
             this.cdr.detectChanges();
+            //TODO: find better solution
+            setTimeout(() => {
+                this._valueBound = true;
+            }, 100);
         }
     }
     handleValueChange(v) {
         this.value = v;
     }
-    initiat() {
-    }
 }
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
 ], AXProperyEditorComponent.prototype, "valueChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], AXProperyEditorComponent.prototype, "onRenderCompleted", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object),
@@ -13995,11 +14036,12 @@ function propertyEditor(options) {
 }
 
 let AXPropertyEditorRendererDirective = class AXPropertyEditorRendererDirective {
-    constructor(target, componentFactoryResolver, renderService) {
+    constructor(target, componentFactoryResolver, renderService, eventService) {
         this.target = target;
         this.componentFactoryResolver = componentFactoryResolver;
         this.renderService = renderService;
-        this.readonly = false;
+        this.eventService = eventService;
+        this._context = {};
         this.onValueChange = new EventEmitter();
     }
     get context() {
@@ -14007,9 +14049,6 @@ let AXPropertyEditorRendererDirective = class AXPropertyEditorRendererDirective
     }
     set context(v) {
         this._context = v;
-        if (v && this.instance) {
-            this.assignProps();
-        }
     }
     clear() {
         this.instance.value = null;
@@ -14024,52 +14063,98 @@ let AXPropertyEditorRendererDirective = class AXPropertyEditorRendererDirective
                 const cmpRef = this.target.createComponent(factory);
                 this.instance = cmpRef.instance;
                 this.subscription = this.instance.valueChange.subscribe(value => {
-                    if (this.instance.initiated === true) {
-                        this.property.value = value;
-                        this.onValueChange.emit(this.property);
+                    var _a, _b;
+                    this.property.value = value;
+                    this.onValueChange.emit(this.property);
+                    if ((_b = (_a = this.property) === null || _a === void 0 ? void 0 : _a.property) === null || _b === void 0 ? void 0 : _b.name) {
+                        setTimeout(() => {
+                            this.eventService.broadcast(`props-${this.groupId}-${this.property.property.name}`, this.property);
+                        }, 0);
                     }
                 });
-                //          
+                this.watchChanges();
+                this.assignProps();
+                this.instance.value = this.property.value;
+                // this.instance.onRenderCompleted.subscribe(() => {
+                // });
                 if (this.validationForm) {
                     this.instance.validatableComponentRegistered.subscribe(v => {
                         this.validationForm.addWidget(v);
                     });
                 }
-                //
-                //setTimeout(() => {
-                this.instance.readonly = this.readonly;
-                this.assignProps();
-                this.instance.value = this.property.value;
-                this.instance.initiat();
-                cmpRef.changeDetectorRef.markForCheck();
-                //});
             }
         });
     }
+    watchChanges() {
+        var _a, _b;
+        const varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
+        const varNameRegx = /[a-zA-Z_0-9]+/gm;
+        const options = this.property.property.editorOptions;
+        if (!options) {
+            return;
+        }
+        for (const p in options) {
+            if (options.hasOwnProperty(p)) {
+                const opt = options[p];
+                const vars = typeof opt === 'string' ? (_a = opt) === null || _a === void 0 ? void 0 : _a.match(varsRegx) : [];
+                // bind the props
+                if ((_b = vars) === null || _b === void 0 ? void 0 : _b.length) {
+                    vars.forEach(v => {
+                        var _a;
+                        const path = ((_a = v.match(varNameRegx)) === null || _a === void 0 ? void 0 : _a.length) ? v.match(varNameRegx)[0] : null;
+                        if (path) {
+                            this.eventService.on(`props-${this.groupId}-${path}`, (e) => {
+                                let execCode = opt.slice();
+                                const params = {};
+                                vars.forEach(vv => {
+                                    var _a;
+                                    const p2 = ((_a = vv.match(varNameRegx)) === null || _a === void 0 ? void 0 : _a.length) ? vv.match(varNameRegx)[0] : null;
+                                    params[p2] = AXObjectUtil.deepCopy(this.context[p2]) || null;
+                                    execCode = execCode.replace(vv, `__params__.${p2}`);
+                                });
+                                const func = new Function('__params__', `try { return ${execCode}} catch(e){  console.log(e); return null;  }`);
+                                const val = func(params);
+                                const keys = p.split('.');
+                                const prop = Object.assign({}, this.instance[keys[0]]);
+                                if (keys.length > 1) {
+                                    this.instance[keys[0]] = setPropByPath(prop, p, val);
+                                }
+                                else {
+                                    setPropByPath(this.instance, p, val);
+                                }
+                            });
+                        }
+                    });
+                }
+                // else {
+                //    this.assignProps();
+                // }
+            }
+        }
+    }
     assignProps() {
+        var _a, _b;
         const options = this.property.property.editorOptions;
         if (!options) {
             return;
         }
+        const varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
         for (const p in options) {
             if (options.hasOwnProperty(p)) {
                 const opt = options[p];
-                if (typeof opt === 'string' && opt.startsWith('$$')) {
-                    const key = opt.substring(2);
-                    const val = getPropByPath(this.context, key);
-                    if (val) {
-                        this.instance[p] = typeof val === 'function' ? val({ data: this.context, host: this.host }, this.property) : val;
-                    }
+                const vars = typeof opt === 'string' ? (_a = opt) === null || _a === void 0 ? void 0 : _a.match(varsRegx) : [];
+                if ((_b = vars) === null || _b === void 0 ? void 0 : _b.length) {
+                    continue;
                 }
                 else {
-                    const res = typeof opt === 'function' ? opt({ data: this.context, host: this.host }, this.property) : opt;
-                    if (res instanceof Promise) {
-                        res.then(v => {
-                            this.instance[p] = v;
+                    const val = typeof opt === 'function' ? opt({ data: this.context, host: this.host }, this.property) : opt;
+                    if (val instanceof Promise) {
+                        val.then(v => {
+                            setPropByPath(this.instance, p, val);
                         });
                     }
                     else {
-                        this.instance[p] = res;
+                        setPropByPath(this.instance, p, val);
                     }
                 }
             }
@@ -14084,16 +14169,13 @@ let AXPropertyEditorRendererDirective = class AXPropertyEditorRendererDirective
 AXPropertyEditorRendererDirective.ctorParameters = () => [
     { type: ViewContainerRef },
     { type: ComponentFactoryResolver },
-    { type: AXRenderService }
+    { type: AXRenderService },
+    { type: AXEventService }
 ];
 __decorate([
     Input(),
     __metadata("design:type", Object)
 ], AXPropertyEditorRendererDirective.prototype, "property", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], AXPropertyEditorRendererDirective.prototype, "readonly", void 0);
 __decorate([
     Input(),
     __metadata("design:type", AXValidationFormComponent)
@@ -14107,6 +14189,10 @@ __decorate([
     Input(),
     __metadata("design:type", Object)
 ], AXPropertyEditorRendererDirective.prototype, "host", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AXPropertyEditorRendererDirective.prototype, "groupId", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -14117,7 +14203,8 @@ AXPropertyEditorRendererDirective = __decorate([
     }),
     __metadata("design:paramtypes", [ViewContainerRef,
         ComponentFactoryResolver,
-        AXRenderService])
+        AXRenderService,
+        AXEventService])
 ], AXPropertyEditorRendererDirective);
 
 let AXTextPropertyEditorComponent = class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
@@ -14131,7 +14218,7 @@ let AXTextPropertyEditorComponent = class AXTextPropertyEditorComponent extends
     }
     ngAfterViewInit() {
         this.registerForValidationForm(this.textBox);
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
 };
 AXTextPropertyEditorComponent.ctorParameters = () => [
@@ -14177,8 +14264,8 @@ let AXNumberBoxPropertyEditorComponent = class AXNumberBoxPropertyEditorComponen
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.initiated = true;
         this.registerForValidationForm(this.textBox);
+        this.onRenderCompleted.emit();
     }
 };
 AXNumberBoxPropertyEditorComponent.ctorParameters = () => [
@@ -14232,16 +14319,18 @@ let AXSelectBoxPropertyEditorComponent = class AXSelectBoxPropertyEditorComponen
         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);
+                        resolve(this.items.slice());
                     }
                     else if (typeof this.items === 'function') {
-                        resolve(this.items(e));
+                        const a = Object.assign(e, { sender: this });
+                        resolve(this.items(a));
                     }
                     else {
                         resolve([]);
@@ -14256,27 +14345,35 @@ let AXSelectBoxPropertyEditorComponent = class AXSelectBoxPropertyEditorComponen
             });
         };
     }
+    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.value);
+        super.handleValueChange(e.selectedValues);
     }
     ngAfterViewInit() {
-        this.selectBox.refresh();
         this.registerForValidationForm(this.selectBox);
-    }
-    initiat() {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
 };
 AXSelectBoxPropertyEditorComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 __decorate([
-    ViewChild(AXSelectBox2Component, { static: true }),
-    __metadata("design:type", AXSelectBox2Component)
+    ViewChild(AXSelectBoxComponent, { static: true }),
+    __metadata("design:type", AXSelectBoxComponent)
 ], AXSelectBoxPropertyEditorComponent.prototype, "selectBox", void 0);
 AXSelectBoxPropertyEditorComponent = __decorate([
     Component({
-        template: "<ax-select-box2 [selectionMode]=\"selectionMode\"\r\n                [selectionDataMode]=\"selectionDataMode\" \r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [value]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                (onValueChanged)=\"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-box2>"
+        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>"
     }),
     __metadata("design:paramtypes", [ChangeDetectorRef])
 ], AXSelectBoxPropertyEditorComponent);
@@ -14310,7 +14407,7 @@ let AXRangePropertyEditorComponent = class AXRangePropertyEditorComponent extend
         this.cdr.detectChanges();
     }
     ngAfterViewInit() {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
     // getRanges() {
     //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
@@ -14991,7 +15088,7 @@ let AXColorPropertyEditorComponent = class AXColorPropertyEditorComponent extend
     }
     ngAfterViewInit() {
         this.registerForValidationForm(this.textBox);
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
 };
 AXColorPropertyEditorComponent.ctorParameters = () => [
@@ -15050,7 +15147,7 @@ let ColumnPropertyEditorComponent = class ColumnPropertyEditorComponent extends
         this.columns = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
     }
     ngAfterViewInit() {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
     drop(event) {
         moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
@@ -15204,8 +15301,8 @@ let AXConditionalColorPropertyEditorComponent = class AXConditionalColorProperty
         ].filter(c => c.dataTypes == null || c.dataTypes.includes(this.dataType));
     }
     ngAfterViewInit() {
-        this.initiated = true;
         this.cdr.detectChanges();
+        this.onRenderCompleted.emit();
     }
     handleEditClick(item) {
         this.updateOperations();
@@ -15398,7 +15495,7 @@ let AXSwitchPropertyEditorComponent = class AXSwitchPropertyEditorComponent exte
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     }
 };
 AXSwitchPropertyEditorComponent.ctorParameters = () => [
@@ -15445,8 +15542,8 @@ let AXDatePropertyEditorComponent = class AXDatePropertyEditorComponent extends
         super.handleValueChange(e.value);
     }
     ngAfterViewInit() {
-        this.initiated = true;
         this.registerForValidationForm(this.date);
+        this.onRenderCompleted.emit();
     }
 };
 AXDatePropertyEditorComponent.ctorParameters = () => [
@@ -15496,8 +15593,8 @@ let AXTimePropertyEditorComponent = class AXTimePropertyEditorComponent extends
         super.handleValueChange((_a = e.value) === null || _a === void 0 ? void 0 : _a.time);
     }
     ngAfterViewInit() {
-        this.initiated = true;
         this.registerForValidationForm(this.time);
+        this.onRenderCompleted.emit();
     }
 };
 AXTimePropertyEditorComponent.ctorParameters = () => [