@acorex/components 3.0.50 → 3.0.54

package/fesm5/acorex-components.js

@@ -1084,6 +1084,7 @@ var AXCalendarBoxComponent = /** @class */ (function () {
         this.size = 'md';
         this.selectableHoliday = true;
         this.dayStyle = [];
+        this.dayMinMaxResoan = '';
         this.showTodayButton = false;
         this.matrix = [];
         this.rotated = false;
@@ -1191,7 +1192,13 @@ var AXCalendarBoxComponent = /** @class */ (function () {
             return this.dayStyle.find(function (c) { return c.date.split('T')[0] == date.toISOString().split('T')[0]; }).text;
         }
         else {
-            return '';
+            if ((this.min && this.max && date.compaireNew(new AXDateTime(this.min, this.type), 'YMD', this.type) === -1) ||
+                date.compaireNew(new AXDateTime(this.max, this.type), 'YMD', this.type) === 1) {
+                return this.dayMinMaxResoan;
+            }
+            else {
+                return '';
+            }
         }
     };
     AXCalendarBoxComponent.prototype.ngOnInit = function () {
@@ -1478,6 +1485,10 @@ var AXCalendarBoxComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], AXCalendarBoxComponent.prototype, "dayStyle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], AXCalendarBoxComponent.prototype, "dayMinMaxResoan", void 0);
     __decorate([
         Input('showTodayButton'),
         __metadata("design:type", Boolean)
@@ -3242,7 +3253,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,
@@ -5315,7 +5326,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([
                 {
@@ -5367,6 +5379,10 @@ var AXDropdownComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    AXDropdownComponent.prototype.updatePosition = function () {
+        var _a;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
+    };
     AXDropdownComponent.prototype.focus = function () { };
     AXDropdownComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef },
@@ -5447,6 +5463,7 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
         _this.ref = ref;
         _this.cdr = cdr;
         _this.dayStyle = [];
+        _this.dayMinMaxResoan = '';
         // mmddyyyy: any = [/[0-1]/, /[0-9]/, '-', /[0-1]/, /[0-9]/, '-', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/];
         _this.yyyyMMdd = [/[1-2]/, /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-1]/, /[0-9]/, '-', /[0-3]/, /[0-9]/];
         _this.ddMMyyyy = [/[0-3]/, /[0-9]/, '-', /[0-1]/, /[0-9]/, '-', /[1-9]/, /[0-9]/, /[0-9]/, /[0-9]/];
@@ -5505,7 +5522,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') {
@@ -5539,6 +5557,7 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
         return { year: y, monnth: m, day: d };
     };
     AXDatePickerComponent.prototype.textChange = function (e) {
+        debugger;
         this.text = e.value;
         if (this.text && this.text.indexOf('_') === -1 && this.text.length == 10) {
             this.userChange = e.isUserChange;
@@ -5606,6 +5625,9 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
                     }, 100);
                 }
             }
+            else {
+                this.text = '';
+            }
             this.userChange = false;
         },
         enumerable: true,
@@ -6101,6 +6123,10 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", Object)
     ], AXDatePickerComponent.prototype, "dayStyle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], AXDatePickerComponent.prototype, "dayMinMaxResoan", void 0);
     __decorate([
         ContentChild(AXValidation, { static: true }),
         __metadata("design:type", AXValidation)
@@ -6187,7 +6213,7 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
     AXDatePickerComponent = AXDatePickerComponent_1 = __decorate([
         Component({
             selector: 'ax-date-picker',
-            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>",
+            template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    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\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\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\"\r\n            (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()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
             encapsulation: ViewEncapsulation.None,
             providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent_1 }],
             host: { style: 'width: 100%' },
@@ -8426,6 +8452,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         _this.allowSearch = true;
         _this.textField = 'text';
         _this.valueField = 'value';
+        _this.disabledField = 'disabled';
         _this.mode = 'single';
         _this.itemRemove = false;
         _this.itemsChange = new EventEmitter();
@@ -8597,6 +8624,17 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
             }
         }
     };
+    AXSelectBoxComponent.prototype.isItemDisabled = function (item) {
+        if (item[this.disabledField] == true) {
+            return true;
+        }
+        else if (this.disabledCallback) {
+            return this.disabledCallback({ item: item, index: -1 });
+        }
+        else {
+            return false;
+        }
+    };
     AXSelectBoxComponent.prototype.onButtonClick = function (e) {
         console.log('onButtonClick', e);
     };
@@ -8644,6 +8682,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
     Object.defineProperty(AXSelectBoxComponent.prototype, "selectedValues", {
         get: function () {
             var _this = this;
+            debugger;
             if (this.mode === 'single') {
                 return this._selectedItems.map(function (c) { return c[_this.valueField]; })[0];
             }
@@ -8730,6 +8769,8 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         }
     };
     AXSelectBoxComponent.prototype.emitSelectionChangedEvent = function () {
+        debugger;
+        this.selectedValuesChange.emit(this.selectedValues);
         this.selectionChanged.emit(new AXSelectBoxSelectionChangedEvent(this, this.selectedItems, this.selectedValues));
     };
     AXSelectBoxComponent.prototype.ngAfterViewInit = function () {
@@ -8847,6 +8888,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         }
         this.cdr.markForCheck();
         this.cdr.detectChanges();
+        this.dropdown.updatePosition();
     };
     // private params: AXDataSourceReadParams = {};
     AXSelectBoxComponent.prototype.fetch = function (params) {
@@ -8905,37 +8947,39 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
     };
     AXSelectBoxComponent.prototype.handleItemClick = function (e, item) {
         var _this = this;
-        var value = item[this.valueField];
-        if (this.mode === 'single') {
-            // this.selectedValues = value;
-            this.setSelectedValues(value, true);
-        }
-        else {
-            var exists = this.selectedValues.slice(0);
-            if (exists.includes(value)) {
-                if (this.allowNull == true || (this.allowNull == false && this.selectedItems.length > 1)) {
-                    this.handleItemRemoveClick(item);
-                }
+        if (this.isItemDisabled(item) == false) {
+            var value = item[this.valueField];
+            if (this.mode === 'single') {
+                // this.selectedValues = value;
+                this.setSelectedValues(value, true);
             }
             else {
-                exists.push(value);
-                // this.selectedValues = exists;
-                this.setSelectedValues(exists, true);
+                var exists = this.selectedValues.slice(0);
+                if (exists.includes(value)) {
+                    if (this.allowNull == true || (this.allowNull == false && this.selectedItems.length > 1)) {
+                        this.handleItemRemoveClick(item);
+                    }
+                }
+                else {
+                    exists.push(value);
+                    // this.selectedValues = exists;
+                    this.setSelectedValues(exists, true);
+                }
             }
-        }
-        if (this.mode == 'single') {
-            this.text = '';
-            this.dropdown.close();
-            this.cdr.markForCheck();
-        }
-        // if (e.stopPropagation() == undefined) {
-        //     e.stopPropagation();
-        // }
-        setTimeout(function () {
-            if (_this.serchBox) {
-                _this.serchBox.focus();
+            if (this.mode == 'single') {
+                this.text = '';
+                this.dropdown.close();
+                this.cdr.markForCheck();
             }
-        }, 0);
+            // if (e.stopPropagation() == undefined) {
+            //     e.stopPropagation();
+            // }
+            setTimeout(function () {
+                if (_this.serchBox) {
+                    _this.serchBox.focus();
+                }
+            }, 0);
+        }
         e.stopPropagation();
     };
     AXSelectBoxComponent.prototype.handleKeyEventSearch = function (e) {
@@ -9104,6 +9148,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         if (e.key === 'Backspace' &&
             e.type === 'keydown' &&
             ((this.allowNull === true && this.selectedItems.length > 0) || (this.allowNull === false && this.selectedItems.length > 1))) {
+            debugger;
             this.selectedItems.pop();
             this.emitSelectionChangedEvent();
         }
@@ -9365,6 +9410,10 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         ViewChild('d', { static: true }),
         __metadata("design:type", AXDropdownComponent)
     ], AXSelectBoxComponent.prototype, "dropdown", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], AXSelectBoxComponent.prototype, "disabledCallback", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -9377,6 +9426,10 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], AXSelectBoxComponent.prototype, "valueField", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AXSelectBoxComponent.prototype, "disabledField", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -9423,7 +9476,7 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
     AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
         Component({
             selector: 'ax-select-box',
-            template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" [class.selected]=\"isItemSelected(item)\"\r\n                        (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                (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>",
+            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.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (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)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -9474,6 +9527,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 +10090,6 @@ var AXQueryBuilderService = /** @class */ (function () {
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
-                                    ;
                                     if (group.items.length > 0) {
                                         query = ' ( ';
                                     }
@@ -10091,8 +10147,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 +10193,6 @@ var AXQueryBuilderService = /** @class */ (function () {
         var query = '';
         switch (type) {
             case 'simple':
-                ;
                 if (group.items.length > 0) {
                     query = ' ( ';
                 }