@acorex/components 3.0.44 → 3.0.48

package/bundles/acorex-components.umd.js

@@ -1377,7 +1377,7 @@
             configurable: true
         });
         AXCalendarBoxComponent.prototype.findDay = function (date) {
-            if (this.dayStyle.find(function (c) { return c.date == date.toISOString().split('T')[0]; })) {
+            if (this.dayStyle.find(function (c) { return c.date.split('T')[0] == date.toISOString().split('T')[0]; })) {
                 return true;
             }
             else {
@@ -1385,8 +1385,8 @@
             }
         };
         AXCalendarBoxComponent.prototype.getStyle = function (date) {
-            if (this.dayStyle.find(function (c) { return c.date == date.toISOString().split('T')[0]; })) {
-                return this.dayStyle.find(function (c) { return c.date == date.toISOString().split('T')[0]; }).style;
+            if (this.dayStyle.find(function (c) { return c.date.split('T')[0] == date.toISOString().split('T')[0]; })) {
+                return this.dayStyle.find(function (c) { return c.date.split('T')[0] == date.toISOString().split('T')[0]; }).style;
             }
             else {
                 return '';
@@ -3729,7 +3729,7 @@
                 return this._value;
             },
             set: function (v) {
-                if (v != this._value || v !== undefined) {
+                if (v != this._value && v !== undefined) {
                     var old = this._value;
                     this._value = v;
                     this.valueChange.emit(v);
@@ -3754,21 +3754,20 @@
             }
         };
         AXCheckBoxComponent.prototype.handleClick = function (e) {
-            var _this = this;
-            // e.preventDefault();
-            // e.stopPropagation();
-            setTimeout(function () {
-                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 = function () { return [
             { type: core.ChangeDetectorRef },
@@ -3822,7 +3821,7 @@
         AXCheckBoxComponent = __decorate([
             core.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: core.ViewEncapsulation.None,
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
@@ -4226,8 +4225,7 @@
                 }
             }
         };
-        AXSelectionListComponent.prototype.focus = function () {
-        };
+        AXSelectionListComponent.prototype.focus = function () { };
         AXSelectionListComponent.prototype.onvalueChanged = function (e) {
             if (!this.disabled) {
                 this.selectedItemsChange.emit([e]);
@@ -4293,7 +4291,7 @@
         AXSelectionListComponent = __decorate([
             core.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: core.ViewEncapsulation.None,
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
@@ -5765,8 +5763,9 @@
                 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();
             });
@@ -6394,7 +6393,7 @@
         AXDatePickerComponent = AXDatePickerComponent_1 = __decorate([
             core.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: core.ViewEncapsulation.None,
                 providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent_1 }],
                 host: { style: 'width: 100%' },
@@ -7778,7 +7777,7 @@
         });
         AXNumberBoxComponent.prototype.calcSeparator = function (num) {
             if (this.showSeparator) {
-                return num + (+(num / 3));
+                return num + +(num / 3);
             }
             else {
                 return num;
@@ -7803,9 +7802,11 @@
             if (this.disabled === false) {
                 if (this.scrollWeel === true) {
                     setTimeout(function () {
-                        _this.input.nativeElement.addEventListener('wheel', function (e) {
-                            _this.handleWheel(e);
-                        });
+                        if (_this.readonly === false) {
+                            _this.input.nativeElement.addEventListener('wheel', function (e) {
+                                _this.handleWheel(e);
+                            });
+                        }
                     }, 500);
                 }
             }
@@ -8216,6 +8217,14 @@
                 }
             }
         };
+        AXNumberBoxComponent.prototype.handleInputBlur = function (e) {
+            this.checkMinMax(this.textValue);
+            this.onBlur.emit({
+                component: this,
+                htmlElement: this.ref.nativeElement,
+                htmlEvent: e
+            });
+        };
         var AXNumberBoxComponent_1;
         AXNumberBoxComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef },
@@ -8268,7 +8277,7 @@
         AXNumberBoxComponent = AXNumberBoxComponent_1 = __decorate([
             core.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: core.ChangeDetectionStrategy.OnPush,
                 host: { style: 'width: 100%' },
                 providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -8710,7 +8719,10 @@
                 v = [];
             }
             // const old = this.selectedItems;
-            if (JSON.stringify(old) !== JSON.stringify(v)) {
+            var f = lodash.differenceBy(old, v, this.valueField);
+            var s = lodash.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) : __spread(new Set(v)); //[...new Set(v[0])] : [...new Set(v)];
                 this._selectedItems.forEach(function (c) { return (c.selected = true); });
                 this.selectedItemsChange.emit(this._selectedItems);
@@ -9617,7 +9629,7 @@
         AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
             core.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: core.ViewEncapsulation.None,
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 host: { style: 'width: 100%' },
@@ -10227,6 +10239,7 @@
                             return __generator(this, function (_d) {
                                 switch (_d.label) {
                                     case 0:
+                                        ;
                                         if (group.items.length > 0) {
                                             query = ' ( ';
                                         }
@@ -10285,6 +10298,7 @@
                                                 codeOperator = item.operator;
                                                 break;
                                         }
+                                        ;
                                         query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
                                         _d.label = 6;
                                     case 6:
@@ -10327,6 +10341,7 @@
             var query = '';
             switch (type) {
                 case 'simple':
+                    ;
                     if (group.items.length > 0) {
                         query = ' ( ';
                     }
@@ -10468,6 +10483,7 @@
         };
         AXQueryBuilderGroupComponent.prototype.ruleChanged = function (e) {
             var _this = this;
+            ;
             // this.group.queryString = this.qs.getQueryString(this.group, 'simple');
             this.qs.getQueryStringSimple(this.group).then(function (c) {
                 _this.group.queryString = c;
@@ -11829,13 +11845,15 @@
         }
         AXTabStripComponent.prototype.ngOnInit = function () { };
         AXTabStripComponent.prototype.handleClick = function (i) {
-            this.items.forEach(function (c) { return (c.active = false); });
-            i.active = true;
-            this.onTabChanged.emit({
-                component: this,
-                seledtedTab: i,
-                htmlElement: this.ref.nativeElement
-            });
+            if (!i.disable) {
+                this.items.forEach(function (c) { return (c.active = false); });
+                i.active = true;
+                this.onTabChanged.emit({
+                    component: this,
+                    seledtedTab: i,
+                    htmlElement: this.ref.nativeElement
+                });
+            }
         };
         AXTabStripComponent.ctorParameters = function () { return [
             { type: core.ElementRef }
@@ -11851,7 +11869,7 @@
         AXTabStripComponent = __decorate([
             core.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", [core.ElementRef])
         ], AXTabStripComponent);
@@ -14052,7 +14070,7 @@
                     }
                 };
                 node.parent.unSelectParent = function () {
-                    if (item.parentNode['select'] != false) {
+                    if (item.parentNode['select'] == true) {
                         _this.internalSelectItem(item.parentNode, true);
                     }
                 };
@@ -14067,7 +14085,7 @@
                 };
                 node.children.unSelectChilds = function () {
                     item.childeren.forEach(function (element) {
-                        if (element['select'] != false) {
+                        if (element['select'] == true) {
                             _this.internalSelectItem(element, true);
                         }
                     });
@@ -14177,6 +14195,14 @@
                 flag: flag
             });
         };
+        AXTreeViewComponent.prototype.nodeClick = function (item) {
+            if (item[this.hasChildField] == true) {
+                this.toggleNode(item, true);
+            }
+            else {
+                this.internalSelectItem(item, true);
+            }
+        };
         AXTreeViewComponent.prototype.toggleNode = function (item, flag) {
             if (flag === void 0) { flag = false; }
             //item[this.hasChildField] === false &&
@@ -14661,7 +14687,7 @@
         AXTreeViewComponent = __decorate([
             core.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: core.ViewEncapsulation.None
             }),
             __metadata("design:paramtypes", [core.ElementRef])
@@ -14948,12 +14974,25 @@
 
     var AXProperyEditorComponent = /** @class */ (function () {
         function AXProperyEditorComponent(cdr) {
+            var _this = this;
             this.cdr = cdr;
             this.readonly = false;
-            this.initiated = false;
+            this._initiated = false;
+            this._valueBound = false;
             this.validatableComponentRegistered = new rxjs.Subject();
             this.valueChange = new core.EventEmitter();
+            this.onRenderCompleted = new core.EventEmitter();
+            this.onRenderCompleted.subscribe(function () {
+                _this._initiated = true;
+            });
         }
+        Object.defineProperty(AXProperyEditorComponent.prototype, "initiated", {
+            get: function () {
+                return this._initiated && this._valueBound;
+            },
+            enumerable: true,
+            configurable: true
+        });
         AXProperyEditorComponent.prototype.registerForValidationForm = function (component) {
             this.validatableComponentRegistered.next(component);
         };
@@ -14962,10 +15001,15 @@
                 return this._value;
             },
             set: function (v) {
+                var _this = this;
                 if (v !== this._value) {
                     this._value = v;
                     this.valueChange.emit(v);
                     this.cdr.detectChanges();
+                    //TODO: find better solution
+                    setTimeout(function () {
+                        _this._valueBound = true;
+                    }, 100);
                 }
             },
             enumerable: true,
@@ -14974,12 +15018,14 @@
         AXProperyEditorComponent.prototype.handleValueChange = function (v) {
             this.value = v;
         };
-        AXProperyEditorComponent.prototype.initiat = function () {
-        };
         __decorate([
             core.Output(),
             __metadata("design:type", core.EventEmitter)
         ], AXProperyEditorComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], AXProperyEditorComponent.prototype, "onRenderCompleted", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object),
@@ -15042,11 +15088,12 @@
     }
 
     var AXPropertyEditorRendererDirective = /** @class */ (function () {
-        function AXPropertyEditorRendererDirective(target, componentFactoryResolver, renderService) {
+        function AXPropertyEditorRendererDirective(target, componentFactoryResolver, renderService, eventService) {
             this.target = target;
             this.componentFactoryResolver = componentFactoryResolver;
             this.renderService = renderService;
-            this.readonly = false;
+            this.eventService = eventService;
+            this._context = {};
             this.onValueChange = new core.EventEmitter();
         }
         Object.defineProperty(AXPropertyEditorRendererDirective.prototype, "context", {
@@ -15055,9 +15102,6 @@
             },
             set: function (v) {
                 this._context = v;
-                if (v && this.instance) {
-                    this.assignProps();
-                }
             },
             enumerable: true,
             configurable: true
@@ -15076,60 +15120,110 @@
                     var cmpRef = _this.target.createComponent(factory);
                     _this.instance = cmpRef.instance;
                     _this.subscription = _this.instance.valueChange.subscribe(function (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(function () {
+                                _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(function (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();
-                    //});
                 }
             });
         };
-        AXPropertyEditorRendererDirective.prototype.assignProps = function () {
+        AXPropertyEditorRendererDirective.prototype.watchChanges = function () {
             var _this = this;
+            var _a, _b;
+            var varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
+            var varNameRegx = /[a-zA-Z_0-9]+/gm;
             var options = this.property.property.editorOptions;
             if (!options) {
                 return;
             }
             var _loop_1 = function (p) {
+                if (options.hasOwnProperty(p)) {
+                    var opt_1 = options[p];
+                    var vars_1 = typeof opt_1 === 'string' ? (_a = opt_1) === null || _a === void 0 ? void 0 : _a.match(varsRegx) : [];
+                    // bind the props
+                    if ((_b = vars_1) === null || _b === void 0 ? void 0 : _b.length) {
+                        vars_1.forEach(function (v) {
+                            var _a;
+                            var 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, function (e) {
+                                    var execCode = opt_1.slice();
+                                    var params = {};
+                                    vars_1.forEach(function (vv) {
+                                        var _a;
+                                        var p2 = ((_a = vv.match(varNameRegx)) === null || _a === void 0 ? void 0 : _a.length) ? vv.match(varNameRegx)[0] : null;
+                                        params[p2] = core$1.AXObjectUtil.deepCopy(_this.context[p2]) || null;
+                                        execCode = execCode.replace(vv, "__params__." + p2);
+                                    });
+                                    var func = new Function('__params__', "try { return " + execCode + "} catch(e){  console.log(e); return null;  }");
+                                    var val = func(params);
+                                    var keys = p.split('.');
+                                    var prop = Object.assign({}, _this.instance[keys[0]]);
+                                    if (keys.length > 1) {
+                                        _this.instance[keys[0]] = core$1.setPropByPath(prop, p, val);
+                                    }
+                                    else {
+                                        core$1.setPropByPath(_this.instance, p, val);
+                                    }
+                                });
+                            }
+                        });
+                    }
+                    // else {
+                    //    this.assignProps();
+                    // }
+                }
+            };
+            for (var p in options) {
+                _loop_1(p);
+            }
+        };
+        AXPropertyEditorRendererDirective.prototype.assignProps = function () {
+            var _this = this;
+            var _a, _b;
+            var options = this.property.property.editorOptions;
+            if (!options) {
+                return;
+            }
+            var varsRegx = /((\$\{[a-zA-Z_0-9]+\})+)/gm;
+            var _loop_2 = function (p) {
                 if (options.hasOwnProperty(p)) {
                     var opt = options[p];
-                    if (typeof opt === 'string' && opt.startsWith('$$')) {
-                        var key = opt.substring(2);
-                        var val = core$1.getPropByPath(this_1.context, key);
-                        if (val) {
-                            this_1.instance[p] = typeof val === 'function' ? val({ data: this_1.context, host: this_1.host }, this_1.property) : val;
-                        }
+                    var 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) {
+                        return "continue";
                     }
                     else {
-                        var res = typeof opt === 'function' ? opt({ data: this_1.context, host: this_1.host }, this_1.property) : opt;
-                        if (res instanceof Promise) {
-                            res.then(function (v) {
-                                _this.instance[p] = v;
+                        var val_1 = typeof opt === 'function' ? opt({ data: this_1.context, host: this_1.host }, this_1.property) : opt;
+                        if (val_1 instanceof Promise) {
+                            val_1.then(function (v) {
+                                core$1.setPropByPath(_this.instance, p, val_1);
                             });
                         }
                         else {
-                            this_1.instance[p] = res;
+                            core$1.setPropByPath(this_1.instance, p, val_1);
                         }
                     }
                 }
             };
             var this_1 = this;
             for (var p in options) {
-                _loop_1(p);
+                _loop_2(p);
             }
         };
         AXPropertyEditorRendererDirective.prototype.ngOnDestroy = function () {
@@ -15140,16 +15234,13 @@
         AXPropertyEditorRendererDirective.ctorParameters = function () { return [
             { type: core.ViewContainerRef },
             { type: core.ComponentFactoryResolver },
-            { type: core$1.AXRenderService }
+            { type: core$1.AXRenderService },
+            { type: core$1.AXEventService }
         ]; };
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
         ], AXPropertyEditorRendererDirective.prototype, "property", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Boolean)
-        ], AXPropertyEditorRendererDirective.prototype, "readonly", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", AXValidationFormComponent)
@@ -15163,6 +15254,10 @@
             core.Input(),
             __metadata("design:type", Object)
         ], AXPropertyEditorRendererDirective.prototype, "host", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AXPropertyEditorRendererDirective.prototype, "groupId", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", core.EventEmitter)
@@ -15173,7 +15268,8 @@
             }),
             __metadata("design:paramtypes", [core.ViewContainerRef,
                 core.ComponentFactoryResolver,
-                core$1.AXRenderService])
+                core$1.AXRenderService,
+                core$1.AXEventService])
         ], AXPropertyEditorRendererDirective);
         return AXPropertyEditorRendererDirective;
     }());
@@ -15191,7 +15287,7 @@
         };
         AXTextPropertyEditorComponent.prototype.ngAfterViewInit = function () {
             this.registerForValidationForm(this.textBox);
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         AXTextPropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -15241,8 +15337,8 @@
             _super.prototype.handleValueChange.call(this, e.value);
         };
         AXNumberBoxPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
             this.registerForValidationForm(this.textBox);
+            this.onRenderCompleted.emit();
         };
         AXNumberBoxPropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -15287,16 +15383,18 @@
             _this.selectionDataMode = 'value';
             _this.allowSearch = true;
             _this.allowNull = false;
+            _this.disabled = false;
             _this.items = [];
             _this.remoteOperation = false;
             _this.provideData = function (e) {
                 return new Promise(function (resolve) {
                     var func = function () {
                         if (Array.isArray(_this.items)) {
-                            resolve(_this.items);
+                            resolve(_this.items.slice());
                         }
                         else if (typeof _this.items === 'function') {
-                            resolve(_this.items(e));
+                            var a = Object.assign(e, { sender: _this });
+                            resolve(_this.items(a));
                         }
                         else {
                             resolve([]);
@@ -15312,26 +15410,38 @@
             };
             return _this;
         }
+        Object.defineProperty(AXSelectBoxPropertyEditorComponent.prototype, "filter", {
+            get: function () {
+                return this._filter;
+            },
+            set: function (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();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         AXSelectBoxPropertyEditorComponent.prototype.handleValueChange = function (e) {
-            _super.prototype.handleValueChange.call(this, e.value);
+            _super.prototype.handleValueChange.call(this, e.selectedValues);
         };
         AXSelectBoxPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.selectBox.refresh();
             this.registerForValidationForm(this.selectBox);
-        };
-        AXSelectBoxPropertyEditorComponent.prototype.initiat = function () {
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         AXSelectBoxPropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
-            core.ViewChild(AXSelectBox2Component, { static: true }),
-            __metadata("design:type", AXSelectBox2Component)
+            core.ViewChild(AXSelectBoxComponent, { static: true }),
+            __metadata("design:type", AXSelectBoxComponent)
         ], AXSelectBoxPropertyEditorComponent.prototype, "selectBox", void 0);
         AXSelectBoxPropertyEditorComponent = __decorate([
             core.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", [core.ChangeDetectorRef])
         ], AXSelectBoxPropertyEditorComponent);
@@ -15370,7 +15480,7 @@
             this.cdr.detectChanges();
         };
         AXRangePropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         // getRanges() {
         //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
@@ -16076,7 +16186,7 @@
         }
         AXColorPropertyEditorComponent.prototype.ngAfterViewInit = function () {
             this.registerForValidationForm(this.textBox);
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         AXColorPropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -16134,7 +16244,7 @@
             this.columns = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
         };
         ColumnPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         ColumnPropertyEditorComponent.prototype.drop = function (event) {
             dragDrop.moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
@@ -16294,8 +16404,8 @@
             ].filter(function (c) { return c.dataTypes == null || c.dataTypes.includes(_this.dataType); });
         };
         AXConditionalColorPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
             this.cdr.detectChanges();
+            this.onRenderCompleted.emit();
         };
         AXConditionalColorPropertyEditorComponent.prototype.handleEditClick = function (item) {
             var _this = this;
@@ -16494,7 +16604,7 @@
             _super.prototype.handleValueChange.call(this, e.value);
         };
         AXSwitchPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
+            this.onRenderCompleted.emit();
         };
         AXSwitchPropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -16543,8 +16653,8 @@
             _super.prototype.handleValueChange.call(this, e.value);
         };
         AXDatePropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
             this.registerForValidationForm(this.date);
+            this.onRenderCompleted.emit();
         };
         AXDatePropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -16592,8 +16702,8 @@
             _super.prototype.handleValueChange.call(this, (_a = e.value) === null || _a === void 0 ? void 0 : _a.time);
         };
         AXTimePropertyEditorComponent.prototype.ngAfterViewInit = function () {
-            this.initiated = true;
             this.registerForValidationForm(this.time);
+            this.onRenderCompleted.emit();
         };
         AXTimePropertyEditorComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }