@acorex/components 3.0.42 → 3.0.46

package/fesm5/acorex-components.js

@@ -3523,7 +3523,7 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
             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);
@@ -3548,21 +3548,20 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
         }
     };
     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: ChangeDetectorRef },
@@ -3616,7 +3615,7 @@ var AXCheckBoxComponent = /** @class */ (function (_super) {
     AXCheckBoxComponent = __decorate([
         Component({
             selector: 'ax-check-box',
-            template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n<label for=\"{{uid}}\" class=\"ax-checkbox-container\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  <input #input type=\"checkbox\" class=\"ax-checkbox\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"\r\n    id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\" [(ngModel)]=\"value\" [disabled]=\"disabled || readonly\" />\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
+            template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
@@ -5559,8 +5558,9 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
             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();
         });
@@ -6188,7 +6188,7 @@ var AXDatePickerComponent = /** @class */ (function (_super) {
     AXDatePickerComponent = AXDatePickerComponent_1 = __decorate([
         Component({
             selector: 'ax-date-picker',
-            template: "<ax-drop-down [readonly]=\"readonly\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\" [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\" (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\"\r\n            (onBlur)=\"handleInputBlur()\" (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\" [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\"\r\n            [dayStyle]=\"dayStyle\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\" (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
+            template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\" icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\" [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\" (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\"\r\n            (onBlur)=\"handleInputBlur()\" (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\" [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\" (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\"\r\n            [dayStyle]=\"dayStyle\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\" (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\" [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
             encapsulation: ViewEncapsulation.None,
             providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent_1 }],
             host: { style: 'width: 100%' },
@@ -7572,7 +7572,7 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
     });
     AXNumberBoxComponent.prototype.calcSeparator = function (num) {
         if (this.showSeparator) {
-            return num + (+(num / 3));
+            return num + +(num / 3);
         }
         else {
             return num;
@@ -7597,9 +7597,11 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
         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);
             }
         }
@@ -8010,6 +8012,14 @@ var AXNumberBoxComponent = /** @class */ (function (_super) {
             }
         }
     };
+    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: ChangeDetectorRef },
@@ -8062,7 +8072,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\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
+            template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
             providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent_1 }]
@@ -8504,7 +8514,10 @@ var AXSelectBoxComponent = /** @class */ (function (_super) {
             v = [];
         }
         // const old = this.selectedItems;
-        if (JSON.stringify(old) !== JSON.stringify(v)) {
+        var f = differenceBy(old, v, this.valueField);
+        var s = differenceBy(v, old, this.valueField);
+        // if (JSON.stringify(old) !== JSON.stringify(v)) {
+        if (f.length != 0 || s.length != 0) {
             this._selectedItems = this.mode == 'single' ? v.slice(0, 1) : __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);
@@ -9411,7 +9424,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                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
+            template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" [class.selected]=\"isItemSelected(item)\"\r\n                        (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>",
             encapsulation: ViewEncapsulation.None,
             changeDetection: ChangeDetectionStrategy.OnPush,
             host: { style: 'width: 100%' },
@@ -10021,7 +10034,7 @@ var AXQueryBuilderService = /** @class */ (function () {
                         return __generator(this, function (_d) {
                             switch (_d.label) {
                                 case 0:
-                                    debugger;
+                                    ;
                                     if (group.items.length > 0) {
                                         query = ' ( ';
                                     }
@@ -10080,7 +10093,7 @@ var AXQueryBuilderService = /** @class */ (function () {
                                             codeOperator = item.operator;
                                             break;
                                     }
-                                    debugger;
+                                    ;
                                     query = query + ' ' + item.caption + ' ' + codeOperator + ' ' + item.text;
                                     _d.label = 6;
                                 case 6:
@@ -10123,7 +10136,7 @@ var AXQueryBuilderService = /** @class */ (function () {
         var query = '';
         switch (type) {
             case 'simple':
-                debugger;
+                ;
                 if (group.items.length > 0) {
                     query = ' ( ';
                 }
@@ -10265,7 +10278,7 @@ var AXQueryBuilderGroupComponent = /** @class */ (function () {
     };
     AXQueryBuilderGroupComponent.prototype.ruleChanged = function (e) {
         var _this = this;
-        debugger;
+        ;
         // this.group.queryString = this.qs.getQueryString(this.group, 'simple');
         this.qs.getQueryStringSimple(this.group).then(function (c) {
             _this.group.queryString = c;
@@ -13975,6 +13988,14 @@ var AXTreeViewComponent = /** @class */ (function (_super) {
             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 &&
@@ -14032,7 +14053,7 @@ var AXTreeViewComponent = /** @class */ (function (_super) {
                         _this.seletedKeyFields.forEach(function (n) {
                             if (n.includes(el[_this.keyField])) {
                                 if (el[_this.hasChildField] == true) {
-                                    if (_this.checkParents == false && _this.checkChilds == false) {
+                                    if ((_this.checkParents == false && _this.checkChilds == false) || _this.checkChilds == false) {
                                         //select parent when check child and check parent is false TODO check this Action
                                         _this.selectItem(el);
                                     }
@@ -14047,7 +14068,7 @@ var AXTreeViewComponent = /** @class */ (function (_super) {
                     }
                     else if (_this.selectedFieldName != null) {
                         if (el[_this.hasChildField] == true && el[_this.selectedFieldName] == true) {
-                            if (_this.checkParents == false && _this.checkChilds == false) {
+                            if ((_this.checkParents == false && _this.checkChilds == false) || _this.checkChilds == false) {
                                 //select parent when check child and check parent is false TODO check this Action
                                 _this.selectItem(el);
                             }
@@ -14459,7 +14480,7 @@ var AXTreeViewComponent = /** @class */ (function (_super) {
     AXTreeViewComponent = __decorate([
         Component({
             selector: 'ax-tree-view',
-            template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\" [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\" [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\" (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\" style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\" [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\" [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"handleOnNodeClick($event,item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>",
+            template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\"\r\n                [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\"\r\n                [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\"\r\n                    (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\r\n                    style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\"\r\n                            (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\"\r\n                                [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\"\r\n                            [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"nodeClick(item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>",
             encapsulation: ViewEncapsulation.None
         }),
         __metadata("design:paramtypes", [ElementRef])