@acorex/components 7.1.0 → 7.1.2

package/fesm2022/acorex-components-menu.mjs

@@ -14,369 +14,369 @@ import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXMenuComponent extends AXBaseMenuMixin {
-    _elementRef;
-    cdr;
-    _overlay;
-    _platform;
-    _contentEmptyTemplate;
-    _contentItemTemplate;
-    _overlayRef;
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
-    }
-    get itemTemplate() {
-        return this._contentItemTemplate;
-    }
-    rtl = new AXPlatform().isRtl();
-    _levelCount = 0;
-    _oldItem;
-    constructor(_elementRef, cdr, _overlay, _platform) {
-        super(_elementRef, cdr);
-        this._elementRef = _elementRef;
-        this.cdr = cdr;
-        this._overlay = _overlay;
-        this._platform = _platform;
-    }
-    onInit() {
-        super.onInit();
-    }
-    ngAfterViewInit() {
-        super.onViewInit();
-    }
-    _onMenuMouseEnter(e, item) {
-        const targetElement = e.target;
-        if (this.isLoading || targetElement.tagName === 'UL') {
-            return;
-        }
-        if (this.openMode === 'hover') {
-            this._handelMenuLogic(e, item);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-    _onMenuClick(e, item) {
-        const targetElement = e.target;
-        if (this.isLoading || targetElement.tagName === 'UL') {
-            return;
-        }
-        if (this.openMode === 'click') {
-            this._handelMenuLogic(e, item);
-        }
-        this.onMenuItemClick.emit({
-            component: this,
-            item: item,
-            nativeEvent: e,
-        });
-        e.stopPropagation();
-        e.preventDefault();
-    }
-    _getDirection() {
-        if (this.displayMode === 'horizontal' && this._levelCount === 0) {
-            return 'ax-horizontal';
-        }
-        else if (this._levelCount > 0) {
-            return 'ax-vertical ax-submenu-ul';
-        }
-        else if (this.displayMode === 'sidemenu') {
-            return 'ax-side-menu';
-        }
-        else {
-            return 'ax-vertical';
-        }
-    }
-    _removeActive(items) {
-        items.forEach(element => {
-            element.active = false;
-            if (element?.children?.length > 0) {
-                this._removeActive(element.children);
-            }
-        });
-    }
-    _closeOpenChild(items) {
-        items.forEach(element => {
-            element.opened = false;
-            if (element?.children?.length > 0) {
-                this._closeOpenChild(element.children);
-            }
-        });
-    }
-    _initParent(items, parentId) {
-        items.forEach(element => {
-            element.parentId = parentId;
-        });
-    }
-    _handelMenuLogic(e, item) {
-        if (!item[this.disableField] || item[this.dividerField] === false) {
-            const targetElement = e.target;
-            if ((targetElement.closest('li') && this.openMode === 'click') || (targetElement.closest('li') && this.openMode === 'hover')) {
-                if (this._overlayRef && this._oldItem !== item) {
-                    this._overlayRef.detach();
-                }
-                if (this.displayMode === 'horizontal') {
-                    this.displayItems.forEach(element => {
-                        if (!item.parentId && item[this.valueField] !== element[this.valueField]) {
-                            element.opened = false;
-                        }
-                    });
-                }
-                if (item?.children?.length > 0) {
-                    if (this.displayMode === 'horizontal') {
-                        this._initParent(item.children, item[this.valueField]);
-                    }
-                    if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
-                        if (this._oldItem !== item) {
-                            this._openAsOverlay(targetElement.closest('li'), item.children);
-                        }
-                    }
-                    this._closeOpenChild(item.children);
-                    if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
-                        item.opened = true;
-                    }
-                    else {
-                        item.opened = !item.opened;
-                    }
-                }
-                this._removeActive(this.displayItems);
-                if (e.type !== 'mouseenter')
-                    item.active = !item.active;
-                if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
-                    if (this._oldItem && this._oldItem?.opened && item[this.valueField] !== this._oldItem[this.valueField]) {
-                        this._oldItem.opened = false;
-                    }
-                    this._oldItem = item;
-                }
-            }
-        }
-    }
-    _openAsOverlay(targetRef, overlayItems) {
-        let positions = [];
-        if (this.displayMode === 'vertical') {
-            if (this._levelCount >= 1) {
-                positions = [
-                    {
-                        originX: 'end',
-                        originY: 'center',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'center',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                    },
-                    {
-                        originX: 'center',
-                        originY: 'center',
-                        overlayX: 'center',
-                        overlayY: 'center',
-                    },
-                ];
-            }
-            else {
-                positions = [
-                    {
-                        originX: 'end',
-                        originY: 'center',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                    },
-                    {
-                        originX: 'center',
-                        originY: 'center',
-                        overlayX: 'center',
-                        overlayY: 'center',
-                    },
-                ];
-            }
-        }
-        else {
-            if (this._levelCount >= 1) {
-                positions = [
-                    {
-                        originX: 'end',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'center',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'top',
-                        overlayX: 'center',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'center',
-                        originY: 'top',
-                        overlayX: 'center',
-                        overlayY: 'top',
-                    },
-                ];
-            }
-            else {
-                positions = [
-                    {
-                        originX: 'start',
-                        originY: 'bottom',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'center',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                    },
-                    {
-                        originX: 'end',
-                        originY: 'top',
-                        overlayX: 'center',
-                        overlayY: 'top',
-                    },
-                    {
-                        originX: 'center',
-                        originY: 'top',
-                        overlayX: 'center',
-                        overlayY: 'top',
-                    },
-                ];
-            }
-        }
-        this._overlayRef = this._overlay.create({
-            scrollStrategy: this._overlay.scrollStrategies.close(),
-            positionStrategy: this._overlay
-                .position()
-                .flexibleConnectedTo(targetRef)
-                .withPositions([...positions])
-                .withPush(false)
-                .withDefaultOffsetX(12),
-            direction: this._platform.isRtl() ? 'rtl' : 'ltr',
-            disposeOnNavigation: true,
-            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster', 'ax-overlay-menu'],
-            maxHeight: 'unset',
-            hasBackdrop: false,
-            backdropClass: ['cdk-overlay-transparent-backdrop'],
-        });
-        const ref = this._overlayRef.attach(new ComponentPortal(AXMenuComponent));
-        ref.instance.items = overlayItems;
-        ref.instance.displayMode = this.displayMode;
-        ref.instance.openMode = 'hover';
-        ref.instance._levelCount = this._levelCount + 1;
-        ref.instance.disableField = this.disableField;
-        ref.instance.visibleField = this.visibleField;
-        ref.instance.valueField = this.valueField;
-        ref.instance.textField = this.textField;
-        ref.instance.iconField = this.iconField;
-        ref.instance.dividerField = this.dividerField;
-        ref.onDestroy(() => {
-            ref.instance?._overlayRef?.dispose();
-        });
-        this._overlayRef.outsidePointerEvents().subscribe(e => {
-            if (this._overlayRef && this.openMode === 'click') {
-                this._close();
-                e.stopPropagation();
-            }
-        });
-        this._platform.scroll.subscribe(() => {
-            if (this._overlayRef) {
-                this._close();
-            }
-        });
-        this._platform.resize.subscribe(() => {
-            if (this._overlayRef) {
-                this._close();
-            }
-        });
-    }
-    _close() {
-        this._overlayRef.detach();
-        this._oldItem = null;
-        this.displayItems.forEach(element => {
-            element.opened = false;
-            element.active = false;
-        });
-        this.cdr.detectChanges();
-    }
-    onDestroy() {
-        this._overlayRef?.detach();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", active: "active", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\r\n  </ul>\r\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li\r\n        *ngIf=\"item[visibleField] != false\"\r\n        [class.ax-state-disabled]=\"item[disableField]\"\r\n        (click)=\"_onMenuClick($event, item)\"\r\n        (mouseenter)=\"_onMenuMouseEnter($event, item)\"\r\n        [ngClass]=\"{ 'ax-state-active ': item.active }\">\r\n        <div\r\n          class=\"ax-menu-item\"\r\n          [ngClass]=\"{\r\n            'ax-is-parent': item?.children?.length,\r\n            'ax-is-child': !isRoot\r\n          }\"\r\n          *ngIf=\"itemTemplate == null; else tmpItem\">\r\n          <div class=\"ax-menu-item-prefix\">\r\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\r\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\r\n          </div>\r\n          <div class=\"ax-menu-item-suffix\">\r\n            <span\r\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\r\n              [ngClass]=\"{\r\n                'ax-icon-chevron-down': item?.children?.length > 0,\r\n                'ax-menu-active-icon': item.opened\r\n              }\"\r\n              *ngIf=\"!item.isLoading\"></span>\r\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\r\n          </div>\r\n        </div>\r\n        <!--------------- check for custom  item template  --------------->\r\n        <ng-template #tmpItem>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\r\n        </ul>\r\n      </li>\r\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n\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\"> </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      {{ 'common.no-result-found' | trans }}\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;color:rgba(var(--ax-color-text-default))}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-menu', inputs: [
-                        'disabled',
-                        'tabIndex',
-                        'textField',
-                        'valueField',
-                        'items',
-                        'parentId',
-                        'iconField',
-                        'tooltip',
-                        'opened',
-                        'active',
-                        'visibleField',
-                        'disableField',
-                        'hasChildField',
-                        'dividerField',
-                        'openMode',
-                        'displayMode',
-                        'showModal',
-                    ], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\r\n  </ul>\r\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li\r\n        *ngIf=\"item[visibleField] != false\"\r\n        [class.ax-state-disabled]=\"item[disableField]\"\r\n        (click)=\"_onMenuClick($event, item)\"\r\n        (mouseenter)=\"_onMenuMouseEnter($event, item)\"\r\n        [ngClass]=\"{ 'ax-state-active ': item.active }\">\r\n        <div\r\n          class=\"ax-menu-item\"\r\n          [ngClass]=\"{\r\n            'ax-is-parent': item?.children?.length,\r\n            'ax-is-child': !isRoot\r\n          }\"\r\n          *ngIf=\"itemTemplate == null; else tmpItem\">\r\n          <div class=\"ax-menu-item-prefix\">\r\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\r\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\r\n          </div>\r\n          <div class=\"ax-menu-item-suffix\">\r\n            <span\r\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\r\n              [ngClass]=\"{\r\n                'ax-icon-chevron-down': item?.children?.length > 0,\r\n                'ax-menu-active-icon': item.opened\r\n              }\"\r\n              *ngIf=\"!item.isLoading\"></span>\r\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\r\n          </div>\r\n        </div>\r\n        <!--------------- check for custom  item template  --------------->\r\n        <ng-template #tmpItem>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\r\n        </ul>\r\n      </li>\r\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n\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\"> </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      {{ 'common.no-result-found' | trans }}\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;color:rgba(var(--ax-color-text-default))}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.AXPlatform }]; }, propDecorators: { _contentEmptyTemplate: [{
-                type: ContentChild,
-                args: ['emptyTemplate']
-            }], _contentItemTemplate: [{
-                type: ContentChild,
-                args: ['itemTemplate']
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXMenuComponent extends AXBaseMenuMixin {
+    _elementRef;
+    cdr;
+    _overlay;
+    _platform;
+    _contentEmptyTemplate;
+    _contentItemTemplate;
+    _overlayRef;
+    get emptyTemplate() {
+        return this._contentEmptyTemplate;
+    }
+    get itemTemplate() {
+        return this._contentItemTemplate;
+    }
+    rtl = new AXPlatform().isRtl();
+    _levelCount = 0;
+    _oldItem;
+    constructor(_elementRef, cdr, _overlay, _platform) {
+        super(_elementRef, cdr);
+        this._elementRef = _elementRef;
+        this.cdr = cdr;
+        this._overlay = _overlay;
+        this._platform = _platform;
+    }
+    onInit() {
+        super.onInit();
+    }
+    ngAfterViewInit() {
+        super.onViewInit();
+    }
+    _onMenuMouseEnter(e, item) {
+        const targetElement = e.target;
+        if (this.isLoading || targetElement.tagName === 'UL') {
+            return;
+        }
+        if (this.openMode === 'hover') {
+            this._handelMenuLogic(e, item);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    _onMenuClick(e, item) {
+        const targetElement = e.target;
+        if (this.isLoading || targetElement.tagName === 'UL') {
+            return;
+        }
+        if (this.openMode === 'click') {
+            this._handelMenuLogic(e, item);
+        }
+        this.onMenuItemClick.emit({
+            component: this,
+            item: item,
+            nativeEvent: e,
+        });
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    _getDirection() {
+        if (this.displayMode === 'horizontal' && this._levelCount === 0) {
+            return 'ax-horizontal';
+        }
+        else if (this._levelCount > 0) {
+            return 'ax-vertical ax-submenu-ul';
+        }
+        else if (this.displayMode === 'sidemenu') {
+            return 'ax-side-menu';
+        }
+        else {
+            return 'ax-vertical';
+        }
+    }
+    _removeActive(items) {
+        items.forEach(element => {
+            element.active = false;
+            if (element?.children?.length > 0) {
+                this._removeActive(element.children);
+            }
+        });
+    }
+    _closeOpenChild(items) {
+        items.forEach(element => {
+            element.opened = false;
+            if (element?.children?.length > 0) {
+                this._closeOpenChild(element.children);
+            }
+        });
+    }
+    _initParent(items, parentId) {
+        items.forEach(element => {
+            element.parentId = parentId;
+        });
+    }
+    _handelMenuLogic(e, item) {
+        if (!item[this.disableField] || item[this.dividerField] === false) {
+            const targetElement = e.target;
+            if ((targetElement.closest('li') && this.openMode === 'click') || (targetElement.closest('li') && this.openMode === 'hover')) {
+                if (this._overlayRef && this._oldItem !== item) {
+                    this._overlayRef.detach();
+                }
+                if (this.displayMode === 'horizontal') {
+                    this.displayItems.forEach(element => {
+                        if (!item.parentId && item[this.valueField] !== element[this.valueField]) {
+                            element.opened = false;
+                        }
+                    });
+                }
+                if (item?.children?.length > 0) {
+                    if (this.displayMode === 'horizontal') {
+                        this._initParent(item.children, item[this.valueField]);
+                    }
+                    if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
+                        if (this._oldItem !== item) {
+                            this._openAsOverlay(targetElement.closest('li'), item.children);
+                        }
+                    }
+                    this._closeOpenChild(item.children);
+                    if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
+                        item.opened = true;
+                    }
+                    else {
+                        item.opened = !item.opened;
+                    }
+                }
+                this._removeActive(this.displayItems);
+                if (e.type !== 'mouseenter')
+                    item.active = !item.active;
+                if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
+                    if (this._oldItem && this._oldItem?.opened && item[this.valueField] !== this._oldItem[this.valueField]) {
+                        this._oldItem.opened = false;
+                    }
+                    this._oldItem = item;
+                }
+            }
+        }
+    }
+    _openAsOverlay(targetRef, overlayItems) {
+        let positions = [];
+        if (this.displayMode === 'vertical') {
+            if (this._levelCount >= 1) {
+                positions = [
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                    {
+                        originX: 'center',
+                        originY: 'center',
+                        overlayX: 'center',
+                        overlayY: 'center',
+                    },
+                ];
+            }
+            else {
+                positions = [
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                    {
+                        originX: 'center',
+                        originY: 'center',
+                        overlayX: 'center',
+                        overlayY: 'center',
+                    },
+                ];
+            }
+        }
+        else {
+            if (this._levelCount >= 1) {
+                positions = [
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'top',
+                    },
+                ];
+            }
+            else {
+                positions = [
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                    },
+                    {
+                        originX: 'end',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'top',
+                    },
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'top',
+                    },
+                ];
+            }
+        }
+        this._overlayRef = this._overlay.create({
+            scrollStrategy: this._overlay.scrollStrategies.close(),
+            positionStrategy: this._overlay
+                .position()
+                .flexibleConnectedTo(targetRef)
+                .withPositions([...positions])
+                .withPush(false)
+                .withDefaultOffsetX(12),
+            direction: this._platform.isRtl() ? 'rtl' : 'ltr',
+            disposeOnNavigation: true,
+            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster', 'ax-overlay-menu'],
+            maxHeight: 'unset',
+            hasBackdrop: false,
+            backdropClass: ['cdk-overlay-transparent-backdrop'],
+        });
+        const ref = this._overlayRef.attach(new ComponentPortal(AXMenuComponent));
+        ref.instance.items = overlayItems;
+        ref.instance.displayMode = this.displayMode;
+        ref.instance.openMode = 'hover';
+        ref.instance._levelCount = this._levelCount + 1;
+        ref.instance.disableField = this.disableField;
+        ref.instance.visibleField = this.visibleField;
+        ref.instance.valueField = this.valueField;
+        ref.instance.textField = this.textField;
+        ref.instance.iconField = this.iconField;
+        ref.instance.dividerField = this.dividerField;
+        ref.onDestroy(() => {
+            ref.instance?._overlayRef?.dispose();
+        });
+        this._overlayRef.outsidePointerEvents().subscribe(e => {
+            if (this._overlayRef && this.openMode === 'click') {
+                this._close();
+                e.stopPropagation();
+            }
+        });
+        this._platform.scroll.subscribe(() => {
+            if (this._overlayRef) {
+                this._close();
+            }
+        });
+        this._platform.resize.subscribe(() => {
+            if (this._overlayRef) {
+                this._close();
+            }
+        });
+    }
+    _close() {
+        this._overlayRef.detach();
+        this._oldItem = null;
+        this.displayItems.forEach(element => {
+            element.opened = false;
+            element.active = false;
+        });
+        this.cdr.detectChanges();
+    }
+    onDestroy() {
+        this._overlayRef?.detach();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", active: "active", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\r\n  </ul>\r\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li\r\n        *ngIf=\"item[visibleField] != false\"\r\n        [class.ax-state-disabled]=\"item[disableField]\"\r\n        (click)=\"_onMenuClick($event, item)\"\r\n        (mouseenter)=\"_onMenuMouseEnter($event, item)\"\r\n        [ngClass]=\"{ 'ax-state-active ': item.active }\">\r\n        <div\r\n          class=\"ax-menu-item\"\r\n          [ngClass]=\"{\r\n            'ax-is-parent': item?.children?.length,\r\n            'ax-is-child': !isRoot\r\n          }\"\r\n          *ngIf=\"itemTemplate == null; else tmpItem\">\r\n          <div class=\"ax-menu-item-prefix\">\r\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\r\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\r\n          </div>\r\n          <div class=\"ax-menu-item-suffix\">\r\n            <span\r\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\r\n              [ngClass]=\"{\r\n                'ax-icon-chevron-down': item?.children?.length > 0,\r\n                'ax-menu-active-icon': item.opened\r\n              }\"\r\n              *ngIf=\"!item.isLoading\"></span>\r\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\r\n          </div>\r\n        </div>\r\n        <!--------------- check for custom  item template  --------------->\r\n        <ng-template #tmpItem>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\r\n        </ul>\r\n      </li>\r\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n\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\"> </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      {{ 'common.no-result-found' | trans }}\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;color:rgba(var(--ax-color-text-default))}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-menu', inputs: [
+                        'disabled',
+                        'tabIndex',
+                        'textField',
+                        'valueField',
+                        'items',
+                        'parentId',
+                        'iconField',
+                        'tooltip',
+                        'opened',
+                        'active',
+                        'visibleField',
+                        'disableField',
+                        'hasChildField',
+                        'dividerField',
+                        'openMode',
+                        'displayMode',
+                        'showModal',
+                    ], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\r\n    <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"></ng-container>\r\n  </ul>\r\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\r\n    <ng-container *ngFor=\"let item of list\">\r\n      <li\r\n        *ngIf=\"item[visibleField] != false\"\r\n        [class.ax-state-disabled]=\"item[disableField]\"\r\n        (click)=\"_onMenuClick($event, item)\"\r\n        (mouseenter)=\"_onMenuMouseEnter($event, item)\"\r\n        [ngClass]=\"{ 'ax-state-active ': item.active }\">\r\n        <div\r\n          class=\"ax-menu-item\"\r\n          [ngClass]=\"{\r\n            'ax-is-parent': item?.children?.length,\r\n            'ax-is-child': !isRoot\r\n          }\"\r\n          *ngIf=\"itemTemplate == null; else tmpItem\">\r\n          <div class=\"ax-menu-item-prefix\">\r\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\r\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\r\n          </div>\r\n          <div class=\"ax-menu-item-suffix\">\r\n            <span\r\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\r\n              [ngClass]=\"{\r\n                'ax-icon-chevron-down': item?.children?.length > 0,\r\n                'ax-menu-active-icon': item.opened\r\n              }\"\r\n              *ngIf=\"!item.isLoading\"></span>\r\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\r\n          </div>\r\n        </div>\r\n        <!--------------- check for custom  item template  --------------->\r\n        <ng-template #tmpItem>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n        <ul *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\" [class.ax-state-disabled]=\"item[disableField]\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\"> </ng-container>\r\n        </ul>\r\n      </li>\r\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\r\n    </ng-container>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n\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\"> </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      {{ 'common.no-result-found' | trans }}\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;color:rgba(var(--ax-color-text-default))}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-on-surface))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-on-surface));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding:0 .5rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.AXPlatform }]; }, propDecorators: { _contentEmptyTemplate: [{
+                type: ContentChild,
+                args: ['emptyTemplate']
+            }], _contentItemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate']
             }] } });
 
-const COMPONENT = [AXMenuComponent];
-const MODULES = [
-    AXDecoratorModule,
-    AXLoadingModule,
-    AXTranslationModule,
-    OverlayModule,
-];
-class AXMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXDecoratorModule,
-            AXLoadingModule,
-            AXTranslationModule,
-            OverlayModule], exports: [AXMenuComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [CommonModule, ...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+const COMPONENT = [AXMenuComponent];
+const MODULES = [
+    AXDecoratorModule,
+    AXLoadingModule,
+    AXTranslationModule,
+    OverlayModule,
+];
+class AXMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXDecoratorModule,
+            AXLoadingModule,
+            AXTranslationModule,
+            OverlayModule], exports: [AXMenuComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [CommonModule, ...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXMenuComponent, AXMenuModule };