@acorex/components 5.0.43 → 5.0.44

package/fesm2015/acorex-components.mjs

@@ -1,12 +1,12 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, TemplateRef, ElementRef, ViewChildren } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, TemplateRef, ElementRef, ViewChildren } from '@angular/core';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$2 from '@acorex/core';
 import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXConfig, AXTranslationModule, AXDrawingUtil, AXTranslator, AXStringUtil } from '@acorex/core';
-import { Subscription, Subject, merge, asyncScheduler, BehaviorSubject, fromEvent } from 'rxjs';
-import { debounceTime, distinctUntilChanged, observeOn, finalize, throttleTime } from 'rxjs/operators';
+import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, pairwise, filter, startWith, exhaustMap, observeOn, finalize, throttleTime } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -278,16 +278,18 @@ function _ClickableComponenetMixin(Base) {
 }
 
 function _DatalistComponenetMixin(Base) {
-    var _currentPage, _isLoading, _loadedItems, _totalItems, _isLazy, _items, _a;
+    var _instances, _currentPage, _isLoading, _loadedItems, _flatItems, _totalItems, _isLazy, _items, _generateFlatItems, _a;
     return _a = class extends Base {
         constructor(...args) {
             super(...args);
+            _instances.add(this);
             this.valueField = 'id';
             this.textField = 'text';
             this.pageSize = 10;
             _currentPage.set(this, 0);
             _isLoading.set(this, false);
             _loadedItems.set(this, []);
+            _flatItems.set(this, []);
             _totalItems.set(this, 0);
             _isLazy.set(this, false);
             _items.set(this, []);
@@ -306,6 +308,7 @@ function _DatalistComponenetMixin(Base) {
             if (Array.isArray(v)) {
                 __classPrivateFieldSet(this, _items, this._formatData(v), "f");
                 this._onDataLoaded();
+                __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
             }
             else if (typeof v === 'function') {
                 __classPrivateFieldSet(this, _isLazy, true, "f");
@@ -314,17 +317,21 @@ function _DatalistComponenetMixin(Base) {
             else {
                 __classPrivateFieldSet(this, _items, [], "f");
                 this._onDataLoaded();
+                __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
             }
         }
         get displayItems() {
             if (Array.isArray(this.items)) {
-                return __classPrivateFieldGet(this, _items, "f") || [];
+                return (__classPrivateFieldGet(this, _items, "f") || []);
             }
             else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
                 return __classPrivateFieldGet(this, _loadedItems, "f") || [];
             }
             return [];
         }
+        get flatItems() {
+            return __classPrivateFieldGet(this, _flatItems, "f") || [];
+        }
         get isLoading() {
             return __classPrivateFieldGet(this, _isLoading, "f");
         }
@@ -340,13 +347,14 @@ function _DatalistComponenetMixin(Base) {
                 }
             }), this.valueField);
         }
-        _fetchData() {
+        _fetchData(opts) {
             if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
                 return;
             }
             if (__classPrivateFieldGet(this, _items, "f")) {
                 __classPrivateFieldSet(this, _isLoading, true, "f");
-                __classPrivateFieldGet(this, _items, "f").call(this, { skip: __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take: this.pageSize }).then(c => {
+                const fetchFn = __classPrivateFieldGet(this, _items, "f");
+                fetchFn({ skip: __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take: this.pageSize, searchQuery: opts === null || opts === void 0 ? void 0 : opts.searchQuery }).then(c => {
                     var _b;
                     var _a;
                     if (Array.isArray(c)) {
@@ -362,16 +370,10 @@ function _DatalistComponenetMixin(Base) {
                 }).finally(() => {
                     __classPrivateFieldSet(this, _isLoading, false, "f");
                     this._onDataLoaded();
+                    __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
                 });
             }
         }
-        // _onInternalInit() {
-        //     if (typeof this.#items == 'function') {
-        //         this.#isLazy = true;
-        //         this._fetchData();
-        //     }
-        //     super._onInternalInit();
-        // }
         _onDataLoaded() {
         }
         _getItemDisplayTextTemplte(item) {
@@ -386,19 +388,30 @@ function _DatalistComponenetMixin(Base) {
             return item[this.valueField];
         }
         refresh() {
+            this.empty();
+            this._fetchData();
+        }
+        empty() {
             __classPrivateFieldSet(this, _isLoading, false, "f");
             if (__classPrivateFieldGet(this, _loadedItems, "f")) {
                 __classPrivateFieldGet(this, _loadedItems, "f").length = 0;
             }
-            this._fetchData();
         }
     },
         _currentPage = new WeakMap(),
         _isLoading = new WeakMap(),
         _loadedItems = new WeakMap(),
+        _flatItems = new WeakMap(),
         _totalItems = new WeakMap(),
         _isLazy = new WeakMap(),
         _items = new WeakMap(),
+        _instances = new WeakSet(),
+        _generateFlatItems = function _generateFlatItems() {
+            const flattenFn = (item) => {
+                return [item, _.flatMapDeep(item.children, flattenFn)];
+            };
+            __classPrivateFieldSet(this, _flatItems, _.flatMapDeep(this.displayItems, flattenFn), "f");
+        },
         _a;
 }
 const DATALIST_INPUTS = [
@@ -409,6 +422,8 @@ const DATALIST_INPUTS = [
 ];
 const DATALIST_OUTPUT = [];
 
+;
+
 function _DropdownComponenetMixin(Base) {
     class Mixin extends Base {
         constructor(...args) {
@@ -610,6 +625,9 @@ function _SelectionComponenetMixin(Base) {
         get displayItems() {
             return [];
         }
+        get flatItems() {
+            return [];
+        }
         _onInternalInit() {
             super._onInternalInit();
         }
@@ -655,8 +673,9 @@ function _SelectionComponenetMixin(Base) {
                 if (this.value == null || this.value == undefined) {
                     return [];
                 }
-                if (this.displayItems.length > 0) {
-                    return this.displayItems.filter(i => {
+                const items = this.flatItems;
+                if (items.length > 0) {
+                    return items.filter(i => {
                         if (Array.isArray(this.value)) {
                             return this.value.some(ii => {
                                 if (typeof ii === 'object') {
@@ -1114,17 +1133,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
             args: [{ selector: '[ax-responsive]' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
+;
+const AX_DEFAULT_SCROLL_POSITION = {
+    scrollHeight: 0,
+    scrollTop: 0,
+    clientHeight: 0
+};
+class AXInfiniteScrollerDirective {
+    constructor(elm) {
+        this.elm = elm;
+        this.scrollPercent = 70;
+        this.isUserScrollingDown = (positions) => {
+            return positions[0].sT < positions[1].sT;
+        };
+        this.isScrollExpectedPercent = (position) => {
+            return ((position.sT + position.cH) / position.sH) > (this.scrollPercent / 100);
+        };
+    }
+    ngAfterViewInit() {
+        this.registerScrollEvent();
+        this.streamScrollEvents();
+        this.requestCallbackOnScroll();
+    }
+    registerScrollEvent() {
+        this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
+    }
+    streamScrollEvents() {
+        this.userScrolledDown$ = this.scrollEvent$
+            .pipe(map((e) => ({
+            scrollHeight: e.target.scrollHeight,
+            scrollTop: e.target.scrollTop,
+            clientHeight: e.target.clientHeight
+        })), pairwise(), filter(positions => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1])));
+    }
+    requestCallbackOnScroll() {
+        this.requestOnScroll$ = this.userScrolledDown$;
+        if (this.immediateCallback) {
+            this.requestOnScroll$ = this.requestOnScroll$.pipe(startWith([AX_DEFAULT_SCROLL_POSITION, AX_DEFAULT_SCROLL_POSITION]));
+        }
+        this.requestOnScroll$.pipe(exhaustMap(() => {
+            return this.scrollCallback();
+        }));
+        //.subscribe((data) => { console.log(data) }, (err) => console.log(err));
+    }
+}
+AXInfiniteScrollerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXInfiniteScrollerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: AXInfiniteScrollerDirective, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axInfiniteScroller]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scrollCallback: [{
+                type: Input
+            }], immediateCallback: [{
+                type: Input
+            }], scrollPercent: [{
+                type: Input
+            }] } });
+
 class AXCommonModule {
 }
 AXCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective], exports: [AXResponsiveDirective] });
+AXCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective, AXInfiniteScrollerDirective], exports: [AXResponsiveDirective, AXInfiniteScrollerDirective] });
 AXCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXCommonModule, providers: [], imports: [[]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
-                    exports: [AXResponsiveDirective],
-                    declarations: [AXResponsiveDirective],
+                    exports: [AXResponsiveDirective, AXInfiniteScrollerDirective],
+                    declarations: [AXResponsiveDirective, AXInfiniteScrollerDirective],
                     providers: [],
                 }]
         }] });
@@ -2229,7 +2307,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
     focus() {
         var _a;
-        debugger;
         (_a = this._getHostElement().querySelector('.ax-calendar-slots>div')) === null || _a === void 0 ? void 0 : _a.focus();
     }
     _navNextPrev(prev) {
@@ -3477,7 +3554,6 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
         // if (e.key === 'Enter' && e.type === 'keydown') {
         //   this.toggle();
         // }
-        debugger;
         if (e.key === 'Escape') {
             if (this.isOpen) {
                 this.close();
@@ -3515,7 +3591,7 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
                 this._overlayRef = this._overlay.create({
                     positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
                     disposeOnNavigation: true,
-                    panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                    panelClass: ['ax-overflow-hidden', 'ax-animate-fadeIn', 'ax-animate-faster'],
                     hasBackdrop: true
                 });
             }
@@ -3526,7 +3602,7 @@ class AXPopoverComponent extends AXInteractiveComponenetMixin {
                         .withPositions(Array.isArray(this.position) ? this.position : [this.position])
                         .withPush(false),
                     disposeOnNavigation: true,
-                    panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                    panelClass: ['ax-overflow-hidden', 'ax-animate-fadeIn', 'ax-animate-faster'],
                     maxHeight: 'unset',
                     hasBackdrop: this.hasBackdrop,
                     backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
@@ -5232,10 +5308,10 @@ class AXPopupComponent extends AXBaseComponentMixin {
     onFullScreen() { }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>", directives: [{ type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\"  [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>", directives: [{ type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.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: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\"  [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ng-container *ngIf=\"showHeader\">\r\n                <div class=\"ax-popup-header\">\r\n                    <span>{{title}}</span>\r\n                    <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\" (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }, { type: i1$2.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
@@ -5424,9 +5500,16 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._zone = _zone;
         this._platform = _platform;
         this.clearButton = false;
+        this._searchSettings = { enabled: false, expr: null };
         this.checkbox = false;
-        this._currentfocusedIndex = -1;
         this._isMobile = false;
+        this._forceFocus = false;
+    }
+    get searchSettings() {
+        return this._searchSettings;
+    }
+    set searchSettings(v) {
+        this._searchSettings = v || { enabled: false, expr: null };
     }
     get emptyTemplate() {
         return this._contentEmptyTemplate;
@@ -5444,17 +5527,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._target = this._elementRef.nativeElement;
         this._isMobile = this._platform.is('Mobile');
         this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
-        this.onOpened.subscribe(() => {
-            if (this.displayItems.length == 0) {
-                this._fetchData();
-            }
-            else {
-                this._focusSelectedItem();
-            }
-        });
-        this.onClosed.subscribe(() => {
-            this.focus();
-        });
     }
     onViewInit() {
         super.onViewInit();
@@ -5489,10 +5561,16 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         }
     }
     _onDataLoaded() {
-        setTimeout(() => {
-            this._checkForLoadData();
-            this.popover.updatePosition();
-        }, 100);
+        if (this.popover.isOpen) {
+            setTimeout(() => {
+                this._checkForLoadData();
+                this.popover.updatePosition();
+                if (this._forceFocus) {
+                    this._focusSelectedItem();
+                    this._forceFocus = false;
+                }
+            }, 100);
+        }
     }
     _onValueChanged(oldValue, newValue) {
         super._onValueChanged(oldValue, newValue);
@@ -5507,7 +5585,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this.close();
     }
     _handleKeydown(e) {
-        debugger;
         const isLetter = new RegExp(/[a-zA-Z0-9\-]/).test(String.fromCharCode(e.keyCode));
         if (e.code === 'Backspace' && e.type === 'keydown' &&
             ((this.allowNull === true && this.selectedItems.length > 0) ||
@@ -5527,7 +5604,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                     this.open();
                 }
                 else {
-                    this._selectedItemByIndex(this._currentfocusedIndex + (e.key === 'ArrowDown' ? 1 : -1));
+                    this._selectedItemByNav((e.key === 'ArrowDown' ? 1 : -1));
                 }
             }
             e.preventDefault();
@@ -5541,13 +5618,9 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         }
     }
     _handlePopoverKeydown(e) {
-        debugger;
         if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
             this.isUserInput = true;
             this._focusItemByNav((e.key === 'ArrowDown' ? 1 : -1));
-            if (!this.multiple) {
-                this.selectItems(this.displayItems[this._currentfocusedIndex]);
-            }
             e.preventDefault();
         }
         else if (e.code === 'Backspace' &&
@@ -5559,7 +5632,9 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         }
         else if ((e.code === 'Space' || e.code === 'Enter')) {
             e.preventDefault();
-            const focusedItem = this.displayItems[this._currentfocusedIndex];
+            debugger;
+            const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus').dataset.id;
+            const focusedItem = _.findLast(this.flatItems, [this.valueField, focusedItemId]);
             if (focusedItem) {
                 if (this.isItemDisabled(focusedItem)) {
                     return;
@@ -5588,66 +5663,113 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _handlePopupOnOpened(e) {
         this.popover.focus();
-    }
-    _focusItemByNav(sign = null) {
-        if (sign == null) {
-            const lastSelectedItem = this.selectedItems[this.selectedItems.length - 1];
-            this._currentfocusedIndex = lastSelectedItem ? this.displayItems.findIndex(c => c[this.valueField] == lastSelectedItem[this.valueField]) : 0;
+        if (this.displayItems.length == 0) {
+            this._forceFocus = true;
+            this._fetchData();
         }
         else {
-            sign === -1 ? this._currentfocusedIndex-- : this._currentfocusedIndex++;
+            this._focusSelectedItem();
         }
-        if (this._currentfocusedIndex < 0) {
-            this._currentfocusedIndex = 0;
+        if (this._searchBox) {
+            this._searchBox.focus();
         }
-        if (this._currentfocusedIndex > this.displayItems.length - 1) {
-            this._currentfocusedIndex = this.displayItems.length - 1;
-        }
-        // set scroll
-        this._focusItemByIndex(this._currentfocusedIndex);
     }
-    _focusItemByIndex(inedx) {
-        if (this.listContainer) {
-            this._zone.runOutsideAngular(() => {
-                const itemDiv = this.listContainer.nativeElement.querySelector(`.ax-list-item:nth-child(${inedx + 1})`);
-                if (itemDiv) {
-                    itemDiv.focus();
-                    itemDiv.scrollIntoView({ behavior: 'auto' });
+    _handlePopupOnClosed(e) {
+        this.focus();
+    }
+    _focusItemByNav(sign) {
+        var _a;
+        const list = this.listContainer.nativeElement;
+        const fn = (s) => list.querySelector(s);
+        const itemDiv = fn(`.ax-list-item.ax-state-focus`) || fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
+        let next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
+        if (next) {
+            this._focusItemElement(next);
+        }
+        else {
+            const parent = itemDiv.closest('.ax-list-item-group');
+            if (parent) {
+                const lis = (_a = (sign == 1 ? parent.nextElementSibling : parent.previousElementSibling)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li');
+                const a = sign == 1 ? _.first(lis) : _.last(lis);
+                if (a) {
+                    this._focusItemElement(a);
                 }
-            });
+            }
         }
     }
     _focusSelectedItem() {
-        const lastSelectedItem = this.selectedItems[this.selectedItems.length - 1];
-        this._currentfocusedIndex = lastSelectedItem ? this.displayItems.findIndex(c => c[this.valueField] == lastSelectedItem[this.valueField]) : 0;
-        this._focusItemByIndex(this._currentfocusedIndex);
+        this._zone.runOutsideAngular(() => {
+            const list = this.listContainer.nativeElement;
+            const fn = (s) => list.querySelector(s);
+            const itemDiv = fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
+            if (itemDiv) {
+                this._focusItemElement(itemDiv);
+            }
+        });
     }
-    _selectedItemByIndex(index) {
-        if (index < 0) {
-            index = 0;
+    _focusItemElement(el) {
+        this._zone.runOutsideAngular(() => {
+            const list = this.listContainer.nativeElement;
+            list.querySelectorAll('.ax-list-item').forEach(c => {
+                if (c == el) {
+                    c.classList.add('ax-state-focus');
+                    el.scrollIntoView({ behavior: 'auto' });
+                }
+                else {
+                    c.classList.remove('ax-state-focus');
+                }
+            });
+            this._searchBox ? this._searchBox.focus() : el.focus();
+        });
+    }
+    _selectedItemByNav(sign) {
+        const last = _.last(this.selectedItems);
+        let i = 0;
+        if (last) {
+            i = _.findLastIndex(this.flatItems, [this.valueField, last[this.valueField]]);
+        }
+        i += sign;
+        let next = _.nth(this.flatItems, i);
+        while ((next === null || next === void 0 ? void 0 : next.children) && (next === null || next === void 0 ? void 0 : next.children.length)) {
+            i += sign;
+            next = _.nth(this.flatItems, i);
+        }
+        if (next) {
+            this.selectItems(next);
         }
-        if (index > this.displayItems.length - 1) {
-            index = this.displayItems.length - 1;
+        else if (next == null && sign == 1) {
+            this._fetchData();
         }
-        this.selectItems(this.displayItems[index]);
-        this._currentfocusedIndex = index;
+    }
+    _onSearchExprChanged(e) {
+        this.empty();
+        this._fetchData();
+    }
+    _fetchData() {
+        var _a;
+        super._fetchData({ searchQuery: (_a = this._searchBox) === null || _a === void 0 ? void 0 : _a.value });
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", 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", 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" }, queries: [{ 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-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    (onOpened)=\"_handlePopupOnOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <!--------------- Check loading state  --------------->\r\n                <ng-container *ngIf=\"!isLoading; else tmpLoading\">\r\n                    <!--------------- Check empty state  ---------------->\r\n                    <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                        <ul>\r\n                            <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\"></ng-container>\r\n\r\n\r\n                            <ng-template #tmpTree let-list=\"list\">\r\n                                <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                  <!-- <li *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n                                    <a [ngClass]=\"{'active': item.isActive}\">\r\n                                      <span>{{item.text}}</span>\r\n                                      <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\" *ngIf=\"item?.children?.length > 0\" class=\"ax-ic-chevron\">\r\n                                      </ax-icon>\r\n                                      <ax-icon *ngIf=\"item.icon\" class=\"{{item.icon}}\">\r\n                                      </ax-icon>\r\n                                    </a>\r\n                                    <ul *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n                                      <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\"></ng-container>\r\n                                    </ul>\r\n                                  </li> -->\r\n                                </ng-container>\r\n                              </ng-template>\r\n\r\n\r\n                            <!--------------- items iteration  ---------------->\r\n                            <ng-container *ngFor=\"let item of displayItems;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                                        [class.ax-state-disabled]=\"isItemDisabled(item)\">\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=\"!multiple; then singleTemplate; else multipleTemplate\">\r\n                                    </ng-container>\r\n                                    <ng-template #singleTemplate>\r\n                                        <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                            [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                            (click)=\"_handleOnItemClick($event,item)\">\r\n                                            {{ _getItemDisplayTextTemplte(item) }}\r\n                                        </li>\r\n                                    </ng-template>\r\n                                    <ng-template #multipleTemplate>\r\n                                        <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                            [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                            (click)=\"_handleOnItemClick($event,item)\">\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                                            &nbsp;\r\n                                            {{ _getItemDisplayTextTemplte(item) }}\r\n                                        </li>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <!--------------- empty template  --------------->\r\n                <ng-template #tmpEmpty>\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-template>\r\n                <!--------------- loading template  --------------->\r\n                <ng-template #tmpLoading>\r\n                    <!--------------- check for custom template  --------------->\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-template>\r\n\r\n                <!-- <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !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-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            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$2.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", 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", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", searchSettings: "searchSettings", 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" }, queries: [{ 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 }, { propertyName: "_searchBox", first: true, predicate: ["searchBox"], descendants: 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    (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-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\"\r\n                    [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"  (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <!--------------- Check empty state  ---------------->\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <!--------------- recursive template  ---------------->\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                            <!--------------- items iteration  ---------------->\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                                            <!--------------- children iteration  ---------------->\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                                                >\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                                                >\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                                                &nbsp;\r\n                                                &nbsp;\r\n                                                <span> {{ _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                <!--------------- loading template  --------------->\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <!--------------- check for custom template  --------------->\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                <!--------------- empty template  --------------->\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>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "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"], outputs: ["onOpened", "onClosed"] }, { type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.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.2.1", 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, 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-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    (onOpened)=\"_handlePopupOnOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <!--------------- Check loading state  --------------->\r\n                <ng-container *ngIf=\"!isLoading; else tmpLoading\">\r\n                    <!--------------- Check empty state  ---------------->\r\n                    <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                        <ul>\r\n                            <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\"></ng-container>\r\n\r\n\r\n                            <ng-template #tmpTree let-list=\"list\">\r\n                                <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                  <!-- <li *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n                                    <a [ngClass]=\"{'active': item.isActive}\">\r\n                                      <span>{{item.text}}</span>\r\n                                      <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\" *ngIf=\"item?.children?.length > 0\" class=\"ax-ic-chevron\">\r\n                                      </ax-icon>\r\n                                      <ax-icon *ngIf=\"item.icon\" class=\"{{item.icon}}\">\r\n                                      </ax-icon>\r\n                                    </a>\r\n                                    <ul *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n                                      <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\"></ng-container>\r\n                                    </ul>\r\n                                  </li> -->\r\n                                </ng-container>\r\n                              </ng-template>\r\n\r\n\r\n                            <!--------------- items iteration  ---------------->\r\n                            <ng-container *ngFor=\"let item of displayItems;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                                        [class.ax-state-disabled]=\"isItemDisabled(item)\">\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=\"!multiple; then singleTemplate; else multipleTemplate\">\r\n                                    </ng-container>\r\n                                    <ng-template #singleTemplate>\r\n                                        <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                            [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                            (click)=\"_handleOnItemClick($event,item)\">\r\n                                            {{ _getItemDisplayTextTemplte(item) }}\r\n                                        </li>\r\n                                    </ng-template>\r\n                                    <ng-template #multipleTemplate>\r\n                                        <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                            [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                            (click)=\"_handleOnItemClick($event,item)\">\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                                            &nbsp;\r\n                                            {{ _getItemDisplayTextTemplte(item) }}\r\n                                        </li>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <!--------------- empty template  --------------->\r\n                <ng-template #tmpEmpty>\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-template>\r\n                <!--------------- loading template  --------------->\r\n                <ng-template #tmpLoading>\r\n                    <!--------------- check for custom template  --------------->\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-template>\r\n\r\n                <!-- <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #defualtTemplate>\r\n                        <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                        <ng-template #singleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #multipleTemplate>\r\n                            <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !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-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            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+            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, 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    (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-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'}}\" (click)=\"close()\"\r\n                    tabindex=\"1\"></i>\r\n            </div>\r\n            <div *ngIf=\"searchSettings.enabled\" class=\"ax-p-2\" [cdkTrapFocus]=\"true\">\r\n                <ax-text-box #searchBox placeholder=\"{{ 'common.search' | trans }}\" [debounceTime]=\"500\"\r\n                    [(value)]=\"searchSettings.expr\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n                </ax-text-box>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"  (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <!--------------- Check empty state  ---------------->\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <!--------------- recursive template  ---------------->\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                            <!--------------- items iteration  ---------------->\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                                            <!--------------- children iteration  ---------------->\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                                                >\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                                                >\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                                                &nbsp;\r\n                                                &nbsp;\r\n                                                <span> {{ _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                <!--------------- loading template  --------------->\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <!--------------- check for custom template  --------------->\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                <!--------------- empty template  --------------->\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>\r\n            </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$2.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
             }], clearButton: [{
                 type: Input
+            }], searchSettings: [{
+                type: Input
             }], checkbox: [{
                 type: Input
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: true }]
+            }], _searchBox: [{
+                type: ViewChild,
+                args: ['searchBox']
             }], _contentEmptyTemplate: [{
                 type: ContentChild,
                 args: ['emptyTemplate']
@@ -5659,12 +5781,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
 class AXSelectBoxModule {
 }
 AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule, A11yModule], exports: [AXSelectBoxComponent] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule, A11yModule]] });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
+        AXCommonModule,
+        FormsModule,
+        AXCheckBoxModule,
+        AXBadgeModule,
+        AXEditorDecoratorModule,
+        AXTranslationModule,
+        AXIconModule,
+        AXPopoverModule,
+        AXButtonModule,
+        AXLoadingModule,
+        A11yModule,
+        AXTextBoxModule], exports: [AXSelectBoxComponent] });
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXCheckBoxModule,
+            AXBadgeModule,
+            AXEditorDecoratorModule,
+            AXTranslationModule,
+            AXIconModule,
+            AXPopoverModule,
+            AXButtonModule,
+            AXLoadingModule,
+            A11yModule,
+            AXTextBoxModule
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule, A11yModule],
+                    imports: [CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXCheckBoxModule,
+                        AXBadgeModule,
+                        AXEditorDecoratorModule,
+                        AXTranslationModule,
+                        AXIconModule,
+                        AXPopoverModule,
+                        AXButtonModule,
+                        AXLoadingModule,
+                        A11yModule,
+                        AXTextBoxModule
+                    ],
                     exports: [AXSelectBoxComponent],
                     declarations: [AXSelectBoxComponent],
                     providers: [],
@@ -6591,6 +6751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
 
 class AXTreeViewComponent {
     constructor() {
+        this.showLines = "all";
         this.list = [
             {
                 title: 'childless',
@@ -6676,11 +6837,13 @@ class AXTreeViewComponent {
     ngOnInit() { }
 }
 AXTreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AXTreeViewComponent, selector: "ax-tree-view", host: { classAttribute: "ax-tree-view" }, ngImport: i0, template: "<ul>\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { showLines: "showLines" }, host: { classAttribute: "ax-tree-view" }, ngImport: i0, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", components: [{ type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, host: { class: "ax-tree-view" }, template: "<ul>\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, host: { class: "ax-tree-view" }, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showLines: [{
+                type: Input
+            }] } });
 
 class AXTreeViewModule {
 }
@@ -6842,5 +7005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map