@acorex/components 4.1.0 → 4.1.3

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

@@ -5,13 +5,13 @@ import { AXSelectBoxComponent } from '../selectbox/selectbox.component';
 import { AXTextBoxComponent } from '../textbox/textbox.component';
 import { AXValidationFormComponent } from '../validation/validation-form.component';
 import * as i0 from "@angular/core";
-import * as i1 from "../form-group/form-group.component";
+import * as i1 from "@angular/common";
 import * as i2 from "../selectbox/selectbox.component";
 import * as i3 from "../data-source/datasource.component";
 import * as i4 from "../textbox/textbox.component";
 import * as i5 from "../number-box/number-box.component";
-import * as i6 from "../checkbox/checkbox.component";
-import * as i7 from "@angular/common";
+import * as i6 from "../form-group/form-group.component";
+import * as i7 from "../checkbox/checkbox.component";
 import * as i8 from "@acorex/core";
 export class AXQueryBuilderRuleComponent {
     constructor() {
@@ -319,9 +319,9 @@ export class AXQueryBuilderRuleComponent {
         return this.rule.control.options ? this.rule.control.options[name] : null;
     }
 }
-AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\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')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\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\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>", components: [{ type: i1.AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: i2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { type: i3.AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: i4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: i5.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: i6.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i8.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
+AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\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')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\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\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\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", "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", "type", "showMask", "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", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", 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\">\r\n    <div class=\"text {{parent.condition}}\">\r\n        <span>{{parent.condition}}</span>\r\n    </div>\r\n</div>\r\n<div class=\"handler\">\r\n    <i class=\"far fa-grip-lines-vertical\"></i>\r\n</div>\r\n\r\n<div class=\"caption\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else fieldsTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" (selectionChanged)=\"captionChange($event)\" allowNull=\"false\"\r\n                [(selectedItems)]=\"rule.dataFieldItem\" textField=\"caption\" valueField=\"dataField\" [items]=\"fields\"\r\n                mode=\"single\">\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #fieldsTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n            {{rule.caption}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"operator\" [ngClass]=\"{'editable': isEditing,'radius':!showValue}\">\r\n    <ng-container *ngIf=\"isEditing;else operatorTemplate\">\r\n        <ax-form-group>\r\n            <ax-select-box [readonly]=\"mode == 'edit'\" *ngIf=\"showOperatorSelectBox\" [(selectedValues)]=\"rule.operator\"\r\n                #selectBox (selectedItemsChange)=\"operatorChange($event)\" allowNull=\"false\" mode=\"single\">\r\n                <ax-data-source [provideData]=\"provideDataOperator\">\r\n                </ax-data-source>\r\n            </ax-select-box>\r\n        </ax-form-group>\r\n    </ng-container>\r\n    <ng-template #operatorTemplate>\r\n        <div class=\"text\" (click)=\"handleEditClick()\">\r\n            {{('queryBuilder.'+rule.operator) | trans}}\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<div *ngIf=\"showValue\" class=\"value\" [ngClass]=\"{'editable': isEditing}\">\r\n    <ng-container *ngIf=\"isEditing;else valueTemplate\">\r\n\r\n        <div *ngIf=\" rule.control && !isOnDemandLabel\" [ngSwitch]=\"rule.control.type\">\r\n            <div *ngSwitchCase=\"'textBox'\">\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'selectBox'\">\r\n                <ax-form-group>\r\n                    <ax-select-box *ngIf=\"showSelectBox\" [mode]=\"getOption('mode')\"\r\n                        [remoteOperation]=\"getOption('remoteOperation')\" [valueField]=\"getOption('valueField')\"\r\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')\"\r\n                        [(selectedItems)]=\"rule.valueItem\" (selectedItemsChange)=\"selectedItemsChange($event)\"\r\n                        #selectBoxValue>\r\n                        <ax-data-source [provideData]=\"getProvideData\"></ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n            </div>\r\n\r\n            <div *ngSwitchCase=\"'numberBox'\">\r\n                <ax-form-group>\r\n                    <ax-number-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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-number-box>\r\n                </ax-form-group>\r\n            </div>\r\n            <div *ngSwitchCase=\"'datePicker'\">\r\n\r\n\r\n            </div>\r\n            <div *ngSwitchCase=\"'boolean'\">\r\n\r\n                <ax-form-group>\r\n                    <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event)\"\r\n                        allowNull=\"false\" [selectedValues]=\"rule.value\" mode=\"single\">\r\n                        <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                        </ax-data-source>\r\n                    </ax-select-box>\r\n                </ax-form-group>\r\n\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n                <ax-form-group>\r\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\"\r\n                        [(value)]=\"rule.value\">\r\n                    </ax-text-box>\r\n\r\n                </ax-form-group>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"isOnDemandLabel\">\r\n\r\n            <ax-text-box #textBoxNameValue [value]=\"getOnDemandName(rule.onDemandLabel)\"\r\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\">\r\n                <!-- <ax-validation>\r\n                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                </ax-validation> -->\r\n            </ax-text-box>\r\n\r\n\r\n        </div>\r\n\r\n    </ng-container>\r\n    <ng-template #valueTemplate>\r\n        <div (click)=\"handleEditClick()\">\r\n\r\n            {{rule.text}}\r\n\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"buttons-list\">\r\n    <div *ngIf=\"showValue && isEditing && mode == 'new'\" class=\"button variable\"\r\n        [ngClass]=\"{'active-button': isOnDemandLabel}\">\r\n        <i class=\"far fa-dollar-sign\"></i>\r\n        <ax-check-box [value]=\"isOnDemandLabel\" (onClick)=\"onDemandLabel($event)\">\r\n        </ax-check-box>\r\n    </div>\r\n\r\n    <div class=\"button commit\" (click)=\"handleCommitClick()\" *ngIf=\"isEditing\">\r\n        <i class=\"far fa-check\"></i>\r\n    </div>\r\n    <div class=\"button remove\" (click)=\"handleRemoveClick()\" *ngIf=\"mode == 'new'\">\r\n        <i class=\"far fa-times\"></i>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { selectBox: [{

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

@@ -62,9 +62,9 @@ export class AXQueryBuilderComponent extends AXBaseComponent {
         }
     }
 }
-AXQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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\"\r\n    (groupRuleChanged)=\"ruleChanged($event)\">\r\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;-webkit-padding-start:0px;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{-webkit-margin-start:10px;margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;-webkit-margin-end:.5em;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{-webkit-margin-start:-50%;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{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-border-start:2px solid var(--ax-gray-light-color);border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{-webkit-margin-start:48px;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;-webkit-text-decoration:underline dashed;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"], components: [{ 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: "13.3.8", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
+AXQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: i1.AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\"\r\n    (groupRuleChanged)=\"ruleChanged($event)\">\r\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;-webkit-padding-start:0px;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{-webkit-margin-start:10px;margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;-webkit-margin-end:.5em;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{-webkit-margin-start:-50%;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{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-border-start:2px solid var(--ax-gray-light-color);border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{-webkit-margin-start:48px;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;-webkit-text-decoration:underline dashed;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: "14.0.0", 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\"\r\n    (groupRuleChanged)=\"ruleChanged($event)\">\r\n</ax-query-group>", styles: [".ax-query-group{display:flex;flex-direction:column;margin:5px;-webkit-padding-start:0px;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{-webkit-margin-start:10px;margin-inline-start:10px;display:flex;align-items:center}.ax-query-group .buttons-list .button{cursor:pointer;-webkit-margin-end:.5em;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{-webkit-margin-start:-50%;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{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-border-start:2px solid var(--ax-gray-light-color);border-inline-start:2px solid var(--ax-gray-light-color)}.ax-query-group .rules .rules{-webkit-margin-start:48px;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;-webkit-text-decoration:underline dashed;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: function () { return [{ type: i0.ElementRef }, { type: i1.AXToastService }]; }, propDecorators: { queryGroup: [{

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

@@ -33,8 +33,8 @@ const MODUELS = [
 ];
 export class AXQueryBuilderModule {
 }
-AXQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
+AXQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
         AXButtonModule,
         AXPanelBoxModule,
         AXSelectBoxModule,
@@ -46,8 +46,8 @@ AXQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         AXLabelModule,
         AXCheckBoxModule,
         AXValidationModule], exports: [AXQueryBuilderComponent] });
-AXQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [[MODUELS]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
+AXQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [MODUELS] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent],
@@ -56,4 +56,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     providers: [AXQueryBuilderService]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnktYnVpbGRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9zcmMvbGliL3F1ZXJ5LWJ1aWxkZXIvcXVlcnktYnVpbGRlci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUMvRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDbkcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOztBQUVoRSxNQUFNLE9BQU8sR0FBRztJQUNaLFlBQVk7SUFDWixjQUFjO0lBQ2QsZ0JBQWdCO0lBQ2hCLGlCQUFpQjtJQUNqQixrQkFBa0I7SUFDbEIsZUFBZTtJQUNmLGlCQUFpQjtJQUNqQixpQkFBaUI7SUFDakIsa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYixnQkFBZ0I7SUFDaEIsa0JBQWtCO0NBQ3JCLENBQUE7QUFTRCxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO2tIQUFwQixvQkFBb0IsaUJBTmQsdUJBQXVCLEVBQUUsNEJBQTRCLEVBQUUsMkJBQTJCLEVBQUUsNEJBQTRCLGFBZi9ILFlBQVk7UUFDWixjQUFjO1FBQ2QsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixrQkFBa0I7UUFDbEIsZUFBZTtRQUNmLGlCQUFpQjtRQUNqQixpQkFBaUI7UUFDakIsa0JBQWtCO1FBQ2xCLGFBQWE7UUFDYixnQkFBZ0I7UUFDaEIsa0JBQWtCLGFBTVIsdUJBQXVCO2tIQUl4QixvQkFBb0IsYUFIbEIsQ0FBQyxxQkFBcUIsQ0FBQyxZQUZ6QixDQUFDLE9BQU8sQ0FBQzsyRkFLVCxvQkFBb0I7a0JBUGhDLFFBQVE7bUJBQUM7b0JBQ04sWUFBWSxFQUFFLENBQUMsdUJBQXVCLEVBQUUsNEJBQTRCLEVBQUUsMkJBQTJCLEVBQUUsNEJBQTRCLENBQUM7b0JBQ2hJLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQztvQkFDbEIsT0FBTyxFQUFFLENBQUMsdUJBQXVCLENBQUM7b0JBQ2xDLFNBQVMsRUFBRSxDQUFDLHFCQUFxQixDQUFDO2lCQUNyQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEFYUXVlcnlCdWlsZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9xdWVyeS1idWlsZGVyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IEFYQnV0dG9uTW9kdWxlIH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5tb2R1bGUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBBWFBhbmVsQm94TW9kdWxlIH0gZnJvbSAnLi4vcGFuZWwtYm94L3BhbmVsLWJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFNlbGVjdEJveE1vZHVsZSB9IGZyb20gJy4uL3NlbGVjdGJveC9zZWxlY3Rib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhUZXh0Qm94TW9kdWxlIH0gZnJvbSAnLi4vdGV4dGJveC90ZXh0Ym94Lm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYUXVlcnlCdWlsZGVyUnVsZUNvbXBvbmVudCB9IGZyb20gJy4vcXVlcnktYnVpbGRlci1ydWxlLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IEFYUXVlcnlCdWlsZGVyR3JvdXBDb21wb25lbnQgfSBmcm9tICcuL3F1ZXJ5LWJ1aWxkZXItZ3JvdXAuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhUcmFuc2xhdG9yTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb3JlJztcclxuaW1wb3J0IHsgQVhOdW1iZXJCb3hNb2R1bGUgfSBmcm9tICcuLi9udW1iZXItYm94L251bWJlci1ib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhEYXRhU291cmNlTW9kdWxlIH0gZnJvbSAnLi4vZGF0YS1zb3VyY2UvZGF0YXNvdXJjZS5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWEZvcm1Hcm91cE1vZHVsZSB9IGZyb20gJy4uL2Zvcm0tZ3JvdXAvZm9ybS1ncm91cC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFF1ZXJ5QnVpbGRlclBvcHVwQ29tcG9uZW50IH0gZnJvbSAnLi9xdWVyeS1idWlsZGVyLXBvcHVwL3F1ZXJ5LWJ1aWxkZXItcG9wdXAuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhMYWJlbE1vZHVsZSB9IGZyb20gJy4uL2xhYmVsL2xhYmVsLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYQ2hlY2tCb3hNb2R1bGUgfSBmcm9tICcuLi9jaGVja2JveC9jaGVja2JveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFZhbGlkYXRpb25Nb2R1bGUgfSBmcm9tICcuLi92YWxpZGF0aW9uL3ZhbGlkYXRpb24ubW9kdWxlJztcclxuaW1wb3J0IHsgQVhRdWVyeUJ1aWxkZXJTZXJ2aWNlIH0gZnJvbSAnLi9xdWVyeS1idWlsZGVyLnNlcnZpY2UnO1xyXG5cclxuY29uc3QgTU9EVUVMUyA9IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEFYQnV0dG9uTW9kdWxlLFxyXG4gICAgQVhQYW5lbEJveE1vZHVsZSxcclxuICAgIEFYU2VsZWN0Qm94TW9kdWxlLFxyXG4gICAgQVhEYXRhU291cmNlTW9kdWxlLFxyXG4gICAgQVhUZXh0Qm94TW9kdWxlLFxyXG4gICAgQVhOdW1iZXJCb3hNb2R1bGUsXHJcbiAgICBBWEZvcm1Hcm91cE1vZHVsZSxcclxuICAgIEFYVHJhbnNsYXRvck1vZHVsZSxcclxuICAgIEFYTGFiZWxNb2R1bGUsXHJcbiAgICBBWENoZWNrQm94TW9kdWxlLFxyXG4gICAgQVhWYWxpZGF0aW9uTW9kdWxlXHJcbl1cclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgICBkZWNsYXJhdGlvbnM6IFtBWFF1ZXJ5QnVpbGRlckNvbXBvbmVudCwgQVhRdWVyeUJ1aWxkZXJHcm91cENvbXBvbmVudCwgQVhRdWVyeUJ1aWxkZXJSdWxlQ29tcG9uZW50LCBBWFF1ZXJ5QnVpbGRlclBvcHVwQ29tcG9uZW50XSxcclxuICAgIGltcG9ydHM6IFtNT0RVRUxTXSxcclxuICAgIGV4cG9ydHM6IFtBWFF1ZXJ5QnVpbGRlckNvbXBvbmVudF0sXHJcbiAgICBwcm92aWRlcnM6IFtBWFF1ZXJ5QnVpbGRlclNlcnZpY2VdXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgQVhRdWVyeUJ1aWxkZXJNb2R1bGUgeyB9Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnktYnVpbGRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9zcmMvbGliL3F1ZXJ5LWJ1aWxkZXIvcXVlcnktYnVpbGRlci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2pFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM3RSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUMvRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0scURBQXFELENBQUM7QUFDbkcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOztBQUVoRSxNQUFNLE9BQU8sR0FBRztJQUNaLFlBQVk7SUFDWixjQUFjO0lBQ2QsZ0JBQWdCO0lBQ2hCLGlCQUFpQjtJQUNqQixrQkFBa0I7SUFDbEIsZUFBZTtJQUNmLGlCQUFpQjtJQUNqQixpQkFBaUI7SUFDakIsa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYixnQkFBZ0I7SUFDaEIsa0JBQWtCO0NBQ3JCLENBQUE7QUFTRCxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO2tIQUFwQixvQkFBb0IsaUJBTmQsdUJBQXVCLEVBQUUsNEJBQTRCLEVBQUUsMkJBQTJCLEVBQUUsNEJBQTRCLGFBZi9ILFlBQVk7UUFDWixjQUFjO1FBQ2QsZ0JBQWdCO1FBQ2hCLGlCQUFpQjtRQUNqQixrQkFBa0I7UUFDbEIsZUFBZTtRQUNmLGlCQUFpQjtRQUNqQixpQkFBaUI7UUFDakIsa0JBQWtCO1FBQ2xCLGFBQWE7UUFDYixnQkFBZ0I7UUFDaEIsa0JBQWtCLGFBTVIsdUJBQXVCO2tIQUl4QixvQkFBb0IsYUFIbEIsQ0FBQyxxQkFBcUIsQ0FBQyxZQUZ4QixPQUFPOzJGQUtSLG9CQUFvQjtrQkFQaEMsUUFBUTttQkFBQztvQkFDTixZQUFZLEVBQUUsQ0FBQyx1QkFBdUIsRUFBRSw0QkFBNEIsRUFBRSwyQkFBMkIsRUFBRSw0QkFBNEIsQ0FBQztvQkFDaEksT0FBTyxFQUFFLENBQUMsT0FBTyxDQUFDO29CQUNsQixPQUFPLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQztvQkFDbEMsU0FBUyxFQUFFLENBQUMscUJBQXFCLENBQUM7aUJBQ3JDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQVhRdWVyeUJ1aWxkZXJDb21wb25lbnQgfSBmcm9tICcuL3F1ZXJ5LWJ1aWxkZXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhCdXR0b25Nb2R1bGUgfSBmcm9tICcuLi9idXR0b24vYnV0dG9uLm1vZHVsZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEFYUGFuZWxCb3hNb2R1bGUgfSBmcm9tICcuLi9wYW5lbC1ib3gvcGFuZWwtYm94Lm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYU2VsZWN0Qm94TW9kdWxlIH0gZnJvbSAnLi4vc2VsZWN0Ym94L3NlbGVjdGJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFRleHRCb3hNb2R1bGUgfSBmcm9tICcuLi90ZXh0Ym94L3RleHRib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhRdWVyeUJ1aWxkZXJSdWxlQ29tcG9uZW50IH0gZnJvbSAnLi9xdWVyeS1idWlsZGVyLXJ1bGUuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhRdWVyeUJ1aWxkZXJHcm91cENvbXBvbmVudCB9IGZyb20gJy4vcXVlcnktYnVpbGRlci1ncm91cC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBBWFRyYW5zbGF0b3JNb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvcmUnO1xyXG5pbXBvcnQgeyBBWE51bWJlckJveE1vZHVsZSB9IGZyb20gJy4uL251bWJlci1ib3gvbnVtYmVyLWJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWERhdGFTb3VyY2VNb2R1bGUgfSBmcm9tICcuLi9kYXRhLXNvdXJjZS9kYXRhc291cmNlLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYRm9ybUdyb3VwTW9kdWxlIH0gZnJvbSAnLi4vZm9ybS1ncm91cC9mb3JtLWdyb3VwLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYUXVlcnlCdWlsZGVyUG9wdXBDb21wb25lbnQgfSBmcm9tICcuL3F1ZXJ5LWJ1aWxkZXItcG9wdXAvcXVlcnktYnVpbGRlci1wb3B1cC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBBWExhYmVsTW9kdWxlIH0gZnJvbSAnLi4vbGFiZWwvbGFiZWwubW9kdWxlJztcclxuaW1wb3J0IHsgQVhDaGVja0JveE1vZHVsZSB9IGZyb20gJy4uL2NoZWNrYm94L2NoZWNrYm94Lm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYVmFsaWRhdGlvbk1vZHVsZSB9IGZyb20gJy4uL3ZhbGlkYXRpb24vdmFsaWRhdGlvbi5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFF1ZXJ5QnVpbGRlclNlcnZpY2UgfSBmcm9tICcuL3F1ZXJ5LWJ1aWxkZXIuc2VydmljZSc7XHJcblxyXG5jb25zdCBNT0RVRUxTID0gW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgQVhCdXR0b25Nb2R1bGUsXHJcbiAgICBBWFBhbmVsQm94TW9kdWxlLFxyXG4gICAgQVhTZWxlY3RCb3hNb2R1bGUsXHJcbiAgICBBWERhdGFTb3VyY2VNb2R1bGUsXHJcbiAgICBBWFRleHRCb3hNb2R1bGUsXHJcbiAgICBBWE51bWJlckJveE1vZHVsZSxcclxuICAgIEFYRm9ybUdyb3VwTW9kdWxlLFxyXG4gICAgQVhUcmFuc2xhdG9yTW9kdWxlLFxyXG4gICAgQVhMYWJlbE1vZHVsZSxcclxuICAgIEFYQ2hlY2tCb3hNb2R1bGUsXHJcbiAgICBBWFZhbGlkYXRpb25Nb2R1bGVcclxuXVxyXG5cclxuQE5nTW9kdWxlKHtcclxuICAgIGRlY2xhcmF0aW9uczogW0FYUXVlcnlCdWlsZGVyQ29tcG9uZW50LCBBWFF1ZXJ5QnVpbGRlckdyb3VwQ29tcG9uZW50LCBBWFF1ZXJ5QnVpbGRlclJ1bGVDb21wb25lbnQsIEFYUXVlcnlCdWlsZGVyUG9wdXBDb21wb25lbnRdLFxyXG4gICAgaW1wb3J0czogW01PRFVFTFNdLFxyXG4gICAgZXhwb3J0czogW0FYUXVlcnlCdWlsZGVyQ29tcG9uZW50XSxcclxuICAgIHByb3ZpZGVyczogW0FYUXVlcnlCdWlsZGVyU2VydmljZV1cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBBWFF1ZXJ5QnVpbGRlck1vZHVsZSB7IH0iXX0=

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

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

package/esm2020/lib/searchbox/searchbox.component.mjs

@@ -3,9 +3,9 @@ import { Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { AXBaseTextComponent } from '../base/element.class';
 import * as i0 from "@angular/core";
-import * as i1 from "../button/button.component";
-import * as i2 from "@angular/forms";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../button/button.component";
+import * as i3 from "@angular/forms";
 export class AXSearchBoxComponent extends AXBaseTextComponent {
     constructor(cdr, ref) {
         super(cdr, ref);
@@ -60,9 +60,9 @@ export class AXSearchBoxComponent extends AXBaseTextComponent {
         // this.searchChangeObserver.next(this.text);
     }
 }
-AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", 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\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\r\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\r\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\r\n                (keydown)=\"handleKeyEvent($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>", components: [{ type: i1.AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", 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\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\r\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\r\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\r\n                (keydown)=\"handleKeyEvent($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\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: "14.0.0", 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\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [(ngModel)]=\"value\"\r\n                (input)=\"onSearchChanged($event.target.value)\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\"\r\n                (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\" (keyup)=\"handleKeyEvent($event)\"\r\n                (keydown)=\"handleKeyEvent($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button [size]=\"size\" *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button [size]=\"size\" type=\"light blank\" icon=\"far fa-search\" end (click)=\"click($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { textChanged: [{

package/esm2020/lib/searchbox/searchbox.module.mjs

@@ -9,10 +9,10 @@ import { FormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class AXSearchBoxModule {
 }
-AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule], exports: [AXSearchBoxComponent] });
-AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule], exports: [AXSearchBoxComponent] });
+AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSearchBoxComponent],
@@ -21,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     providers: []
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYm94Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL3NyYy9saWIvc2VhcmNoYm94L3NlYXJjaGJveC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVM3QyxNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBTGIsb0JBQW9CLGFBQ3pCLFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFdBQVcsYUFDakcsb0JBQW9COytHQUduQixpQkFBaUIsYUFGakIsRUFBRSxZQUZKLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsV0FBVyxDQUFDOzJGQUlqRyxpQkFBaUI7a0JBTjdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLENBQUM7b0JBQ3BDLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFdBQVcsQ0FBQztvQkFDNUcsT0FBTyxFQUFFLENBQUMsb0JBQW9CLENBQUM7b0JBQy9CLFNBQVMsRUFBRSxFQUFFO2lCQUNkIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQVhTZWFyY2hCb3hDb21wb25lbnQgfSBmcm9tICcuL3NlYXJjaGJveC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBBWFRleHRCb3hNb2R1bGUgfSBmcm9tICcuLi90ZXh0Ym94L3RleHRib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhCdXR0b25Nb2R1bGUgfSBmcm9tICcuLi9idXR0b24vYnV0dG9uLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYRm9ybUdyb3VwTW9kdWxlIH0gZnJvbSAnLi4vZm9ybS1ncm91cC9mb3JtLWdyb3VwLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYVHJhbnNsYXRvck1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29yZSc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbQVhTZWFyY2hCb3hDb21wb25lbnRdLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEFYVGV4dEJveE1vZHVsZSwgQVhCdXR0b25Nb2R1bGUsIEFYRm9ybUdyb3VwTW9kdWxlLCBBWFRyYW5zbGF0b3JNb2R1bGUsIEZvcm1zTW9kdWxlXSxcclxuICBleHBvcnRzOiBbQVhTZWFyY2hCb3hDb21wb25lbnRdLFxyXG4gIHByb3ZpZGVyczogW11cclxufSlcclxuZXhwb3J0IGNsYXNzIEFYU2VhcmNoQm94TW9kdWxlIHsgfVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoYm94Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL3NyYy9saWIvc2VhcmNoYm94L3NlYXJjaGJveC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVM3QyxNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBTGIsb0JBQW9CLGFBQ3pCLFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFdBQVcsYUFDakcsb0JBQW9COytHQUduQixpQkFBaUIsYUFGakIsRUFBRSxZQUZILFlBQVksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLFdBQVc7MkZBSWhHLGlCQUFpQjtrQkFON0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztvQkFDcEMsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsV0FBVyxDQUFDO29CQUM1RyxPQUFPLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztvQkFDL0IsU0FBUyxFQUFFLEVBQUU7aUJBQ2QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBBWFNlYXJjaEJveENvbXBvbmVudCB9IGZyb20gJy4vc2VhcmNoYm94LmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IEFYVGV4dEJveE1vZHVsZSB9IGZyb20gJy4uL3RleHRib3gvdGV4dGJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWEJ1dHRvbk1vZHVsZSB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24ubW9kdWxlJztcclxuaW1wb3J0IHsgQVhGb3JtR3JvdXBNb2R1bGUgfSBmcm9tICcuLi9mb3JtLWdyb3VwL2Zvcm0tZ3JvdXAubW9kdWxlJztcclxuaW1wb3J0IHsgQVhUcmFuc2xhdG9yTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb3JlJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5cclxuQE5nTW9kdWxlKHtcclxuICBkZWNsYXJhdGlvbnM6IFtBWFNlYXJjaEJveENvbXBvbmVudF0sXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQVhUZXh0Qm94TW9kdWxlLCBBWEJ1dHRvbk1vZHVsZSwgQVhGb3JtR3JvdXBNb2R1bGUsIEFYVHJhbnNsYXRvck1vZHVsZSwgRm9ybXNNb2R1bGVdLFxyXG4gIGV4cG9ydHM6IFtBWFNlYXJjaEJveENvbXBvbmVudF0sXHJcbiAgcHJvdmlkZXJzOiBbXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQVhTZWFyY2hCb3hNb2R1bGUgeyB9XHJcbiJdfQ==

package/esm2020/lib/selectbox/selectbox.component.mjs

@@ -11,12 +11,12 @@ import { AXSearchBoxComponent } from '../searchbox/searchbox.component';
 import { AXConfig } from '@acorex/core';
 import { differenceBy } from 'lodash';
 import * as i0 from "@angular/core";
-import * as i1 from "../dropdown/dropdown.component";
-import * as i2 from "../textbox/textbox.component";
-import * as i3 from "../searchbox/searchbox.component";
-import * as i4 from "../checkbox/checkbox.component";
-import * as i5 from "@acorex/core";
-import * as i6 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../dropdown/dropdown.component";
+import * as i3 from "../textbox/textbox.component";
+import * as i4 from "@acorex/core";
+import * as i5 from "../checkbox/checkbox.component";
+import * as i6 from "../searchbox/searchbox.component";
 export class AXSelectBoxSelectionChangedEvent extends AXBaseEvent {
     constructor(component, selectedItems, selectedValues) {
         super();
@@ -860,9 +860,9 @@ export class AXSelectBoxComponent extends AXValidatableComponent {
         }
     }
 }
-AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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", 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", components: [{ type: i1.AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: i3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i5.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i5.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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", 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 [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", 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"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "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", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "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: "14.0.0", 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 }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggleSelecBox($event)\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\"\r\n                *ngFor=\"let item of selectedItems\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\"\r\n                    (onFocus)=\"onFocusTextBox($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer class=\"list-container-items\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div [class.ax-state-disabled]=\"isItemDisabled(item)\" class=\"list-item\"\r\n                        *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\"\r\n                        [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n                        <div style=\"display: flex;\">\r\n                            <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                [disabled]=\"(!allowNull && selectedItems.length === 1 && isItemSelected(item)) || isItemDisabled(item)\"\r\n                                (onClick)=\"handleItemClick($event,item)\">\r\n                            </ax-check-box>\r\n                            <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n                                    </ng-container>\r\n                                </div>\r\n\r\n                            </ng-container>\r\n                            <ng-template #elseTemplate>\r\n                                <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                    [title]=\"item[textField]\"\r\n                                    [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n                                    {{ item[textField] }}\r\n                                </div>\r\n                            </ng-template>\r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n                </div>\r\n                <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n\r\n                </ng-template>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </ng-container>\r\n\r\n</ax-drop-down>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showDropDownButton: [{

package/esm2020/lib/selectbox/selectbox.module.mjs

@@ -22,8 +22,8 @@ const MODULES = [
 ];
 export class AXSelectBoxModule {
 }
-AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
+AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
         AXDropdownModule,
         AXTextBoxModule,
         AXTranslatorModule,
@@ -31,8 +31,8 @@ AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         AXCheckBoxModule,
         AXLoadingModule,
         AXSearchBoxModule], exports: [AXSelectBoxComponent, AXSelectBox2Component] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[...MODULES]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -41,4 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     providers: []
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0Ym94Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL3NyYy9saWIvc2VsZWN0Ym94L3NlbGVjdGJveC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQUcvRCxNQUFNLFNBQVMsR0FBRyxDQUFDLG9CQUFvQixFQUFFLHFCQUFxQixDQUFDLENBQUM7QUFDaEUsTUFBTSxPQUFPLEdBQUc7SUFDWixZQUFZO0lBQ1osZ0JBQWdCO0lBQ2hCLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsY0FBYztJQUNkLGdCQUFnQjtJQUNoQixlQUFlO0lBQ2YsaUJBQWlCO0NBQ3BCLENBQUM7QUFRRixNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBbEJYLG9CQUFvQixFQUFFLHFCQUFxQixhQUUxRCxZQUFZO1FBQ1osZ0JBQWdCO1FBQ2hCLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsY0FBYztRQUNkLGdCQUFnQjtRQUNoQixlQUFlO1FBQ2YsaUJBQWlCLGFBVEYsb0JBQW9CLEVBQUUscUJBQXFCOytHQWtCakQsaUJBQWlCLGFBRmYsRUFBRSxZQUZKLENBQUMsR0FBRyxPQUFPLENBQUM7MkZBSVosaUJBQWlCO2tCQU43QixRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRSxDQUFDLEdBQUcsU0FBUyxDQUFDO29CQUM1QixPQUFPLEVBQUUsQ0FBQyxHQUFHLE9BQU8sQ0FBQztvQkFDckIsT0FBTyxFQUFFLENBQUMsR0FBRyxTQUFTLENBQUM7b0JBQ3ZCLFNBQVMsRUFBRSxFQUFFO2lCQUNoQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEFYU2VsZWN0Qm94Q29tcG9uZW50IH0gZnJvbSAnLi9zZWxlY3Rib3guY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhEcm9wZG93bk1vZHVsZSB9IGZyb20gJy4uL2Ryb3Bkb3duL2Ryb3Bkb3duLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYVGV4dEJveE1vZHVsZSB9IGZyb20gJy4uL3RleHRib3gvdGV4dGJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFRyYW5zbGF0b3JNb2R1bGUsIEFYU2Nyb2xsTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb3JlJztcclxuaW1wb3J0IHsgQVhDaGVja0JveE1vZHVsZSB9IGZyb20gJy4uL2NoZWNrYm94L2NoZWNrYm94Lm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYTG9hZGluZ01vZHVsZSB9IGZyb20gJy4uL2xvYWRpbmcvbG9hZGluZy5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFNlYXJjaEJveE1vZHVsZSB9IGZyb20gJy4uL3NlYXJjaGJveC9zZWFyY2hib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhTZWxlY3RCb3gyQ29tcG9uZW50IH0gZnJvbSAnLi9zZWxlY3Rib3gyLmNvbXBvbmVudCc7XHJcblxyXG5cclxuY29uc3QgQ09NUE9ORU5UID0gW0FYU2VsZWN0Qm94Q29tcG9uZW50LCBBWFNlbGVjdEJveDJDb21wb25lbnRdO1xyXG5jb25zdCBNT0RVTEVTID0gW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgQVhEcm9wZG93bk1vZHVsZSxcclxuICAgIEFYVGV4dEJveE1vZHVsZSxcclxuICAgIEFYVHJhbnNsYXRvck1vZHVsZSxcclxuICAgIEFYU2Nyb2xsTW9kdWxlLFxyXG4gICAgQVhDaGVja0JveE1vZHVsZSxcclxuICAgIEFYTG9hZGluZ01vZHVsZSxcclxuICAgIEFYU2VhcmNoQm94TW9kdWxlXHJcbl07XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uQ09NUE9ORU5UXSxcclxuICAgIGltcG9ydHM6IFsuLi5NT0RVTEVTXSxcclxuICAgIGV4cG9ydHM6IFsuLi5DT01QT05FTlRdLFxyXG4gICAgcHJvdmlkZXJzOiBbXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQVhTZWxlY3RCb3hNb2R1bGUgeyB9XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0Ym94Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL3NyYy9saWIvc2VsZWN0Ym94L3NlbGVjdGJveC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbEUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQUcvRCxNQUFNLFNBQVMsR0FBRyxDQUFDLG9CQUFvQixFQUFFLHFCQUFxQixDQUFDLENBQUM7QUFDaEUsTUFBTSxPQUFPLEdBQUc7SUFDWixZQUFZO0lBQ1osZ0JBQWdCO0lBQ2hCLGVBQWU7SUFDZixrQkFBa0I7SUFDbEIsY0FBYztJQUNkLGdCQUFnQjtJQUNoQixlQUFlO0lBQ2YsaUJBQWlCO0NBQ3BCLENBQUM7QUFRRixNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBbEJYLG9CQUFvQixFQUFFLHFCQUFxQixhQUUxRCxZQUFZO1FBQ1osZ0JBQWdCO1FBQ2hCLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsY0FBYztRQUNkLGdCQUFnQjtRQUNoQixlQUFlO1FBQ2YsaUJBQWlCLGFBVEYsb0JBQW9CLEVBQUUscUJBQXFCOytHQWtCakQsaUJBQWlCLGFBRmYsRUFBRSxZQUZBLE9BQU87MkZBSVgsaUJBQWlCO2tCQU43QixRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRSxDQUFDLEdBQUcsU0FBUyxDQUFDO29CQUM1QixPQUFPLEVBQUUsQ0FBQyxHQUFHLE9BQU8sQ0FBQztvQkFDckIsT0FBTyxFQUFFLENBQUMsR0FBRyxTQUFTLENBQUM7b0JBQ3ZCLFNBQVMsRUFBRSxFQUFFO2lCQUNoQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEFYU2VsZWN0Qm94Q29tcG9uZW50IH0gZnJvbSAnLi9zZWxlY3Rib3guY29tcG9uZW50JztcclxuaW1wb3J0IHsgQVhEcm9wZG93bk1vZHVsZSB9IGZyb20gJy4uL2Ryb3Bkb3duL2Ryb3Bkb3duLm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYVGV4dEJveE1vZHVsZSB9IGZyb20gJy4uL3RleHRib3gvdGV4dGJveC5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFRyYW5zbGF0b3JNb2R1bGUsIEFYU2Nyb2xsTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb3JlJztcclxuaW1wb3J0IHsgQVhDaGVja0JveE1vZHVsZSB9IGZyb20gJy4uL2NoZWNrYm94L2NoZWNrYm94Lm1vZHVsZSc7XHJcbmltcG9ydCB7IEFYTG9hZGluZ01vZHVsZSB9IGZyb20gJy4uL2xvYWRpbmcvbG9hZGluZy5tb2R1bGUnO1xyXG5pbXBvcnQgeyBBWFNlYXJjaEJveE1vZHVsZSB9IGZyb20gJy4uL3NlYXJjaGJveC9zZWFyY2hib3gubW9kdWxlJztcclxuaW1wb3J0IHsgQVhTZWxlY3RCb3gyQ29tcG9uZW50IH0gZnJvbSAnLi9zZWxlY3Rib3gyLmNvbXBvbmVudCc7XHJcblxyXG5cclxuY29uc3QgQ09NUE9ORU5UID0gW0FYU2VsZWN0Qm94Q29tcG9uZW50LCBBWFNlbGVjdEJveDJDb21wb25lbnRdO1xyXG5jb25zdCBNT0RVTEVTID0gW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgQVhEcm9wZG93bk1vZHVsZSxcclxuICAgIEFYVGV4dEJveE1vZHVsZSxcclxuICAgIEFYVHJhbnNsYXRvck1vZHVsZSxcclxuICAgIEFYU2Nyb2xsTW9kdWxlLFxyXG4gICAgQVhDaGVja0JveE1vZHVsZSxcclxuICAgIEFYTG9hZGluZ01vZHVsZSxcclxuICAgIEFYU2VhcmNoQm94TW9kdWxlXHJcbl07XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gICAgZGVjbGFyYXRpb25zOiBbLi4uQ09NUE9ORU5UXSxcclxuICAgIGltcG9ydHM6IFsuLi5NT0RVTEVTXSxcclxuICAgIGV4cG9ydHM6IFsuLi5DT01QT05FTlRdLFxyXG4gICAgcHJvdmlkZXJzOiBbXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQVhTZWxlY3RCb3hNb2R1bGUgeyB9XHJcbiJdfQ==

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

@@ -8,12 +8,12 @@ import { AXSearchBoxComponent } from '../searchbox/searchbox.component';
 import { AXConfig, AXObjectUtil, AXTranslator } from '@acorex/core';
 import { AXValueEvent } from '../base/events.class';
 import * as i0 from "@angular/core";
-import * as i1 from "../dropdown/dropdown.component";
-import * as i2 from "../textbox/textbox.component";
-import * as i3 from "../searchbox/searchbox.component";
-import * as i4 from "../checkbox/checkbox.component";
-import * as i5 from "@acorex/core";
-import * as i6 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "../dropdown/dropdown.component";
+import * as i3 from "../textbox/textbox.component";
+import * as i4 from "@acorex/core";
+import * as i5 from "../checkbox/checkbox.component";
+import * as i6 from "../searchbox/searchbox.component";
 export class AXSelectBoxValueChangedEvent extends AXValueEvent {
     constructor() {
         super(...arguments);
@@ -490,9 +490,9 @@ export class AXSelectBox2Component extends AXValidatableComponent {
         this.currentfocusedIndex = index;
     }
 }
-AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: i1.AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: i2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: i3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i5.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i5.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: AXSelectBox2Component, decorators: [{
+AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AXSelectBox2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBox2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", 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\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\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"], outputs: ["dropdownToggle", "onButtonClick"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "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", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "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: "14.0.0", 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 }], template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\" [loading]=\"showLoading\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n            <div *ngFor=\"let item of selectedItems\" class=\"chips\" [class.chips-blank]=\"selectionMode === 'single'\"\r\n                [title]=\"item[textField]\">\r\n                <span class=\"chips-text\">\r\n                    {{item[textField]}}\r\n                </span>\r\n                <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\"\r\n                    *ngIf=\"(readonly!=true) && disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n                    <i class=\"far fa-times-circle close\"></i>\r\n                </span>\r\n            </div>\r\n            <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n                <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\"\r\n                    [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\"\r\n                    [disabled]=\"disabled\"  [size]=\"size\">\r\n                </ax-text-box>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n            <ax-search-box #searchBox [(value)]=\"text\" size=\"sm\"\r\n                (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n            </ax-search-box>\r\n        </div>\r\n        <div class=\"ax list-container\">\r\n            <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n                <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n                <ng-template #thenTemplate>\r\n                    <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\"\r\n                        [class.focused]=\"i==currentfocusedIndex\" (click)=\"handleItemClick($event,item)\"\r\n                        [class.selected]=\"isItemSelected(item)\">\r\n                        <div>\r\n                            <div>\r\n                                <ax-check-box *ngIf=\"selectionMode !== 'single'\" [size]=\"size\" [value]=\"isItemSelected(item)\"\r\n                                    [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\"\r\n                                    (onClick)=\"handleItemClick($event,item)\">\r\n                                </ax-check-box>\r\n                            </div>\r\n                            <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\"\r\n                                [title]=\"item[textField]\"\r\n                                [ngStyle]=\"(selectionMode !== 'single') ? {'padding-inline-start': '2em'}:''\">\r\n                                {{ item[textField] }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n                    <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n                </div>\r\n                <ng-template #elseTemplate>\r\n                    <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n                    <ng-template #searchTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.searching' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noDataTemplate>\r\n                        <div class=\"list-item\">\r\n                            {{'common.noDataFound' | trans}}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { span: [{