@acorex/components 3.0.47 → 3.0.52

package/fesm5/acorex-components.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __extends, __spread, __param, __assign, __awaiter, __generator, __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, ScrollStrategyOptions, OverlayPositionBuilder, OverlayKeyboardDispatcher, Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { merge, Subject, Observable } from 'rxjs';
@@ -507,6 +507,14 @@ var AXBaseTextComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], AXBaseTextComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], AXBaseTextComponent.prototype, "autocomplete", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AXBaseTextComponent.prototype, "name", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -1171,7 +1179,7 @@ var AXCalendarBoxComponent = /** @class */ (function () {
         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 {
@@ -1179,16 +1187,16 @@ var AXCalendarBoxComponent = /** @class */ (function () {
         }
     };
     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 '';
         }
     };
     AXCalendarBoxComponent.prototype.getTitle = 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]; }).text;
+        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]; }).text;
         }
         else {
             return '';
@@ -3242,7 +3250,7 @@ var AXMenu2Component = /** @class */ (function () {
             selector: 'ax-menu2',
             template: "\n     <div class=\"ax ax-menu ax-menu-vertical\" [attr.data-level]=\"level\">\n        <ax-menu-item\n            *ngFor=\"let item of items\"\n            [level]=\"level\"\n            [item]=\"item\"\n            (showSubMenu)=\"showSubmenu($event)\">\n        </ax-menu-item>\n     </div>\n    ",
             encapsulation: ViewEncapsulation.None,
-            styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{color:var(--ax-gray-color)!important;background-color:var(--ax-gray-trans-light-color)!important;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{background:var(--ax-light-light-color)!important;border-color:var(--ax-light-light-color)!important;color:var(--ax-gray-dark-color)!important;cursor:not-allowed!important}"]
+            styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{cursor:not-allowed!important}"]
         }),
         __metadata("design:paramtypes", [Overlay,
             ViewContainerRef,
@@ -4513,7 +4521,7 @@ var AXTextBoxComponent = /** @class */ (function (_super) {
     AXTextBoxComponent = AXTextBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-text-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    </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 class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($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\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
+            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    </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 [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($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\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -5315,7 +5323,8 @@ var AXDropdownComponent = /** @class */ (function (_super) {
         var _this = this;
         if (!this.overlayRef) {
             var targetEl = document.querySelector('#' + this.uid);
-            var positionStrategy = this.overlay.position()
+            var positionStrategy = this.overlay
+                .position()
                 .flexibleConnectedTo(targetEl)
                 .withPositions([
                 {
@@ -5505,7 +5514,8 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
         this.value = new Date();
     };
     AXDatePickerComponent.prototype.focus = function () {
-        this.dropdown.focus();
+        // this.dropdown.focus();
+        this.input.focus();
     };
     AXDatePickerComponent.prototype.convertMaskToDate = function (text) {
         if (this.type == 'jalali') {
@@ -8071,7 +8081,7 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
     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 && !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",
+            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 [autocomplete]=\"autocomplete\" [name]=\"name\" #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 }]
@@ -8169,7 +8179,7 @@ var AXPasswordBoxComponent = /** @class */ (function (_super) {
     AXPasswordBoxComponent = AXPasswordBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-password-box',
-            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\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\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\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\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -9474,6 +9484,10 @@ var AXQueryBuilderRuleComponent = /** @class */ (function () {
                                     value: 'not-contains',
                                     text: AXTranslator.get('queryBuilder.not-contains')
                                 },
+                                {
+                                    value: 'contains-all',
+                                    text: AXTranslator.get('queryBuilder.contains-all')
+                                },
                                 {
                                     value: 'null',
                                     text: AXTranslator.get('queryBuilder.null')
@@ -10033,7 +10047,6 @@ var AXQueryBuilderService = /** @class */ (function () {
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
-                                    ;
                                     if (group.items.length > 0) {
                                         query = ' ( ';
                                     }
@@ -10091,8 +10104,10 @@ var AXQueryBuilderService = /** @class */ (function () {
                                         case 'end-with':
                                             codeOperator = item.operator;
                                             break;
+                                        default:
+                                            codeOperator = item.operator;
+                                            break;
                                     }
-                                    ;
                                     query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
                                     _d.label = 6;
                                 case 6:
@@ -10135,7 +10150,6 @@ var AXQueryBuilderService = /** @class */ (function () {
         var query = '';
         switch (type) {
             case 'simple':
-                ;
                 if (group.items.length > 0) {
                     query = ' ( ';
                 }
@@ -11911,7 +11925,7 @@ var AXTextAreaComponent = /** @class */ (function (_super) {
     AXTextAreaComponent = AXTextAreaComponent_1 = __decorate([
         Component({
             selector: 'ax-text-area',
-            template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
+            template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -14768,12 +14782,25 @@ var AXAccordionModule = /** @class */ (function () {
 
 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 Subject();
         this.valueChange = new EventEmitter();
+        this.onRenderCompleted = new 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);
     };
@@ -14782,10 +14809,15 @@ var AXProperyEditorComponent = /** @class */ (function () {
             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,
@@ -14794,12 +14826,14 @@ var AXProperyEditorComponent = /** @class */ (function () {
     AXProperyEditorComponent.prototype.handleValueChange = function (v) {
         this.value = v;
     };
-    AXProperyEditorComponent.prototype.initiat = function () {
-    };
     __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),
@@ -14862,11 +14896,12 @@ function propertyEditor(options) {
 }
 
 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 EventEmitter();
     }
     Object.defineProperty(AXPropertyEditorRendererDirective.prototype, "context", {
@@ -14875,9 +14910,6 @@ var AXPropertyEditorRendererDirective = /** @class */ (function () {
         },
         set: function (v) {
             this._context = v;
-            if (v && this.instance) {
-                this.assignProps();
-            }
         },
         enumerable: true,
         configurable: true
@@ -14896,60 +14928,110 @@ var AXPropertyEditorRendererDirective = /** @class */ (function () {
                 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] = 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]] = setPropByPath(prop, p, val);
+                                }
+                                else {
+                                    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 = 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) {
+                            setPropByPath(_this.instance, p, val_1);
                         });
                     }
                     else {
-                        this_1.instance[p] = res;
+                        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 () {
@@ -14960,16 +15042,13 @@ var AXPropertyEditorRendererDirective = /** @class */ (function () {
     AXPropertyEditorRendererDirective.ctorParameters = function () { return [
         { 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)
@@ -14983,6 +15062,10 @@ var AXPropertyEditorRendererDirective = /** @class */ (function () {
         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)
@@ -14993,7 +15076,8 @@ var AXPropertyEditorRendererDirective = /** @class */ (function () {
         }),
         __metadata("design:paramtypes", [ViewContainerRef,
             ComponentFactoryResolver,
-            AXRenderService])
+            AXRenderService,
+            AXEventService])
     ], AXPropertyEditorRendererDirective);
     return AXPropertyEditorRendererDirective;
 }());
@@ -15011,7 +15095,7 @@ var AXTextPropertyEditorComponent = /** @class */ (function (_super) {
     };
     AXTextPropertyEditorComponent.prototype.ngAfterViewInit = function () {
         this.registerForValidationForm(this.textBox);
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     };
     AXTextPropertyEditorComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef }
@@ -15061,8 +15145,8 @@ var AXNumberBoxPropertyEditorComponent = /** @class */ (function (_super) {
         _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: ChangeDetectorRef }
@@ -15107,16 +15191,18 @@ var AXSelectBoxPropertyEditorComponent = /** @class */ (function (_super) {
         _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([]);
@@ -15132,26 +15218,38 @@ var AXSelectBoxPropertyEditorComponent = /** @class */ (function (_super) {
         };
         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: 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);
@@ -15190,7 +15288,7 @@ var AXRangePropertyEditorComponent = /** @class */ (function (_super) {
         this.cdr.detectChanges();
     };
     AXRangePropertyEditorComponent.prototype.ngAfterViewInit = function () {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     };
     // getRanges() {
     //     return this.ranges.sort((a, b) => a.minValue - b.minValue);
@@ -15896,7 +15994,7 @@ var AXColorPropertyEditorComponent = /** @class */ (function (_super) {
     }
     AXColorPropertyEditorComponent.prototype.ngAfterViewInit = function () {
         this.registerForValidationForm(this.textBox);
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     };
     AXColorPropertyEditorComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef }
@@ -15954,7 +16052,7 @@ var ColumnPropertyEditorComponent = /** @class */ (function (_super) {
         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) {
         moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
@@ -16114,8 +16212,8 @@ var AXConditionalColorPropertyEditorComponent = /** @class */ (function (_super)
         ].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;
@@ -16314,7 +16412,7 @@ var AXSwitchPropertyEditorComponent = /** @class */ (function (_super) {
         _super.prototype.handleValueChange.call(this, e.value);
     };
     AXSwitchPropertyEditorComponent.prototype.ngAfterViewInit = function () {
-        this.initiated = true;
+        this.onRenderCompleted.emit();
     };
     AXSwitchPropertyEditorComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef }
@@ -16363,8 +16461,8 @@ var AXDatePropertyEditorComponent = /** @class */ (function (_super) {
         _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: ChangeDetectorRef }
@@ -16412,8 +16510,8 @@ var AXTimePropertyEditorComponent = /** @class */ (function (_super) {
         _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: ChangeDetectorRef }