@acorex/components 16.18.6 → 16.18.8

package/esm2022/lib/query-builder/query-builder-popup/query-builder-popup.component.mjs

@@ -164,10 +164,10 @@ export class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
             }
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n    <ax-validation-form #form>\n        <div *ngFor=\"let rule of items\">\n\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n                <div *ngSwitchCase=\"'textBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'selectBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'numberBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-number-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'datetime'\">\n                  <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n                  </ax-date-picker>\n                </div>\n                <div *ngSwitchCase=\"'boolean'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\n                            </ax-data-source>\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchDefault>\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n\n                    </ax-form-group>\n\n                </div>\n            </div>\n\n\n\n\n        </div>\n\n    </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: i4.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i7.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: i8.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: i12.AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n    <ax-validation-form #form>\n        <div *ngFor=\"let rule of items\">\n\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n                <div *ngSwitchCase=\"'textBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'selectBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'numberBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-number-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'datetime'\">\n                  <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n                  </ax-date-picker>\n                </div>\n                <div *ngSwitchCase=\"'boolean'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\n                            </ax-data-source>\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchDefault>\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n\n                    </ax-form-group>\n\n                </div>\n            </div>\n\n\n\n\n        </div>\n\n    </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: i4.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i6.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i7.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: i8.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i9.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i10.AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: i11.AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: i12.AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
             type: Component,
             args: [{ template: "<div>\n    <ax-validation-form #form>\n        <div *ngFor=\"let rule of items\">\n\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n                <div *ngSwitchCase=\"'textBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'selectBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'numberBox'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-number-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchCase=\"'datetime'\">\n                  <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n                  </ax-date-picker>\n                </div>\n                <div *ngSwitchCase=\"'boolean'\">\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\n                            </ax-data-source>\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-select-box>\n                    </ax-form-group>\n                </div>\n                <div *ngSwitchDefault>\n                    <ax-form-group>\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n                            placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n                            <ax-validation>\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\n                            </ax-validation>\n                        </ax-text-box>\n\n                    </ax-form-group>\n\n                </div>\n            </div>\n\n\n\n\n        </div>\n\n    </ax-validation-form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AXToastService }], propDecorators: { form: [{

package/esm2022/lib/query-builder/query-builder-rule.component.mjs

@@ -389,10 +389,10 @@ export class AXQueryBuilderRuleComponent {
     getOption(name) {
         return this.rule.control.options ? this.rule.control.options[name] : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\n    <div class=\"text {{parent.condition}}\">\n        <span>{{parent.condition}}</span>\n    </div>\n</div>\n<div class=\"handler\">\n    <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n                mode=\"single\">\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #fieldsTemplate>\n        <div (click)=\"handleEditClick()\">\n            {{rule.caption}}\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n                <ax-data-source [provideData]=\"provideDataOperator\">\n                </ax-data-source>\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #operatorTemplate>\n        <div class=\"text\" (click)=\"handleEditClick()\">\n            {{('queryBuilder.'+rule.operator) | trans}}\n        </div>\n    </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n            <div *ngSwitchCase=\"'textBox'\">\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'selectBox'\">\n                <ax-form-group>\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n                        #selectBoxValue>\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n            </div>\n\n            <div *ngSwitchCase=\"'numberBox'\">\n                <ax-form-group>\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n                    </ax-number-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'datetime'\">\n                <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n                </ax-date-picker>\n\n            </div>\n            <div *ngSwitchCase=\"'boolean'\">\n\n                <ax-form-group>\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\n                        </ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n\n            </div>\n            <div *ngSwitchDefault>\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n\n                </ax-form-group>\n\n            </div>\n        </div>\n\n        <div *ngIf=\"isOnDemandLabel\">\n\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n                <!-- <ax-validation>\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                </ax-validation> -->\n            </ax-text-box>\n\n\n        </div>\n\n    </ng-container>\n    <ng-template #valueTemplate>\n        <div (click)=\"handleEditClick()\">\n\n            {{rule.text}}\n\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\n        <i class=\"far fa-dollar-sign\"></i>\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n        </ax-check-box>\n    </div>\n\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n        <i class=\"far fa-check\"></i>\n    </div>\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n        <i class=\"far fa-times\"></i>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: i3.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i6.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: i7.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i8.AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i9.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: { isEditing: "isEditing", rule: "rule", parent: "parent", mode: "mode", fields: "fields" }, outputs: { onRuleDelete: "onRuleDelete", ruleChanged: "ruleChanged" }, host: { classAttribute: "ax ax-query-rule" }, viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectBoxValue", first: true, predicate: ["selectBoxValue"], descendants: true }, { propertyName: "selectBoxBoolean", first: true, predicate: ["selectBoxBoolean"], descendants: true }, { propertyName: "textBoxNameValue", first: true, predicate: ["textBoxNameValue"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"condition\" *ngIf=\"parent\">\n    <div class=\"text {{parent.condition}}\">\n        <span>{{parent.condition}}</span>\n    </div>\n</div>\n<div class=\"handler\">\n    <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n                mode=\"single\">\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #fieldsTemplate>\n        <div (click)=\"handleEditClick()\">\n            {{rule.caption}}\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n                <ax-data-source [provideData]=\"provideDataOperator\">\n                </ax-data-source>\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #operatorTemplate>\n        <div class=\"text\" (click)=\"handleEditClick()\">\n            {{('queryBuilder.'+rule.operator) | trans}}\n        </div>\n    </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n            <div *ngSwitchCase=\"'textBox'\">\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'selectBox'\">\n                <ax-form-group>\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n                        #selectBoxValue>\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n            </div>\n\n            <div *ngSwitchCase=\"'numberBox'\">\n                <ax-form-group>\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n                    </ax-number-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'datetime'\">\n                <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n                </ax-date-picker>\n\n            </div>\n            <div *ngSwitchCase=\"'boolean'\">\n\n                <ax-form-group>\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\n                        </ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n\n            </div>\n            <div *ngSwitchDefault>\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n\n                </ax-form-group>\n\n            </div>\n        </div>\n\n        <div *ngIf=\"isOnDemandLabel\">\n\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n                <!-- <ax-validation>\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                </ax-validation> -->\n            </ax-text-box>\n\n\n        </div>\n\n    </ng-container>\n    <ng-template #valueTemplate>\n        <div (click)=\"handleEditClick()\">\n\n            {{rule.text}}\n\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\n        <i class=\"far fa-dollar-sign\"></i>\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n        </ax-check-box>\n    </div>\n\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n        <i class=\"far fa-check\"></i>\n    </div>\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n        <i class=\"far fa-times\"></i>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: i3.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: i6.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: i7.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i8.AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { kind: "pipe", type: i9.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-query-rule', host: { class: 'ax ax-query-rule' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"condition\" *ngIf=\"parent\">\n    <div class=\"text {{parent.condition}}\">\n        <span>{{parent.condition}}</span>\n    </div>\n</div>\n<div class=\"handler\">\n    <i class=\"far fa-grip-lines-vertical\"></i>\n</div>\n\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\n                mode=\"single\">\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #fieldsTemplate>\n        <div (click)=\"handleEditClick()\">\n            {{rule.caption}}\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\n        <ax-form-group>\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\n                <ax-data-source [provideData]=\"provideDataOperator\">\n                </ax-data-source>\n            </ax-select-box>\n        </ax-form-group>\n    </ng-container>\n    <ng-template #operatorTemplate>\n        <div class=\"text\" (click)=\"handleEditClick()\">\n            {{('queryBuilder.'+rule.operator) | trans}}\n        </div>\n    </ng-template>\n</div>\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\n\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\n            <div *ngSwitchCase=\"'textBox'\">\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'selectBox'\">\n                <ax-form-group>\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [textField]=\"getOption('textField')\"\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\n                        #selectBoxValue>\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n            </div>\n\n            <div *ngSwitchCase=\"'numberBox'\">\n                <ax-form-group>\n                    <ax-number-box [decimalNumber]=\"2\" (onValueChanged)=\"valueChange($event)\"\n                        placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" [(value)]=\"rule.value\">\n                    </ax-number-box>\n                </ax-form-group>\n            </div>\n            <div *ngSwitchCase=\"'datetime'\">\n                <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event)\">\n                </ax-date-picker>\n\n            </div>\n            <div *ngSwitchCase=\"'boolean'\">\n\n                <ax-form-group>\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\n                        </ax-data-source>\n                    </ax-select-box>\n                </ax-form-group>\n\n            </div>\n            <div *ngSwitchDefault>\n                <ax-form-group>\n                    <ax-text-box (onValueChanged)=\"valueChange($event)\" placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n                        [(value)]=\"rule.value\">\n                    </ax-text-box>\n\n                </ax-form-group>\n\n            </div>\n        </div>\n\n        <div *ngIf=\"isOnDemandLabel\">\n\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\n                (onValueChanged)=\"onDemandLabelChange($event)\" placeholder=\"\u0646\u0627\u0645 \u0645\u062A\u063A\u06CC\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\">\n                <!-- <ax-validation>\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\n                </ax-validation> -->\n            </ax-text-box>\n\n\n        </div>\n\n    </ng-container>\n    <ng-template #valueTemplate>\n        <div (click)=\"handleEditClick()\">\n\n            {{rule.text}}\n\n        </div>\n    </ng-template>\n</div>\n\n<div class=\"buttons-list\">\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\n        <i class=\"far fa-dollar-sign\"></i>\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\n        </ax-check-box>\n    </div>\n\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\n        <i class=\"far fa-check\"></i>\n    </div>\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\n        <i class=\"far fa-times\"></i>\n    </div>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { selectBox: [{

package/esm2022/lib/query-builder/query-builder.component.mjs

@@ -71,10 +71,10 @@ export class AXQueryBuilderComponent extends AXBaseComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXQueryBuilderComponent, selector: "ax-query-builder", inputs: { query: "query", mode: "mode", fields: "fields" }, outputs: { onRuleChanged: "onRuleChanged" }, viewQueries: [{ propertyName: "queryGroup", first: true, predicate: ["queryGroup"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-query-group #queryGroup [mode]=\"mode\" [group]=\"rootGroup\" [fields]=\"fields\"\n    (groupRuleChanged)=\"ruleChanged($event)\">\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;padding-inline-start:0px}.ax-query-group .add-buttons{display:flex;margin:5px;flex-direction:row}.ax-query-group .add-buttons .handler{display:flex;align-items:center;background-color:var(--ax-primary-trans-light-color);color:var(--ax-primary-color);padding:5px;cursor:move;border:1px solid var(--ax-primary-trans-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .buttons-list{margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;margin-inline-end:.5em;width:2.3em;height:2.3em;display:flex;align-items:center;justify-content:center;border-radius:50px;position:relative}.ax-query-group .buttons-list .button ax-check-box{opacity:0;width:100%;height:100%;position:absolute;z-index:1;left:0;top:0}.ax-query-group .buttons-list .variable{color:var(--ax-warning-color);background:var(--ax-warning-trans-light-color)}.ax-query-group .buttons-list .variable.active-button{background:var(--ax-warning-light-color);color:var(--ax-white-color);opacity:.7}.ax-query-group .buttons-list .commit{color:var(--ax-success-color);background:var(--ax-success-trans-light-color)}.ax-query-group .buttons-list .remove{color:var(--ax-danger-color);background:var(--ax-danger-trans-light-color)}.ax-query-group .buttons-list .edit{color:var(--ax-primary-color);background:var(--ax-primary-trans-light-color)}.ax-query-group .group-item{transition:all .5s}.ax-query-group .group-item .condition{width:40px;display:flex;align-items:center;background:linear-gradient(180deg,rgba(2,0,36,0) 49%,var(--ax-gray-light-color) 49%,var(--ax-gray-light-color) 55%,rgba(0,212,255,0) 50%)}.ax-query-group .group-item .condition .text{margin-inline-start:-50%;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center}.ax-query-group .group-item .condition .text.OR{background:var(--ax-warning-color);color:var(--ax-warning-fore-color)}.ax-query-group .group-item .condition .text.AND{background:var(--ax-success-color);color:var(--ax-success-fore-color)}.ax-query-group .header{display:flex;flex-direction:row}.ax-query-group .header .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:5px;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .header .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);color:var(--ax-gray-dark-color);font-weight:700;cursor:pointer}.ax-query-group .header .detail{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .header .detail.OR{background-color:var(--ax-warning-trans-light-color)}.ax-query-group .header .detail.AND{background-color:var(--ax-success-trans-light-color)}.ax-query-group .rules{margin-inline-start:10px;border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{margin-inline-start:48px}.ax-query-group .ax-query-rule{display:flex;margin:5px;flex-direction:row;transition:all .5s}.ax-query-group .ax-query-rule .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:.5em;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .ax-query-rule .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border:1px solid var(--ax-gray-light-color);color:#333;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .caption.editable{width:200px}.ax-query-group .ax-query-rule .operator{border-top:1px solid var(--ax-gray-light-color);border-bottom:1px solid var(--ax-gray-light-color);background-color:var(--ax-gray-trans-light-color);padding:.5rem}.ax-query-group .ax-query-rule .operator.editable{width:200px}.ax-query-group .ax-query-rule .operator .text{color:var(--ax-primary-color);font-weight:700;text-decoration:underline dashed;cursor:pointer}.ax-query-group .ax-query-rule .operator.radius{border-top-left-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--ax-gray-light-color);border-right:none}.ax-query-group .ax-query-rule .value{padding:.5rem;background-color:var(--ax-light-light-color);color:#000;border:1px solid var(--ax-gray-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .value.editable{width:200px}.ax-query-group .ax-query-rule .add-rule{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .add-rule:hover,.ax-query-group .ax-query-rule .add-group:hover{background-color:var(--ax-gray-light-color)}.ax-query-group .ax-query-rule .add-group,.ax-query-group .ax-query-rule .add-condition{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;border:1px dashed var(--ax-gray-light-color);border-top-left-radius:4px;border-bottom-left-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .add-condition.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}\n"], dependencies: [{ kind: "component", type: i2.AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXQueryBuilderComponent, selector: "ax-query-builder", inputs: { query: "query", mode: "mode", fields: "fields" }, outputs: { onRuleChanged: "onRuleChanged" }, viewQueries: [{ propertyName: "queryGroup", first: true, predicate: ["queryGroup"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-query-group #queryGroup [mode]=\"mode\" [group]=\"rootGroup\" [fields]=\"fields\"\n    (groupRuleChanged)=\"ruleChanged($event)\">\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;padding-inline-start:0px}.ax-query-group .add-buttons{display:flex;margin:5px;flex-direction:row}.ax-query-group .add-buttons .handler{display:flex;align-items:center;background-color:var(--ax-primary-trans-light-color);color:var(--ax-primary-color);padding:5px;cursor:move;border:1px solid var(--ax-primary-trans-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .buttons-list{margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;margin-inline-end:.5em;width:2.3em;height:2.3em;display:flex;align-items:center;justify-content:center;border-radius:50px;position:relative}.ax-query-group .buttons-list .button ax-check-box{opacity:0;width:100%;height:100%;position:absolute;z-index:1;left:0;top:0}.ax-query-group .buttons-list .variable{color:var(--ax-warning-color);background:var(--ax-warning-trans-light-color)}.ax-query-group .buttons-list .variable.active-button{background:var(--ax-warning-light-color);color:var(--ax-white-color);opacity:.7}.ax-query-group .buttons-list .commit{color:var(--ax-success-color);background:var(--ax-success-trans-light-color)}.ax-query-group .buttons-list .remove{color:var(--ax-danger-color);background:var(--ax-danger-trans-light-color)}.ax-query-group .buttons-list .edit{color:var(--ax-primary-color);background:var(--ax-primary-trans-light-color)}.ax-query-group .group-item{transition:all .5s}.ax-query-group .group-item .condition{width:40px;display:flex;align-items:center;background:linear-gradient(180deg,rgba(2,0,36,0) 49%,var(--ax-gray-light-color) 49%,var(--ax-gray-light-color) 55%,rgba(0,212,255,0) 50%)}.ax-query-group .group-item .condition .text{margin-inline-start:-50%;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center}.ax-query-group .group-item .condition .text.OR{background:var(--ax-warning-color);color:var(--ax-warning-fore-color)}.ax-query-group .group-item .condition .text.AND{background:var(--ax-success-color);color:var(--ax-success-fore-color)}.ax-query-group .header{display:flex;flex-direction:row}.ax-query-group .header .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:5px;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .header .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);color:var(--ax-gray-dark-color);font-weight:700;cursor:pointer}.ax-query-group .header .detail{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .header .detail.OR{background-color:var(--ax-warning-trans-light-color)}.ax-query-group .header .detail.AND{background-color:var(--ax-success-trans-light-color)}.ax-query-group .rules{margin-inline-start:10px;border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{margin-inline-start:48px}.ax-query-group .ax-query-rule{display:flex;margin:5px;flex-direction:row;transition:all .5s}.ax-query-group .ax-query-rule .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:.5em;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .ax-query-rule .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border:1px solid var(--ax-gray-light-color);color:#333;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .caption.editable{width:200px}.ax-query-group .ax-query-rule .operator{border-top:1px solid var(--ax-gray-light-color);border-bottom:1px solid var(--ax-gray-light-color);background-color:var(--ax-gray-trans-light-color);padding:.5rem}.ax-query-group .ax-query-rule .operator.editable{width:200px}.ax-query-group .ax-query-rule .operator .text{color:var(--ax-primary-color);font-weight:700;text-decoration:underline dashed;cursor:pointer}.ax-query-group .ax-query-rule .operator.radius{border-top-left-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--ax-gray-light-color);border-right:none}.ax-query-group .ax-query-rule .value{padding:.5rem;background-color:var(--ax-light-light-color);color:#000;border:1px solid var(--ax-gray-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .value.editable{width:200px}.ax-query-group .ax-query-rule .add-rule{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .add-rule:hover,.ax-query-group .ax-query-rule .add-group:hover{background-color:var(--ax-gray-light-color)}.ax-query-group .ax-query-rule .add-group,.ax-query-group .ax-query-rule .add-condition{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;border:1px dashed var(--ax-gray-light-color);border-top-left-radius:4px;border-bottom-left-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .add-condition.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}\n"], dependencies: [{ kind: "component", type: i2.AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-query-builder', encapsulation: ViewEncapsulation.None, template: "<ax-query-group #queryGroup [mode]=\"mode\" [group]=\"rootGroup\" [fields]=\"fields\"\n    (groupRuleChanged)=\"ruleChanged($event)\">\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;padding-inline-start:0px}.ax-query-group .add-buttons{display:flex;margin:5px;flex-direction:row}.ax-query-group .add-buttons .handler{display:flex;align-items:center;background-color:var(--ax-primary-trans-light-color);color:var(--ax-primary-color);padding:5px;cursor:move;border:1px solid var(--ax-primary-trans-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .buttons-list{margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;margin-inline-end:.5em;width:2.3em;height:2.3em;display:flex;align-items:center;justify-content:center;border-radius:50px;position:relative}.ax-query-group .buttons-list .button ax-check-box{opacity:0;width:100%;height:100%;position:absolute;z-index:1;left:0;top:0}.ax-query-group .buttons-list .variable{color:var(--ax-warning-color);background:var(--ax-warning-trans-light-color)}.ax-query-group .buttons-list .variable.active-button{background:var(--ax-warning-light-color);color:var(--ax-white-color);opacity:.7}.ax-query-group .buttons-list .commit{color:var(--ax-success-color);background:var(--ax-success-trans-light-color)}.ax-query-group .buttons-list .remove{color:var(--ax-danger-color);background:var(--ax-danger-trans-light-color)}.ax-query-group .buttons-list .edit{color:var(--ax-primary-color);background:var(--ax-primary-trans-light-color)}.ax-query-group .group-item{transition:all .5s}.ax-query-group .group-item .condition{width:40px;display:flex;align-items:center;background:linear-gradient(180deg,rgba(2,0,36,0) 49%,var(--ax-gray-light-color) 49%,var(--ax-gray-light-color) 55%,rgba(0,212,255,0) 50%)}.ax-query-group .group-item .condition .text{margin-inline-start:-50%;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center}.ax-query-group .group-item .condition .text.OR{background:var(--ax-warning-color);color:var(--ax-warning-fore-color)}.ax-query-group .group-item .condition .text.AND{background:var(--ax-success-color);color:var(--ax-success-fore-color)}.ax-query-group .header{display:flex;flex-direction:row}.ax-query-group .header .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:5px;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .header .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);color:var(--ax-gray-dark-color);font-weight:700;cursor:pointer}.ax-query-group .header .detail{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .header .detail.OR{background-color:var(--ax-warning-trans-light-color)}.ax-query-group .header .detail.AND{background-color:var(--ax-success-trans-light-color)}.ax-query-group .rules{margin-inline-start:10px;border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{margin-inline-start:48px}.ax-query-group .ax-query-rule{display:flex;margin:5px;flex-direction:row;transition:all .5s}.ax-query-group .ax-query-rule .handler{display:flex;align-items:center;background-color:var(--ax-light-light-color);color:var(--ax-light-fore-color);padding:.5em;cursor:move;border:1px solid var(--ax-light-light-color);border-start-start-radius:4px;border-end-start-radius:4px}.ax-query-group .ax-query-rule .caption{padding:.5rem;background-color:var(--ax-gray-trans-light-color);border:1px solid var(--ax-gray-light-color);color:#333;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .caption.editable{width:200px}.ax-query-group .ax-query-rule .operator{border-top:1px solid var(--ax-gray-light-color);border-bottom:1px solid var(--ax-gray-light-color);background-color:var(--ax-gray-trans-light-color);padding:.5rem}.ax-query-group .ax-query-rule .operator.editable{width:200px}.ax-query-group .ax-query-rule .operator .text{color:var(--ax-primary-color);font-weight:700;text-decoration:underline dashed;cursor:pointer}.ax-query-group .ax-query-rule .operator.radius{border-top-left-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--ax-gray-light-color);border-right:none}.ax-query-group .ax-query-rule .value{padding:.5rem;background-color:var(--ax-light-light-color);color:#000;border:1px solid var(--ax-gray-light-color);border-right:none;border-start-end-radius:4px;border-end-end-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .value.editable{width:200px}.ax-query-group .ax-query-rule .add-rule{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;font-weight:700;cursor:pointer}.ax-query-group .ax-query-rule .add-rule:hover,.ax-query-group .ax-query-rule .add-group:hover{background-color:var(--ax-gray-light-color)}.ax-query-group .ax-query-rule .add-group,.ax-query-group .ax-query-rule .add-condition{border-top:1px dashed var(--ax-gray-light-color);border-bottom:1px dashed var(--ax-gray-light-color);color:var(--ax-gray-dark-color);padding:.5rem;border:1px dashed var(--ax-gray-light-color);border-top-left-radius:4px;border-bottom-left-radius:4px;cursor:pointer}.ax-query-group .ax-query-rule .add-condition.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.OR{background-color:var(--ax-warning-trans-light-color);color:var(--ax-warning-dark-color)}.ax-query-group .ax-query-rule .add-condition:hover.AND{background-color:var(--ax-success-trans-light-color);color:var(--ax-success-dark-color)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AXToastService }], propDecorators: { queryGroup: [{

package/esm2022/lib/query-builder/query-builder.module.mjs

@@ -34,8 +34,8 @@ const MODUELS = [
     AXDatePickerModule
 ];
 export class AXQueryBuilderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
             AXButtonModule,
             AXPanelBoxModule,
             AXSelectBoxModule,
@@ -48,9 +48,9 @@ export class AXQueryBuilderModule {
             AXCheckBoxModule,
             AXValidationModule,
             AXDatePickerModule], exports: [AXQueryBuilderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [MODUELS] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [MODUELS] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent],

package/esm2022/lib/query-builder/query-builder.service.mjs

@@ -189,10 +189,10 @@ export class AXQueryBuilderService {
         }
         return query;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderService, deps: [{ token: i1.AXPopupService }, { token: i2.AXToastService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderService, deps: [{ token: i1.AXPopupService }, { token: i2.AXToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXQueryBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXQueryBuilderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.AXPopupService }, { type: i2.AXToastService }] });

package/esm2022/lib/search-bar/search-bar.component.mjs

@@ -250,10 +250,10 @@ export class AXSearchBarComponent {
     close() {
         this.searchPopover.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\">\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i5.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBarComponent, selector: "ax-search-bar", inputs: { sizeButton: "sizeButton", size: "size", disabled: "disabled", fitParent: "fitParent", popoverWidth: "popoverWidth", rtl: "rtl", loadOnInit: "loadOnInit", caption: "caption", block: "block", items: "items" }, outputs: { onValueChange: "onValueChange", onSearchValue: "onSearchValue" }, viewQueries: [{ propertyName: "searchPopover", first: true, predicate: ["searchPop"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }, { propertyName: "_editors", predicate: AXPropertyEditorRendererDirective, descendants: true }], ngImport: i0, template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\">\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: ["property", "validationForm", "context", "host", "groupId"], outputs: ["onValueChange"] }, { kind: "component", type: i4.AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: i5.AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "rtl", "visible"], outputs: ["onOutSideClick"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-search-bar', template: "<ax-button [block]=\"block\" end icon=\"far fa-sliders-h icon\" [selected]=\"_searchCount? true:false\"\n    [type]=\" _searchCount ? 'primary':'primary outline'\" [disabled]=\"disabled\" [size]=\"sizeButton\" [tabIndex]=\"-1\"\n    (click)=\"handleButtonClick()\"> {{caption? caption:'common.search' | trans}}\n    <span *ngIf=\"_searchCount\" class=\"search-count\">{{_searchCount}}</span></ax-button>\n\n\n<ax-popover #searchPop [target]=\"ref\" [rtl]=\"rtl\"\n    [position]=\"{originX:'end',originY:'bottom',overlayX:'end',overlayY:'top',offsetY:10}\">\n    <div class=\"panel-box ax-dropdown-container-bordered {{size}}\">\n        <ax-validation-form #form>\n            <ng-container *ngFor=\"let item of _items\">\n                <div class=\"row\">\n                    <ng-container *ngFor=\"let prop of item.items\">\n                        <div *ngIf=\"prop.property.visible != false\" class=\"{{renderCol(prop.property.col)}}\">\n                            <div>\n                                <ax-label>{{prop.property.title}}</ax-label>\n                                <ng-container ax-property-editor-renderer [validationForm]=\"form\" [property]=\"prop\"\n                                    [context]=\"_context\" (onValueChange)=\"handleValueChange($event)\"></ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <div class=\"footer-button\">\n                <ax-button (click)=\"search()\">{{'common.search' | trans}}</ax-button>\n                <ax-button type=\"blank danger\" (click)=\"clear()\">{{'common.reset' | trans}}</ax-button>\n            </div>\n        </ax-validation-form>\n    </div>\n</ax-popover>", styles: [".panel-box{padding:1rem}.panel-box.ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}.panel-box .footer-button{margin-top:1rem;display:flex;align-items:center;gap:.5rem}.panel-box.sm{width:30vw}.panel-box.md{width:50vw}.panel-box.lg{width:70vw}.panel-box.full{width:80vw}@media all and (min-width: 1280px){.panel-box.sm{width:420px!important}.panel-box.md{width:680px!important}.panel-box.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md{width:500px!important}.panel-box.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.panel-box.sm{width:100vw;max-height:100vh}.panel-box.md,.panel-box.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.panel-box.sm,.panel-box.md,.panel-box.lg{width:100vw;max-height:100vh}}.search-count{background:#fff3;border-radius:50%;color:var(--ax-white-color);padding:.125rem;width:1.75rem;height:1.75rem;font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { searchPopover: [{

package/esm2022/lib/search-bar/search-bar.module.mjs

@@ -13,8 +13,8 @@ import { AXValidationModule } from '../validation/validation.module';
 import { AXSearchBarComponent } from './search-bar.component';
 import * as i0 from "@angular/core";
 export class AXSearchBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarModule, declarations: [AXSearchBarComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarModule, declarations: [AXSearchBarComponent], imports: [CommonModule,
             FormsModule,
             AXDropdownModule,
             AXButtonModule,
@@ -25,7 +25,7 @@ export class AXSearchBarModule {
             AXTranslatorModule,
             AXValidationModule,
             AXPopoverModule], exports: [AXSearchBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarModule, imports: [CommonModule,
             FormsModule,
             AXDropdownModule,
             AXButtonModule,
@@ -37,7 +37,7 @@ export class AXSearchBarModule {
             AXValidationModule,
             AXPopoverModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSearchBarComponent],

package/esm2022/lib/searchbox/searchbox.component.mjs

@@ -84,10 +84,10 @@ export class AXSearchBoxComponent extends AXBaseTextComponent {
         });
         // this.searchChangeObserver.next(this.text);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", onDemandTranslate: "onDemandTranslate", text: "text", delay: "delay" }, outputs: { textChanged: "textChanged", onButtonClick: "onButtonClick" }, host: { styleAttribute: "width: 100%" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-search-box', host: { style: 'width: 100%' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\n    <div class=\"ax items-wrapper\">\n        <ng-content select=\"[start]\">\n        </ng-content>\n        <i class=\"form-item-icon {{icon}}\" *ngIf=\"icon\"></i>\n    </div>\n    <div class=\"content\" #content>\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\n            [class.icon]=\"icon\">\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\n                (keydown)=\"handleKeyEvent($event)\">\n        </div>\n    </div>\n    <div class=\"ax items-wrapper\">\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\n        </ax-button>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { textChanged: [{

package/esm2022/lib/searchbox/searchbox.module.mjs

@@ -8,11 +8,11 @@ import { AXTranslatorModule } from '@acorex/core';
 import { FormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class AXSearchBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule], exports: [AXSearchBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxModule, imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule], exports: [AXSearchBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxModule, imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSearchBoxComponent],

package/esm2022/lib/selectbox/selectbox.component.mjs

@@ -1027,12 +1027,12 @@ export class AXSelectBoxComponent extends AXValidatableComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", fitParent: "fitParent", dropdownWidth: "dropdownWidth", multiLine: "multiLine", onDemandTranslate: "onDemandTranslate", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { showDropDownButton: "showDropDownButton", rowInputTemplate: "rowInputTemplate", showCheckBox: "showCheckBox", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", fitParent: "fitParent", dropdownWidth: "dropdownWidth", multiLine: "multiLine", onDemandTranslate: "onDemandTranslate", dataSource: "dataSource", validation: "validation", disabledCallback: "disabledCallback", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", disabledField: "disabledField", mode: "mode", items: "items", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { dropdownToggle: "dropdownToggle", itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", selectionChanged: "selectionChanged", selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, host: { styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },
         ], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "serchBox", first: true, predicate: ["serchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down\n  #d\n  [size]=\"size\"\n  [fitParent]=\"fitParent\"\n  [dropdownWidth]=\"dropdownWidth\"\n  [rtl]=\"rtl\"\n  [showDropDownButton]=\"showDropDownButton\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  (dropdownToggle)=\"dropdownToggleSelecBox($event)\"\n>\n  <ng-container start>\n    <ng-content select=\"[start]\"> </ng-content>\n  </ng-container>\n  <ng-container header>\n    <div\n      class=\"ax chips-container\"\n      [class.multiline]=\"multiLine\"\n      [style.padding]=\"selectedItems.length && multiLine ? '0.25rem' : ''\"\n    >\n      <div\n        class=\"chips\"\n        [class.chips-blank]=\"mode === 'single'\"\n        [title]=\"item[textField]\"\n        *ngFor=\"let item of selectedItems\"\n      >\n        <span\n          class=\"chips-text\"\n          [ngStyle]=\"{\n            width:\n              item[textField].length > 15 &&\n              this.mode === 'multiple' &&\n              !multiLine\n                ? '110px'\n                : 'auto'\n          }\"\n        >\n          {{ item[textField] }}\n        </span>\n        <span\n          class=\"close-icon\"\n          (click)=\"handleItemRemoveClick(item)\"\n          *ngIf=\"\n            (readonly != true || itemRemove == true) &&\n            disabled != true &&\n            (allowNull == true || selectedItems.length > 1)\n          \"\n        >\n          <i class=\"far fa-times close\"></i>\n        </span>\n      </div>\n      <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n        <ax-text-box\n          #textBoxSelectBox\n          [textAlign]=\"textAlign\"\n          [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\"\n          [readonly]=\"readonly\"\n          [disabled]=\"disabled\"\n          (onkey)=\"handleKeyEvent($event)\"\n          [size]=\"size\"\n          (onFocus)=\"onFocusTextBox($event)\"\n        >\n        </ax-text-box>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container end>\n    <ng-content select=\"[end]\"> </ng-content>\n  </ng-container>\n\n  <ng-container panel>\n    <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em\">\n      <ax-search-box\n        #serchBox\n        [onDemandTranslate]=\"onDemandTranslate\"\n        [(value)]=\"text\"\n        (onkey)=\"handleKeyEventSearch($event)\"\n        (textChanged)=\"textChanged($event)\"\n        (onButtonClick)=\"textChanged($event)\"\n      >\n      </ax-search-box>\n    </div>\n    <div class=\"ax list-container\">\n      <div\n        #listContainer\n        class=\"list-container-items\"\n        (scroll)=\"scrolled($event)\"\n      >\n        <ng-container\n          *ngIf=\"getItems().length > 0; then thenTemplate; else elseTemplate\"\n        ></ng-container>\n        <ng-template #thenTemplate>\n          <div\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            class=\"list-item\"\n            *ngFor=\"let item of getItems(); let i = index\"\n            [class.focused]=\"i == currentfocusedIndex\"\n            [class.selected]=\"isItemSelected(item)\"\n            (click)=\"handleItemClick($event, item)\"\n          >\n            <div style=\"display: flex\">\n              <ax-check-box\n                *ngIf=\"showCheckBox\"\n                [size]=\"size\"\n                [value]=\"isItemSelected(item)\"\n                [disabled]=\"\n                  (!allowNull &&\n                    selectedItems.length === 1 &&\n                    isItemSelected(item)) ||\n                  isItemDisabled(item)\n                \"\n                (onClick)=\"handleItemClick($event, item)\"\n              >\n              </ax-check-box>\n              <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      rowTemplate;\n                      context: { $implicit: item }\n                    \"\n                  >\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #elseTemplate>\n                <div\n                  style=\"\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n                    overflow: hidden;\n                    flex: 1;\n                  \"\n                  [title]=\"item[textField]\"\n                  [ngStyle]=\"\n                    showCheckBox ? { 'padding-inline-start': '0.5rem' } : ''\n                  \"\n                >\n                  {{ item[textField] }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-template>\n        <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center\">\n          <i\n            class=\"far fa-spinner-third fa-pulse fa-2x\"\n            style=\"color: var(--ax-primary-color)\"\n          ></i>\n        </div>\n        <!-- <ax-loading-indicator ></ax-loading-indicator> -->\n        <ng-template #elseTemplate>\n          <ng-container\n            *ngIf=\"\n              showLoading == true;\n              then searchTemplate;\n              else noDataTemplate\n            \"\n          ></ng-container>\n          <ng-template #searchTemplate>\n            <div class=\"list-item\">\n              {{ 'common.search' | trans }}\n            </div>\n          </ng-template>\n          <ng-template #noDataTemplate>\n            <div class=\"list-item\">\n              {{ 'common.noDataFound' | trans }}\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n</ax-drop-down>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXSelectBoxComponent },

package/esm2022/lib/selectbox/selectbox.module.mjs

@@ -21,8 +21,8 @@ const MODULES = [
     AXSearchBoxModule,
 ];
 export class AXSelectBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
             AXDropdownModule,
             AXTextBoxModule,
             AXTranslatorModule,
@@ -30,9 +30,9 @@ export class AXSelectBoxModule {
             AXCheckBoxModule,
             AXLoadingModule,
             AXSearchBoxModule], exports: [AXSelectBoxComponent, AXSelectBox2Component] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxModule, imports: [MODULES] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxModule, imports: [MODULES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/esm2022/lib/selectbox/selectbox2.component.mjs

@@ -528,12 +528,12 @@ export class AXSelectBox2Component extends AXValidatableComponent {
         this.selectItems(this.getItems()[index]);
         this.currentfocusedIndex = index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.7", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { showDropDownButton: "showDropDownButton", readonly: "readonly", rtl: "rtl", disabled: "disabled", placeholder: "placeholder", size: "size", allowNull: "allowNull", textAlign: "textAlign", bufferSize: "bufferSize", remoteOperation: "remoteOperation", allowSearch: "allowSearch", textField: "textField", valueField: "valueField", selectionMode: "selectionMode", selectionDataMode: "selectionDataMode", dataSource: "dataSource", validation: "validation", value: "value", items: "items" }, outputs: { itemsChange: "itemsChange", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "document:keydown": "handleKeyDown($event)" }, styleAttribute: "width: 100%" }, providers: [
             { provide: AXValidatableComponent, useExisting: AXSelectBox2Component },
         ], queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "span", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "textBoxSelectBox", first: true, predicate: ["textBoxSelectBox"], descendants: true, static: true }, { propertyName: "dropdown", first: true, predicate: ["d"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\n    <ng-container start>\n        <ng-content select=\"[start]\">\n        </ng-content>\n    </ng-container>\n    <ng-container header>\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\n                [title]=\"item[textField]\">\n                <span class=\"chips-text\">\n                    {{item[textField]}}\n                </span>\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\n                    <i class=\"far fa-times close\"></i>\n                </span>\n            </div>\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\n                    [disabled]=\"disabled\"  [size]=\"size\">\n                </ax-text-box>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container end>\n        <ng-content select=\"[end]\">\n        </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\n            </ax-search-box>\n        </div>\n        <div class=\"ax list-container\">\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\n                <ng-template #thenTemplate>\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\n                        [class.selected]=\"isItemSelected(item)\">\n                        <div>\n                            <div>\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\n                                    (onClick)=\"handleItemClick($event,item)\">\n                                </ax-check-box>\n                            </div>\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\n                                [title]=\"item[textField]\"\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\n                                {{ item[textField] }}\n                            </div>\n                        </div>\n                    </div>\n                </ng-template>\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\n                </div>\n                <ng-template #elseTemplate>\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\n                    <ng-template #searchTemplate>\n                        <div class=\"list-item\">\n                            {{'common.searching' | trans}}\n                        </div>\n                    </ng-template>\n                    <ng-template #noDataTemplate>\n                        <div class=\"list-item\">\n                            {{'common.noDataFound' | trans}}\n                        </div>\n                    </ng-template>\n                </ng-template>\n            </div>\n        </div>\n    </ng-container>\n</ax-drop-down>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading", "dropdownWidth"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "directive", type: i4.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { kind: "component", type: i5.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "onDemandTranslate", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AXSelectBox2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: AXSelectBox2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box2', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [
                         { provide: AXValidatableComponent, useExisting: AXSelectBox2Component },