npm - @acorex/components - Versions diffs - 4.1.2 → 4.1.5 - Mend

@acorex/components 4.1.2 → 4.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/fesm2015/acorex-components.mjs CHANGED Viewed

@@ -111,9 +111,9 @@ class AXValidationRuleComponent {
         });
     }
 }
-AXValidationRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXValidationRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { type: "type", message: "message", value: "value", enabled: "enabled" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
+AXValidationRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXValidationRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { type: "type", message: "message", value: "value", enabled: "enabled" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-rule',
@@ -141,7 +141,6 @@ class AXValidation {
         this.validateOn = 'submit';
     }
     validate(value) {
-        debugger;
         if (!this.rules || this.rules.length === 0) {
             return Promise.resolve({ result: true });
         }
@@ -167,9 +166,9 @@ class AXValidation {
         });
     }
 }
-AXValidation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidation, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AXValidation.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidation });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidation, decorators: [{
+AXValidation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidation, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXValidation.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidation });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidation, decorators: [{
             type: Injectable
         }] });
 class AXValidationComponent extends AXValidation {
@@ -200,9 +199,9 @@ class AXValidationComponent extends AXValidation {
         }
     }
 }
-AXValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationComponent, deps: [{ token: ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXValidationComponent, selector: "ax-validation", inputs: { rules: "rules", validateOn: "validateOn" }, outputs: { rulesChange: "rulesChange", showMessage: "showMessage" }, providers: [{ provide: AXValidation, useExisting: AXValidationComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationComponent, decorators: [{
+AXValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationComponent, deps: [{ token: ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXValidationComponent, selector: "ax-validation", inputs: { rules: "rules", validateOn: "validateOn" }, outputs: { rulesChange: "rulesChange", showMessage: "showMessage" }, providers: [{ provide: AXValidation, useExisting: AXValidationComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation',
@@ -242,9 +241,9 @@ class AXBaseComponent {
         this.uid = AXHtmlUtil.getUID();
     }
 }
-AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AXBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBaseComponent, inputs: { cssClass: "cssClass" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseComponent, decorators: [{
+AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AXBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBaseComponent, inputs: { cssClass: "cssClass" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; }, propDecorators: { cssClass: [{
                 type: Input
@@ -325,9 +324,9 @@ class AXValidatableComponent extends AXBaseComponent {
         }
     }
 }
-AXValidatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidatableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AXValidatableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXValidatableComponent, inputs: { tabIndex: "tabIndex" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidatableComponent, decorators: [{
+AXValidatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidatableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AXValidatableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXValidatableComponent, inputs: { tabIndex: "tabIndex" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidatableComponent, decorators: [{
             type: Directive
         }], propDecorators: { tabIndex: [{
                 type: Input
@@ -433,9 +432,9 @@ class AXBaseTextComponent extends AXValidatableComponent {
         });
     }
 }
-AXBaseTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseTextComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXBaseTextComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBaseTextComponent, inputs: { tabIndex: "tabIndex", validation: "validation", disabled: "disabled", readonly: "readonly", textAlign: "textAlign", size: "size", placeholder: "placeholder", autocomplete: "autocomplete", name: "name", icon: "icon", allowClear: "allowClear", value: "value" }, outputs: { onkey: "onkey", onBlur: "onBlur", onFocus: "onFocus", onValueChanged: "onValueChanged", valueChange: "valueChange" }, queries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseTextComponent, decorators: [{
+AXBaseTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseTextComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXBaseTextComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBaseTextComponent, inputs: { tabIndex: "tabIndex", validation: "validation", disabled: "disabled", readonly: "readonly", textAlign: "textAlign", size: "size", placeholder: "placeholder", autocomplete: "autocomplete", name: "name", icon: "icon", allowClear: "allowClear", value: "value" }, outputs: { onkey: "onkey", onBlur: "onBlur", onFocus: "onFocus", onValueChanged: "onValueChanged", valueChange: "valueChange" }, queries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseTextComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { tabIndex: [{
                 type: Input
@@ -489,9 +488,9 @@ class AXBaseButtonComponent extends AXBaseComponent {
         this.tabIndex = 0;
     }
 }
-AXBaseButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AXBaseButtonComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBaseButtonComponent, inputs: { disabled: "disabled", size: "size", tabIndex: "tabIndex" }, outputs: { click: "click" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseButtonComponent, decorators: [{
+AXBaseButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AXBaseButtonComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBaseButtonComponent, inputs: { disabled: "disabled", size: "size", tabIndex: "tabIndex" }, outputs: { click: "click" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseButtonComponent, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{
                 type: Input
@@ -510,9 +509,9 @@ class AXBaseDropdownComponent extends AXBaseComponent {
         this.showDropDownButton = true;
     }
 }
-AXBaseDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AXBaseDropdownComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBaseDropdownComponent, inputs: { disabled: "disabled", size: "size", fitParent: "fitParent", tabIndex: "tabIndex", showDropDownButton: "showDropDownButton" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBaseDropdownComponent, decorators: [{
+AXBaseDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AXBaseDropdownComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBaseDropdownComponent, inputs: { disabled: "disabled", size: "size", fitParent: "fitParent", tabIndex: "tabIndex", showDropDownButton: "showDropDownButton" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBaseDropdownComponent, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{
                 type: Input
@@ -532,9 +531,9 @@ class AXLoadingIndicatorComponent {
         this.size = 80;
     }
 }
-AXLoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXLoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\r\n    [style.width.px]=\"size\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\r\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.8333333333333333s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.3333333333333333s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.1666666666666667s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-0.6666666666666666s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\r\n        </animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\r\n        </animate>\r\n    </rect>\r\n</svg>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingIndicatorComponent, decorators: [{
+AXLoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\r\n    [style.width.px]=\"size\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\r\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.8333333333333333s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.3333333333333333s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.1666666666666667s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-0.6666666666666666s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\r\n        </animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\r\n        </animate>\r\n    </rect>\r\n</svg>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading-indicator', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"margin:auto;display:block;\"\r\n    [style.width.px]=\"size\" [style.height.px]=\"size\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\r\n    <rect fill=\"var(--ax-gray-trans-light-color)\" x=\"55\" y=\"55\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.8333333333333333s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.3333333333333333s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-light-color)\" x=\"55\" y=\"15\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-1.1666666666666667s\"></animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\"\r\n            begin=\"-0.6666666666666666s\"></animate>\r\n    </rect>\r\n    <rect fill=\"var(--ax-primary-dark-color)\" x=\"15\" y=\"34.6776\" width=\"30\" height=\"30\" rx=\"3\" ry=\"3\">\r\n        <animate attributeName=\"x\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"-0.5s\">\r\n        </animate>\r\n        <animate attributeName=\"y\" dur=\"2s\" repeatCount=\"indefinite\"\r\n            keyTimes=\"0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1\" values=\"15;55;55;55;55;15;15;15;15\" begin=\"0s\">\r\n        </animate>\r\n    </rect>\r\n</svg>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
@@ -546,9 +545,9 @@ class DynamicOverlayContainer extends OverlayContainer {
         this._containerElement = containerElement;
     }
 }
-DynamicOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-DynamicOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
+DynamicOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -569,9 +568,9 @@ class DynamicOverlay extends Overlay {
         return super.create(config);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i0.RendererFactory2 }, { token: i1$1.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicOverlay, decorators: [{
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i0.RendererFactory2 }, { token: i1$1.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -655,9 +654,9 @@ class AXOverlayService {
         };
     }
 }
-AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXOverlayService, decorators: [{
+AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1.Overlay }, { type: i0.ApplicationRef }]; } });
@@ -693,9 +692,9 @@ class AXLoadingService {
         }
     }
 }
-AXLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingService, deps: [{ token: i1$2.AXRenderService }, { token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingService, decorators: [{
+AXLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingService, deps: [{ token: i1$2.AXRenderService }, { token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$2.AXRenderService }, { type: AXOverlayService }]; } });
@@ -723,8 +722,8 @@ class AXPageComponent {
         }
     }
 }
-AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPageComponent, selector: "ax-page", ngImport: i0, template: `
+AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPageComponent, selector: "ax-page", ngImport: i0, template: `
   <div class="page-content-wrap">
     <div class="ax-page-toolbar">
       <ng-content select="ax-toolbar"></ng-content>
@@ -733,7 +732,7 @@ AXPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <ng-content select="ax-page-footer"></ng-content>
   </div>
 `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page',
@@ -795,9 +794,9 @@ class AXBasePageComponent {
         this.onClosed.unsubscribe();
     }
 }
-AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AXBasePageComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBasePageComponent, viewQueries: [{ propertyName: "pageContainer", first: true, predicate: AXPageComponent, descendants: true, static: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBasePageComponent, decorators: [{
+AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AXBasePageComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBasePageComponent, viewQueries: [{ propertyName: "pageContainer", first: true, predicate: AXPageComponent, descendants: true, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Directive
         }], propDecorators: { pageContainer: [{
                 type: ViewChild,
@@ -830,9 +829,9 @@ class AXBasePopupPageComponent extends AXBasePageComponent {
         return [];
     }
 }
-AXBasePopupPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBasePopupPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AXBasePopupPageComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXBasePopupPageComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXBasePopupPageComponent, decorators: [{
+AXBasePopupPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBasePopupPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AXBasePopupPageComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXBasePopupPageComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXBasePopupPageComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; } });
@@ -876,9 +875,9 @@ class AXButtonComponent extends AXBaseButtonComponent {
         this.container.nativeElement.focus();
     }
 }
-AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXButtonComponent, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n    <div class=\"button-inner-content\">\r\n        <ng-container *ngIf=\"icon && !loading\">\r\n            <i class=\"{{icon}} icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loading\">\r\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <div class=\"ax-wrapper\" #refContent>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</button>", directives: [{ type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonComponent, decorators: [{
+AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXButtonComponent, selector: "ax-button", inputs: { type: "type", icon: "icon", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", block: "block", loading: "loading", selected: "selected" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n    <div class=\"button-inner-content\">\r\n        <ng-container *ngIf=\"icon && !loading\">\r\n            <i class=\"{{icon}} icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loading\">\r\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <div class=\"ax-wrapper\" #refContent>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</button>", directives: [{ type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button', encapsulation: ViewEncapsulation.None, template: "<button #container class=\"ax button form-control {{type}} {{size}} {{cssClass}}\" [class.ax-button-icon]=\"refContent.innerText.length==0 && refContent.children.length == 0\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n    [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n    [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n    <div class=\"button-inner-content\">\r\n        <ng-container *ngIf=\"icon && !loading\">\r\n            <i class=\"{{icon}} icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loading\">\r\n            <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n            <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n        </ng-container>\r\n        <div class=\"ax-wrapper\" #refContent>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</button>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { container: [{
@@ -907,10 +906,10 @@ const COMPONENT$7 = [AXButtonComponent];
 const MODULES$7 = [CommonModule];
 class AXButtonModule {
 }
-AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent], imports: [CommonModule], exports: [AXButtonComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$7]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXButtonModule, decorators: [{
+AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent], imports: [CommonModule], exports: [AXButtonComponent] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, providers: [], imports: [[...MODULES$7]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$7],
@@ -1289,9 +1288,9 @@ class AXCalendarBoxComponent {
         return item.date.date.getTime();
     }
 }
-AXCalendarBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dt": i1$2.AXDateTimePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxComponent, decorators: [{
+AXCalendarBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCalendarBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: { size: "size", type: "type", locale: "locale", dir: "dir", min: "min", max: "max", selectableHoliday: "selectableHoliday", dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", showTodayButton: "showTodayButton", view: "view", depth: "depth", value: "value" }, outputs: { onValueChanged: "onValueChanged", onClick: "onClick", valueChange: "valueChange" }, ngImport: i0, template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dt": i1$2.AXDateTimePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"calendar-selector\">\r\n        <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n            <i class=\"far fa-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                {{viewRange.startTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n            <i class=\"far fa-chevron-right\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"view\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <table>\r\n                    <thead>\r\n                        <tr class=\"days-name calendar-row\">\r\n                            <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                                (click)=\"setDayClick($event,d)\">\r\n                                <div>\r\n                                    {{d.date.dayInMonth}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'month'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date| dt:\"MMM\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'year'\">\r\n                <table>\r\n                    <tbody>\r\n                        <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                            <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                                <div>\r\n                                    {{d.date | dt:\"YYYY\"}}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div style=\"padding: 5px;\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div> -->\r\n\r\n\r\n\r\n<div class=\"ax-calendar-container {{size}}\" [ngClass]=\"type\">\r\n    <div class=\"ax-calendar-header\">\r\n\r\n        <div class=\"ax-nav-button\" [ngSwitch]=\"view\">\r\n            <ax-button type=\"light blank\" (click)=\"changeView()\">\r\n                <ng-container *ngSwitchCase=\"'day'\">\r\n                    {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'month'\">\r\n                    {{viewRange.startTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n                </ng-container>\r\n            </ax-button>\r\n        </div>\r\n\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-down\" (click)=\"next()\"></ax-button>\r\n        </div>\r\n        <div class=\"ax-controll-button\">\r\n            <ax-button type=\"light blank\" [block]=\"true\" icon=\"fas fa-chevron-up\" (click)=\"prev()\"></ax-button>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <ng-container [ngSwitch]=\"view\">\r\n            <ng-container *ngSwitchCase=\"'day'\">\r\n                <div class=\"ax-month-items\">\r\n                    <ng-container *ngFor='let w of weekdays'>\r\n                        <div class=\"ax-month-item\"><strong>{{w}}</strong></div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"ax-day-items\">\r\n                    <ng-container *ngFor=\"let r of matrix\">\r\n                        <div class=\"ax-day-item ax-state-event\" *ngFor=\"let d of r;trackBy:trackByFn\" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n                            (click)=\"setDayClick($event,d)\">\r\n                            {{d.date.dayInMonth}}</div>\r\n                    </ng-container>\r\n\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"ax-month-container\" *ngSwitchCase=\"'month'\">\r\n                <ng-container *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n                        <strong>\r\n                            {{d.date| dt:\"MMM\"}}\r\n                        </strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"ax-year-container\" *ngSwitchCase=\"'year'\">\r\n                <ng-container class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n                    <div class=\"ax-year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n                        <strong>{{d.date | dt:\"YYYY\"}}</strong>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" type=\"dark\">\r\n            {{getTodayName()}}\r\n        </ax-button>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
@@ -1416,9 +1415,9 @@ class AXPopoverComponent {
         return this.visible;
     }
 }
-AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", visible: "visible" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\r\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverComponent, decorators: [{
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", visible: "visible" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\r\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\r\n  <div class=\"ax-popover-container animate__animated animate__fadeIn\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>", styles: [".ax-popover-container .ax-popover-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-border-radius-size);box-shadow:0 5px 10px #0000004d}\n"] }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
@@ -1442,10 +1441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXPopoverModule {
 }
-AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
-AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopoverModule, decorators: [{
+AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
+AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPopoverComponent],
@@ -1457,10 +1456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXCalendarBoxModule {
 }
-AXCalendarBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxModule, declarations: [AXCalendarBoxComponent], imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule], exports: [AXCalendarBoxComponent] });
-AXCalendarBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCalendarBoxModule, decorators: [{
+AXCalendarBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCalendarBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, declarations: [AXCalendarBoxComponent], imports: [CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule], exports: [AXCalendarBoxComponent] });
+AXCalendarBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, AXPopoverModule, AXCoreModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCalendarBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCalendarBoxComponent],
@@ -1482,9 +1481,9 @@ class AXSchedulerViewProperty {
         }
     }
 }
-AXSchedulerViewProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerViewProperty, deps: [{ token: 'type', attribute: true }, { token: 'caption', attribute: true }, { token: 'name', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerViewProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerViewProperty, selector: "ax-scheduler-view", inputs: { interval: "interval" }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerViewProperty, decorators: [{
+AXSchedulerViewProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerViewProperty, deps: [{ token: 'type', attribute: true }, { token: 'caption', attribute: true }, { token: 'name', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerViewProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerViewProperty, selector: "ax-scheduler-view", inputs: { interval: "interval" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerViewProperty, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-scheduler-view',
@@ -1507,11 +1506,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXSchedulerViewsProperty {
     constructor() { }
 }
-AXSchedulerViewsProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerViewsProperty, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerViewsProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerViewsProperty, selector: "ax-scheduler-views", queries: [{ propertyName: "views", predicate: AXSchedulerViewProperty }], ngImport: i0, template: `
+AXSchedulerViewsProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerViewsProperty, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerViewsProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerViewsProperty, selector: "ax-scheduler-views", queries: [{ propertyName: "views", predicate: AXSchedulerViewProperty }], ngImport: i0, template: `
     <ng-content>
     </ng-content>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerViewsProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerViewsProperty, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-scheduler-views',
@@ -1623,9 +1622,9 @@ class AXTooltipDirective {
         this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
     }
 }
-AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { tooltipTitle: ["tooltip", "tooltipTitle"], placement: "placement", delay: "delay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipDirective, decorators: [{
+AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { tooltipTitle: ["tooltip", "tooltipTitle"], placement: "placement", delay: "delay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTooltip]'
@@ -1694,9 +1693,9 @@ class AXMenuComponent {
         }
     }
 }
-AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\r\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\r\n    <ng-template #recursiveList let-list>\r\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\r\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\r\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\r\n          [attr.data-uid]=\"item.uid\"\r\n          [class.split]=\"item.split\">\r\n          <div class=\"content-side\">\r\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-template #menuBody>\r\n              <span class=\"ax-toolbar-menu-item-text\">\r\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\r\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\r\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\r\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\r\n              </span>\r\n            </ng-template>\r\n          </div>\r\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\r\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\r\n          </div>\r\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\r\n            <ng-container *ngTemplateOutlet=\"\r\n              recursiveList;\r\n              context: { $implicit: item.items }\r\n            \"></ng-container>\r\n          </ul>\r\n        </li>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\r\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\r\n      <i class=\"far fa-bars\"></i>\r\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\r\n    </li>\r\n  </ul>\r\n</div> -->\r\n\r\n<nav>\r\n  <ul class=\"ax nav-menu\" [class.rtl]=\"rtl\" [class.nav-center]=\"direction=='horizontal'\" [class.nav-vertical]=\"direction=='vertical'\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: items }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<ng-template #recursiveMenu let-items>\r\n  <ng-container *ngFor=\"let item of items\">\r\n    <li class=\"ax {{item.style}}\" [ngClass]=\"{'disabled': item.disable}\"  *ngIf=\"item.visible === undefined || item.visible\"\r\n      (click)=\"handleItemClick($event,item)\" axTooltip [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\" [tooltip]=\"item.tooltip ? item.tooltip : ''\" >\r\n      <span>\r\n        <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\r\n        <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <i class=\"far fa-angle-down drop-icon\" *ngIf=\"item.items && item.text\"></i>\r\n      </span>\r\n      <ul>\r\n        <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: item.items }\">\r\n        </ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n", directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuComponent, decorators: [{
+AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXMenuComponent, selector: "ax-menu", inputs: { menuTemplate: "menuTemplate", rtl: "rtl", size: "size", selection: "selection", mode: "mode", target: "target", floatAlignment: "floatAlignment", floatPlacemnet: "floatPlacemnet", direction: "direction", items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\r\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\r\n    <ng-template #recursiveList let-list>\r\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\r\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\r\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\r\n          [attr.data-uid]=\"item.uid\"\r\n          [class.split]=\"item.split\">\r\n          <div class=\"content-side\">\r\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-template #menuBody>\r\n              <span class=\"ax-toolbar-menu-item-text\">\r\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\r\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\r\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\r\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\r\n              </span>\r\n            </ng-template>\r\n          </div>\r\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\r\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\r\n          </div>\r\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\r\n            <ng-container *ngTemplateOutlet=\"\r\n              recursiveList;\r\n              context: { $implicit: item.items }\r\n            \"></ng-container>\r\n          </ul>\r\n        </li>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\r\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\r\n      <i class=\"far fa-bars\"></i>\r\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\r\n    </li>\r\n  </ul>\r\n</div> -->\r\n\r\n<nav>\r\n  <ul class=\"ax nav-menu\" [class.rtl]=\"rtl\" [class.nav-center]=\"direction=='horizontal'\" [class.nav-vertical]=\"direction=='vertical'\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: items }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<ng-template #recursiveMenu let-items>\r\n  <ng-container *ngFor=\"let item of items\">\r\n    <li class=\"ax {{item.style}}\" [ngClass]=\"{'disabled': item.disable}\"  *ngIf=\"item.visible === undefined || item.visible\"\r\n      (click)=\"handleItemClick($event,item)\" axTooltip [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\" [tooltip]=\"item.tooltip ? item.tooltip : ''\" >\r\n      <span>\r\n        <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\r\n        <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <i class=\"far fa-angle-down drop-icon\" *ngIf=\"item.items && item.text\"></i>\r\n      </span>\r\n      <ul>\r\n        <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: item.items }\">\r\n        </ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n", directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["tooltip", "placement", "delay"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, template: "<!-- <div class=\"ax menu-container {{size}}\" #container>\r\n  <ul class=\"root\" [class.horizontal]=\"direction=='horizontal'\" [class.vertical]=\"direction=='vertical'\" #root>\r\n    <ng-template #recursiveList let-list>\r\n      <ng-container *ngFor=\"let item of list;trackBy:trackByItem\">\r\n        <li class=\"ax-toolbar-menu-item ax {{item.type || 'ax primary'}} {{item.style || 'ax primary'}}\" [class.disabled]='item.disable'  [class.subIcon]='item.items' [class.startIcon]='item.startIcon' [class.startIcon]='item.icon' [class.endIcon]='item.endIcon' *ngIf=\"item.visible!=false\" (click)=\"handleItemClick($event, item)\"\r\n          [class.selected]=\"item.selected\" [class.divider]=\"item.divider\" [attr.title]=\"item.tooltip ? item.tooltip : null\"\r\n          [attr.data-uid]=\"item.uid\"\r\n          [class.split]=\"item.split\">\r\n          <div class=\"content-side\">\r\n            <ng-container *ngIf=\"menuTemplate; else menuBody\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: item }\">\r\n              </ng-container>\r\n            </ng-container>\r\n            <ng-template #menuBody>\r\n              <span class=\"ax-toolbar-menu-item-text\">\r\n                <i class=\"{{ item.startIcon }} start-icon ax-menu-item-icon\" *ngIf=\"item.startIcon\"></i>\r\n                <i class=\"{{ item.icon }} start-icon ax-menu-item-icon\" *ngIf=\"item.icon\"></i>\r\n                <span *ngIf=\"item.text\">{{ item.text }}</span>\r\n                <i class=\"{{ item.endIcon }} end-icon ax-menu-item-icon\" *ngIf=\"item.endIcon\"></i>\r\n              </span>\r\n            </ng-template>\r\n          </div>\r\n          <div class=\"sub-icon-side\" *ngIf=\"item.hasChildren\">\r\n            <i class=\"far fa-angle-down ax-menu-item-drop-icon\"></i>\r\n          </div>\r\n          <ul *ngIf=\"item.hasChildren\" class=\"collapsed sub-menu\">\r\n            <ng-container *ngTemplateOutlet=\"\r\n              recursiveList;\r\n              context: { $implicit: item.items }\r\n            \"></ng-container>\r\n          </ul>\r\n        </li>\r\n      </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context: { $implicit: items }\"></ng-container>\r\n    <li class=\"more\" #moreLI (click)=\"handleItemClick($event)\">\r\n      <i class=\"far fa-bars\"></i>\r\n      <ul #moreUL class=\"collapsed sub-menu\"></ul>\r\n    </li>\r\n  </ul>\r\n</div> -->\r\n\r\n<nav>\r\n  <ul class=\"ax nav-menu\" [class.rtl]=\"rtl\" [class.nav-center]=\"direction=='horizontal'\" [class.nav-vertical]=\"direction=='vertical'\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: items }\"></ng-container>\r\n  </ul>\r\n</nav>\r\n\r\n<ng-template #recursiveMenu let-items>\r\n  <ng-container *ngFor=\"let item of items\">\r\n    <li class=\"ax {{item.style}}\" [ngClass]=\"{'disabled': item.disable}\"  *ngIf=\"item.visible === undefined || item.visible\"\r\n      (click)=\"handleItemClick($event,item)\" axTooltip [placement]=\"item.tooltipPlacement ? item.tooltipPlacement : 'bottom'\" [tooltip]=\"item.tooltip ? item.tooltip : ''\" >\r\n      <span>\r\n        <i class=\"{{ item.startIcon }}\" *ngIf=\"item.startIcon\"></i>\r\n        <i class=\"{{ item.icon }}\" *ngIf=\"item.icon\"></i>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <i class=\"far fa-angle-down drop-icon\" *ngIf=\"item.items && item.text\"></i>\r\n      </span>\r\n      <ul>\r\n        <ng-container *ngTemplateOutlet=\"recursiveMenu; context:{ $implicit: item.items }\">\r\n        </ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentMenuTemplate: [{
@@ -1757,9 +1756,9 @@ class AXToolbarMenuComponent extends AXToolbarItem {
         this.cdr.detectChanges();
     }
 }
-AXToolbarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: { menuTemplate: "menuTemplate", selection: "selection", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toolbar-menu-container\">\r\n    <ax-menu #menu [items]=\"items\" [selection]=\"selection\" (onItemClick)=\"handleItemClick($event)\" [menuTemplate]=\"menuTemplate\">\r\n    </ax-menu>\r\n</div>", components: [{ type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarMenuComponent, decorators: [{
+AXToolbarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: { menuTemplate: "menuTemplate", selection: "selection", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], queries: [{ propertyName: "_contentMenuTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toolbar-menu-container\">\r\n    <ax-menu #menu [items]=\"items\" [selection]=\"selection\" (onItemClick)=\"handleItemClick($event)\" [menuTemplate]=\"menuTemplate\">\r\n    </ax-menu>\r\n</div>", components: [{ type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toolbar-menu', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-toolbar-menu-container\">\r\n    <ax-menu #menu [items]=\"items\" [selection]=\"selection\" (onItemClick)=\"handleItemClick($event)\" [menuTemplate]=\"menuTemplate\">\r\n    </ax-menu>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { menu: [{
@@ -1790,11 +1789,11 @@ class AXToolbarSchedulerViewsComponent {
         this.onViewChanged.emit(e.name);
     }
 }
-AXToolbarSchedulerViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSchedulerViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarSchedulerViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarSchedulerViewsComponent, selector: "ax-toolbar-scheduler-view", outputs: { onViewChanged: "onViewChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerViewsComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: AXToolbarMenuComponent, descendants: true, static: true }], ngImport: i0, template: `
+AXToolbarSchedulerViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarSchedulerViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarSchedulerViewsComponent, selector: "ax-toolbar-scheduler-view", outputs: { onViewChanged: "onViewChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerViewsComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: AXToolbarMenuComponent, descendants: true, static: true }], ngImport: i0, template: `
         <ax-toolbar-menu [items]="items" selection="single" (onItemClick)="onItemClick($event)"></ax-toolbar-menu>
     `, isInline: true, components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSchedulerViewsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerViewsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-toolbar-scheduler-view',
@@ -1894,9 +1893,9 @@ class AXSchedulerBaseViewComponent {
         }
     }
 }
-AXSchedulerBaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerBaseViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AXSchedulerBaseViewComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerBaseViewComponent, outputs: { onNavigatorDateChanged: "onNavigatorDateChanged", onEventChanged: "onEventChanged" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerBaseViewComponent, decorators: [{
+AXSchedulerBaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerBaseViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AXSchedulerBaseViewComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerBaseViewComponent, outputs: { onNavigatorDateChanged: "onNavigatorDateChanged", onEventChanged: "onEventChanged" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerBaseViewComponent, decorators: [{
             type: Directive
         }], propDecorators: { onNavigatorDateChanged: [{
                 type: Output
@@ -1985,9 +1984,9 @@ class AXSchedulerDayTimeViewComponent extends AXSchedulerBaseViewComponent {
         return a.indexOf(event);
     }
 }
-AXSchedulerDayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerDayTimeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerDayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerDayTimeViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-day-time-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th class=\"time-column\"></th>\r\n            <th *ngFor=\"let d of slots\" class=\"header-cell\">\r\n                <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                    {{d.range.startTime | dt: 'ddd'}}<br>\r\n                    {{d.range.startTime | dt: 'DD'}}\r\n                </div>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <div class=\"v-scroll\">\r\n        <table class=\"body\" cdkDropListGroup>\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.hour==t.value\" class=\"event\"\r\n                                    role=\"button\" aria-readonly=\"false\" aria-selected=\"true\" aria-grabbed=\"false\"\r\n                                    cdkDrag [cdkDragData]=\"e\" \r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\" [title]=\"e.title\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                    <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                        {{e.title}}\r\n                                    </div>\r\n                                    <div class=\"event-drag-placeholder\" *cdkDragPlaceholder></div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n</div>", styles: [".ax-scheduler-day-time-view .event-wrapper{position:absolute;top:0px;left:0px;display:inline-flex;flex:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%}.ax-scheduler-day-time-view .event-wrapper .event{display:block;position:relative;flex:1}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerDayTimeViewComponent, decorators: [{
+AXSchedulerDayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerDayTimeViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerDayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerDayTimeViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-day-time-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th class=\"time-column\"></th>\r\n            <th *ngFor=\"let d of slots\" class=\"header-cell\">\r\n                <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                    {{d.range.startTime | dt: 'ddd'}}<br>\r\n                    {{d.range.startTime | dt: 'DD'}}\r\n                </div>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <div class=\"v-scroll\">\r\n        <table class=\"body\" cdkDropListGroup>\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.hour==t.value\" class=\"event\"\r\n                                    role=\"button\" aria-readonly=\"false\" aria-selected=\"true\" aria-grabbed=\"false\"\r\n                                    cdkDrag [cdkDragData]=\"e\" \r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\" [title]=\"e.title\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                    <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                        {{e.title}}\r\n                                    </div>\r\n                                    <div class=\"event-drag-placeholder\" *cdkDragPlaceholder></div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n</div>", styles: [".ax-scheduler-day-time-view .event-wrapper{position:absolute;top:0px;left:0px;display:inline-flex;flex:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%}.ax-scheduler-day-time-view .event-wrapper .event{display:block;position:relative;flex:1}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerDayTimeViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }], template: "<div class=\"view ax-scheduler-day-time-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th class=\"time-column\"></th>\r\n            <th *ngFor=\"let d of slots\" class=\"header-cell\">\r\n                <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                    {{d.range.startTime | dt: 'ddd'}}<br>\r\n                    {{d.range.startTime | dt: 'DD'}}\r\n                </div>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <div class=\"v-scroll\">\r\n        <table class=\"body\" cdkDropListGroup>\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event,t.value)\" [attr.data-uid]=\"d.uid\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.hour==t.value\" class=\"event\"\r\n                                    role=\"button\" aria-readonly=\"false\" aria-selected=\"true\" aria-grabbed=\"false\"\r\n                                    cdkDrag [cdkDragData]=\"e\" \r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\" [title]=\"e.title\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                    <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                        {{e.title}}\r\n                                    </div>\r\n                                    <div class=\"event-drag-placeholder\" *cdkDragPlaceholder></div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n</div>", styles: [".ax-scheduler-day-time-view .event-wrapper{position:absolute;top:0px;left:0px;display:inline-flex;flex:auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%}.ax-scheduler-day-time-view .event-wrapper .event{display:block;position:relative;flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
@@ -2178,9 +2177,9 @@ class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent {
         }
     }
 }
-AXSchedulerMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\r\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of matrixSlots\">\r\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \r\n                    [attr.data-uid]=\"d.uid\">\r\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\r\n                        [class.today]=\"d.range.startTime.equal(today)\">\r\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\r\n                            {{d.range.startTime | dt: 'MMM'}}\r\n                        </ng-container>\r\n                        {{d.range.startTime | dt: 'DD'}}\r\n                    </div>\r\n                    <div class=\"event-wrapper\">\r\n                        <ng-container *ngFor=\"let e of d.events\">\r\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\r\n                                [style.background-color]=\"e.color\"\r\n                                (cdkDragStarted)=\"onDragStarted($event)\"\r\n                                (cdkDragEnded)=\"onDragEnded($event)\"\r\n                                (cdkDragEntered)=\"onDragEntered($event)\">\r\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\r\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"view-more\"></div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0px}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
+AXSchedulerMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerMonthViewComponent, selector: "ng-component", host: { listeners: { "wheel": "onKeydownHandler($event)" } }, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-sheduler-month-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\r\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of matrixSlots\">\r\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \r\n                    [attr.data-uid]=\"d.uid\">\r\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\r\n                        [class.today]=\"d.range.startTime.equal(today)\">\r\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\r\n                            {{d.range.startTime | dt: 'MMM'}}\r\n                        </ng-container>\r\n                        {{d.range.startTime | dt: 'DD'}}\r\n                    </div>\r\n                    <div class=\"event-wrapper\">\r\n                        <ng-container *ngFor=\"let e of d.events\">\r\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\r\n                                [style.background-color]=\"e.color\"\r\n                                (cdkDragStarted)=\"onDragStarted($event)\"\r\n                                (cdkDragEnded)=\"onDragEnded($event)\"\r\n                                (cdkDragEntered)=\"onDragEntered($event)\">\r\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\r\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"view-more\"></div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0px}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"view ax-sheduler-month-view\">\r\n    <table class=\"header\">\r\n        <thead>\r\n            <th *ngFor=\"let d of weekDays\" class=\"header-cell\">\r\n                <span [class.same-week-day]=\"d.index==today.dayInWeek\"> {{d.title}}</span>\r\n            </th>\r\n        </thead>\r\n    </table>\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of matrixSlots\">\r\n                <td *ngFor=\"let d of r\" class=\"cell-slot\" cdkDropList [cdkDropListData]=\"d\"\r\n                    (cdkDropListDropped)=\"onDragDropOnDay($event)\" \r\n                    [attr.data-uid]=\"d.uid\">\r\n                    <div class=\"day-num\" [class.first-day-month]=\"d.range.startTime.dayInMonth==1\"\r\n                        [class.today]=\"d.range.startTime.equal(today)\">\r\n                        <ng-container *ngIf=\"d.range.startTime.dayInMonth==1\">\r\n                            {{d.range.startTime | dt: 'MMM'}}\r\n                        </ng-container>\r\n                        {{d.range.startTime | dt: 'DD'}}\r\n                    </div>\r\n                    <div class=\"event-wrapper\">\r\n                        <ng-container *ngFor=\"let e of d.events\">\r\n                            <div class=\"event ax-scheduler-event\" cdkDrag [cdkDragData]=\"e\" [attr.data-uid]=\"e.uid\"\r\n                                [style.background-color]=\"e.color\"\r\n                                (cdkDragStarted)=\"onDragStarted($event)\"\r\n                                (cdkDragEnded)=\"onDragEnded($event)\"\r\n                                (cdkDragEntered)=\"onDragEntered($event)\">\r\n                                <span class=\"ax-sch-str\">{{e.range.startTime | dt: 'HH:mm'}}</span><span\r\n                                    class=\"event-title\">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"view-more\"></div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: [".ax-sheduler-month-view .day-num{position:absolute;left:5px;top:5px;font-size:smaller;padding:1px 5px;display:flex;border-radius:10%;align-items:center;justify-content:center}.ax-sheduler-month-view .day-num.first-day-month{color:var(--primary-color);font-weight:700}.ax-sheduler-month-view .day-num:hover{text-decoration:underline;cursor:pointer}.ax-sheduler-month-view .day-num.today{background-color:var(--primary-light-color);color:var(--danger-fore-color)}.ax-sheduler-month-view .view-more{position:absolute;bottom:0;font-size:x-small;right:0;padding:0 5px;width:100%;cursor:pointer;text-align:center;background-color:var(--gray-dark-color)}.ax-sheduler-month-view .view-more:hover{box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-sheduler-month-view .event-wrapper{position:absolute;top:30px;left:0px}.ax-sheduler-month-view .event-wrapper .event{position:absolute}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
@@ -2275,15 +2274,15 @@ class AXToolbarSchedulerNavigatorComponent {
         }
     }
 }
-AXToolbarSchedulerNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarSchedulerNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarSchedulerNavigatorComponent, selector: "ax-toolbar-scheduler-navigator", outputs: { onNavigate: "onNavigate" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerNavigatorComponent }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: AXToolbarMenuComponent, descendants: true, static: true }, { propertyName: "pop", first: true, predicate: ["pop"], descendants: true, static: true }, { propertyName: "cal", first: true, predicate: ["cal"], descendants: true, static: true }], ngImport: i0, template: `
+AXToolbarSchedulerNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarSchedulerNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarSchedulerNavigatorComponent, selector: "ax-toolbar-scheduler-navigator", outputs: { onNavigate: "onNavigate" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSchedulerNavigatorComponent }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: AXToolbarMenuComponent, descendants: true, static: true }, { propertyName: "pop", first: true, predicate: ["pop"], descendants: true, static: true }, { propertyName: "cal", first: true, predicate: ["cal"], descendants: true, static: true }], ngImport: i0, template: `
     <div id="nav">
     <ax-toolbar-menu [items]="items"  (onItemClick)="onItemClick($event)"></ax-toolbar-menu>
     <ax-popover target="#nav" placement="bottom-end" alignment="top-end" #pop>
         <ax-calendar-box (onValueChanged)="onDateChange($event)" [depth]="viewDepth" #cal></ax-calendar-box>
     </ax-popover>
 </div>`, isInline: true, components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openMode", "closeMode", "visible"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSchedulerNavigatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-toolbar-scheduler-navigator',
@@ -2343,9 +2342,9 @@ class AXSchedulerAgendaViewComponent extends AXSchedulerBaseViewComponent {
         this.navigate(this.navigatorDate.addDay(-this.interval));
     }
 }
-AXSchedulerAgendaViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerAgendaViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerAgendaViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-agenda-view\">\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody *ngIf=\"slots.length; else elseTemplate\">\r\n            <tr *ngFor=\"let slot of slots\" cdkDropList [cdkDropListData]=\"slot\" [attr.data-uid]=\"slot.uid\"\r\n                (cdkDropListDropped)=\"onDragDropOnDay($event)\">\r\n                <td class=\"day-column\">\r\n                    <div class=\"day-num\">{{slot.range.startTime | dt:\"DD\"}}</div>\r\n                    <div class=\"day-name\">{{slot.range.startTime | dt:\"ddd\"}}</div>\r\n                </td>\r\n                <td class=\"day-border\">\r\n                    <ul *ngIf=\"slot.events.length\">\r\n                        <li *ngFor=\"let e of slot.events\" [style.border-color]=\"e.color\" cdkDrag [cdkDragData]=\"e\"\r\n                            [attr.data-uid]=\"e.uid\">\r\n                            <div class=\"event-title\">{{e.title}}</div>\r\n                            <div class=\"event-time\">{{e.range.startTime | dt:\"HH:mm\"}} - <span\r\n                                    *ngIf=\"e.range.duration('days')!=0 then a else b\"></span></div>\r\n                            <ng-template #a>\r\n                                {{e.range.endTime | dt:\"HH:mm\"}}\r\n                            </ng-template>\r\n                            <ng-template #b>\r\n                                {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\r\n                            </ng-template>\r\n\r\n                            <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                {{e.title}}\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"!slot.events.length\" class=\"event-empty\">No events</div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <ng-template #elseTemplate>\r\n            <tbody>\r\n                <tr>\r\n                    <td colspan=\"2\">\r\n                        <div class=\"event-empty\">No events</div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </ng-template>\r\n    </table>\r\n</div>", styles: [".ax-scheduler-agenda-view{height:100%;overflow-y:auto}.ax-scheduler-agenda-view table{border-top:1px solid var(--border-color)}.ax-scheduler-agenda-view .event-title{color:var(--gray-fore-color)}.ax-scheduler-agenda-view td{padding-top:5px;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;border:none}.ax-scheduler-agenda-view td.day-border{border-bottom:1px solid var(--border-color);padding:5px;vertical-align:middle}.ax-scheduler-agenda-view .day-column{width:80px;text-align:center}.ax-scheduler-agenda-view .day-column .day-num{font-weight:600}.ax-scheduler-agenda-view .day-column .day-name{font-size:smaller}.ax-scheduler-agenda-view ul{list-style:none;padding:0;margin:0}.ax-scheduler-agenda-view ul li{border-left:4px solid var(--primary-color);margin-bottom:var(--sp-sm-size);padding:0 8px}.ax-scheduler-agenda-view ul li:hover{background-color:var(--primary-lighter-color);cursor:pointer}.ax-scheduler-agenda-view ul li .event-time,.ax-scheduler-agenda-view ul li .event-empty{color:var(--gray-fore-color);font-size:smaller}\n"], directives: [{ type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
+AXSchedulerAgendaViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerAgendaViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerAgendaViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-agenda-view\">\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody *ngIf=\"slots.length; else elseTemplate\">\r\n            <tr *ngFor=\"let slot of slots\" cdkDropList [cdkDropListData]=\"slot\" [attr.data-uid]=\"slot.uid\"\r\n                (cdkDropListDropped)=\"onDragDropOnDay($event)\">\r\n                <td class=\"day-column\">\r\n                    <div class=\"day-num\">{{slot.range.startTime | dt:\"DD\"}}</div>\r\n                    <div class=\"day-name\">{{slot.range.startTime | dt:\"ddd\"}}</div>\r\n                </td>\r\n                <td class=\"day-border\">\r\n                    <ul *ngIf=\"slot.events.length\">\r\n                        <li *ngFor=\"let e of slot.events\" [style.border-color]=\"e.color\" cdkDrag [cdkDragData]=\"e\"\r\n                            [attr.data-uid]=\"e.uid\">\r\n                            <div class=\"event-title\">{{e.title}}</div>\r\n                            <div class=\"event-time\">{{e.range.startTime | dt:\"HH:mm\"}} - <span\r\n                                    *ngIf=\"e.range.duration('days')!=0 then a else b\"></span></div>\r\n                            <ng-template #a>\r\n                                {{e.range.endTime | dt:\"HH:mm\"}}\r\n                            </ng-template>\r\n                            <ng-template #b>\r\n                                {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\r\n                            </ng-template>\r\n\r\n                            <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                {{e.title}}\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"!slot.events.length\" class=\"event-empty\">No events</div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <ng-template #elseTemplate>\r\n            <tbody>\r\n                <tr>\r\n                    <td colspan=\"2\">\r\n                        <div class=\"event-empty\">No events</div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </ng-template>\r\n    </table>\r\n</div>", styles: [".ax-scheduler-agenda-view{height:100%;overflow-y:auto}.ax-scheduler-agenda-view table{border-top:1px solid var(--border-color)}.ax-scheduler-agenda-view .event-title{color:var(--gray-fore-color)}.ax-scheduler-agenda-view td{padding-top:5px;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;border:none}.ax-scheduler-agenda-view td.day-border{border-bottom:1px solid var(--border-color);padding:5px;vertical-align:middle}.ax-scheduler-agenda-view .day-column{width:80px;text-align:center}.ax-scheduler-agenda-view .day-column .day-num{font-weight:600}.ax-scheduler-agenda-view .day-column .day-name{font-size:smaller}.ax-scheduler-agenda-view ul{list-style:none;padding:0;margin:0}.ax-scheduler-agenda-view ul li{border-left:4px solid var(--primary-color);margin-bottom:var(--sp-sm-size);padding:0 8px}.ax-scheduler-agenda-view ul li:hover{background-color:var(--primary-lighter-color);cursor:pointer}.ax-scheduler-agenda-view ul li .event-time,.ax-scheduler-agenda-view ul li .event-empty{color:var(--gray-fore-color);font-size:smaller}\n"], directives: [{ type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }], template: "<div class=\"view ax-scheduler-agenda-view\">\r\n    <table class=\"body\" cdkDropListGroup>\r\n        <tbody *ngIf=\"slots.length; else elseTemplate\">\r\n            <tr *ngFor=\"let slot of slots\" cdkDropList [cdkDropListData]=\"slot\" [attr.data-uid]=\"slot.uid\"\r\n                (cdkDropListDropped)=\"onDragDropOnDay($event)\">\r\n                <td class=\"day-column\">\r\n                    <div class=\"day-num\">{{slot.range.startTime | dt:\"DD\"}}</div>\r\n                    <div class=\"day-name\">{{slot.range.startTime | dt:\"ddd\"}}</div>\r\n                </td>\r\n                <td class=\"day-border\">\r\n                    <ul *ngIf=\"slot.events.length\">\r\n                        <li *ngFor=\"let e of slot.events\" [style.border-color]=\"e.color\" cdkDrag [cdkDragData]=\"e\"\r\n                            [attr.data-uid]=\"e.uid\">\r\n                            <div class=\"event-title\">{{e.title}}</div>\r\n                            <div class=\"event-time\">{{e.range.startTime | dt:\"HH:mm\"}} - <span\r\n                                    *ngIf=\"e.range.duration('days')!=0 then a else b\"></span></div>\r\n                            <ng-template #a>\r\n                                {{e.range.endTime | dt:\"HH:mm\"}}\r\n                            </ng-template>\r\n                            <ng-template #b>\r\n                                {{e.range.endTime | dt:\"YYYY-MM-DD HH:mm\"}}\r\n                            </ng-template>\r\n\r\n                            <div *cdkDragPreview [style.background-color]=\"e.color\" class=\"event-drag-preview\">\r\n                                {{e.title}}\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                    <div *ngIf=\"!slot.events.length\" class=\"event-empty\">No events</div>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n        <ng-template #elseTemplate>\r\n            <tbody>\r\n                <tr>\r\n                    <td colspan=\"2\">\r\n                        <div class=\"event-empty\">No events</div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </ng-template>\r\n    </table>\r\n</div>", styles: [".ax-scheduler-agenda-view{height:100%;overflow-y:auto}.ax-scheduler-agenda-view table{border-top:1px solid var(--border-color)}.ax-scheduler-agenda-view .event-title{color:var(--gray-fore-color)}.ax-scheduler-agenda-view td{padding-top:5px;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;border:none}.ax-scheduler-agenda-view td.day-border{border-bottom:1px solid var(--border-color);padding:5px;vertical-align:middle}.ax-scheduler-agenda-view .day-column{width:80px;text-align:center}.ax-scheduler-agenda-view .day-column .day-num{font-weight:600}.ax-scheduler-agenda-view .day-column .day-name{font-size:smaller}.ax-scheduler-agenda-view ul{list-style:none;padding:0;margin:0}.ax-scheduler-agenda-view ul li{border-left:4px solid var(--primary-color);margin-bottom:var(--sp-sm-size);padding:0 8px}.ax-scheduler-agenda-view ul li:hover{background-color:var(--primary-lighter-color);cursor:pointer}.ax-scheduler-agenda-view ul li .event-time,.ax-scheduler-agenda-view ul li .event-empty{color:var(--gray-fore-color);font-size:smaller}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
@@ -2414,9 +2413,9 @@ class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewComponent {
     arrangeEvents() {
     }
 }
-AXSchedulerTimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerTimelineViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerTimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerTimelineViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\r\n    <table class=\"header\">\r\n        <colgroup>\r\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\r\n        </colgroup>\r\n        <tbody>\r\n            <ng-container *ngFor=\"let d of slots\">\r\n                <tr>\r\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\r\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                <tr>\r\n                    <td *ngFor=\"let t of times\">\r\n                        <div>\r\n                            {{t.display}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n    <!-- <div class=\"v-scroll\">\r\n        <table class=\"body\">\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div> -->\r\n</div>", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerTimelineViewComponent, decorators: [{
+AXSchedulerTimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerTimelineViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerTimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerTimelineViewComponent, selector: "ng-component", providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"view ax-scheduler-timeline-view\">\r\n    <table class=\"header\">\r\n        <colgroup>\r\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\r\n        </colgroup>\r\n        <tbody>\r\n            <ng-container *ngFor=\"let d of slots\">\r\n                <tr>\r\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\r\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                <tr>\r\n                    <td *ngFor=\"let t of times\">\r\n                        <div>\r\n                            {{t.display}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n    <!-- <div class=\"v-scroll\">\r\n        <table class=\"body\">\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div> -->\r\n</div>", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "dt": i1$2.AXDateTimePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerTimelineViewComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }], template: "<div class=\"view ax-scheduler-timeline-view\">\r\n    <table class=\"header\">\r\n        <colgroup>\r\n            <col *ngFor=\"let t of times\" class=\"time-column\"/>\r\n        </colgroup>\r\n        <tbody>\r\n            <ng-container *ngFor=\"let d of slots\">\r\n                <tr>\r\n                    <td class=\"header-cell\" [attr.colspan]=\"times.length\">\r\n                        <div [class.same-week-day]=\"d.range.startTime.equal(today)\">\r\n                            {{d.range.startTime | dt: 'MMM DD, dddd'}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                <tr>\r\n                    <td *ngFor=\"let t of times\">\r\n                        <div>\r\n                            {{t.display}}\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n    <!-- <div class=\"v-scroll\">\r\n        <table class=\"body\">\r\n            <tbody>\r\n                <tr *ngFor=\"let t of times\">\r\n                    <td>\r\n                        {{t.display}}\r\n                    </td>\r\n                    <td *ngFor=\"let d of slots\" class=\"slot-cell\">\r\n                        <div class=\"event-wrapper\">\r\n                            <ng-container *ngFor=\"let e of d.events\">\r\n                                <div *ngIf=\"e.range.startTime.date.getHours()==t.value\" class=\"event\"\r\n                                    [attr.data-uid]=\"e.uid\" [style.background-color]=\"e.color\">\r\n                                    <div class=\"event-title\">{{e.title}}</div>\r\n                                    <div>\r\n                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -\r\n                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div> -->\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
@@ -2456,9 +2455,9 @@ class AXToolbarSearchComponent {
         this.searchChangeObserver.next(text);
     }
 }
-AXToolbarSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarSearchComponent, selector: "ax-toolbar-search", inputs: { text: "text" }, outputs: { onValueChanged: "onValueChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"search-bar\">\r\n  <input #input type=\"text\" placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" (input)=\"onSearchChanged($event.target.value)\" />\r\n  <i class=\"far fa-search text-secondary\"></i>\r\n</div>", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::-moz-placeholder{color:var(--ax-gray-color)}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarSearchComponent, decorators: [{
+AXToolbarSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarSearchComponent, selector: "ax-toolbar-search", inputs: { text: "text" }, outputs: { onValueChanged: "onValueChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"search-bar\">\r\n  <input #input type=\"text\" placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" (input)=\"onSearchChanged($event.target.value)\" />\r\n  <i class=\"far fa-search text-secondary\"></i>\r\n</div>", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::-moz-placeholder{color:var(--ax-gray-color)}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toolbar-search', providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }], template: "<div class=\"search-bar\">\r\n  <input #input type=\"text\" placeholder=\"\u062C\u0633\u062A\u062C\u0648 ...\" (input)=\"onSearchChanged($event.target.value)\" />\r\n  <i class=\"far fa-search text-secondary\"></i>\r\n</div>", styles: [".search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ax-border-color);border-radius:var(--ax-size-border-radius);padding:.3em .6em;background:var(--ax-white-color)}.search-bar input{border:none!important;background-color:transparent;outline-color:transparent!important;flex:1;font-family:inherit;font-size:inherit}.search-bar input::-moz-placeholder{color:var(--ax-gray-color)}.search-bar input::placeholder{color:var(--ax-gray-color)}.search-bar i{color:var(--ax-gray-color)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { inputSearch: [{
@@ -2504,9 +2503,9 @@ class AXDataSourceComponent {
         }
     }
 }
-AXDataSourceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXDataSourceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDataSourceComponent, selector: "ax-data-source", inputs: { provideData: "provideData", params: "params" }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceComponent, decorators: [{
+AXDataSourceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXDataSourceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDataSourceComponent, selector: "ax-data-source", inputs: { provideData: "provideData", params: "params" }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ax-data-source",
@@ -2683,9 +2682,9 @@ class AXSchedulerComponent {
         });
     }
 }
-AXSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: { currentView: "currentView", events: "events" }, outputs: { onEventChanged: "onEventChanged" }, queries: [{ propertyName: "viewManager", first: true, predicate: AXSchedulerViewsProperty, descendants: true, static: true }, { propertyName: "toolbarView", first: true, predicate: AXToolbarSchedulerViewsComponent, descendants: true, static: true }, { propertyName: "toolbarNavigator", first: true, predicate: AXToolbarSchedulerNavigatorComponent, descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "dataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"ax-scheduler-views\"></ng-content>\r\n<div class=\"ax-scheduler\">\r\n    <div class=\"ax-scheduler-toolbar\" >\r\n        <ng-content select=\"ax-toolbar\"></ng-content>\r\n    </div>\r\n    <div class=\"view-container\" #container>\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n</div>", styles: [".ax-scheduler{height:100%;width:100%}.ax-scheduler .ax-scheduler-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-bottom:0;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px}.ax-scheduler .event-wrapper{z-index:100}.ax-scheduler .event-wrapper .event{color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler .event-wrapper .event .span{padding:1px 2px;margin:1px}.ax-scheduler .event-wrapper .event .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}.ax-scheduler .event-wrapper .event:hover,.ax-scheduler .event-wrapper .event:focus{cursor:pointer;box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-scheduler table{border-collapse:collapse;table-layout:fixed;width:100%}.ax-scheduler table td.cell-slot{position:relative}.ax-scheduler table td.cell-slot:hover{background-color:var(--primary-lighter-color)}.ax-scheduler table .same-week-day{color:var(--primary-color)}.ax-scheduler th,.ax-scheduler td{padding:8px 16px;border:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative}.ax-scheduler th{overflow:hidden}.ax-scheduler .view-container{height:100%}.ax-scheduler .time-column{width:80px}.ax-scheduler .h-scroll{overflow-x:auto;overflow-y:hidden;height:100%}.ax-scheduler .v-scroll{overflow-y:auto;overflow-x:hidden}.ax-scheduler .cdk-drag-placeholder{opacity:0;display:none}.event-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;padding:5px 10px;color:#fff;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.event-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-scheduler-event.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler-event.cdk-drag-preview .span{padding:1px 2px;margin:1px}.ax-scheduler-event.cdk-drag-preview .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}\n"], directives: [{ type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerComponent, decorators: [{
+AXSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: { currentView: "currentView", events: "events" }, outputs: { onEventChanged: "onEventChanged" }, queries: [{ propertyName: "viewManager", first: true, predicate: AXSchedulerViewsProperty, descendants: true, static: true }, { propertyName: "toolbarView", first: true, predicate: AXToolbarSchedulerViewsComponent, descendants: true, static: true }, { propertyName: "toolbarNavigator", first: true, predicate: AXToolbarSchedulerNavigatorComponent, descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "dataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<ng-content select=\"ax-scheduler-views\"></ng-content>\r\n<div class=\"ax-scheduler\">\r\n    <div class=\"ax-scheduler-toolbar\" >\r\n        <ng-content select=\"ax-toolbar\"></ng-content>\r\n    </div>\r\n    <div class=\"view-container\" #container>\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n</div>", styles: [".ax-scheduler{height:100%;width:100%}.ax-scheduler .ax-scheduler-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-bottom:0;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px}.ax-scheduler .event-wrapper{z-index:100}.ax-scheduler .event-wrapper .event{color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler .event-wrapper .event .span{padding:1px 2px;margin:1px}.ax-scheduler .event-wrapper .event .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}.ax-scheduler .event-wrapper .event:hover,.ax-scheduler .event-wrapper .event:focus{cursor:pointer;box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-scheduler table{border-collapse:collapse;table-layout:fixed;width:100%}.ax-scheduler table td.cell-slot{position:relative}.ax-scheduler table td.cell-slot:hover{background-color:var(--primary-lighter-color)}.ax-scheduler table .same-week-day{color:var(--primary-color)}.ax-scheduler th,.ax-scheduler td{padding:8px 16px;border:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative}.ax-scheduler th{overflow:hidden}.ax-scheduler .view-container{height:100%}.ax-scheduler .time-column{width:80px}.ax-scheduler .h-scroll{overflow-x:auto;overflow-y:hidden;height:100%}.ax-scheduler .v-scroll{overflow-y:auto;overflow-x:hidden}.ax-scheduler .cdk-drag-placeholder{opacity:0;display:none}.event-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;padding:5px 10px;color:#fff;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.event-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-scheduler-event.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler-event.cdk-drag-preview .span{padding:1px 2px;margin:1px}.ax-scheduler-event.cdk-drag-preview .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}\n"], directives: [{ type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler', encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-scheduler-views\"></ng-content>\r\n<div class=\"ax-scheduler\">\r\n    <div class=\"ax-scheduler-toolbar\" >\r\n        <ng-content select=\"ax-toolbar\"></ng-content>\r\n    </div>\r\n    <div class=\"view-container\" #container>\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n</div>", styles: [".ax-scheduler{height:100%;width:100%}.ax-scheduler .ax-scheduler-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-bottom:0;-webkit-border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;border-top-left-radius:4px;border-top-right-radius:4px}.ax-scheduler .event-wrapper{z-index:100}.ax-scheduler .event-wrapper .event{color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler .event-wrapper .event .span{padding:1px 2px;margin:1px}.ax-scheduler .event-wrapper .event .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}.ax-scheduler .event-wrapper .event:hover,.ax-scheduler .event-wrapper .event:focus{cursor:pointer;box-shadow:0 6px 10px #00000024,0 1px 18px #0000001f,0 3px 5px -1px #0003}.ax-scheduler table{border-collapse:collapse;table-layout:fixed;width:100%}.ax-scheduler table td.cell-slot{position:relative}.ax-scheduler table td.cell-slot:hover{background-color:var(--primary-lighter-color)}.ax-scheduler table .same-week-day{color:var(--primary-color)}.ax-scheduler th,.ax-scheduler td{padding:8px 16px;border:1px solid var(--border-color);text-overflow:ellipsis;white-space:nowrap;position:relative}.ax-scheduler th{overflow:hidden}.ax-scheduler .view-container{height:100%}.ax-scheduler .time-column{width:80px}.ax-scheduler .h-scroll{overflow-x:auto;overflow-y:hidden;height:100%}.ax-scheduler .v-scroll{overflow-y:auto;overflow-x:hidden}.ax-scheduler .cdk-drag-placeholder{opacity:0;display:none}.event-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;padding:5px 10px;color:#fff;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.event-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-scheduler-event.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:-webkit-grabbing;cursor:grabbing;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--primary-fore-color);border:var(--gray-light-color);display:flex;overflow:hidden;position:absolute;font-size:smaller;justify-content:space-between;padding:1px 3px}.ax-scheduler-event.cdk-drag-preview .span{padding:1px 2px;margin:1px}.ax-scheduler-event.cdk-drag-preview .event-title{text-overflow:ellipsis;font-weight:700;color:var(--primary-fore-color);white-space:nowrap;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { portalOutlet: [{
@@ -2721,9 +2720,9 @@ class AXToolbarComponent {
     constructor() { }
     ngOnInit() { }
 }
-AXToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarComponent, selector: "ax-toolbar", ngImport: i0, template: "<div class=\"ax-toolbar\">\r\n    <ng-content>\r\n    </ng-content>\r\n</div>", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarComponent, decorators: [{
+AXToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarComponent, selector: "ax-toolbar", ngImport: i0, template: "<div class=\"ax-toolbar\">\r\n    <ng-content>\r\n    </ng-content>\r\n</div>", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toolbar', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-toolbar\">\r\n    <ng-content>\r\n    </ng-content>\r\n</div>", styles: ["ax-toolbar{width:100%}ax-toolbar .ax-toolbar{display:flex;width:100%;justify-content:space-between;align-items:center}\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -2739,15 +2738,15 @@ class AXToolbarTitleComponent {
         }
     }
 }
-AXToolbarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: { text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
+AXToolbarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: { text: "text" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }], ngImport: i0, template: `
         <ng-container *ngIf="text; else elseTemplate">
         <div class="title">{{text}}</div>
         </ng-container>
         <ng-template #elseTemplate>
             <ng-content></ng-content>
         </ng-template>`, isInline: true, styles: [".title{height:100%;display:flex;align-items:center}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-toolbar-title',
@@ -2796,8 +2795,8 @@ class AXToolbarButtonGroupComponent {
         }
     }
 }
-AXToolbarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarButtonGroupComponent, selector: "ax-toolbar-group-button", inputs: { items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
+AXToolbarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarButtonGroupComponent, selector: "ax-toolbar-group-button", inputs: { items: "items", mode: "mode" }, outputs: { itemClick: "itemClick" }, providers: [
         { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
     ], ngImport: i0, template: `
     <div class="btn-group" role="group">
@@ -2814,7 +2813,7 @@ AXToolbarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
       </button>
     </div>
   `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ax-toolbar-group-button",
@@ -2858,8 +2857,8 @@ class AXMenuItemComponent {
         }
     }
 }
-AXMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { item: "item", level: "level" }, outputs: { showSubMenu: "showSubMenu" }, ngImport: i0, template: `
+AXMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { item: "item", level: "level" }, outputs: { showSubMenu: "showSubMenu" }, ngImport: i0, template: `
       <div  class="ax-menu-item {{item.style}}" [attr.data-level]="level" (click)="showSubItems($event)" [ngClass]="{'disabled': item.disable}" >
         <i *ngIf="item.startIcon" class="icon {{item.startIcon}}"></i>
         <span class="text">{{ item.text }}</span>
@@ -2867,7 +2866,7 @@ AXMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         <i class="far fa-angle-down icon drop-icon" *ngIf="item?.items?.length && item.text"></i>
       </div>
     `, isInline: true, directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-menu-item',
@@ -2946,8 +2945,8 @@ class AXMenu2Component {
         this.hideOverlays();
     }
 }
-AXMenu2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenu2Component, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenu2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXMenu2Component, selector: "ax-menu2", inputs: { items: "items" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, ngImport: i0, template: `
+AXMenu2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenu2Component, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXMenu2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXMenu2Component, selector: "ax-menu2", inputs: { items: "items" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, ngImport: i0, template: `
      <div class="ax ax-menu ax-menu-vertical" [attr.data-level]="level">
         <ax-menu-item
             *ngFor="let item of items"
@@ -2957,7 +2956,7 @@ AXMenu2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </ax-menu-item>
      </div>
     `, isInline: true, styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{opacity:.6;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{cursor:not-allowed!important}\n"], components: [{ type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["item", "level"], outputs: ["showSubMenu"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenu2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenu2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu2', template: `
      <div class="ax ax-menu ax-menu-vertical" [attr.data-level]="level">
@@ -2980,10 +2979,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTooltipModule {
 }
-AXTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipDirective], imports: [CommonModule], exports: [AXTooltipDirective] });
-AXTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTooltipModule, decorators: [{
+AXTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipDirective], imports: [CommonModule], exports: [AXTooltipDirective] });
+AXTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTooltipDirective],
@@ -2995,10 +2994,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXMenuModule {
 }
-AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent], imports: [CommonModule, AXTooltipModule], exports: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent] });
-AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuModule, providers: [], imports: [[CommonModule, AXTooltipModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXMenuModule, decorators: [{
+AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent], imports: [CommonModule, AXTooltipModule], exports: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent] });
+AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuModule, providers: [], imports: [[CommonModule, AXTooltipModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXMenuComponent, AXMenu2Component, AXMenuItemComponent],
@@ -3017,8 +3016,8 @@ const COMPONENTS$1 = [
 ];
 class AXToolbarModule {
 }
-AXToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarModule, declarations: [AXToolbarComponent,
+AXToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarModule, declarations: [AXToolbarComponent,
         AXToolbarMenuComponent,
         AXToolbarSearchComponent,
         AXToolbarTitleComponent,
@@ -3027,8 +3026,8 @@ AXToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         AXToolbarSearchComponent,
         AXToolbarTitleComponent,
         AXToolbarButtonGroupComponent] });
-AXToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarModule, providers: [], imports: [[CommonModule, AXPopoverModule, AXMenuModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarModule, decorators: [{
+AXToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarModule, providers: [], imports: [[CommonModule, AXPopoverModule, AXMenuModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS$1],
@@ -3040,8 +3039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXSchedulerModule {
 }
-AXSchedulerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerModule, declarations: [AXSchedulerComponent,
+AXSchedulerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerModule, declarations: [AXSchedulerComponent,
         AXSchedulerViewsProperty,
         AXSchedulerViewProperty,
         AXSchedulerDayTimeViewComponent,
@@ -3058,8 +3057,8 @@ AXSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         AXSchedulerTimelineViewComponent,
         AXToolbarSchedulerViewsComponent,
         AXToolbarSchedulerNavigatorComponent] });
-AXSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerModule, providers: [], imports: [[CommonModule, AXCoreModule, AXCalendarBoxModule, AXToolbarModule, AXPopoverModule, PortalModule, DragDropModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSchedulerModule, decorators: [{
+AXSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerModule, providers: [], imports: [[CommonModule, AXCoreModule, AXCalendarBoxModule, AXToolbarModule, AXPopoverModule, PortalModule, DragDropModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSchedulerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3152,9 +3151,9 @@ class AXCheckBoxComponent extends AXBaseComponent {
         //  }, 100);
     }
 }
-AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { readonly: "readonly", disabled: "disabled", size: "size", label: "label", tabIndex: "tabIndex", indeterminate: "indeterminate", value: "value" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", onClick: "onClick" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-check-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n  (click)=\"handleClick($event)\">\r\n  {{ label }}\r\n  <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n    [disabled]=\"disabled || readonly\" />\r\n  <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n\r\n<!-- [(ngModel)]=\"value\" -->\r\n<!-- (click)=\"handleClick($event)\"  -->\r\n\r\n<label class=\"ax-checkbox-container\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\">\r\n\r\n  <input #input class=\"ax-checkbox\" type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [class.checked]=\"value\"\r\n    [checked]=\"value\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\" (click)=\"handleClick($event)\"\r\n    [disabled]=\"disabled || readonly\" />\r\n\r\n\r\n  <span>{{ label ? label : '&nbsp;' }}</span>\r\n</label>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { input: [{
@@ -3184,10 +3183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXCheckBoxModule {
 }
-AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
-AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
+AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],
@@ -3239,9 +3238,9 @@ class AXContextMenuComponent {
         }
     }
 }
-AXContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\r\n            <div class=\"startIcon\">\r\n                <i class=\"{{item.icon}}\"></i>\r\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            </div>\r\n            <span>{{item.text}}</span>\r\n\r\n            <div class=\"endIcon\">\r\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n\r\n</ul> -->\r\n\r\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\r\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveContextMenu let-items>\r\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\r\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\r\n        <div class=\"startIcon\">\r\n            <i class=\"{{item.icon}}\"></i>\r\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n        </div>\r\n        <span>{{item.text}}</span>\r\n\r\n        <div class=\"endIcon\">\r\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\r\n        </div>\r\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\r\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\r\n            </ng-container>\r\n        </ul>\r\n    </li>\r\n</ng-template>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuComponent, decorators: [{
+AXContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { size: "size", width: "width", items: "items" }, outputs: { onItemClick: "onItemClick", onClosed: "onClosed" }, host: { classAttribute: "ax context-menu-container" }, viewQueries: [{ propertyName: "contex", first: true, predicate: ["contex"], descendants: true }], ngImport: i0, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\r\n            <div class=\"startIcon\">\r\n                <i class=\"{{item.icon}}\"></i>\r\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            </div>\r\n            <span>{{item.text}}</span>\r\n\r\n            <div class=\"endIcon\">\r\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n\r\n</ul> -->\r\n\r\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\r\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveContextMenu let-items>\r\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\r\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\r\n        <div class=\"startIcon\">\r\n            <i class=\"{{item.icon}}\"></i>\r\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n        </div>\r\n        <span>{{item.text}}</span>\r\n\r\n        <div class=\"endIcon\">\r\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\r\n        </div>\r\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\r\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\r\n            </ng-container>\r\n        </ul>\r\n    </li>\r\n</ng-template>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', host: { class: 'ax context-menu-container' }, template: "<!-- <ul class=\"ax context-menu {{size}}\" [style.width.px]=\"width\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li class=\"context-menu-item\" [class.divider]=\"item.divider\" [class.disabled]=\"item.disable\">\r\n            <div class=\"startIcon\">\r\n                <i class=\"{{item.icon}}\"></i>\r\n                <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            </div>\r\n            <span>{{item.text}}</span>\r\n\r\n            <div class=\"endIcon\">\r\n                <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n                <i class=\"far fa-angle-left ax-menu-item-drop-icon\"></i>\r\n            </div>\r\n        </li>\r\n    </ng-container>\r\n\r\n</ul> -->\r\n\r\n<ul #contex class=\"ax context-menu {{size}}\" [style.width.px]=\"width\"\r\n    [ngClass]=\"{'animate__animated animate__faster animate__fadeIn': show}\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: items }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveContextMenu let-items>\r\n    <li *ngFor=\"let item of items\" class=\"context-menu-item\" [class.divider]=\"item.divider\"\r\n        [class.disabled]=\"item.disable\" (click)=\"handleClickItem(item)\">\r\n        <div class=\"startIcon\">\r\n            <i class=\"{{item.icon}}\"></i>\r\n            <i class=\"{{item.startIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n        </div>\r\n        <span>{{item.text}}</span>\r\n\r\n        <div class=\"endIcon\">\r\n            <i class=\"{{item.endIcon}}\" *ngIf=\"!item.icon && item.startIcon\"></i>\r\n            <i class=\"far fa-angle-left ax-menu-item-drop-icon\" *ngIf=\"item.items?.length > 0\"></i>\r\n        </div>\r\n        <ul class=\"ax context-menu child\" *ngIf=\"item.items?.length > 0\">\r\n            <ng-container *ngTemplateOutlet=\"recursiveContextMenu; context:{ $implicit: item.items }\">\r\n            </ng-container>\r\n        </ul>\r\n    </li>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
@@ -3369,9 +3368,9 @@ class AXContextMenuDirective {
         this.clearComponentSubscriptions();
     }
 }
-AXContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-AXContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: { contextMenu: "contextMenu", contextDataItem: "contextDataItem", contextMenuItems: "contextMenuItems", rtl: "rtl" }, outputs: { onContextMenuItemClick: "onContextMenuItemClick" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuDirective, decorators: [{
+AXContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+AXContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: { contextMenu: "contextMenu", contextDataItem: "contextDataItem", contextMenuItems: "contextMenuItems", rtl: "rtl" }, outputs: { onContextMenuItemClick: "onContextMenuItemClick" }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axContextMenu]'
@@ -3393,10 +3392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXContextMenuModule {
 }
-AXContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuModule, declarations: [AXContextMenuComponent, AXContextMenuDirective], imports: [CommonModule], exports: [AXContextMenuComponent, AXContextMenuDirective] });
-AXContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXContextMenuModule, decorators: [{
+AXContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuModule, declarations: [AXContextMenuComponent, AXContextMenuDirective], imports: [CommonModule], exports: [AXContextMenuComponent, AXContextMenuDirective] });
+AXContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXContextMenuComponent, AXContextMenuDirective],
@@ -3434,9 +3433,9 @@ class AXFilterColumnComponent {
         this.cdr.detectChanges();
     }
 }
-AXFilterColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXFilterColumnComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterColumnComponent, inputs: { field: "field", active: "active" }, outputs: { valueChange: "valueChange", activeChange: "activeChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnComponent, decorators: [{
+AXFilterColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXFilterColumnComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterColumnComponent, inputs: { field: "field", active: "active" }, outputs: { valueChange: "valueChange", activeChange: "activeChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
                 type: Input
@@ -3510,9 +3509,9 @@ class AXSelectionListComponent extends AXBaseComponent {
         }
     }
 }
-AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\" mode == 'multiple'; then checkboxList; else radioButtonList\"></ng-container>\r\n<ng-template #checkboxList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <ax-check-box label=\"{{item[textField]}}\" *ngFor=\"let item of items\" [disabled]=\"item.disable || disabled\"\r\n            [readonly]=\"item.readonly || readonly\" [value]=\"selectedValues.indexOf(item[valueField])>-1\"\r\n            (onValueChanged)=\"onCheckValueChange(item[valueField],$event.value)\">\r\n        </ax-check-box>\r\n    </div>\r\n</ng-template>\r\n<ng-template #radioButtonList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <label class=\"ax radio\" for=\"{{uid}}\" [class.disabled]=\"disabled\" [class.readonly]=\"disabled\"\r\n            *ngFor=\"let item of items\" (click)=\"onvalueChanged(item)\">\r\n            {{ item[textField] }}\r\n            <input type=\"radio\" (change)=\"onCheckValueChange(item[valueField],true)\" [value]=\"item[valueField]\"\r\n                [checked]=\"selectedValues==item[valueField]\" [name]=\"uid\" [disabled]=\"item.disable || disabled\"\r\n                [readonly]=\"item.readonly || readonly\" />\r\n            <span class=\"checkmark\"></span>\r\n        </label>\r\n    </div>\r\n</ng-template>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListComponent, decorators: [{
+AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { readonly: "readonly", value: "value", disabled: "disabled", size: "size", direction: "direction", items: "items", mode: "mode", textField: "textField", valueField: "valueField", selectedItems: "selectedItems", selectedValues: "selectedValues" }, outputs: { selectedItemsChange: "selectedItemsChange", selectedValuesChange: "selectedValuesChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\" mode == 'multiple'; then checkboxList; else radioButtonList\"></ng-container>\r\n<ng-template #checkboxList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <ax-check-box label=\"{{item[textField]}}\" *ngFor=\"let item of items\" [disabled]=\"item.disable || disabled\"\r\n            [readonly]=\"item.readonly || readonly\" [value]=\"selectedValues.indexOf(item[valueField])>-1\"\r\n            (onValueChanged)=\"onCheckValueChange(item[valueField],$event.value)\">\r\n        </ax-check-box>\r\n    </div>\r\n</ng-template>\r\n<ng-template #radioButtonList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <label class=\"ax radio\" for=\"{{uid}}\" [class.disabled]=\"disabled\" [class.readonly]=\"disabled\"\r\n            *ngFor=\"let item of items\" (click)=\"onvalueChanged(item)\">\r\n            {{ item[textField] }}\r\n            <input type=\"radio\" (change)=\"onCheckValueChange(item[valueField],true)\" [value]=\"item[valueField]\"\r\n                [checked]=\"selectedValues==item[valueField]\" [name]=\"uid\" [disabled]=\"item.disable || disabled\"\r\n                [readonly]=\"item.readonly || readonly\" />\r\n            <span class=\"checkmark\"></span>\r\n        </label>\r\n    </div>\r\n</ng-template>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\" mode == 'multiple'; then checkboxList; else radioButtonList\"></ng-container>\r\n<ng-template #checkboxList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <ax-check-box label=\"{{item[textField]}}\" *ngFor=\"let item of items\" [disabled]=\"item.disable || disabled\"\r\n            [readonly]=\"item.readonly || readonly\" [value]=\"selectedValues.indexOf(item[valueField])>-1\"\r\n            (onValueChanged)=\"onCheckValueChange(item[valueField],$event.value)\">\r\n        </ax-check-box>\r\n    </div>\r\n</ng-template>\r\n<ng-template #radioButtonList>\r\n    <div class=\"ax selection-list {{size}}\" [ngClass]=\"direction\">\r\n        <label class=\"ax radio\" for=\"{{uid}}\" [class.disabled]=\"disabled\" [class.readonly]=\"disabled\"\r\n            *ngFor=\"let item of items\" (click)=\"onvalueChanged(item)\">\r\n            {{ item[textField] }}\r\n            <input type=\"radio\" (change)=\"onCheckValueChange(item[valueField],true)\" [value]=\"item[valueField]\"\r\n                [checked]=\"selectedValues==item[valueField]\" [name]=\"uid\" [disabled]=\"item.disable || disabled\"\r\n                [readonly]=\"item.readonly || readonly\" />\r\n            <span class=\"checkmark\"></span>\r\n        </label>\r\n    </div>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { readonly: [{
@@ -3682,9 +3681,9 @@ class AXDropdownComponent extends AXBaseDropdownComponent {
     }
     focus() { }
 }
-AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\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\">\r\n        <ng-content select=\"ng-container[header]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\" icon=\"far fa-angle-down icon\"\r\n            type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n    <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" >\r\n        <ng-content select=\"ng-container[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownComponent, decorators: [{
+AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { rtl: "rtl", readonly: "readonly", loading: "loading" }, outputs: { dropdownToggle: "dropdownToggle", onButtonClick: "onButtonClick" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, styleAttribute: "display:contents;" }, viewQueries: [{ propertyName: "baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "endButtons", first: true, predicate: ["endButtons"], descendants: true }, { propertyName: "dropdownEL", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\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\">\r\n        <ng-content select=\"ng-container[header]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\" icon=\"far fa-angle-down icon\"\r\n            type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n    <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" >\r\n        <ng-content select=\"ng-container[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-drop-down', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:contents;' }, template: "<div class=\"ax form-item {{size}}\" [class.readonly]=\"readonly\" [attr.id]=\"uid\" [class.disabled]=\"disabled\" #el>\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\">\r\n        <ng-content select=\"ng-container[header]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"showDropDownButton\" [disabled]=\"disabled || readonly\" [loading]=\"loading\" icon=\"far fa-angle-down icon\"\r\n            type=\"light blank\" [size]=\"size\" (click)=\"handleArrowClick($event)\"  [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #baseTemplate>\r\n    <!-- [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" -->\r\n    <div class=\"ax-dropdown-container-bordered\" [ngStyle]=\"{'width': dropdownWidth ? dropdownWidth + 'px' : 'unset'}\" >\r\n        <ng-content select=\"ng-container[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ng-template>", styles: [".ax-dropdown-container-bordered{background:var(--ax-white-color);border:1px solid;border-color:var(--ax-border-color);border-radius:var(--ax-size-border-radius);box-shadow:0 0 3px #0003;margin:.2rem 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { baseTemplate: [{
@@ -3725,9 +3724,9 @@ class AXTextBoxComponent extends AXBaseTextComponent {
         this.maskKeepCharPositions = false;
     }
 }
-AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", type: "type", showMask: "showMask", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { mask: "mask", type: "type", showMask: "showMask", maxLength: "maxLength", maskGuid: "maskGuid", maskPlaceholder: "maskPlaceholder", maskKeepCharPositions: "maskKeepCharPositions" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input #input [autocomplete]=\"autocomplete\" [name]=\"name\" class=\"ax {{size}}\" [attr.type]=\"type\" [attr.maxlength]=\"maxLength\"\r\n                [textMask]=\"{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}\"\r\n                [(ngModel)]=\"value\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\"\r\n                (blur)=\"handleInputBlur($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { mask: [{
@@ -4382,9 +4381,9 @@ class AXDatePickerComponent extends AXValidatableComponent {
         this.setCaretPosition(this.input.input.nativeElement, this.cursorPosition);
     }
 }
-AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerComponent, decorators: [{
+AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { dayStyle: "dayStyle", dayMinMaxResoan: "dayMinMaxResoan", validation: "validation", placeholder: "placeholder", min: "min", max: "max", readonly: "readonly", disabled: "disabled", allowClear: "allowClear", textAlign: "textAlign", showToday: "showToday", selectableHoliday: "selectableHoliday", dateType: "dateType", showTodayButton: "showTodayButton", openByClick: "openByClick", size: "size", type: "type", value: "value" }, outputs: { typeChange: "typeChange", onValueChanged: "onValueChanged", valueChange: "valueChange" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"], components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXCalendarBoxComponent, selector: "ax-calendar-box", inputs: ["size", "type", "locale", "dir", "min", "max", "selectableHoliday", "dayStyle", "dayMinMaxResoan", "showTodayButton", "view", "depth", "value"], outputs: ["onValueChanged", "onClick", "valueChange"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXValidatableComponent, useExisting: AXDatePickerComponent }], host: { style: 'width: 100%' }, template: "<ax-drop-down [readonly]=\"readonly\" [fitParent]=\"true\" [size]=\"size\" [showDropDownButton]=\"false\"\r\n    icon=\"far fa-calendar-alt\" #dropdown maxHeight=\"unset\">\r\n    <ng-container start>\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container header>\r\n        <ax-text-box #input [textAlign]=\"textAlign\" [(value)]=\"text\" [readonly]=\"false\" [textMask]=\"dateType\"\r\n            [disabled]=\"disabled\" [placeholder]=\"placeholder\" [size]=\"size\" (onkey)=\"handleKeyPress($event)\"\r\n            (onFocus)=\"handleInputFocus()\" (click)=\"handleClick()\" (onBlur)=\"handleInputBlur()\"\r\n            (onValueChanged)=\"textChange($event)\"></ax-text-box>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <ax-calendar-box *ngIf=\"_renderPicker\" [showTodayButton]=\"showTodayButton\"\r\n            [selectableHoliday]=\"selectableHoliday\" [min]=\"min\" [max]=\"max\" [size]=\"size\" (onClick)=\"onClick($event)\"\r\n            (onValueChanged)=\"onDateChange($event)\" [type]=\"type\" [(value)]=\"value\" [dayStyle]=\"dayStyle\"\r\n            [dayMinMaxResoan]=\"dayMinMaxResoan\">\r\n        </ax-calendar-box>\r\n    </ng-container>\r\n    <ng-container end>\r\n        <ax-button end *ngIf=\"allowClear && value\" [disabled]=\"disabled\" icon=\"far fa-times icon\" type=\"blank danger\"\r\n            (click)=\"clear()\" [size]=\"size\" [tabIndex]=\"-1\">\r\n        </ax-button>\r\n        <ax-button end icon=\"far fa-calendar-alt icon\" type=\"light blank\" (click)=\"handleButtonClick()\"\r\n            [disabled]=\"disabled\" [size]=\"size\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </ng-container>\r\n\r\n</ax-drop-down>", styles: [".ax-dropdown-container-bordered .ax-calendar-container{border:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
@@ -4528,8 +4527,8 @@ class AXFilterColumnDateComponent extends AXFilterColumnComponent {
         };
     }
 }
-AXFilterColumnDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnDateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFilterColumnDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date", providers: [
+AXFilterColumnDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnDateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFilterColumnDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date", providers: [
         { provide: AXFilterColumnComponent, useExisting: AXFilterColumnDateComponent }
     ], viewQueries: [{ propertyName: "selection", first: true, predicate: AXSelectionListComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -4544,7 +4543,7 @@ AXFilterColumnDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <ax-date-picker label="Date" [(value)]="fromDate" (onValueChanged)="dateChange($event)"></ax-date-picker>
     </div>
     `, isInline: true, components: [{ type: AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectedItemsChange", "selectedValuesChange"] }, { type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnDateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-date',
@@ -4637,8 +4636,8 @@ class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
         };
     }
 }
-AXFilterColumnNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnNumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFilterColumnNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number", providers: [
+AXFilterColumnNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnNumberComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFilterColumnNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number", providers: [
         { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
     ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -4655,7 +4654,7 @@ AXFilterColumnNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
     </div>
 </div>
     `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-number',
@@ -4718,8 +4717,8 @@ class AXFilterColumnSelectionComponent extends AXFilterColumnComponent {
         super.setFilter(value, operator);
     }
 }
-AXFilterColumnSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnSelectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFilterColumnSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: { items: "items", mode: "mode", dataType: "dataType" }, providers: [
+AXFilterColumnSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnSelectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFilterColumnSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: { items: "items", mode: "mode", dataType: "dataType" }, providers: [
         { provide: AXFilterColumnComponent, useExisting: AXFilterColumnSelectionComponent }
     ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -4727,7 +4726,7 @@ AXFilterColumnSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
     </ax-selection-list>
  </div>
     `, isInline: true, components: [{ type: AXSelectionListComponent, selector: "ax-selection-list", inputs: ["readonly", "value", "disabled", "size", "direction", "items", "mode", "textField", "valueField", "selectedItems", "selectedValues"], outputs: ["selectedItemsChange", "selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnSelectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-selection',
@@ -4816,8 +4815,8 @@ class AXFilterColumnStringComponent extends AXFilterColumnComponent {
         };
     }
 }
-AXFilterColumnStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFilterColumnStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string", providers: [
+AXFilterColumnStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnStringComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFilterColumnStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string", providers: [
         { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
     ], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-filter-section">
@@ -4834,7 +4833,7 @@ AXFilterColumnStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
     </div>
 </div>
     `, isInline: true, components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterColumnStringComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-filter-column-string',
@@ -4863,9 +4862,9 @@ class AXToastWrapperComponent {
     constructor() { }
     ngOnInit() { }
 }
-AXToastWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToastWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToastWrapperComponent, selector: "ax-toast-wrapper", ngImport: i0, template: '', isInline: true, styles: ["ax-toast-wrapper{min-width:300px;max-width:360px;height:auto;position:fixed;bottom:0;right:50%;left:50%;display:flex;flex-direction:column;margin:auto auto auto -150px;z-index:10003;flex-wrap:wrap}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastWrapperComponent, decorators: [{
+AXToastWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToastWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToastWrapperComponent, selector: "ax-toast-wrapper", ngImport: i0, template: '', isInline: true, styles: ["ax-toast-wrapper{min-width:300px;max-width:360px;height:auto;position:fixed;bottom:0;right:50%;left:50%;display:flex;flex-direction:column;margin:auto auto auto -150px;z-index:10003;flex-wrap:wrap}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-toast-wrapper', template: '', encapsulation: ViewEncapsulation.None, styles: ["ax-toast-wrapper{min-width:300px;max-width:360px;height:auto;position:fixed;bottom:0;right:50%;left:50%;display:flex;flex-direction:column;margin:auto auto auto -150px;z-index:10003;flex-wrap:wrap}\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -4924,9 +4923,9 @@ class AXToastMessageComponent {
         this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
     }
 }
-AXToastMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;padding:1rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastMessageComponent, decorators: [{
+AXToastMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXToastMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToastMessageComponent, selector: "ng-component", inputs: { title: "title", message: "message", timeOut: "timeOut", closeable: "closeable", type: "type" }, ngImport: i0, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;padding:1rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastMessageComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"toast-container\">\r\n    <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n        <div>\r\n            <i class=\"{{icon}}\"></i>&nbsp; {{ title }}\r\n        </div>\r\n        <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n    </header>\r\n    <div class=\"content ax toast {{ style }}\">\r\n        {{ message }}\r\n        <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n            <i class=\"far fa-times-circle\"></i>\r\n        </div>\r\n        <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n    </div>\r\n</div>", styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;-webkit-animation:slide-in-bottom .3s cubic-bezier(.25,.46,.45,.94) both;border-radius:var(--ax-size-border-radius)}.toast-container header{display:flex;justify-content:space-between;padding:1rem;font-weight:500}.toast-container .content{padding:1rem;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}to{width:0%}}@keyframes progressBar{0%{width:100%}to{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { title: [{
@@ -4972,9 +4971,9 @@ class AXToastService {
         }
     }
 }
-AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastService, deps: [{ token: i1$2.AXRenderService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastService, decorators: [{
+AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastService, deps: [{ token: i1$2.AXRenderService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$2.AXRenderService }]; } });
@@ -5011,8 +5010,8 @@ class AXPanelBoxComponent {
         }
     }
 }
-AXPanelBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPanelBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: { size: "size", type: "type", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-panel-box ax {{size}}\">\r\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\r\n    <header [class.toggle]=\"allowCollapse\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\">\r\n      </ng-container>\r\n    </header>\r\n  </ng-container>\r\n  <ng-template #elseTemplate>\r\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\r\n      <div [innerHTML]=\"caption\"></div>\r\n      <div *ngIf=\"allowCollapse\">\r\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\r\n      </div>\r\n    </header>\r\n  </ng-template>\r\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+AXPanelBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPanelBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: { size: "size", type: "type", caption: "caption", collapsed: "collapsed", allowCollapse: "allowCollapse" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-panel-box ax {{size}}\">\r\n  <ng-container *ngIf=\"headerTemplate; else elseTemplate\">\r\n    <header [class.toggle]=\"allowCollapse\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\">\r\n      </ng-container>\r\n    </header>\r\n  </ng-container>\r\n  <ng-template #elseTemplate>\r\n    <header class=\"ax panel {{type}}\" [class.toggle]=\"allowCollapse\" (click)=\"toggle()\">\r\n      <div [innerHTML]=\"caption\"></div>\r\n      <div *ngIf=\"allowCollapse\">\r\n        <i [ngClass]=\"{ 'far fa-minus-square' : !collapsed ,'fas fa-plus-square' : collapsed }\"></i>\r\n      </div>\r\n    </header>\r\n  </ng-template>\r\n  <div class=\"content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".ax-panel-box{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:var(--ax-size-border-radius);overflow:hidden;font-family:inherit;font-size:inherit;position:relative}.ax-panel-box header{display:flex;flex:1;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ax-border-color);padding:.8em}.ax-panel-box .content{padding:.8em;overflow:hidden}.ax-panel-box .toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
         trigger("visibilityChanged", [
             state("shown", style({
                 height: "*",
@@ -5028,7 +5027,7 @@ AXPanelBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             transition("hidden => shown", animate("200ms")),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: "ax-panel-box", animations: [
                         trigger("visibilityChanged", [
@@ -5263,9 +5262,9 @@ class AXFilterPanelComponent {
         }, 50);
     }
 }
-AXFilterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-AXFilterPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\r\n    <div class=\"saved-list\" #savedList>\r\n        <ax-panel-box #fb>\r\n            <ng-template #header>\r\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\r\n                    <ax-toolbar>\r\n                        <ax-toolbar-title>\r\n                            <div>\r\n                                <i class=\"far fa-filter\"></i>\r\n                                <span>SAVED FILTERS</span>\r\n                            </div>\r\n                        </ax-toolbar-title>\r\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\r\n                        </ax-toolbar-menu>\r\n                    </ax-toolbar>\r\n                </div>\r\n            </ng-template>\r\n\r\n            <div class=\"list\">\r\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\r\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\r\n                                <li (click)=\"setFilterByName(f.name)\">\r\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\r\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\r\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\r\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\r\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\r\n                                                (click)=\"removeFilter(f)\"></i></span>\r\n                                    </div>\r\n                                </li>\r\n                            </ng-container>\r\n                            <ng-template #editMode>\r\n                                <li>\r\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\r\n                                        (onKey)=\"tbxNameOnKey($event)\">\r\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\r\n                                            <i class=\"far fa-check\"></i>\r\n                                        </ax-button>\r\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\r\n                                            <i class=\"far fa-times\"></i>\r\n                                        </ax-button>\r\n                                        <ax-validation>\r\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\r\n                                            </ax-validation-rule>\r\n                                        </ax-validation>\r\n                                    </ax-text-box>\r\n                                </li>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-template #emptyList>\r\n                    <div class=\"empty-list\">\r\n                        Empty\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ax-panel-box>\r\n    </div>\r\n    <div class=\"body\" #body>\r\n        <ng-container *ngFor=\"let g of groups\">\r\n            <ax-panel-box #fb>\r\n                <ng-template #header>\r\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\r\n                        <i\r\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\r\n                        <span>{{g.caption}}</span>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-container *ngFor=\"let c of g.columns\">\r\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\r\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\r\n                            [(value)]=\"c.active\">\r\n                        </ax-check-box>\r\n                    </div>\r\n                    <div [hidden]=\"!c.active\">\r\n                        <ng-container [ngSwitch]=\"c.type\">\r\n                            <ng-container *ngSwitchCase=\"'selection'\">\r\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\r\n                                    [dataType]=\"c.options.dataType\">\r\n                                </ax-filter-column-selection>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'date'\">\r\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-date>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'number'\">\r\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchDefault>\r\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-string>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </ax-panel-box>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\r\n        <div class=\"filter-panel\">\r\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\r\n                <i class=\"far fa-filter\"></i>\r\n                Apply Filter\r\n            </ax-button>\r\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\r\n                <i class=\"far fa-eraser\"></i>\r\n                Clear\r\n            </ax-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], components: [{ type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { type: AXToolbarComponent, selector: "ax-toolbar" }, { type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }, { type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
+AXFilterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+AXFilterPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\r\n    <div class=\"saved-list\" #savedList>\r\n        <ax-panel-box #fb>\r\n            <ng-template #header>\r\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\r\n                    <ax-toolbar>\r\n                        <ax-toolbar-title>\r\n                            <div>\r\n                                <i class=\"far fa-filter\"></i>\r\n                                <span>SAVED FILTERS</span>\r\n                            </div>\r\n                        </ax-toolbar-title>\r\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\r\n                        </ax-toolbar-menu>\r\n                    </ax-toolbar>\r\n                </div>\r\n            </ng-template>\r\n\r\n            <div class=\"list\">\r\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\r\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\r\n                                <li (click)=\"setFilterByName(f.name)\">\r\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\r\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\r\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\r\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\r\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\r\n                                                (click)=\"removeFilter(f)\"></i></span>\r\n                                    </div>\r\n                                </li>\r\n                            </ng-container>\r\n                            <ng-template #editMode>\r\n                                <li>\r\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\r\n                                        (onKey)=\"tbxNameOnKey($event)\">\r\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\r\n                                            <i class=\"far fa-check\"></i>\r\n                                        </ax-button>\r\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\r\n                                            <i class=\"far fa-times\"></i>\r\n                                        </ax-button>\r\n                                        <ax-validation>\r\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\r\n                                            </ax-validation-rule>\r\n                                        </ax-validation>\r\n                                    </ax-text-box>\r\n                                </li>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-template #emptyList>\r\n                    <div class=\"empty-list\">\r\n                        Empty\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ax-panel-box>\r\n    </div>\r\n    <div class=\"body\" #body>\r\n        <ng-container *ngFor=\"let g of groups\">\r\n            <ax-panel-box #fb>\r\n                <ng-template #header>\r\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\r\n                        <i\r\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\r\n                        <span>{{g.caption}}</span>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-container *ngFor=\"let c of g.columns\">\r\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\r\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\r\n                            [(value)]=\"c.active\">\r\n                        </ax-check-box>\r\n                    </div>\r\n                    <div [hidden]=\"!c.active\">\r\n                        <ng-container [ngSwitch]=\"c.type\">\r\n                            <ng-container *ngSwitchCase=\"'selection'\">\r\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\r\n                                    [dataType]=\"c.options.dataType\">\r\n                                </ax-filter-column-selection>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'date'\">\r\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-date>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'number'\">\r\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchDefault>\r\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-string>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </ax-panel-box>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\r\n        <div class=\"filter-panel\">\r\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\r\n                <i class=\"far fa-filter\"></i>\r\n                Apply Filter\r\n            </ax-button>\r\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\r\n                <i class=\"far fa-eraser\"></i>\r\n                Clear\r\n            </ax-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], components: [{ type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { type: AXToolbarComponent, selector: "ax-toolbar" }, { type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }, { type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-filter-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-filter-panel\" #panel>\r\n    <div class=\"saved-list\" #savedList>\r\n        <ax-panel-box #fb>\r\n            <ng-template #header>\r\n                <div class=\"group-header\" (click)=\"fb.toggle()\">\r\n                    <ax-toolbar>\r\n                        <ax-toolbar-title>\r\n                            <div>\r\n                                <i class=\"far fa-filter\"></i>\r\n                                <span>SAVED FILTERS</span>\r\n                            </div>\r\n                        </ax-toolbar-title>\r\n                        <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\r\n                        </ax-toolbar-menu>\r\n                    </ax-toolbar>\r\n                </div>\r\n            </ng-template>\r\n\r\n            <div class=\"list\">\r\n                <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\r\n                    <ul>\r\n                        <ng-container *ngFor=\"let f of predefinedFilters\">\r\n                            <ng-container *ngIf=\"!f.isInEdit; else editMode\">\r\n                                <li (click)=\"setFilterByName(f.name)\">\r\n                                    <div class=\"item-line\" [class.selected]=\"f.selected\">\r\n                                        <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\r\n                                        <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\r\n                                                (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\r\n                                                class=\"far fa-times text-danger\" title=\"Remove\"\r\n                                                (click)=\"removeFilter(f)\"></i></span>\r\n                                    </div>\r\n                                </li>\r\n                            </ng-container>\r\n                            <ng-template #editMode>\r\n                                <li>\r\n                                    <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\r\n                                        (onKey)=\"tbxNameOnKey($event)\">\r\n                                        <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\r\n                                            <i class=\"far fa-check\"></i>\r\n                                        </ax-button>\r\n                                        <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\r\n                                            <i class=\"far fa-times\"></i>\r\n                                        </ax-button>\r\n                                        <ax-validation>\r\n                                            <ax-validation-rule type=\"required\" message=\"this field is required\">\r\n                                            </ax-validation-rule>\r\n                                        </ax-validation>\r\n                                    </ax-text-box>\r\n                                </li>\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-template #emptyList>\r\n                    <div class=\"empty-list\">\r\n                        Empty\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ax-panel-box>\r\n    </div>\r\n    <div class=\"body\" #body>\r\n        <ng-container *ngFor=\"let g of groups\">\r\n            <ax-panel-box #fb>\r\n                <ng-template #header>\r\n                    <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\r\n                        <i\r\n                            [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\r\n                        <span>{{g.caption}}</span>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-container *ngFor=\"let c of g.columns\">\r\n                    <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\r\n                        <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\r\n                            [(value)]=\"c.active\">\r\n                        </ax-check-box>\r\n                    </div>\r\n                    <div [hidden]=\"!c.active\">\r\n                        <ng-container [ngSwitch]=\"c.type\">\r\n                            <ng-container *ngSwitchCase=\"'selection'\">\r\n                                <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\r\n                                    [dataType]=\"c.options.dataType\">\r\n                                </ax-filter-column-selection>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'date'\">\r\n                                <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-date>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"'number'\">\r\n                                <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-number>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchDefault>\r\n                                <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\r\n                                    [(active)]=\"c.active\">\r\n                                </ax-filter-column-string>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </ax-panel-box>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\r\n        <div class=\"filter-panel\">\r\n            <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\r\n                <i class=\"far fa-filter\"></i>\r\n                Apply Filter\r\n            </ax-button>\r\n            <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\r\n                <i class=\"far fa-eraser\"></i>\r\n                Clear\r\n            </ax-button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXToastService }]; }, propDecorators: { panel: [{
@@ -5441,11 +5440,11 @@ class AXToolbarFilterViewComponent {
         }
     }
 }
-AXToolbarFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"], components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
+AXToolbarFilterViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarFilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarFilterViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarFilterViewComponent, selector: "ax-toolbar-filter-view", inputs: { filterPanel: "filterPanel" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:inherit}\n"], components: [{ type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "selection", "items"], outputs: ["onItemClick"] }, { type: AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarFilterViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toolbar-filter-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:unset}\n"] }]
+            args: [{ selector: 'ax-toolbar-filter-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarFilterViewComponent }], template: "<ax-toolbar-menu [items]=\"menuItems\" (onItemClick)=\"itemClick($event)\" #menu >\r\n   \r\n</ax-toolbar-menu>\r\n<ax-menu target=\".{{_uid}}\" [items]=\"contextMenuItems\"  direction=\"vertical\"  #contextMenu (onItemClick)=\"onCtxClick($event)\">\r\n</ax-menu>", styles: [".ax-toolbar-menu-item .icon-remove{visibility:hidden;color:var(--danger-color);-webkit-margin-start:25px;margin-inline-start:25px;font-size:var(--font-sm-size)}.ax-toolbar-menu-item:hover>.icon-remove{visibility:inherit}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
@@ -5458,10 +5457,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXPanelBoxModule {
 }
-AXPanelBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPanelBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxModule, declarations: [AXPanelBoxComponent], imports: [CommonModule], exports: [AXPanelBoxComponent] });
-AXPanelBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPanelBoxModule, decorators: [{
+AXPanelBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPanelBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxModule, declarations: [AXPanelBoxComponent], imports: [CommonModule], exports: [AXPanelBoxComponent] });
+AXPanelBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPanelBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPanelBoxComponent],
@@ -5480,16 +5479,15 @@ class AXFormGroupComponent extends AXBaseComponent {
     }
     ngAfterViewInit() {
         var _a, _b, _c;
-        debugger;
         this.required = (_c = (_b = (_a = this.component) === null || _a === void 0 ? void 0 : _a.validation) === null || _b === void 0 ? void 0 : _b.rules) === null || _c === void 0 ? void 0 : _c.some(c => c.type === 'required');
         if (this.required) {
             this.div.nativeElement.classList.add('required-state');
         }
     }
 }
-AXFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: "size" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group {{size}}\">\r\n    <ng-content select=\"ax-label\"></ng-content>\r\n    <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n        <div class=\"ax buttons start-buttons\" #startButtons>\r\n            <ng-content select=\"ax-button[start]\"></ng-content>\r\n        </div>\r\n        <div class=\"content\" #content>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"ax buttons end-buttons\" #endButtons>\r\n            <ng-content select=\"ax-button[end]\"></ng-content>\r\n            <ng-content select=\"ax-button\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupComponent, decorators: [{
+AXFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFormGroupComponent, selector: "ax-form-group", inputs: { size: "size" }, host: { styleAttribute: "width: 100%; display:contents;" }, queries: [{ propertyName: "component", first: true, predicate: AXValidatableComponent, descendants: true }], viewQueries: [{ propertyName: "div", first: true, predicate: ["div"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group {{size}}\">\r\n    <ng-content select=\"ax-label\"></ng-content>\r\n    <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n        <div class=\"ax buttons start-buttons\" #startButtons>\r\n            <ng-content select=\"ax-button[start]\"></ng-content>\r\n        </div>\r\n        <div class=\"content\" #content>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"ax buttons end-buttons\" #endButtons>\r\n            <ng-content select=\"ax-button[end]\"></ng-content>\r\n            <ng-content select=\"ax-button\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-form-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%; display:contents;' }, template: "<div class=\"ax form-group {{size}}\">\r\n    <ng-content select=\"ax-label\"></ng-content>\r\n    <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n        <div class=\"ax buttons start-buttons\" #startButtons>\r\n            <ng-content select=\"ax-button[start]\"></ng-content>\r\n        </div>\r\n        <div class=\"content\" #content>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"ax buttons end-buttons\" #endButtons>\r\n            <ng-content select=\"ax-button[end]\"></ng-content>\r\n            <ng-content select=\"ax-button\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
@@ -5506,10 +5504,10 @@ const COMPONENT$6 = [AXFormGroupComponent];
 const MODULES$6 = [CommonModule];
 class AXFormGroupModule {
 }
-AXFormGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFormGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupModule, declarations: [AXFormGroupComponent], imports: [CommonModule], exports: [AXFormGroupComponent] });
-AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$6]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFormGroupModule, decorators: [{
+AXFormGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFormGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, declarations: [AXFormGroupComponent], imports: [CommonModule], exports: [AXFormGroupComponent] });
+AXFormGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, providers: [], imports: [[...MODULES$6]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$6],
@@ -5523,10 +5521,10 @@ const COMPONENT$5 = [AXTextBoxComponent];
 const MODULES$5 = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
 class AXTextBoxModule {
 }
-AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule, AXButtonModule, TextMaskModule, FormsModule], exports: [AXTextBoxComponent] });
-AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$5]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextBoxModule, decorators: [{
+AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule, AXButtonModule, TextMaskModule, FormsModule], exports: [AXTextBoxComponent] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[...MODULES$5]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$5],
@@ -5540,10 +5538,10 @@ const COMPONENT$4 = [AXDropdownComponent];
 const MODULES$4 = [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule];
 class AXDropdownModule {
 }
-AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent], imports: [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule], exports: [AXDropdownComponent] });
-AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$4]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDropdownModule, decorators: [{
+AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent], imports: [CommonModule, AXFormGroupModule, AXTextBoxModule, AXButtonModule, AXPopoverModule, OverlayModule], exports: [AXDropdownComponent] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[...MODULES$4]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$4],
@@ -5555,10 +5553,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXDatePickerModule {
 }
-AXDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXCalendarBoxModule, AXButtonModule, AXTextBoxModule, TextMaskModule, FormsModule], exports: [AXDatePickerComponent] });
-AXDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXCalendarBoxModule, AXButtonModule, AXTextBoxModule, TextMaskModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePickerModule, decorators: [{
+AXDatePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXCalendarBoxModule, AXButtonModule, AXTextBoxModule, TextMaskModule, FormsModule], exports: [AXDatePickerComponent] });
+AXDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXCalendarBoxModule, AXButtonModule, AXTextBoxModule, TextMaskModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXDatePickerComponent],
@@ -5570,10 +5568,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXToastModule {
 }
-AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastModule, declarations: [AXToastWrapperComponent, AXToastMessageComponent], imports: [CommonModule], exports: [AXToastWrapperComponent] });
-AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastModule, providers: [AXToastService], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToastModule, decorators: [{
+AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastModule, declarations: [AXToastWrapperComponent, AXToastMessageComponent], imports: [CommonModule], exports: [AXToastWrapperComponent] });
+AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastModule, providers: [AXToastService], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToastModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXToastWrapperComponent, AXToastMessageComponent],
@@ -5585,10 +5583,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXSelectionListModule {
 }
-AXSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
-AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectionListModule, decorators: [{
+AXSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
+AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectionListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectionListComponent],
@@ -5642,9 +5640,9 @@ class AXValidationFormComponent {
         this.widgets.push(widget);
     }
 }
-AXValidationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXValidationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: { validateOn: "validateOn" }, outputs: { onInit: "onInit" }, queries: [{ propertyName: "widgetsQuery", predicate: AXValidatableComponent, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationFormComponent, decorators: [{
+AXValidationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXValidationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: { validateOn: "validateOn" }, outputs: { onInit: "onInit" }, queries: [{ propertyName: "widgetsQuery", predicate: AXValidatableComponent, descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-form',
@@ -5673,10 +5671,10 @@ class AXValidationModule {
         });
     }
 }
-AXValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationModule, declarations: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent], imports: [CommonModule], exports: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent] });
-AXValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXValidationModule, decorators: [{
+AXValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationModule, declarations: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent], imports: [CommonModule], exports: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent] });
+AXValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXValidationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXValidationFormComponent, AXValidationComponent, AXValidationRuleComponent],
@@ -5696,8 +5694,8 @@ const COMPONENTS = [
 ];
 class AXFilterModule {
 }
-AXFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterModule, declarations: [AXFilterPanelComponent,
+AXFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterModule, declarations: [AXFilterPanelComponent,
         AXFilterColumnStringComponent,
         AXFilterColumnSelectionComponent,
         AXFilterColumnDateComponent,
@@ -5719,7 +5717,7 @@ AXFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXFilterColumnDateComponent,
         AXFilterColumnNumberComponent,
         AXToolbarFilterViewComponent] });
-AXFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterModule, providers: [], imports: [[
+AXFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXPanelBoxModule,
@@ -5733,7 +5731,7 @@ AXFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             AXSelectionListModule,
             AXButtonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],
@@ -5785,9 +5783,9 @@ class AXDataListComponent extends AXBaseComponent {
         this.fetch(this.params);
     }
 }
-AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataListComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AXDataListComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXDataListComponent, inputs: { items: "items" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataListComponent, decorators: [{
+AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataListComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AXDataListComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXDataListComponent, inputs: { items: "items" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Directive
         }], propDecorators: { items: [{
                 type: Input
@@ -5817,8 +5815,8 @@ class AXToolbarListViewComponent {
         }
     }
 }
-AXToolbarListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXToolbarListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXToolbarListViewComponent, selector: "ax-toolbar-list-view", inputs: { vertical: "vertical", verticalWrap: ["vertical-wrap", "verticalWrap"], horizontalWrap: ["horizontal-wrap", "horizontalWrap"], horizontal: "horizontal", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }], ngImport: i0, template: `
+AXToolbarListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXToolbarListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXToolbarListViewComponent, selector: "ax-toolbar-list-view", inputs: { vertical: "vertical", verticalWrap: ["vertical-wrap", "verticalWrap"], horizontalWrap: ["horizontal-wrap", "horizontalWrap"], horizontal: "horizontal", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, providers: [{ provide: AXToolbarItem, useExisting: AXToolbarListViewComponent }], ngImport: i0, template: `
     <div class="btn-group" role="group">
         <button type="button" class="btn btn-light btn-sm" *ngIf="vertical" [class.active]="direction=='vertical'"   (click)="direction='vertical'" title="vertical">
         <i class="far fa-bars"></i>
@@ -5834,7 +5832,7 @@ AXToolbarListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         </button>
     </div>
     `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXToolbarListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXToolbarListViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-toolbar-list-view',
@@ -5941,9 +5939,9 @@ class AXListComponent extends AXDataListComponent {
     dragDrop(event) {
     }
 }
-AXListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\">\r\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\r\n    <ng-content select=\"ax-toolbar\"></ng-content>\r\n  </div>\r\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\r\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\r\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\r\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\r\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\r\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n          </ng-container>\r\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #elseTemplate>\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <!-- </ng-container> -->\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"items==null || items.length==0\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListComponent, decorators: [{
+AXListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXListComponent, selector: "ax-list", inputs: { width: "width", height: "height", dropId: "dropId", connectedList: "connectedList", allowMoveItem: "allowMoveItem", dataSource: "dataSource", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", direction: "direction" }, outputs: { onDirectionChanged: "onDirectionChanged" }, queries: [{ propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "searchToolbar", first: true, predicate: AXToolbarSearchComponent, descendants: true, static: true }, { propertyName: "viewToolbar", first: true, predicate: AXToolbarListViewComponent, descendants: true, static: true }, { propertyName: "toolbar", first: true, predicate: AXToolbarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [style.height]=\"height\" [style.width]=\"width\">\r\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\r\n    <ng-content select=\"ax-toolbar\"></ng-content>\r\n  </div>\r\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\r\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\r\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\r\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\r\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\r\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n          </ng-container>\r\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #elseTemplate>\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <!-- </ng-container> -->\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"items==null || items.length==0\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
             args: [{ selector: "ax-list", encapsulation: ViewEncapsulation.None, template: "<div [style.height]=\"height\" [style.width]=\"width\">\r\n  <div class=\"ax-list-toolbar\" *ngIf=\"toolbar\">\r\n    <ng-content select=\"ax-toolbar\"></ng-content>\r\n  </div>\r\n  <div class=\"ax-list-container\" cdkDropList [id]=\"dropId\" [cdkDropListConnectedTo]=\"connectedList\"\r\n    (cdkDropListDropped)=\"dragDrop($event)\" [cdkDropListData]=\"items\"\r\n    [ngClass]=\"{'overflow-y': direction=='vertical' || direction=='horizontal-wrap','overflow-x': direction=='horizontal' || direction=='vertical-wrap'}\">\r\n    <div class=\"item-wrapper\" [ngClass]=\"direction\">\r\n      <!-- <ng-container *ngIf=\"items && items.length; else emptyTemplate\"> -->\r\n      <ng-container *ngIf=\"allowMoveItem; else elseTemplate\">\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\" cdkDrag [cdkDragData]=\"item\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n          </ng-container>\r\n          <div class=\"drop-placeholder\" *cdkDragPlaceholder></div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #elseTemplate>\r\n        <div class=\"ax-list-item\" *ngFor=\"let item of items\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction }\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <!-- </ng-container> -->\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"items==null || items.length==0\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n</div>", styles: [".ax-list-container{height:calc(100% - 45px);min-height:50px}.ax-list-container.overflow-x{overflow-x:auto;overflow-y:hidden}.ax-list-container.overflow-y{overflow-y:auto;overflow-x:hidden}.ax-list-container .item-wrapper{height:auto;display:flex}.ax-list-container .cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.ax-list-container .drop-placeholder{background:var(--gray-light-color);border:dotted 2px var(--border-color);min-height:60px;margin-bottom:5px;transition:transform .25s cubic-bezier(0,0,.2,1)}.ax-list-container .vertical{flex-direction:column}.ax-list-container .vertical-wrap{flex-direction:column;flex-wrap:wrap}.ax-list-container .horizontal-wrap{flex-direction:row;flex-wrap:wrap}.ax-list-container .horizontal{flex-direction:row}.ax-list-toolbar{padding:4px 5px;background:#fff;border:1px solid var(--border-color);border-radius:4px;margin-bottom:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { width: [{
@@ -5990,10 +5988,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXDataSourceModule {
 }
-AXDataSourceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDataSourceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceModule, declarations: [AXDataSourceComponent], exports: [AXDataSourceComponent] });
-AXDataSourceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceModule, providers: [], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDataSourceModule, decorators: [{
+AXDataSourceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDataSourceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceModule, declarations: [AXDataSourceComponent], exports: [AXDataSourceComponent] });
+AXDataSourceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDataSourceModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXDataSourceComponent],
@@ -6005,10 +6003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXListModule {
 }
-AXListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListModule, declarations: [AXListComponent, AXToolbarListViewComponent], imports: [CommonModule, AXDataSourceModule, DragDropModule], exports: [AXListComponent, AXToolbarListViewComponent] });
-AXListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListModule, providers: [], imports: [[CommonModule, AXDataSourceModule, DragDropModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXListModule, decorators: [{
+AXListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListModule, declarations: [AXListComponent, AXToolbarListViewComponent], imports: [CommonModule, AXDataSourceModule, DragDropModule], exports: [AXListComponent, AXToolbarListViewComponent] });
+AXListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListModule, providers: [], imports: [[CommonModule, AXDataSourceModule, DragDropModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXListComponent, AXToolbarListViewComponent],
@@ -6032,19 +6030,19 @@ class AXDialogComponent extends AXBasePopupPageComponent {
         return this.buttons;
     }
 }
-AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-dialog\">\r\n    <div class=\"dialog-content\" [innerHTML]=\"message\">\r\n            \r\n    </div>\r\n</div>", styles: [".ax-dialog{background:var(--ax-white-color);display:flex;flex-direction:column;padding:.8em}.ax-dialog .dialog-content{display:flex;justify-content:center;align-items:center}.ax-dialog .buttons{display:flex;flex-direction:row-reverse;margin-top:1em}.ax-dialog .buttons .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:100px}[dir=rtl] .ax-dialog .buttons{flex-direction:row!important}.ax-dialog .buttons .btn{margin:0 5px}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogComponent, decorators: [{
+AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-dialog\">\r\n    <div class=\"dialog-content\" [innerHTML]=\"message\">\r\n            \r\n    </div>\r\n</div>", styles: [".ax-dialog{background:var(--ax-white-color);display:flex;flex-direction:column;padding:.8em}.ax-dialog .dialog-content{display:flex;justify-content:center;align-items:center}.ax-dialog .buttons{display:flex;flex-direction:row-reverse;margin-top:1em}.ax-dialog .buttons .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:100px}[dir=rtl] .ax-dialog .buttons{flex-direction:row!important}.ax-dialog .buttons .btn{margin:0 5px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-dialog', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-dialog\">\r\n    <div class=\"dialog-content\" [innerHTML]=\"message\">\r\n            \r\n    </div>\r\n</div>", styles: [".ax-dialog{background:var(--ax-white-color);display:flex;flex-direction:column;padding:.8em}.ax-dialog .dialog-content{display:flex;justify-content:center;align-items:center}.ax-dialog .buttons{display:flex;flex-direction:row-reverse;margin-top:1em}.ax-dialog .buttons .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:100px}[dir=rtl] .ax-dialog .buttons{flex-direction:row!important}.ax-dialog .buttons .btn{margin:0 5px}\n"] }]
         }], ctorParameters: function () { return []; } });
 class AXDialogModule {
 }
-AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, AXButtonModule, AXTranslatorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogModule, providers: [], imports: [[CommonModule, AXButtonModule, AXTranslatorModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogModule, decorators: [{
+AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, AXButtonModule, AXTranslatorModule], exports: [AXDialogComponent] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogModule, providers: [], imports: [[CommonModule, AXButtonModule, AXTranslatorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXDialogComponent],
@@ -6073,7 +6071,6 @@ class AXPopupComponent extends AXBaseComponent {
         this.footerButtons = [];
     }
     ngAfterViewInit() {
-        console.log('popup');
         this._loadingId = this.loadingService.show(this.ref.nativeElement.querySelector('.ax-popup-body-container'));
         if (typeof this.content === 'string') {
             this.rendererService.findLoadedComponentByRoute(this.content, 20).then(route => {
@@ -6176,9 +6173,9 @@ class AXPopupComponent extends AXBaseComponent {
         }
     }
 }
-AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupComponent, decorators: [{
+AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPopupComponent, selector: "ng-component", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "popupBody", first: true, predicate: ["popupBody"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-wrapper\" role=\"dialog\" [attr.aria-labelledby]=\"'dialog'+uid+'_label'\" aria-modal=\"true\" cdkTrapFocus>\r\n  <div class=\"popup-container {{size}}\" tabindex=\"0\" cdkDrag [class.has-border]=\"!modal\">\r\n    <div class=\"ax-popup-header\" cdkDragHandle [attr.id]=\"'dialog'+uid+'_label'\">\r\n      <span>\r\n        {{title}}\r\n      </span>\r\n      <span class=\"ax-buttons-containers\">\r\n        <i class=\"far fa-expand ax-popup-header-button\" (click)=\"onFullScreen()\" *ngIf=\"maximizable\" tabindex=\"2\"\r\n          title=\"\u062A\u0645\u0627\u0645 \u0635\u0641\u062D\u0647\"></i>\r\n        <i class=\"far fa-times ax-popup-header-button\" (click)=\"onCloseClick()\" *ngIf=\"closable\" tabindex=\"1\"\r\n          title=\"\u0628\u0633\u062A\u0646\"></i>\r\n      </span>\r\n    </div>\r\n    <div class=\"ax-popup-body ax-loading-host\">\r\n      <div class=\"ax-popup-body-container\">\r\n        <div [hidden]=\"isLoading\">\r\n          <ng-template #popupBody></ng-template>\r\n        </div>\r\n      </div>\r\n      <div class=\"ax-popup-footer\" *ngIf=\"!isLoading && footerButtons.length > 0\">\r\n        <div class=\"ax-buttons-containers\">\r\n          <ng-container *ngFor=\"let button of footerButtons\">\r\n            <ax-button [type]=\"button.style\" [icon]=\"button.icon\" [submitBehavior]=\"button.submitBehavior\"\r\n              [disabled]=\"button.disable\" [cancelBehavior]=\"button.cancelBehavior\"\r\n              (click)=\"handleFooterButtonClick(button)\">\r\n              {{button.text}}\r\n            </ax-button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".popup-wrapper .popup-container{opacity:1;background:var(--ax-white-color);display:flex;flex-direction:column;border-radius:var(--ax-size-border-radius);-webkit-border-radius:var(--ax-size-border-radius);-moz-border-radius:var(--ax-size-border-radius);overflow:hidden;max-height:95vh;height:-webkit-fit-content;height:fit-content;height:-moz-fit-content}.popup-wrapper .popup-container.has-border{border:1px solid var(--ax-border-color);box-shadow:1px 1px 10px var(--ax-border-color)}@media all and (min-width: 1280px){.popup-wrapper .popup-container.sm{width:420px!important}.popup-wrapper .popup-container.md{width:680px!important}.popup-wrapper .popup-container.lg{width:1024px!important}}@media all and (min-width: 1024px) and (max-width: 1279px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:900px!important}}@media all and (min-width: 768px) and (max-width: 1023px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md{width:500px!important}.popup-wrapper .popup-container.lg{width:700px!important}}@media all and (min-width: 425px) and (max-width: 767px){.popup-wrapper .popup-container.sm{width:100vw;max-height:100vh}.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:460px!important}}@media all and (min-width: 0px) and (max-width: 424px){.popup-wrapper .popup-container.sm,.popup-wrapper .popup-container.md,.popup-wrapper .popup-container.lg{width:100vw;max-height:100vh}}.popup-wrapper .popup-container:focus{box-shadow:0 0 0 .2rem rgba(var(--outline-color),.8);outline-color:transparent}.popup-wrapper .popup-container.full{width:95vw}.popup-wrapper .popup-container .ax-popup-header{background:var(--ax-gray-trans-dark-color);color:var(--ax-dark-color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:1.2rem;font-weight:500;padding:0 1rem;height:calc(var(--ax-base-size) * var(--ax-base-ratio))!important}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers{display:flex;flex-direction:row}.popup-wrapper .popup-container .ax-popup-header .ax-buttons-containers .ax-popup-header-button{width:1em;height:1em;padding:1em;background:rgba(0,0,0,.05);border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-margin-start:.5em;margin-inline-start:.5em}.popup-wrapper .popup-container .ax-popup-body{max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){.popup-wrapper .popup-container .ax-popup-body{min-height:93vh!important}}.popup-wrapper .popup-container .ax-popup-body .ax-popup-body-container{overflow:auto}.popup-wrapper .popup-container .ax-popup-body .ax-footer{background:var(--ax-white-color);border-top:1px solid;border-color:var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em;padding:.4em .5em;display:flex;align-items:center}.popup-wrapper .popup-container .ax-popup-body .ax-footer .button{min-width:100px;-webkit-margin-end:.5em;margin-inline-end:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer{background-color:var(--ax-white-color);display:flex;flex-direction:row;align-items:center;padding:.5em;border-top:1px solid var(--ax-border-color);-webkit-margin-before:.5em;margin-block-start:.5em}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers{flex:1;max-width:-webkit-fit-content;max-width:fit-content;max-width:-moz-fit-content}.popup-wrapper .popup-container .ax-popup-body .ax-popup-footer .ax-buttons-containers .button{-webkit-margin-end:.5em;margin-inline-end:.5em;min-width:80px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: AXLoadingService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popupBody: [{
@@ -6270,9 +6267,9 @@ class AXPopupService {
         }
     }
 }
-AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupService, decorators: [{
+AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
@@ -6414,9 +6411,9 @@ class AXDialogService {
         });
     }
 }
-AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogService, deps: [{ token: AXPopupService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDialogService, decorators: [{
+AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogService, deps: [{ token: AXPopupService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXPopupService }]; } });
@@ -6441,8 +6438,8 @@ class AXDrawerComponent {
         }
     }
 }
-AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDrawerComponent, selector: "ax-drawer", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", animations: [
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDrawerComponent, selector: "ax-drawer", inputs: { width: "width" }, ngImport: i0, template: "<div class=\"ax-drawer-overlay\" [@slideInOut]=\"drawerState\" (click)=\"toggle()\" >\r\n  <div class=\"ax-drawer-container\" [style.width.px]=\"width\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", animations: [
         trigger('slideInOut', [
             state('in', style({
                 transform: 'translate3d(0,0,0)',
@@ -6454,7 +6451,7 @@ AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             transition('out => in', animate('200ms ease-in-out')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-drawer', animations: [
                         trigger('slideInOut', [
@@ -6474,10 +6471,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXDrawerModule {
 }
-AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent], imports: [CommonModule, BrowserAnimationsModule], exports: [AXDrawerComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[CommonModule, BrowserAnimationsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDrawerModule, decorators: [{
+AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent], imports: [CommonModule, BrowserAnimationsModule], exports: [AXDrawerComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[CommonModule, BrowserAnimationsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXDrawerComponent],
@@ -6500,8 +6497,8 @@ class AXFieldsetComponent {
         }
     }
 }
-AXFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: { size: "size", caption: "caption", allowCollapse: "allowCollapse" }, ngImport: i0, template: "<fieldset class=\"ax fieldset {{size}}\">\r\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\r\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</fieldset>", animations: [
+AXFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXFieldsetComponent, selector: "ax-fieldset", inputs: { size: "size", caption: "caption", allowCollapse: "allowCollapse" }, ngImport: i0, template: "<fieldset class=\"ax fieldset {{size}}\">\r\n    <legend (click)=\"toggle()\"> {{ caption }} </legend>\r\n    <div class=\"fieldset-content\" [@visibilityChanged]=\"collapsed ? 'hidden' : 'shown'\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</fieldset>", animations: [
         trigger('visibilityChanged', [
             state('shown', style({
                 height: '*',
@@ -6517,7 +6514,7 @@ AXFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             transition('hidden => shown', animate('200ms'))
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-fieldset', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('visibilityChanged', [
@@ -6545,10 +6542,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXFieldsetModule {
 }
-AXFieldsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFieldsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetModule, declarations: [AXFieldsetComponent], imports: [CommonModule], exports: [AXFieldsetComponent] });
-AXFieldsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXFieldsetModule, decorators: [{
+AXFieldsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFieldsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetModule, declarations: [AXFieldsetComponent], imports: [CommonModule], exports: [AXFieldsetComponent] });
+AXFieldsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXFieldsetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXFieldsetComponent],
@@ -6565,9 +6562,9 @@ class AXLabelComponent extends AXBaseComponent {
     }
     ngOnInit() { }
 }
-AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group-label {{size}}\">\r\n    <label>\r\n        <ng-content></ng-content>\r\n    </label>\r\n</div>", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelComponent, decorators: [{
+AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXLabelComponent, selector: "ax-label", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-group-label {{size}}\">\r\n    <label>\r\n        <ng-content></ng-content>\r\n    </label>\r\n</div>", encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax form-group-label {{size}}\">\r\n    <label>\r\n        <ng-content></ng-content>\r\n    </label>\r\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
@@ -6578,10 +6575,10 @@ const COMPONENT$3 = [AXLabelComponent];
 const MODULES$3 = [CommonModule];
 class AXLabelModule {
 }
-AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$3]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLabelModule, decorators: [{
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$3]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$3],
@@ -6608,14 +6605,14 @@ class AXLoadingPanelComponent {
         this.visible = false;
     }
 }
-AXLoadingPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLoadingPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXLoadingPanelComponent, selector: "ax-loading-panel", inputs: { visible: "visible" }, ngImport: i0, template: `
+AXLoadingPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXLoadingPanelComponent, selector: "ax-loading-panel", inputs: { visible: "visible" }, ngImport: i0, template: `
     <div onclick="return false;" class="ax ax-loading-panel ax-overlay-wrapper ax-overlay-modal ax-loading-overlay" *ngIf="visible" >
         <ax-loading-indicator tabindex="0" cdkTrapFocus>
         </ax-loading-indicator>
     </div>
   `, isInline: true, components: [{ type: AXLoadingIndicatorComponent, selector: "ax-loading-indicator", inputs: ["size"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-loading-panel',
@@ -6632,10 +6629,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXLoadingModule {
 }
-AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingIndicatorComponent, AXLoadingPanelComponent], imports: [CommonModule, A11yModule], exports: [AXLoadingIndicatorComponent, AXLoadingPanelComponent] });
-AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[CommonModule, A11yModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXLoadingModule, decorators: [{
+AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingIndicatorComponent, AXLoadingPanelComponent], imports: [CommonModule, A11yModule], exports: [AXLoadingIndicatorComponent, AXLoadingPanelComponent] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[CommonModule, A11yModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXLoadingIndicatorComponent, AXLoadingPanelComponent],
@@ -7230,9 +7227,9 @@ class AXNumberBoxComponent extends AXBaseTextComponent {
         });
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: "min", max: "max", showSeparator: "showSeparator", showCurrency: "showCurrency", showCounter: "showCounter", scrollWeel: "scrollWeel", showDoubleCounter: "showDoubleCounter", maxLength: "maxLength", intStep: "intStep", decimalNumber: "decimalNumber", customStep: "customStep" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { min: "min", max: "max", showSeparator: "showSeparator", showCurrency: "showCurrency", showCounter: "showCounter", scrollWeel: "scrollWeel", showDoubleCounter: "showDoubleCounter", maxLength: "maxLength", intStep: "intStep", decimalNumber: "decimalNumber", customStep: "customStep" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.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$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXNumberBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n        <ax-button icon=\"far fa-plus\" type=\"success blank\" (click)=\"upStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\"\r\n            [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input type=\"text\" class=\"ax {{size}}\" [maxlength]=\"calcSeparator(maxLength)\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\"\r\n                [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus($event)\" (blur)=\"handleInputBlur($event)\"\r\n                (keypress)=\"handleKeyPress($event)\" (ngModelChange)=\"this.userQuestionUpdate.next($event)\"\r\n                (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick()\" (keyup)=\"handleKeyUp($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" [disabled]=\"disabled\" icon=\"far fa-times\" type=\"danger blank\"\r\n            (click)=\"clear()\"></ax-button>\r\n            <ax-button icon=\"far fa-minus\" type=\"danger blank\" (click)=\"downStepHandel()\" [disabled]=\"disabled\" *ngIf=\"showDoubleCounter\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n        <div class=\"arrow-number\" *ngIf=\"showCounter && !showDoubleCounter && !readonly\" >\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-up\" [size]=\"size\"\r\n                (mousedown)=\"upStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n            <ax-button type=\"light blank\" [disabled]=\"disabled\" icon=\"fas fa-angle-down\" [size]=\"size\"\r\n                (mousedown)=\"downStepHandel()\" (mouseup)=\"delaySearch()\" [tabIndex]=\"-1\"></ax-button>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
@@ -7261,10 +7258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXNumberBoxModule {
 }
-AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule, AXButtonModule, FormsModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule, AXButtonModule, FormsModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[CommonModule, AXButtonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXNumberBoxComponent],
@@ -7279,15 +7276,15 @@ class AXPageContentComponent {
         this.el = el;
     }
 }
-AXPageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPageContentComponent, selector: "ax-page-content", ngImport: i0, template: `
+AXPageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPageContentComponent, selector: "ax-page-content", ngImport: i0, template: `
     <div class='ax-page-content'>
       <div class='inner-content'>
         <ng-content></ng-content>
       </div>
     </div>
   `, isInline: true, styles: [":host{height:100%}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page-content',
@@ -7306,11 +7303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXPageFooterComponent {
 }
-AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPageFooterComponent, selector: "ax-page-footer", ngImport: i0, template: `<div class='ax-page-footer' >
+AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPageFooterComponent, selector: "ax-page-footer", ngImport: i0, template: `<div class='ax-page-footer' >
           <ng-content></ng-content>
        </div>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page-footer',
@@ -7323,10 +7320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXPageModule {
 }
-AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageModule, declarations: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent], imports: [CommonModule, AXLoadingModule], exports: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent] });
-AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageModule, providers: [], imports: [[CommonModule, AXLoadingModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPageModule, decorators: [{
+AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageModule, declarations: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent], imports: [CommonModule, AXLoadingModule], exports: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent] });
+AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageModule, providers: [], imports: [[CommonModule, AXLoadingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPageContentComponent, AXPageFooterComponent, AXPageComponent],
@@ -7355,9 +7352,9 @@ class AXPasswordBoxComponent extends AXBaseTextComponent {
         }
     }
 }
-AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], 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\" [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
+AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXPasswordBoxComponent, selector: "ax-password-box", host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], 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\" [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXPasswordBoxComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax input form-control {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input [autocomplete]=\"autocomplete\" [name]=\"name\" #input [type]=\"type\" class=\"ax {{size}}\" value=\"{{value}}\" placeholder=\"{{placeholder}}\"\r\n                [readonly]=\"readonly\" [disabled]=\"disabled\"\r\n                [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"fas fa-times\" type=\"danger blank\" (click)=\"clear()\"  [tabIndex]=\"-1\"></ax-button>\r\n        <ax-button [disabled]=\"disabled\" [icon]=\"eyeIcon\" type=\"light blank\" size=\"{{size}}\" (click)=\"handleShowPassword()\"  [tabIndex]=\"-1\">\r\n            <!-- <i class=\"\" [ngClass]=\"{'fa-eye': type === 'password','fa-eye-slash':type === 'text'}\"></i> -->\r\n        </ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; } });
@@ -7366,10 +7363,10 @@ const COMPONENT$2 = [AXPasswordBoxComponent];
 const MODULES$2 = [CommonModule, AXButtonModule, AXFormGroupModule];
 class AXPasswordBoxModule {
 }
-AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule, AXButtonModule, AXFormGroupModule], exports: [AXPasswordBoxComponent] });
-AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$2]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
+AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule, AXButtonModule, AXFormGroupModule], exports: [AXPasswordBoxComponent] });
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$2]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$2],
@@ -7381,10 +7378,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXPopupModule {
 }
-AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXTranslatorModule, AXLoadingModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[CommonModule, DragDropModule, A11yModule, AXButtonModule, AXTranslatorModule, AXLoadingModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPopupModule, decorators: [{
+AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXTranslatorModule, AXLoadingModule], exports: [AXPopupComponent] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[CommonModule, DragDropModule, A11yModule, AXButtonModule, AXTranslatorModule, AXLoadingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPopupComponent],
@@ -7400,9 +7397,9 @@ class AXProgressBarComponent extends AXBaseComponent {
         this.progress = 0;
     }
 }
-AXProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AXProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: { progress: "progress" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax progress\">\r\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\"\r\n    aria-valuemax=\"100\" [ngStyle]=\"{'width.%': progress}\">\r\n  </div>\r\n</div>", directives: [{ type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarComponent, decorators: [{
+AXProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AXProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: { progress: "progress" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax progress\">\r\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\"\r\n    aria-valuemax=\"100\" [ngStyle]=\"{'width.%': progress}\">\r\n  </div>\r\n</div>", directives: [{ type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-progress-bar', template: "<div class=\"ax progress\">\r\n  <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\"\r\n    aria-valuemax=\"100\" [ngStyle]=\"{'width.%': progress}\">\r\n  </div>\r\n</div>" }]
         }], propDecorators: { progress: [{
@@ -7411,10 +7408,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXProgressBarModule {
 }
-AXProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarModule, declarations: [AXProgressBarComponent], imports: [CommonModule], exports: [AXProgressBarComponent] });
-AXProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProgressBarModule, decorators: [{
+AXProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarModule, declarations: [AXProgressBarComponent], imports: [CommonModule], exports: [AXProgressBarComponent] });
+AXProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXProgressBarComponent],
@@ -7497,9 +7494,9 @@ class AXSearchBoxComponent extends AXBaseTextComponent {
         // this.searchChangeObserver.next(this.text);
     }
 }
-AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", 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.10", 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: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: [{
@@ -7715,7 +7712,6 @@ class AXSelectBoxComponent extends AXValidatableComponent {
         }
     }
     onButtonClick(e) {
-        console.log('onButtonClick', e);
     }
     setSelectedIndex(sign = null) {
         if (sign == null) {
@@ -8358,11 +8354,11 @@ class AXSelectBoxComponent extends AXValidatableComponent {
         }
     }
 }
-AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", 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.10", 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: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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;flex: 1;\"\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;flex: 1;\"\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: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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>" }]
+            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;flex: 1;\"\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;flex: 1;\"\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: [{
                 type: Input
             }], rowTemplate: [{
@@ -8597,9 +8593,9 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
         ];
     }
 }
-AXQueryBuilderPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\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\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>", components: [{ type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
+AXQueryBuilderPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\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\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>", components: [{ type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
             type: Component,
             args: [{ template: "<div>\r\n    <ax-validation-form #form>\r\n        <div *ngFor=\"let rule of items\">\r\n\r\n            <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\r\n                <div *ngSwitchCase=\"'textBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'selectBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\r\n                            [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\r\n                            [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\r\n                            (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\r\n                            [remoteOperation]=\"getOption('remoteOperation',rule)\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\r\n                            <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\r\n                        </ax-select-box>\r\n                    </ax-form-group>\r\n                </div>\r\n                <div *ngSwitchCase=\"'numberBox'\">\r\n                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\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\" size=\"sm\">\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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                    <ax-form-group>\r\n                        <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\r\n                            allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\r\n                            <ax-data-source [provideData]=\"provideDataBoolean\">\r\n                            </ax-data-source>\r\n                            <ax-validation>\r\n                                <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                            </ax-validation>\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-label>{{getValue(rule.onDemandLabel)}}</ax-label>\r\n                        <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\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\" size=\"sm\">\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                    </ax-form-group>\r\n\r\n                </div>\r\n            </div>\r\n\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </ax-validation-form>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: AXToastService }]; }, propDecorators: { form: [{
@@ -8797,9 +8793,9 @@ class AXQueryBuilderService {
         return query;
     }
 }
-AXQueryBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderService, deps: [{ token: AXPopupService }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXQueryBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderService, decorators: [{
+AXQueryBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderService, deps: [{ token: AXPopupService }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXQueryBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXPopupService }, { type: AXToastService }]; } });
@@ -9110,9 +9106,9 @@ class AXQueryBuilderRuleComponent {
         return this.rule.control.options ? this.rule.control.options[name] : null;
     }
 }
-AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", 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: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderRuleComponent, decorators: [{
+AXQueryBuilderRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: [{
@@ -9238,9 +9234,9 @@ class AXQueryBuilderGroupComponent {
         });
     }
 }
-AXQueryBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderGroupComponent, deps: [{ token: AXQueryBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: { group: "group", parent: "parent", fields: "fields", mode: "mode" }, outputs: { groupRuleChanged: "groupRuleChanged" }, host: { classAttribute: "ax ax-query-group" }, viewQueries: [{ propertyName: "queryRule", first: true, predicate: ["queryRule"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"header\">\r\n    <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=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\r\n        <div class=\"collapsed\" *ngIf=\"collapsed;else expandedTemplate\">\r\n            {{group.queryString}}\r\n        </div>\r\n        <ng-template #expandedTemplate>\r\n            <div class=\"expanded\">\r\n                <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"buttons-list\">\r\n        <div class=\"button remove\" *ngIf=\"parent && mode=='new'\" (click)=\"handleRemoveClick()\">\r\n            <i class=\"far fa-times ax-danger-color\"></i>\r\n        </div>\r\n        <div class=\"button edit\" *ngIf=\"mode=='new'\" (click)=\"handleChangeClick()\">\r\n            <i class=\"far fa-retweet ax-danger-color\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"rules\" *ngIf=\"!collapsed\">\r\n    <!-- <ax-validation-form #form> -->\r\n\r\n    <div *ngFor=\"let item of group.items\" class=\"group-item\">\r\n        <ng-container *ngIf=\"item.condition;else ruleTemplate\">\r\n            <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\r\n                [parent]=\"group\">\r\n            </ax-query-group>\r\n        </ng-container>\r\n        <ng-template #ruleTemplate>\r\n            <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\r\n                (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\r\n            </ax-query-rule>\r\n        </ng-template>\r\n    </div>\r\n    <!-- </ax-validation-form> -->\r\n    <div class=\"group-item\" *ngIf=\"mode=='new'\">\r\n        <div class=\"ax-query-rule\">\r\n            <div class=\"condition\">\r\n            </div>\r\n            <div class=\"handler\">\r\n                <i class=\"far fa-grip-lines-vertical\"></i>\r\n            </div>\r\n            <div class=\"add-rule\" (click)=\"addRule()\" *ngIf=\"mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\r\n            </div>\r\n            <div class=\"add-group\" (click)=\"addGroup()\" *ngIf=\"!showGroupCondition && mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition OR\" (click)=\"addGroupOR()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition AND\" (click)=\"addGroupAND()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</div>", components: [{ type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }, { type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: ["isEditing", "rule", "parent", "mode", "fields"], outputs: ["onRuleDelete", "ruleChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderGroupComponent, decorators: [{
+AXQueryBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderGroupComponent, deps: [{ token: AXQueryBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: { group: "group", parent: "parent", fields: "fields", mode: "mode" }, outputs: { groupRuleChanged: "groupRuleChanged" }, host: { classAttribute: "ax ax-query-group" }, viewQueries: [{ propertyName: "queryRule", first: true, predicate: ["queryRule"], descendants: true }, { propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"header\">\r\n    <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=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\r\n        <div class=\"collapsed\" *ngIf=\"collapsed;else expandedTemplate\">\r\n            {{group.queryString}}\r\n        </div>\r\n        <ng-template #expandedTemplate>\r\n            <div class=\"expanded\">\r\n                <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"buttons-list\">\r\n        <div class=\"button remove\" *ngIf=\"parent && mode=='new'\" (click)=\"handleRemoveClick()\">\r\n            <i class=\"far fa-times ax-danger-color\"></i>\r\n        </div>\r\n        <div class=\"button edit\" *ngIf=\"mode=='new'\" (click)=\"handleChangeClick()\">\r\n            <i class=\"far fa-retweet ax-danger-color\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"rules\" *ngIf=\"!collapsed\">\r\n    <!-- <ax-validation-form #form> -->\r\n\r\n    <div *ngFor=\"let item of group.items\" class=\"group-item\">\r\n        <ng-container *ngIf=\"item.condition;else ruleTemplate\">\r\n            <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\r\n                [parent]=\"group\">\r\n            </ax-query-group>\r\n        </ng-container>\r\n        <ng-template #ruleTemplate>\r\n            <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\r\n                (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\r\n            </ax-query-rule>\r\n        </ng-template>\r\n    </div>\r\n    <!-- </ax-validation-form> -->\r\n    <div class=\"group-item\" *ngIf=\"mode=='new'\">\r\n        <div class=\"ax-query-rule\">\r\n            <div class=\"condition\">\r\n            </div>\r\n            <div class=\"handler\">\r\n                <i class=\"far fa-grip-lines-vertical\"></i>\r\n            </div>\r\n            <div class=\"add-rule\" (click)=\"addRule()\" *ngIf=\"mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\r\n            </div>\r\n            <div class=\"add-group\" (click)=\"addGroup()\" *ngIf=\"!showGroupCondition && mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition OR\" (click)=\"addGroupOR()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition AND\" (click)=\"addGroupAND()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</div>", components: [{ type: AXQueryBuilderGroupComponent, selector: "ax-query-group", inputs: ["group", "parent", "fields", "mode"], outputs: ["groupRuleChanged"] }, { type: AXQueryBuilderRuleComponent, selector: "ax-query-rule", inputs: ["isEditing", "rule", "parent", "mode", "fields"], outputs: ["onRuleDelete", "ruleChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-query-group', host: { class: 'ax ax-query-group' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"header\">\r\n    <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=\"detail {{group.condition}}\" (click)=\"changeDetailMode()\">\r\n        <div class=\"collapsed\" *ngIf=\"collapsed;else expandedTemplate\">\r\n            {{group.queryString}}\r\n        </div>\r\n        <ng-template #expandedTemplate>\r\n            <div class=\"expanded\">\r\n                <strong>{{group.condition == 'OR' ? '\u06CC\u06A9\u06CC \u0627\u0632' : '\u0647\u0645\u0647' }} <span>\u0634\u0631\u0627\u06CC\u0637 \u0632\u06CC\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0628\u0627\u0634\u062F</span> </strong>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"buttons-list\">\r\n        <div class=\"button remove\" *ngIf=\"parent && mode=='new'\" (click)=\"handleRemoveClick()\">\r\n            <i class=\"far fa-times ax-danger-color\"></i>\r\n        </div>\r\n        <div class=\"button edit\" *ngIf=\"mode=='new'\" (click)=\"handleChangeClick()\">\r\n            <i class=\"far fa-retweet ax-danger-color\"></i>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"rules\" *ngIf=\"!collapsed\">\r\n    <!-- <ax-validation-form #form> -->\r\n\r\n    <div *ngFor=\"let item of group.items\" class=\"group-item\">\r\n        <ng-container *ngIf=\"item.condition;else ruleTemplate\">\r\n            <ax-query-group (groupRuleChanged)=\"ruleChanged($event)\" [mode]=\"mode\" [group]=\"item\" [fields]=\"fields\"\r\n                [parent]=\"group\">\r\n            </ax-query-group>\r\n        </ng-container>\r\n        <ng-template #ruleTemplate>\r\n            <ax-query-rule #queryRule (ruleChanged)=\"ruleChanged($event)\" [mode]=\"mode\"\r\n                (onRuleDelete)=\"ruleDelete($event)\" [rule]=\"item\" [fields]=\"fields\" [parent]=\"group\">\r\n            </ax-query-rule>\r\n        </ng-template>\r\n    </div>\r\n    <!-- </ax-validation-form> -->\r\n    <div class=\"group-item\" *ngIf=\"mode=='new'\">\r\n        <div class=\"ax-query-rule\">\r\n            <div class=\"condition\">\r\n            </div>\r\n            <div class=\"handler\">\r\n                <i class=\"far fa-grip-lines-vertical\"></i>\r\n            </div>\r\n            <div class=\"add-rule\" (click)=\"addRule()\" *ngIf=\"mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u0634\u0631\u0637</span>\r\n            </div>\r\n            <div class=\"add-group\" (click)=\"addGroup()\" *ngIf=\"!showGroupCondition && mode=='new'\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>\u06AF\u0631\u0648\u0647</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition OR\" (click)=\"addGroupOR()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>OR</span>\r\n            </div>\r\n            <div *ngIf=\"showGroupCondition && mode=='new'\" class=\"add-condition AND\" (click)=\"addGroupAND()\">\r\n                <i class=\"far fa-plus\"></i>&nbsp;&nbsp;<span>AND</span>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: AXQueryBuilderService }]; }, propDecorators: { queryRule: [{
@@ -9317,9 +9313,9 @@ class AXQueryBuilderComponent extends AXBaseComponent {
         }
     }
 }
-AXQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
-AXQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", 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: 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.10", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
+AXQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderComponent, deps: [{ token: i0.ElementRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
+AXQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: 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.11", 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: AXToastService }]; }, propDecorators: { queryGroup: [{
@@ -9337,10 +9333,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXSearchBoxModule {
 }
-AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", 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.10", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", 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.11", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[CommonModule, AXTextBoxModule, AXButtonModule, AXFormGroupModule, AXTranslatorModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSearchBoxComponent],
@@ -9827,9 +9823,9 @@ class AXSelectBox2Component extends AXValidatableComponent {
         this.currentfocusedIndex = index;
     }
 }
-AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", 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.10", 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: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBox2Component, decorators: [{
+AXSelectBox2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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.11", 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: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["placeholder", "text", "delay"], outputs: ["textChanged", "onButtonClick"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$2.AXHorizontalScrollDirective, selector: "[horizontalScroll]", inputs: ["horizontalScroll"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: [{
@@ -9922,8 +9918,8 @@ const MODULES$1 = [
 ];
 class AXSelectBoxModule {
 }
-AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
+AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
         AXDropdownModule,
         AXTextBoxModule,
         AXTranslatorModule,
@@ -9931,8 +9927,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.10", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[...MODULES$1]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[...MODULES$1]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$1],
@@ -9958,8 +9954,8 @@ const MODUELS = [
 ];
 class AXQueryBuilderModule {
 }
-AXQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
+AXQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderModule, declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent], imports: [CommonModule,
         AXButtonModule,
         AXPanelBoxModule,
         AXSelectBoxModule,
@@ -9971,8 +9967,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.10", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [[MODUELS]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
+AXQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderModule, providers: [AXQueryBuilderService], imports: [[MODUELS]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXQueryBuilderComponent, AXQueryBuilderGroupComponent, AXQueryBuilderRuleComponent, AXQueryBuilderPopupComponent],
@@ -10008,9 +10004,9 @@ class AXSwitchComponent extends AXBaseComponent {
     }
     focus() { }
 }
-AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchComponent, decorators: [{
+AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchComponent, selector: "ax-switch", inputs: { tabIndex: "tabIndex", value: "value", readonly: "readonly", disabled: "disabled", size: "size" }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"], directives: [{ type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax ax-switch\" >\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\"  [ngModelOptions]=\"{standalone: true}\" [attr.tabindex]=\"tabIndex\">\r\n    <span class=\"slider round\"></span>\r\n</label>", styles: [".ax.ax-switch{position:relative;display:inline-block;width:46px;height:25px;margin:5px}.ax.ax-switch>input{opacity:0;width:0;height:0}.ax.ax-switch>input:checked+.slider{background-color:var(--ax-primary-color)}.ax.ax-switch>input:checked+.slider:before{transform:translate(21px)}.ax.ax-switch:focus-within .slider{outline:1px solid var(--ax-primary-color)}.ax.ax-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s}.ax.ax-switch .slider:before{content:\"\";position:absolute;height:21px;width:21px;left:2px;bottom:2px;background-color:#fff;transition:.2s}.ax.ax-switch .slider.round{border-radius:25px}.ax.ax-switch .slider.round:before{border-radius:50%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { onValueChanged: [{
@@ -10031,10 +10027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXSwitchModule {
 }
-AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
-AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchModule, decorators: [{
+AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
+AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchComponent],
@@ -10189,9 +10185,9 @@ class AXTabPageService {
         }
     }
 }
-AXTabPageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AXTabPageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageService, decorators: [{
+AXTabPageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXTabPageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -10269,8 +10265,8 @@ class AXTabPageHostComponent {
         this.loadingService.hide(this._loadingId);
     }
 }
-AXTabPageHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXTabPageService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabPageHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTabPageHostComponent, selector: "ax-tab-page-host", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+AXTabPageHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageHostComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: AXTabPageService }, { token: AXLoadingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabPageHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabPageHostComponent, selector: "ax-tab-page-host", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
         <div class='ax-loading-host'>
             <div class='ax-tab-page-host' >
                 <div [hidden]="isLoading" style="height:100%" class='ax-tab-page-host-container'>
@@ -10279,7 +10275,7 @@ AXTabPageHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </div>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-page-host',
@@ -10347,9 +10343,9 @@ class AXTabPageRendererComponent {
         });
     }
 }
-AXTabPageRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageRendererComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: AXTabPageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabPageRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTabPageRendererComponent, selector: "ax-tab-page-renderer", host: { classAttribute: "ax tab-page-renderer" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<template #container></template>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageRendererComponent, decorators: [{
+AXTabPageRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageRendererComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: AXTabPageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabPageRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabPageRendererComponent, selector: "ax-tab-page-renderer", host: { classAttribute: "ax tab-page-renderer" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<template #container></template>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-page-renderer',
@@ -10363,10 +10359,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTabPageModule {
 }
-AXTabPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageModule, declarations: [AXTabPageRendererComponent, AXTabPageHostComponent], imports: [CommonModule, AXLoadingModule], exports: [AXTabPageRendererComponent] });
-AXTabPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageModule, providers: [], imports: [[CommonModule, AXLoadingModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabPageModule, decorators: [{
+AXTabPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTabPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageModule, declarations: [AXTabPageRendererComponent, AXTabPageHostComponent], imports: [CommonModule, AXLoadingModule], exports: [AXTabPageRendererComponent] });
+AXTabPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageModule, providers: [], imports: [[CommonModule, AXLoadingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTabPageRendererComponent, AXTabPageHostComponent],
@@ -10397,9 +10393,9 @@ class AXTabStripComponent {
         }
     }
 }
-AXTabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul class=\"tab-strip-container\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\r\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\r\n    </ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripComponent, decorators: [{
+AXTabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { items: "items" }, outputs: { onTabChanged: "onTabChanged" }, ngImport: i0, template: "<ul class=\"tab-strip-container\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\r\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\r\n    </ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tab-strip', template: "<ul class=\"tab-strip-container\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n        <li *ngIf=\"!!item.visible || item.visible == undefined\" [class.active]=\"item.active\"\r\n            [class.disabled]=\"item.disable\" (click)=\"handleClick(item)\">{{item.text}}</li>\r\n    </ng-container>\r\n</ul>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { items: [{
@@ -10410,10 +10406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTabStripModule {
 }
-AXTabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripModule, declarations: [AXTabStripComponent], imports: [CommonModule], exports: [AXTabStripComponent] });
-AXTabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabStripModule, decorators: [{
+AXTabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripModule, declarations: [AXTabStripComponent], imports: [CommonModule], exports: [AXTabStripComponent] });
+AXTabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabStripModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTabStripComponent],
@@ -10436,9 +10432,9 @@ class DynamicTabsDirective {
         this.viewContainer = viewContainer;
     }
 }
-DynamicTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicTabsDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-DynamicTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: DynamicTabsDirective, selector: "[dynamic-tabs]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: DynamicTabsDirective, decorators: [{
+DynamicTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicTabsDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DynamicTabsDirective, selector: "[dynamic-tabs]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DynamicTabsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dynamic-tabs]'
@@ -10451,9 +10447,9 @@ class AXTabComponent {
         this.isCloseable = false;
     }
 }
-AXTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTabComponent, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon" }, ngImport: i0, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"template\"\r\n      [ngTemplateOutlet]=\"template\"\r\n      [ngTemplateOutletContext]=\"dataContext\"\r\n    >\r\n    </ng-container>\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabComponent, decorators: [{
+AXTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabComponent, selector: "ax-tab", inputs: { caption: "caption", name: "name", active: "active", isCloseable: "isCloseable", template: "template", dataContext: "dataContext", icon: "icon" }, ngImport: i0, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"template\"\r\n      [ngTemplateOutlet]=\"template\"\r\n      [ngTemplateOutletContext]=\"dataContext\"\r\n    >\r\n    </ng-container>\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tab', encapsulation: ViewEncapsulation.None, template: "<div [hidden]=\"!active\" class=\"ax tab-pane\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"template\"\r\n      [ngTemplateOutlet]=\"template\"\r\n      [ngTemplateOutletContext]=\"dataContext\"\r\n    >\r\n    </ng-container>\r\n</div>" }]
         }], propDecorators: { caption: [{
@@ -10553,9 +10549,9 @@ class AXTabViewComponent {
         }
     }
 }
-AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: 'fullWidth', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTabViewComponent, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times-circle\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewComponent, decorators: [{
+AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: 'fullWidth', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTabViewComponent, selector: "ax-tab-view", outputs: { onActiveTab: "onActiveTab" }, queries: [{ propertyName: "tabs", predicate: AXTabComponent }], viewQueries: [{ propertyName: "dynamicTabPlaceholder", first: true, predicate: DynamicTabsDirective, descendants: true }], ngImport: i0, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times-circle\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicTabsDirective, selector: "[dynamic-tabs]" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tab-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax nav-tabs\">\r\n  <li\r\n    *ngFor=\"let tab of tabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>{{ tab.caption }}</span>\r\n  </li>\r\n  <!-- dynamic tabs -->\r\n  <li\r\n    *ngFor=\"let tab of dynamicTabs\"\r\n    (click)=\"selectTab(tab)\"\r\n    [class.active]=\"tab.active\"\r\n    [class.flex-sm-fill]=\"fullWidth\"\r\n  >\r\n    <i class=\"{{ tab.icon }}\"></i>\r\n    <span>\r\n      {{ tab.caption }}\r\n      <i\r\n        *ngIf=\"tab.isCloseable\"\r\n        (click)=\"closeTab(tab)\"\r\n        class=\"far fa-times-circle\"\r\n      >\r\n      </i>\r\n    </span>\r\n  </li>\r\n</ul>\r\n<div class=\"ax-tab-container\">\r\n  <ng-content></ng-content>\r\n<ng-template dynamic-tabs #container></ng-template>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () {
@@ -10575,10 +10571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTabViewModule {
 }
-AXTabViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewModule, declarations: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective], imports: [CommonModule], exports: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective] });
-AXTabViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTabViewModule, decorators: [{
+AXTabViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTabViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewModule, declarations: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective], imports: [CommonModule], exports: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective] });
+AXTabViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTabViewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective],
@@ -10597,9 +10593,9 @@ class AXTextAreaComponent extends AXBaseTextComponent {
         this.maxLength = null;
     }
 }
-AXTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaComponent, decorators: [{
+AXTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextAreaComponent, selector: "ax-text-area", inputs: { rows: "rows", cols: "cols", maxLength: "maxLength" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-area', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }], template: "<div class=\"ax form-item {{size}}\" [class.disabled]=\"disabled\" [attr.id]=\"uid\">\r\n    <div class=\"content\">\r\n        <div class=\"ax input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n            <textarea [name]=\"name\" [attr.maxlength]=\"maxLength\" rows=\"{{rows}}\" cols=\"{{cols}}\" #input type=\"text\"\r\n                class=\"ax icon {{size}}\" [ngClass]=\"setTextAlign()\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\" value=\"{{value}}\"></textarea>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax buttons\">\r\n        <ng-content select=\"ax-button\">\r\n        </ng-content>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { rows: [{
@@ -10614,10 +10610,10 @@ const COMPONENT = [AXTextAreaComponent];
 const MODULES = [CommonModule];
 class AXTextAreaModule {
 }
-AXTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaModule, declarations: [AXTextAreaComponent], imports: [CommonModule], exports: [AXTextAreaComponent] });
-AXTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaModule, providers: [], imports: [[...MODULES]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextAreaModule, decorators: [{
+AXTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, declarations: [AXTextAreaComponent], imports: [CommonModule], exports: [AXTextAreaComponent] });
+AXTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, providers: [], imports: [[...MODULES]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -11548,9 +11544,9 @@ class AXTimePickerComponent extends AXBaseTextComponent {
         this.setCaretPosition(this.input.nativeElement, this.cursorPosition);
     }
 }
-AXTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTimePickerComponent, selector: "ax-time-picker", inputs: { timeType: "timeType", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\r\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerComponent, decorators: [{
+AXTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePickerComponent, selector: "ax-time-picker", inputs: { timeType: "timeType", showCurentTime: "showCurentTime" }, outputs: { onValueChanged: "onValueChanged" }, host: { styleAttribute: "width: 100%" }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\r\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i2$2.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: i3.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'width: 100%' }, providers: [{ provide: AXValidatableComponent, useExisting: AXTimePickerComponent }], template: "<div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n    <div class=\"ax items-wrapper\">\r\n        <ng-content select=\"[start]\">\r\n        </ng-content>\r\n    </div>\r\n    <div class=\"content\" #content>\r\n        <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" [class.icon]=\"icon\">\r\n            <input #input type=\"text\" class=\"ax {{size}}\" [textMask]=\"timeType\" [(ngModel)]=\"textValue\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [disabled]=\"disabled\" [ngClass]=\"setTextAlign()\" [class.clear]=\"value && allowClear\" (focus)=\"handleInputFocus()\"\r\n                (blur)=\"handleInputBlur($event)\" (keypress)='handleKeyPress($event)' (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\">\r\n            <i class=\"{{icon}}\" *ngIf=\"icon\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"ax items-wrapper\">\r\n        <ax-button *ngIf=\"value && allowClear\" icon=\"far fa-times\" type=\"danger blank\" (click)=\"clear()\" [disabled]=\"disabled\" [tabIndex]=\"-1\"></ax-button>\r\n        <ng-content select=\"[end]\">\r\n        </ng-content>\r\n    </div>\r\n</div>\r\n<!-- [textMask]=\"{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}\" -->\r\n<!-- <input #input id=\"timePickerValue\" [textMask]=\"timeType\" type=\"text\" [(ngModel)]=\"value\" (keypress)='handleKeyPress($event)'\r\n    (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (click)=\"handleClick($event)\"> -->" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { onValueChanged: [{
@@ -11563,10 +11559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTimePickerModule {
 }
-AXTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerModule, declarations: [AXTimePickerComponent], imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule], exports: [AXTimePickerComponent] });
-AXTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXButtonModule, TextMaskModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePickerModule, decorators: [{
+AXTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, declarations: [AXTimePickerComponent], imports: [CommonModule, FormsModule, AXButtonModule, TextMaskModule], exports: [AXTimePickerComponent] });
+AXTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, providers: [], imports: [[CommonModule, FormsModule, AXButtonModule, TextMaskModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTimePickerComponent],
@@ -12156,9 +12152,9 @@ class AXTreeSideMenuComponent extends AXBaseComponent {
         return keyFields;
     }
 }
-AXTreeSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTreeSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuComponent, decorators: [{
+AXTreeSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTreeSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTreeSideMenuComponent, selector: "ax-tree-side-menu", inputs: { cssClass: "cssClass", selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", selectNodesRecursive: "selectNodesRecursive", seletedKeyFields: "seletedKeyFields", keyField: "keyField", textField: "textField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", iconStart: "iconStart", closeIconName: "closeIconName", openIconName: "openIconName", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>", directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-side-menu', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax-tree-side-menu {{size}} {{cssClass}}\">\r\n  <ng-template #recursiveList let-list>\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li (click)=\"handleOnNodeClick($event,item,true)\"\r\n        class=\"{{item[hasChildField] ? '':'node'}} {{!!item.toggle  ? 'active':''}}\" style=\"display: flex;\"\r\n        [class.selected]=\"item.select\">\r\n        <div class=\"ax-tree-side-menu-item\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n\r\n          <div class=\"start-side\" *ngIf=\"iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div (click)=\"handleOnNodeClick($event,item,true)\" (dblclick)=\"itemdbClick($event,item)\">\r\n            <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-template #elseTemplate>\r\n              {{item[textField]}}\r\n            </ng-template>\r\n          </div>\r\n\r\n\r\n\r\n          <div class=\"start-side\" *ngIf=\"!iconStart\">\r\n            <div *ngIf=\"item[hasChildField]\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n              <i class=\"{{openIconName}}\" *ngIf=\" !!item.toggle && !item.loading\"></i>\r\n              <i class=\"{{closeIconName}}\" *ngIf=\"!item.toggle && !item.loading\"></i>\r\n              <i class=\"fal fa-spinner fa-spin\" *ngIf=\"item.loading\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <ul class=\"ax-tree-side-menu-child\" *ngIf=\"item.toggle\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { nodeTemplate: [{
@@ -12219,18 +12215,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTreeSideMenuModule {
 }
-AXTreeSideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTreeSideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuModule, declarations: [AXTreeSideMenuComponent], imports: [AXDataSourceModule,
+AXTreeSideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTreeSideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuModule, declarations: [AXTreeSideMenuComponent], imports: [AXDataSourceModule,
         CommonModule,
         AXCheckBoxModule,
         AXContextMenuModule], exports: [AXTreeSideMenuComponent] });
-AXTreeSideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuModule, providers: [], imports: [[
+AXTreeSideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuModule, providers: [], imports: [[
             AXDataSourceModule,
             CommonModule,
             AXCheckBoxModule,
             AXContextMenuModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeSideMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTreeSideMenuComponent],
@@ -12906,9 +12902,9 @@ class AXTreeViewComponent extends AXBaseComponent {
         return keyFields;
     }
 }
-AXTreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\"\r\n                [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\"\r\n                [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\"\r\n                    (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\r\n                    style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\"\r\n                            (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\"\r\n                                [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\"\r\n                            [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"nodeClick(item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items"], outputs: ["onItemClick", "onClosed"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewComponent, decorators: [{
+AXTreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { selectionMode: "selectionMode", selectionLevel: "selectionLevel", selectedFieldName: "selectedFieldName", checkParents: "checkParents", checkChilds: "checkChilds", seletedKeyFields: "seletedKeyFields", keyField: "keyField", hasChildField: "hasChildField", bordered: "bordered", lazyLoading: "lazyLoading", allowDrag: "allowDrag", size: "size", selectableField: "selectableField", contextMenuItems: "contextMenuItems" }, outputs: { selectionChanged: "selectionChanged", seletedKeyFieldsChanged: "seletedKeyFieldsChanged", onItemOpening: "onItemOpening", onItemClick: "onItemClick", onItemClosing: "onItemClosing", onItemDrag: "onItemDrag", onItemMoved: "onItemMoved", onContextMenuItemClick: "onContextMenuItemClick" }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "_contentDataSource", first: true, predicate: AXDataSourceComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\"\r\n                [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\"\r\n                [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\"\r\n                    (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\r\n                    style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\"\r\n                            (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\"\r\n                                [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\"\r\n                            [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"nodeClick(item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["size", "width", "items"], outputs: ["onItemClick", "onClosed"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AXContextMenuDirective, selector: "[axContextMenu]", inputs: ["contextMenu", "contextDataItem", "contextMenuItems", "rtl"], outputs: ["onContextMenuItemClick"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, template: "<ul class=\"ax treeview {{size}}\">\r\n    <ng-template #recursiveList let-list>\r\n        <ng-container *ngFor=\"let item of list\">\r\n            <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\"\r\n                [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\"\r\n                [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n                <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\"\r\n                    (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\"\r\n                    style=\"display: flex; cursor: pointer;align-items: center;\">\r\n                    <div class=\"start-side\">\r\n                        <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\"\r\n                            (click)=\"handleOnNodeClick($event,item,true)\">\r\n                            <i class=\"fal\"\r\n                                [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n                        </div>\r\n\r\n                        <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\"\r\n                            [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n                        </ax-check-box>\r\n\r\n\r\n                    </div>\r\n                    <div class=\"text-list\" (click)=\"nodeClick(item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n                        <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseTemplate>\r\n                            {{item.title}}\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n                <ul *ngIf=\"item.loading\">\r\n                    <i class=\"far \"></i>\r\n                </ul>\r\n                <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n                    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n                    </ng-container>\r\n                </ul>\r\n            </li>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { nodeTemplate: [{
@@ -12965,10 +12961,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXTreeViewModule {
 }
-AXTreeViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewModule, declarations: [AXTreeViewComponent], imports: [AXDataSourceModule, CommonModule, AXCheckBoxModule, AXContextMenuModule], exports: [AXTreeViewComponent] });
-AXTreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewModule, providers: [], imports: [[AXDataSourceModule, CommonModule, AXCheckBoxModule, AXContextMenuModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTreeViewModule, decorators: [{
+AXTreeViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewModule, declarations: [AXTreeViewComponent], imports: [AXDataSourceModule, CommonModule, AXCheckBoxModule, AXContextMenuModule], exports: [AXTreeViewComponent] });
+AXTreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewModule, providers: [], imports: [[AXDataSourceModule, CommonModule, AXCheckBoxModule, AXContextMenuModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTreeViewComponent],
@@ -13110,9 +13106,9 @@ class AXUploadFileComponent extends AXBaseComponent {
         this.files.push(file);
     }
 }
-AXUploadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n<div class=\"ax upload-file-box\" (click)=\"open()\" *ngIf=\"type == 'box'\" #dropRef>\r\n</div>\r\n\r\n<div class=\"ax upload-file-inline\" *ngIf=\"type == 'inline'\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <div class=\"ax buttons\">\r\n      <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\"  [tabIndex]=\"-1\">\r\n       \r\n      </ax-button>\r\n      <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\"  [tabIndex]=\"-1\">\r\n      </ax-button>\r\n    </div>\r\n  </ax-form-group>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileComponent, decorators: [{
+AXUploadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AXRenderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXUploadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXUploadFileComponent, selector: "ax-upload-file", inputs: { dropRef: "dropRef", progressRef: "progressRef", label: "label", size: "size", type: "type", template: "template", disabled: "disabled" }, outputs: { onLoad: "onLoad", onProgress: "onProgress" }, host: { styleAttribute: "display: block; width:100%; position: relative" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n<div class=\"ax upload-file-box\" (click)=\"open()\" *ngIf=\"type == 'box'\" #dropRef>\r\n</div>\r\n\r\n<div class=\"ax upload-file-inline\" *ngIf=\"type == 'inline'\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <div class=\"ax buttons\">\r\n      <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\"  [tabIndex]=\"-1\">\r\n       \r\n      </ax-button>\r\n      <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\"  [tabIndex]=\"-1\">\r\n      </ax-button>\r\n    </div>\r\n  </ax-form-group>\r\n</div>", components: [{ type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-upload-file', encapsulation: ViewEncapsulation.None, host: { style: 'display: block; width:100%; position: relative' }, template: "<input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none;\" (change)=\"onFileChange($event)\" />\r\n<div class=\"ax upload-file-box\" (click)=\"open()\" *ngIf=\"type == 'box'\" #dropRef>\r\n</div>\r\n\r\n<div class=\"ax upload-file-inline\" *ngIf=\"type == 'inline'\">\r\n  <ax-form-group size=\"{{size}}\">\r\n    <ax-text-box [value]=\"fileName\" readonly=\"true\" [disabled]=\"disabled\"></ax-text-box>\r\n    <div class=\"ax buttons\">\r\n      <ax-button type=\"blank light\" icon=\"far fa-times\" (click)=\"remove()\" *ngIf=\"fileName\"  [tabIndex]=\"-1\">\r\n       \r\n      </ax-button>\r\n      <ax-button type=\"primary blank\" icon=\"far fa-upload\" (click)=\"open()\" [disabled]=\"disabled\"  [tabIndex]=\"-1\">\r\n      </ax-button>\r\n    </div>\r\n  </ax-form-group>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AXRenderService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropRef: [{
@@ -13140,10 +13136,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXUploadFileModule {
 }
-AXUploadFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXUploadFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileModule, declarations: [AXUploadFileComponent], imports: [CommonModule, AXButtonModule, AXTextBoxModule, AXProgressBarModule, AXLabelModule, AXFormGroupModule], exports: [AXUploadFileComponent] });
-AXUploadFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileModule, providers: [], imports: [[CommonModule, AXButtonModule, AXTextBoxModule, AXProgressBarModule, AXLabelModule, AXFormGroupModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXUploadFileModule, decorators: [{
+AXUploadFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXUploadFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileModule, declarations: [AXUploadFileComponent], imports: [CommonModule, AXButtonModule, AXTextBoxModule, AXProgressBarModule, AXLabelModule, AXFormGroupModule], exports: [AXUploadFileComponent] });
+AXUploadFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileModule, providers: [], imports: [[CommonModule, AXButtonModule, AXTextBoxModule, AXProgressBarModule, AXLabelModule, AXFormGroupModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXUploadFileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXUploadFileComponent],
@@ -13178,9 +13174,9 @@ class AXAccordionComponent extends AXBaseComponent {
         }
     }
 }
-AXAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXAccordionComponent, selector: "ax-accordion", inputs: { multiple: "multiple" }, queries: [{ propertyName: "panels", predicate: AXPanelBoxComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionComponent, decorators: [{
+AXAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXAccordionComponent, selector: "ax-accordion", inputs: { multiple: "multiple" }, queries: [{ propertyName: "panels", predicate: AXPanelBoxComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ax-accordion",
@@ -13195,10 +13191,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXAccordionModule {
 }
-AXAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionModule, declarations: [AXAccordionComponent], imports: [CommonModule, AXPanelBoxModule], exports: [AXAccordionComponent] });
-AXAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionModule, providers: [], imports: [[CommonModule, AXPanelBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXAccordionModule, decorators: [{
+AXAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionModule, declarations: [AXAccordionComponent], imports: [CommonModule, AXPanelBoxModule], exports: [AXAccordionComponent] });
+AXAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionModule, providers: [], imports: [[CommonModule, AXPanelBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXAccordionComponent],
@@ -13245,9 +13241,9 @@ class AXProperyEditorComponent {
         this.value = v;
     }
 }
-AXProperyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProperyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXProperyEditorComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXProperyEditorComponent, inputs: { value: "value" }, outputs: { valueChange: "valueChange", onRenderCompleted: "onRenderCompleted" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProperyEditorComponent, decorators: [{
+AXProperyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProperyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXProperyEditorComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXProperyEditorComponent, inputs: { value: "value" }, outputs: { valueChange: "valueChange", onRenderCompleted: "onRenderCompleted" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProperyEditorComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { valueChange: [{
                 type: Output
@@ -13382,7 +13378,7 @@ class AXPropertyEditorRendererDirective {
                                     params[p2] = AXObjectUtil.deepCopy(this.context[p2]) || null;
                                     execCode = execCode.replace(vv, `__params__.${p2}`);
                                 });
-                                const func = new Function('__params__', `try { return ${execCode}} catch(e){  console.log(e); return null;  }`);
+                                const func = new Function('__params__', `try { return ${execCode}} catch(e){  return null;  }`);
                                 const val = func(params);
                                 const keys = p.split('.');
                                 const prop = Object.assign({}, this.instance[keys[0]]);
@@ -13435,9 +13431,9 @@ class AXPropertyEditorRendererDirective {
         }
     }
 }
-AXPropertyEditorRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPropertyEditorRendererDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$2.AXRenderService }, { token: i1$2.AXEventService }], target: i0.ɵɵFactoryTarget.Directive });
-AXPropertyEditorRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: { property: "property", validationForm: "validationForm", context: "context", host: "host", groupId: "groupId" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXPropertyEditorRendererDirective, decorators: [{
+AXPropertyEditorRendererDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPropertyEditorRendererDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$2.AXRenderService }, { token: i1$2.AXEventService }], target: i0.ɵɵFactoryTarget.Directive });
+AXPropertyEditorRendererDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AXPropertyEditorRendererDirective, selector: "[ax-property-editor-renderer]", inputs: { property: "property", validationForm: "validationForm", context: "context", host: "host", groupId: "groupId" }, outputs: { onValueChange: "onValueChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXPropertyEditorRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ax-property-editor-renderer]',
@@ -13470,9 +13466,9 @@ class AXTextPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXTextPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTextPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
+AXTextPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<ax-text-box (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" [readonly]=\"readonly\" [allowClear]=\"clearButton\">\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-box>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
@@ -13484,10 +13480,10 @@ class AXTextPropertyEditorModule {
     constructor() {
     }
 }
-AXTextPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorModule, declarations: [AXTextPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule], exports: [AXTextPropertyEditorComponent] });
-AXTextPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextPropertyEditorModule, decorators: [{
+AXTextPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, declarations: [AXTextPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXValidationModule], exports: [AXTextPropertyEditorComponent] });
+AXTextPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTextPropertyEditorComponent],
@@ -13515,8 +13511,8 @@ class AXNumberBoxPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXNumberBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXNumberBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXNumberBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXNumberBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXNumberBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXNumberBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ax-number-box (onValueChanged)="handleValueChange($event)"
             [value]="value"
             [showSeparator]="showSeparator"
@@ -13529,7 +13525,7 @@ AXNumberBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
             </ax-validation>
         </ax-number-box>
     `, isInline: true, components: [{ type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -13555,10 +13551,10 @@ class AXNumberBoxPropertyEditorModule {
     constructor() {
     }
 }
-AXNumberBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXNumberBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorModule, declarations: [AXNumberBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule], exports: [AXNumberBoxPropertyEditorComponent] });
-AXNumberBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXNumberBoxPropertyEditorModule, decorators: [{
+AXNumberBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, declarations: [AXNumberBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule], exports: [AXNumberBoxPropertyEditorComponent] });
+AXNumberBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXNumberBoxPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXNumberBoxPropertyEditorComponent],
@@ -13623,9 +13619,9 @@ class AXSelectBoxPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"selectionMode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [selectedValues]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>", components: [{ type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
+AXSelectBoxPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSelectBoxPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "selectBox", first: true, predicate: AXSelectBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-select-box [mode]=\"selectionMode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [selectedValues]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>", components: [{ type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<ax-select-box [mode]=\"selectionMode\"\r\n                [textField]=\"textField\" \r\n                [valueField]=\"valueField\" \r\n                [selectedValues]=\"value\" \r\n                [remoteOperation]=\"remoteOperation\"\r\n                [allowSearch]=\"allowSearch\" \r\n                [allowNull]=\"allowNull\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                (selectionChanged)=\"handleValueChange($event)\">\r\n    <ax-data-source [provideData]=\"provideData\">\r\n    </ax-data-source>\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-select-box>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectBox: [{
@@ -13637,10 +13633,10 @@ class AXSelectBoxPropertyEditorModule {
     constructor() {
     }
 }
-AXSelectBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorModule, declarations: [AXSelectBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule], exports: [AXSelectBoxPropertyEditorComponent] });
-AXSelectBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSelectBoxPropertyEditorModule, decorators: [{
+AXSelectBoxPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, declarations: [AXSelectBoxPropertyEditorComponent], imports: [CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule], exports: [AXSelectBoxPropertyEditorComponent] });
+AXSelectBoxPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXSelectBoxModule, AXDataSourceModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSelectBoxPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectBoxPropertyEditorComponent],
@@ -14049,11 +14045,11 @@ class AXColorBoxComponent extends AXValidatableComponent {
         }
     }
 }
-AXColorBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXColorBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
+AXColorBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXColorBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorBoxComponent, selector: "ax-color-box", inputs: { value: "value" }, outputs: { onColorSelect: "onColorSelect", valueChange: "valueChange" }, providers: [
         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
     ], usesInheritance: true, ngImport: i0, template: "<div class=\"color-box\">\r\n    <div class=\"color-box-pallet\">\r\n        <div class=\"color-item\" *ngFor=\"let item of colors\" [style.background-color]=\"item.code\" [title]=\"item.code\"\r\n            (click)=\"onColorClick(item)\">\r\n            <i class=\"fas fa-check-circle color-active\" *ngIf=\"item.active\"></i>\r\n        </div>\r\n    </div>\r\n    <div class=\"text-input\">\r\n        <ng-container *ngIf=\"inputFormat=='rgb';else hexTemplate\">\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"rColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"gColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"bColor\" (textChange)=\"handleColorChange()\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"color-part switch\" (click)=\"inputFormat='hex'\">\r\n                <span>RGB</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #hexTemplate>\r\n            <div class=\"color-part\">\r\n                <ax-text-box [(value)]=\"value\" size=\"sm\" (onKey)=\"handleKeyEvent($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <!-- <div class=\"color-part switch\" (click)=\"inputFormat='rgb'\">\r\n                <span>HEX</span>\r\n            </div> -->\r\n        </ng-template>\r\n\r\n    </div>\r\n</div>", styles: [".color-box{border:1px solid var(--ax-border-color);max-width:300px;padding:5px}.color-box .color-box-pallet{display:flex;width:100%;height:auto;flex-wrap:wrap;justify-content:space-between;align-items:center}.color-box .color-box-pallet div{width:18px;height:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;border:1px solid var(--ax-border-color);margin:1px}.color-box .color-box-pallet .color-active{color:#fff;box-shadow:1px 1px 4px #5a5a5a;border-radius:50%;font-size:14px}.color-box .text-input{display:flex;justify-content:space-between}.color-box .text-input .color-part{padding:2px;display:flex;align-items:center;flex-direction:column;justify-content:center}.color-box .text-input .color-part.switch{cursor:pointer;font-weight:700}.color-box .text-input .color-part.switch:hover{text-decoration:underline}.color-box .text-input .color-part .ax-field-set .no-label input{margin-top:0!important;text-align:center;height:var(--ax-size-md)}\n"], components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorBoxComponent },
@@ -14105,11 +14101,11 @@ class AXColorPickerComponent extends AXColorBoxComponent {
         this.dropdown.close();
     }
 }
-AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
+AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { placeholder: "placeholder", showClear: "showClear", label: "label", readonly: "readonly", disabled: "disabled", size: "size", rtl: "rtl", validation: "validation" }, host: { styleAttribute: "width: 100%" }, providers: [
         { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
     ], queries: [{ propertyName: "_contentValidation", first: true, predicate: AXValidation, descendants: true, static: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down #dropdown fitParent=\"false\" [size]=\"size\" [disabled]=\"disabled\"  [rtl]=\"rtl\">\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\r\n        <div class=\"ax form-item\" [class.disabled]=\"disabled\" [attr.id]=\"uid\" #fc>\r\n            <div class=\"content\" #content>\r\n                <div class=\"ax form-control input {{size}}\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\">\r\n                    <ng-container *ngIf=\"value; else elseTemplate\">\r\n                        <div [style.background-color]=\"value\" [style.color]=\"findTextColor(value)\"\r\n                            style=\"padding:0px 5px;width: 100%;display: flex;align-items: center;\">\r\n                            {{value}}&nbsp;</div>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        {{placeholder}}&nbsp;\r\n                    </ng-template>\r\n                </div>\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        <ax-color-box [(value)]=\"value\" \r\n            (onColorSelect)=\"handleItemClick($event)\"></ax-color-box>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["rtl", "readonly", "loading"], outputs: ["dropdownToggle", "onButtonClick"] }, { type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["value"], outputs: ["onColorSelect", "valueChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', providers: [
                         { provide: AXValidatableComponent, useExisting: AXColorPickerComponent },
@@ -14251,9 +14247,9 @@ class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
         super.handleValueChange(this.ranges);
     }
 }
-AXRangePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-AXRangePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\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                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
+AXRangePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
+AXRangePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\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                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{r.title}}</div>\r\n    </div>\r\n    <div>\r\n        <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\r\n        <div>\r\n            <i class=\"far fa-long-arrow-left\"></i>\r\n        </div>\r\n        <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.title\">\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                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.min-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                        <div class=\"col-6\">\r\n                            <ax-label>{{ 'common.max-value' | trans  }}</ax-label>\r\n                            <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\r\n                                [decimalNumber]=\"decimalNumber\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-number-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
@@ -14263,10 +14259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
 class AXColorPickerModule {
 }
-AXColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
-AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPickerModule, decorators: [{
+AXColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent, AXColorBoxComponent], imports: [CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule], exports: [AXColorPickerComponent, AXColorBoxComponent] });
+AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[CommonModule, FormsModule, AXDropdownModule, AXValidationModule, AXTextBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXColorPickerComponent, AXColorBoxComponent],
@@ -14280,8 +14276,8 @@ class AXRangePropertyEditorModule {
     constructor() {
     }
 }
-AXRangePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorModule, declarations: [AXRangePropertyEditorComponent], imports: [CommonModule,
+AXRangePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, declarations: [AXRangePropertyEditorComponent], imports: [CommonModule,
         FormsModule,
         AXTranslatorModule,
         AXTextBoxModule,
@@ -14291,7 +14287,7 @@ AXRangePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0
         AXPageModule,
         AXValidationModule,
         AXButtonModule], exports: [AXRangePropertyEditorComponent] });
-AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorModule, providers: [], imports: [[
+AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXTranslatorModule,
@@ -14303,7 +14299,7 @@ AXRangePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0
             AXValidationModule,
             AXButtonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXRangePropertyEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXRangePropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXRangePropertyEditorComponent],
@@ -14334,14 +14330,14 @@ class AXColorPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXColorPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXColorPickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXColorPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXColorPickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ax-color-picker  [(value)]="value">
             <ax-validation [rules]="validation?.rules">
             </ax-validation>
         </ax-color-picker>
     `, isInline: true, components: [{ type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14360,10 +14356,10 @@ class AXColorPropertyEditorModule {
     constructor() {
     }
 }
-AXColorPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXColorPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorModule, declarations: [AXColorPropertyEditorComponent], imports: [CommonModule, FormsModule, AXColorPickerModule, AXValidationModule], exports: [AXColorPropertyEditorComponent] });
-AXColorPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXColorPickerModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColorPropertyEditorModule, decorators: [{
+AXColorPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColorPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorModule, declarations: [AXColorPropertyEditorComponent], imports: [CommonModule, FormsModule, AXColorPickerModule, AXValidationModule], exports: [AXColorPropertyEditorComponent] });
+AXColorPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXColorPickerModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColorPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXColorPropertyEditorComponent],
@@ -14462,11 +14458,11 @@ class ColumnPropertyEditorComponent extends AXProperyEditorComponent {
         super.handleValueChange(this.columns);
     }
 }
-ColumnPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
+ColumnPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid rgba(0,0,0,.1607843137);background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: 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: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnPropertyEditorComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid #00000029;background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ template: "<div *ngFor=\"let c of columns\" class=\"column-item\">\r\n    <div>\r\n        <div>{{c.fieldName}} - {{c.caption}}</div>\r\n    </div>\r\n    <div>\r\n        <div>\r\n        </div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(c)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" size=\"sm\" type=\"success outline\" (click)=\"handleAddClick()\">\u0633\u062A\u0648\u0646 \u0647\u0627</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <div class=\"ax-mrg-md\"></div>\r\n                <div class=\"table\">\r\n                    <div class=\"thead\">\r\n                        <div class=\"tr\">\r\n                            <div class=\"th\">\r\n                                <div style=\"width: 5px;\"></div>\r\n                                \u0646\u0627\u0645\r\n                            </div>\r\n                            <div class=\"th\">\u0639\u0646\u0648\u0627\u0646</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639</div>\r\n                            <div class=\"th\">\u0646\u0648\u0639 \u0646\u0645\u0627\u06CC\u0634</div>\r\n                            <div class=\"th\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0647\u062F\u0631</div>\r\n                            <div class=\"th\">\u062A\u06A9\u0645\u06CC\u0644 \u062A\u0648\u0633\u0637 \u06A9\u0627\u0631\u0628\u0631</div>\r\n                            <div class=\"th\">\u0639\u0645\u0644\u06CC\u0627\u062A</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"tbody\">\r\n                        <div cdkDropList class=\"drag-drop-table-item\" (cdkDropListDropped)=\"drop($event)\">\r\n                            <div class=\"tr  drag-drop-item-box\" *ngFor=\"let c of columns\" cdkDrag>\r\n                                <div class=\"td\">\r\n                                    <div>\r\n                                    </div>\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.fieldName\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.caption\" [allowClear]=\"true\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-select-box size=\"sm\" textField=\"title\" valueField=\"id\">\r\n                                        <ax-data-source [provideData]=\"handleDataReceived\"></ax-data-source>\r\n                                    </ax-select-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-text-box size=\"sm\" [(value)]=\"c.displayType\"></ax-text-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.rowHeader\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-check-box size=\"md\" [(value)]=\"c.fillByUser\"></ax-check-box>\r\n                                </div>\r\n                                <div class=\"td\">\r\n                                    <ax-button type=\"danger blank\" icon=\"far fa-trash-alt\" (click)=\"handleRemoveClick(c)\">\r\n                                    </ax-button>\r\n                                    <ax-button type=\"primary blank\" icon=\"far fa-ellipsis-v\">\r\n                                    </ax-button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n            <div style=\"display: flex; justify-content: flex-end;margin-left: 15px;\">\r\n                <ax-button icon=\"far fa-plus\" size=\"sm\" type=\"primary\" (click)=\"handleAddColumn()\">\u0627\u0641\u0632\u0648\u062F\u0646 \u0633\u062A\u0648\u0646 \u062C\u062F\u06CC\u062F\r\n                </ax-button>\r\n            </div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".column-item{border:1px solid var(--ax-gray-light-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;font-weight:500;align-items:center}.column-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.column-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.column-item div:first-child{display:flex;align-items:center}.column-item div:first-child div:first-child{width:100px;height:25px;border-radius:3px}.column-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.column-item div:last-child{display:flex;align-items:center}.column-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.column-item div:last-child button i{color:var(--ax-danger-color)}.column-item div:last-child div{min-width:40px}.column-item div:last-child div.min{color:var(--ax-danger-color)}.column-item div:last-child div.max{color:var(--ax-success-color)}.add-item{border:1px solid var(--ax-success-color);background-color:transparent;color:var(--ax-success-color)}table{width:100%;margin-top:1em}table thead th{text-align:right;padding:.4em;border:1px solid rgba(0,0,0,.1607843137);background-color:var(--ax-primary-trans-dark-color)}table tbody tr td{text-align:center}.table{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .thead{width:100%;display:flex;align-items:center;justify-content:center}.table .thead .tr{width:100%;display:flex;border:1px solid var(--ax-border-color);background-color:var(--ax-primary-trans-light-color)}.table .thead .tr .th{width:14.2857142857%;height:100%;display:flex;justify-content:center;flex-direction:column;border-left:1px solid var(--ax-border-color);padding:.5em;font-weight:700}.table .tbody{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.table .tbody .tr{width:100%;height:100%;display:flex;border:1px solid var(--ax-border-color);border-top:0;align-items:center;justify-content:center}.table .tbody .tr .td{width:14.2857142857%;height:45px;padding:0 .4em;border-left:1px solid var(--ax-border-color);text-align:center;align-items:center;justify-content:center;display:flex}.table .tbody .tr .td:first-child{padding-right:0!important}.table .tbody .tr .td div{width:12px;background-color:var(--ax-border-color);margin-left:.4em;height:100%;cursor:move}.table .tbody .tr .td:last-child{border-left:0!important}.table .tr:first-child{overflow:hidden}.table .th:last-child{border-left:0!important}.drag-drop-table-item{width:100%}.drag-drop-item-box{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white;font-size:14px;z-index:700000!important}.cdk-drag-preview{box-sizing:border-box;border-radius:var(--ax-size-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-drop-table-item.cdk-drop-list-dragging .drag-drop-item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
                 type: ViewChild,
                 args: ['tplEdit']
@@ -14476,10 +14472,10 @@ class AXColumnPropertyEditorModule {
     constructor() {
     }
 }
-AXColumnPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColumnPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXColumnPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColumnPropertyEditorModule, declarations: [ColumnPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule], exports: [ColumnPropertyEditorComponent] });
-AXColumnPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColumnPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXColumnPropertyEditorModule, decorators: [{
+AXColumnPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColumnPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColumnPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColumnPropertyEditorModule, declarations: [ColumnPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule], exports: [ColumnPropertyEditorComponent] });
+AXColumnPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColumnPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextBoxModule, AXNumberBoxModule, AXColorPickerModule, AXLabelModule, AXPageModule, AXButtonModule, AXCheckBoxModule, AXSelectBoxModule, AXDataSourceModule, DragDropModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXColumnPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ColumnPropertyEditorComponent],
@@ -14669,9 +14665,9 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
         }
     }
 }
-AXConditionalColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
-AXConditionalColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\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                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: 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: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
+AXConditionalColorPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
+AXConditionalColorPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\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                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { type: AXPageComponent, selector: "ax-page" }, { type: AXPageContentComponent, selector: "ax-page-content" }, { type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { type: 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: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "type", "showMask", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\r\n    <div>\r\n        <div [style.background-color]=\"r.color\"></div>\r\n        <div>{{ r.display }}</div>\r\n    </div>\r\n    <div [attr.title]=\"getTitle(r.operator)\">\r\n        <div class=\"value\">{{r.value}}</div>\r\n        <div>\r\n            <i class=\"far {{getIcon(r.operator)}}\"></i>\r\n        </div>\r\n        <div class=\"value-text\">{{'common.value' | trans}}</div>\r\n        <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\r\n    </div>\r\n</div>\r\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans  }}\r\n</ax-button>\r\n<ng-template #tplEdit>\r\n    <ax-page>\r\n        <ax-page-content>\r\n            <div class=\"container\">\r\n                <ax-validation-form (onInit)=\"onFormInit($event)\">\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.condition' | trans  }}</ax-label>\r\n                            <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\r\n                                [allowNull]=\"false\" [items]=\"operators\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-select-box>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'common.value' | trans  }}</ax-label>\r\n                            <div [ngSwitch]=\"dataType\">\r\n                                <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\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                                <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\r\n                                    [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-select-box>\r\n                                <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\r\n                                    [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\r\n                                    <ax-validation>\r\n                                        <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                    </ax-validation>\r\n                                </ax-number-box>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans  }}</ax-label>\r\n                            <ax-color-picker [(value)]=\"editRow.color\">\r\n                                <ax-validation>\r\n                                    <ax-validation-rule type=\"required\"></ax-validation-rule>\r\n                                </ax-validation>\r\n                            </ax-color-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row\">\r\n                        <div class=\"col-12\">\r\n                            <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans  }}</ax-label>\r\n                            <ax-text-box [(value)]=\"editRow.display\">\r\n                            </ax-text-box>\r\n                        </div>\r\n                    </div>\r\n                </ax-validation-form>\r\n            </div>\r\n            <div class=\"ax-mrg-md\"></div>\r\n        </ax-page-content>\r\n    </ax-page>\r\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{-webkit-margin-start:10px;margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AXPopupService }]; }, propDecorators: { tplEdit: [{
@@ -14698,8 +14694,8 @@ class AXConditionalColorPropertyEditorModule {
         });
     }
 }
-AXConditionalColorPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXConditionalColorPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorModule, declarations: [AXConditionalColorPropertyEditorComponent], imports: [CommonModule,
+AXConditionalColorPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXConditionalColorPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorModule, declarations: [AXConditionalColorPropertyEditorComponent], imports: [CommonModule,
         FormsModule,
         AXTranslatorModule,
         AXTextBoxModule,
@@ -14710,7 +14706,7 @@ AXConditionalColorPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVer
         AXButtonModule,
         AXSelectBoxModule,
         AXValidationModule], exports: [AXConditionalColorPropertyEditorComponent] });
-AXConditionalColorPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorModule, providers: [], imports: [[
+AXConditionalColorPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXTranslatorModule,
@@ -14723,7 +14719,7 @@ AXConditionalColorPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVer
             AXSelectBoxModule,
             AXValidationModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXConditionalColorPropertyEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXConditionalColorPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXConditionalColorPropertyEditorComponent],
@@ -14757,11 +14753,11 @@ class AXSwitchPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXSwitchPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXSwitchPropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+AXSwitchPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXSwitchPropertyEditorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
         <ax-switch (onValueChanged)="handleValueChange($event)" [value]="value"></ax-switch>
     `, isInline: true, components: [{ type: AXSwitchComponent, selector: "ax-switch", inputs: ["tabIndex", "value", "readonly", "disabled", "size"], outputs: ["onValueChanged", "valueChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14774,10 +14770,10 @@ class AXSwitchPropertyEditorModule {
     constructor() {
     }
 }
-AXSwitchPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSwitchPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorModule, declarations: [AXSwitchPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule], exports: [AXSwitchPropertyEditorComponent] });
-AXSwitchPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXSwitchPropertyEditorModule, decorators: [{
+AXSwitchPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, declarations: [AXSwitchPropertyEditorComponent], imports: [CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule], exports: [AXSwitchPropertyEditorComponent] });
+AXSwitchPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXNumberBoxModule, AXValidationModule, AXSwitchModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXSwitchPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchPropertyEditorComponent],
@@ -14808,15 +14804,15 @@ class AXDatePropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXDatePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXDatePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "date", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXDatePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXDatePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "date", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-date-picker [size]="size" [dateType]="dateType" [showToday]="showToday" [disabled]="disabled" [allowClear]="clearButton" [readonly]="readonly" [max]="max" [min]="min" [placeholder]="placeholder" [showTodayButton]="showTodayButton" [selectableHoliday]="selectableHoliday" (onValueChanged)="handleValueChange($event)"
              [type]="type" [textAlign]="textAlign" [(value)]="value">
              <ax-validation [rules]="validation?.rules">
             </ax-validation>
     </ax-date-picker>
          `, isInline: true, components: [{ type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14836,10 +14832,10 @@ class AXDatePropertyEditorModule {
     constructor() {
     }
 }
-AXDatePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDatePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorModule, declarations: [AXDatePropertyEditorComponent], imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule], exports: [AXDatePropertyEditorComponent] });
-AXDatePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXDatePickerModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXDatePropertyEditorModule, decorators: [{
+AXDatePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDatePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, declarations: [AXDatePropertyEditorComponent], imports: [CommonModule, FormsModule, AXDatePickerModule, AXValidationModule], exports: [AXDatePropertyEditorComponent] });
+AXDatePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXDatePickerModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXDatePropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXDatePropertyEditorComponent],
@@ -14865,14 +14861,14 @@ class AXTimePropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXTimePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTimePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTimePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "time", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXTimePropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTimePropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTimePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "time", first: true, predicate: AXDatePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-time-picker [showCurentTime]="showCurentTime" [timeType]="timeType" [allowClear]="clearButton" (onValueChanged)="handleValueChange($event)">
         <ax-validation [rules]="validation?.rules">
         </ax-validation>
     </ax-time-picker>
          `, isInline: true, components: [{ type: AXTimePickerComponent, selector: "ax-time-picker", inputs: ["timeType", "showCurentTime"], outputs: ["onValueChanged"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14891,10 +14887,10 @@ class AXTimePropertyEditorModule {
     constructor() {
     }
 }
-AXTimePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTimePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorModule, declarations: [AXTimePropertyEditorComponent], imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule], exports: [AXTimePropertyEditorComponent] });
-AXTimePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTimePickerModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTimePropertyEditorModule, decorators: [{
+AXTimePropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimePropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, declarations: [AXTimePropertyEditorComponent], imports: [CommonModule, FormsModule, AXTimePickerModule, AXValidationModule], exports: [AXTimePropertyEditorComponent] });
+AXTimePropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTimePickerModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTimePropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTimePropertyEditorComponent],
@@ -14920,9 +14916,9 @@ class AXTextareaPropertyEditorComponent extends AXProperyEditorComponent {
         this.onRenderCompleted.emit();
     }
 }
-AXTextareaPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextareaPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: AXTextareaPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n", components: [{ type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorComponent, decorators: [{
+AXTextareaPropertyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextareaPropertyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXTextareaPropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textBox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n", components: [{ type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["rows", "cols", "maxLength"] }, { type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorComponent, decorators: [{
             type: Component,
             args: [{ template: "<ax-text-area (onValueChanged)=\"handleValueChange($event)\" [value]=\"value\" \r\n        [readonly]=\"readonly\" \r\n        [allowClear]=\"clearButton\"\r\n        [placeholder]=\"placeholder\"\r\n        [rows]=\"rows\"\r\n        >\r\n    <ax-validation [rules]=\"validation?.rules\">\r\n    </ax-validation>\r\n</ax-text-area>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textBox: [{
@@ -14934,17 +14930,16 @@ class AXTextareaPropertyEditorModule {
     constructor() {
     }
 }
-AXTextareaPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextareaPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorModule, declarations: [AXTextareaPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule], exports: [AXTextareaPropertyEditorComponent] });
-AXTextareaPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextAreaModule, AXValidationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXTextareaPropertyEditorModule, decorators: [{
+AXTextareaPropertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextareaPropertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, declarations: [AXTextareaPropertyEditorComponent], imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule], exports: [AXTextareaPropertyEditorComponent] });
+AXTextareaPropertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, providers: [], imports: [[CommonModule, FormsModule, AXTextAreaModule, AXValidationModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXTextareaPropertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTextareaPropertyEditorComponent],
                     imports: [CommonModule, FormsModule, AXTextAreaModule, AXValidationModule],
                     exports: [AXTextareaPropertyEditorComponent],
-                    entryComponents: [AXTextareaPropertyEditorComponent],
-                    providers: [],
+                    providers: []
                 }]
         }], ctorParameters: function () { return []; } });
@@ -14964,8 +14959,8 @@ const WDIGET_MODULES = [
 ];
 class AXProppertyEditorModule {
 }
-AXProppertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProppertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProppertyEditorModule, declarations: [AXPropertyEditorRendererDirective], imports: [AXNumberBoxPropertyEditorModule,
+AXProppertyEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, declarations: [AXPropertyEditorRendererDirective], imports: [AXNumberBoxPropertyEditorModule,
         AXTextPropertyEditorModule,
         AXSelectBoxPropertyEditorModule,
         AXRangePropertyEditorModule,
@@ -14977,7 +14972,7 @@ AXProppertyEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         AXTimePropertyEditorModule,
         AXTimePropertyEditorModule,
         AXTextareaPropertyEditorModule, i1$4.RouterModule], exports: [AXPropertyEditorRendererDirective] });
-AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProppertyEditorModule, providers: [], imports: [[
+AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, providers: [], imports: [[
             WDIGET_MODULES,
             RouterModule.forChild([
                 {
@@ -15025,7 +15020,7 @@ AXProppertyEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                 },
             ])
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: AXProppertyEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXProppertyEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [