@acorex/components 5.4.0 → 5.5.0

package/fesm2020/acorex-components.mjs

@@ -5,7 +5,7 @@ import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$4 from '@acorex/core';
-import { AXObjectUtil, AXConfig, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXColorUtil, AXDrawingUtil, AXTranslator, AXTranslationModule, AXStringUtil } from '@acorex/core';
+import { AXObjectUtil, AXConfig, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXColorUtil, AXDrawingUtil, AXTranslationModule, AXTranslator, AXStringUtil } from '@acorex/core';
 import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, pairwise, filter, startWith, exhaustMap, throttleTime, observeOn, finalize } from 'rxjs/operators';
 import * as i1$5 from '@angular/cdk/portal';
@@ -484,7 +484,17 @@ function _DatalistComponenetMixin(Base) {
                 return __classPrivateFieldGet(this, _isLoading, "f");
             }
             _formatData(v) {
-                return _.unionBy(v.map((o, i) => {
+                // return _.unionBy(v.map((o, i) => {
+                //     if (typeof o == 'object')
+                //         return o
+                //     else {
+                //         const no: any = {};
+                //         no[this.valueField] = o;
+                //         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                //         return no;
+                //     }
+                // }), this.valueField);
+                return v.map((o, i) => {
                     if (typeof o == 'object')
                         return o;
                     else {
@@ -493,16 +503,17 @@ function _DatalistComponenetMixin(Base) {
                         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
                         return no;
                     }
-                }), this.valueField);
+                });
             }
             _fetchData(opts) {
-                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
+                const skip = __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take = this.pageSize;
+                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f") || (skip > this.totalCount)) {
                     return;
                 }
                 if (__classPrivateFieldGet(this, _items, "f")) {
                     __classPrivateFieldSet(this, _isLoading, true, "f");
                     const fetchFn = __classPrivateFieldGet(this, _items, "f");
-                    fetchFn({ skip: __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take: this.pageSize, searchQuery: opts?.searchQuery }).then(c => {
+                    fetchFn({ skip, take, searchQuery: opts?.searchQuery }).then(c => {
                         var _a;
                         if (Array.isArray(c)) {
                             __classPrivateFieldSet(this, _loadedItems, this._formatData(c), "f");
@@ -510,7 +521,7 @@ function _DatalistComponenetMixin(Base) {
                         }
                         else {
                             __classPrivateFieldSet(this, _totalItems, c.total || c.items?.length || 0, "f");
-                            __classPrivateFieldSet(this, _loadedItems, __classPrivateFieldGet(this, _loadedItems, "f").concat(this._formatData(c.items)), "f");
+                            __classPrivateFieldSet(this, _loadedItems, [...new Set(__classPrivateFieldGet(this, _loadedItems, "f").concat(this._formatData(c.items)))], "f");
                             __classPrivateFieldSet(this, _currentPage, (_a = __classPrivateFieldGet(this, _currentPage, "f"), _a++, _a), "f");
                         }
                         this._cdr.markForCheck();
@@ -3383,7 +3394,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
     _generatePickerItems(view) {
-        debugger;
         switch (view) {
             case 'year':
                 this._pickerYears = _.range(2000, 2050, 1);
@@ -3405,7 +3415,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         }
     }
     _handlePickerChange(item, view) {
-        debugger;
         if (!item)
             return;
         const date = this._viewRange.startTime;
@@ -5342,7 +5351,6 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
         this._platform.resize.subscribe(() => {
             this._isMobile = this._platform.is('Mobile');
             this.popover.dispose();
-            this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
         });
     }
     _handleArrowClickEvent(e) {
@@ -5356,11 +5364,9 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
     onInit() {
         super.onInit();
         this._target = this._elementRef.nativeElement;
-        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
     }
     onViewInit() {
         super.onViewInit();
-        this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
     }
     _onValueChanged(oldValue, newValue) {
         super._onValueChanged(oldValue, newValue);
@@ -5375,12 +5381,12 @@ class AXColorPickerComponent extends AXBaseColorPickerMixin {
 AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-    ], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "mode"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "modeChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\"  (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "mode"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "modeChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>" }]
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\"  (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -6518,14 +6524,17 @@ class AXFormComponent extends AXBaseComponentMixin {
     _getComponenets() {
         return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
     }
-    validate() {
+    validate(...args) {
         const widgets = this._getComponenets();
         //
         return new Promise((resolve, reject) => {
             if (widgets.length === 0) {
                 return Promise.resolve({ result: true });
             }
-            Promise.all(widgets.map((c) => c.__axContext__.validate())).then((rules) => {
+            Promise.all(widgets.map((c) => c.__axContext__)
+                .filter(c => (args == null || args.length == 0) || args.includes(c.name))
+                .map((c) => c.validate()))
+                .then((rules) => {
                 const failed = rules.filter((c) => !c.result);
                 if (failed.length) {
                     reject({
@@ -6547,12 +6556,12 @@ class AXFormComponent extends AXBaseComponentMixin {
     }
 }
 AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form',
-                    template: '<div class="ax-form"><ng-content></ng-content></div>',
+                    template: '<ng-content></ng-content>',
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -6646,7 +6655,7 @@ class AXSearchBoxComponent extends AXBaseComponentMixin {
         super(_elementRef, _cdr);
         this._parent = _parent;
         this.placeholder = 'common.search';
-        this.debounceTime = 300;
+        this.debounceTime = 500;
         this.searchExp = null;
     }
     _onSearchExprChanged(e) {
@@ -6657,12 +6666,15 @@ class AXSearchBoxComponent extends AXBaseComponentMixin {
     focus() {
         this._textbox?.focus();
     }
+    clear() {
+        this._textbox._setValue(null);
+    }
 }
 AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-button>\r\n    </ax-suffix>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>" }]
+            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-button>\r\n    </ax-suffix>\r\n</ax-text-box>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXSearchableComponent, decorators: [{
                     type: Optional
                 }, {
@@ -6680,11 +6692,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 const COMPONENT$9 = [AXSearchBoxComponent];
-const MODULES$9 = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule];
+const MODULES$9 = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];
 class AXSearchBoxModule {
 }
 AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule], exports: [AXSearchBoxComponent] });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
 AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[...MODULES$9]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
@@ -6846,10 +6858,10 @@ class AXMenuComponent extends AXBaseMenuMixin {
     }
 }
 AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-2\">\r\n  <ng-content [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\" select=\"ax-search-box\"></ng-content>\r\n</div>\r\n<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], 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"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], 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"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<div class=\"ax-p-2\">\r\n  <ng-content [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\" select=\"ax-search-box\"></ng-content>\r\n</div>\r\n<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
+            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...BASEMENU_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -7437,7 +7449,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     onInit() {
         super.onInit();
         this._target = this._elementRef.nativeElement;
-        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+        this._updatePopupTitle();
     }
     onViewInit() {
         super.onViewInit();
@@ -7447,6 +7459,11 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this.value = null;
         super.refresh();
     }
+    _updatePopupTitle() {
+        // const count =this.selectedItems?.length;
+        // this._popoverTitle =  count > 1 ?  `(${count}) items selected`:  this.placeholder || AXTranslator.get('selectbox.popover.title')
+        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+    }
     _handleOnItemClick(e, item) {
         if (this.isItemDisabled(item)) {
             return;
@@ -7478,6 +7495,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                     this._focusSelectedItem();
                     this._forceFocus = false;
                 }
+                this._focusSearchBox();
             }, 100);
         }
     }
@@ -7542,7 +7560,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
         }
         else if ((e.code === 'Space' || e.code === 'Enter')) {
-            debugger;
             e.preventDefault();
             const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
             const focusedItem = _.findLast(this.flatItems, [this.valueField, focusedItemId]);
@@ -7581,14 +7598,16 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         else {
             this._focusSelectedItem();
         }
-        debugger;
-        if (this._searchBox && !this._isMobile) {
-            this._searchBox.focus();
-        }
+        this._focusSearchBox();
     }
     _handlePopupOnClosed(e) {
         this.focus();
     }
+    _focusSearchBox() {
+        if (this._searchBox && (!this._isMobile || this._searchBox.searchExp)) {
+            this._searchBox.focus();
+        }
+    }
     _focusItemByNav(sign) {
         const list = this.listContainer.nativeElement;
         const fn = (s) => list.querySelector(s);
@@ -7655,12 +7674,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             this._fetchData();
         }
     }
-    _onSearchExprChanged(e) {
-        debugger;
-        this.empty();
-        this._forceFocus = true;
-        this._fetchData();
-    }
     search(exp) {
         debugger;
         this.empty();
@@ -7675,13 +7688,13 @@ AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
-    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -8908,16 +8921,17 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
         if (this.enabled === false) {
             return Promise.resolve({ result: true });
         }
-        const regRule = AXValidationRules.get(this.rule);
-        if (regRule) {
-            return this._internalValidate(regRule.rule.rule, value, this.message || regRule.rule.message, regRule.rule.value);
-        }
-        else {
-            return this._internalValidate(this.rule, value, this.message, this.value);
+        if (this.rule == 'custom') {
+            const regRule = AXConfig.get(`form.validation.rules.${this.value}`);
+            if (regRule) {
+                return this._internalValidate(regRule.rule, value, this.message || regRule.message, regRule.value);
+            }
         }
+        return this._internalValidate(this.rule, value, this.message, this.value);
     }
     _internalValidate(type, value, message, ruleValue) {
         return new Promise(resolve => {
+            debugger;
             switch (type) {
                 case 'required':
                     resolve({
@@ -8932,7 +8946,6 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
                         result: ex.test(value)
                     });
                     break;
-                case 'custom':
                 case 'callback':
                     if (typeof ruleValue === 'function') {
                         const res = {};
@@ -8953,11 +8966,17 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
                         }
                     }
                     else {
-                        resolve({ result: true });
+                        resolve({
+                            message: AXTranslator.get('validation.messages.invalid-rull-fn'),
+                            result: false
+                        });
                     }
                     break;
                 default:
-                    resolve({ result: true });
+                    resolve({
+                        message: AXTranslator.get('validation.messages.invalid-rull-name'),
+                        result: false
+                    });
             }
         });
     }