@acorex/components 7.5.0 → 7.8.0

package/fesm2022/acorex-components-menu.mjs

@@ -1,31 +1,51 @@
-import { MXBaseComponent } from '@acorex/components/common';
+import { MXInteractiveComponent, MXBaseComponent } from '@acorex/components/common';
 import * as i2 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
 import * as i0 from '@angular/core';
-import { inject, Component, ViewChild, Input, ContentChildren, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import { EventEmitter, inject, Component, ViewChild, Input, Output, ContentChildren, HostBinding, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { AXBaseMenuMixin } from '@acorex/components/mixin';
-import * as i2$1 from '@acorex/core/platform';
-import { AXPlatform } from '@acorex/core/platform';
-import * as i5 from '@acorex/core/translation';
-import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
-import * as i4 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 class AXRootMenu {
 }
 
-class AXMenuItemComponent extends MXBaseComponent {
+class AXMenuItemComponent extends MXInteractiveComponent {
     constructor() {
         super(...arguments);
+        this.activeChange = new EventEmitter();
+        this._active = false;
+        this.onClick = new EventEmitter();
         this.isRoot = false;
         this.rootMenu = inject(AXRootMenu);
     }
+    /**
+     *  Providing a string value for its text state
+     */
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        this.setOption({
+            name: 'text',
+            value: v,
+        });
+    }
+    /**
+     *  Providing a string value for its text state
+     */
+    get active() {
+        return this._active;
+    }
+    set active(v) {
+        this.setOption({
+            name: 'active',
+            value: v,
+        });
+    }
     ngAfterViewInit() {
         this.children.forEach((c) => {
             c.parent = this;
@@ -42,16 +62,16 @@ class AXMenuItemComponent extends MXBaseComponent {
     //   });
     // }
     _handleOnOpened() {
-        // this.parent.children.forEach((c) => {
-        //   if (c != this) {
-        //     c.close();
-        //   }
-        // });
+        this.parent.children.forEach((c) => {
+            if (c != this) {
+                c.close();
+            }
+        });
     }
     _handleOnClosed() {
-        // this.children.forEach((c) => {
-        //   c.close();
-        // });
+        this.children.forEach((c) => {
+            c.close();
+        });
     }
     getIcon() {
         switch (this.rootMenu.oriatation) {
@@ -62,7 +82,6 @@ class AXMenuItemComponent extends MXBaseComponent {
         }
     }
     getPlacement() {
-        debugger;
         switch (this.rootMenu.oriatation) {
             case 'horizontal':
                 if (this.isRoot) {
@@ -85,375 +104,50 @@ class AXMenuItemComponent extends MXBaseComponent {
         }
     }
     get __hostClass() {
-        return [`${this.disabled ? 'ax-state-disabled' : ''}`];
+        return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active ? 'ax-state-active' : ''}`];
+    }
+    __hostClick(e) {
+        if (!this.disabled) {
+            this.onClick.emit({
+                component: this,
+                htmlElement: this.getHostElement(),
+                nativeEvent: e,
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { text: "text", disabled: "disabled" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"'click'\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"isRoot ? 8 : 0\"\n  [offsetX]=\"isRoot ? 0 : 4\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: "disabled", text: "text", active: "active" }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"isRoot ? 8 : 0\"\n  [offsetX]=\"isRoot ? 0 : 4\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu-item', template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"'click'\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"isRoot ? 8 : 0\"\n  [offsetX]=\"isRoot ? 0 : 4\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n" }]
+            args: [{ selector: 'ax-menu-item', inputs: ['disabled'], template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"isRoot ? 8 : 0\"\n  [offsetX]=\"isRoot ? 0 : 4\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n" }]
         }], propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent]
             }], text: [{
-                type: Input,
-                args: [{ required: true }]
-            }], disabled: [{
                 type: Input
+            }], activeChange: [{
+                type: Output
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
             }], children: [{
                 type: ContentChildren,
                 args: [AXMenuItemComponent]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], __hostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXMenuComponent extends AXBaseMenuMixin {
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
-    }
-    get itemTemplate() {
-        return this._contentItemTemplate;
-    }
-    constructor(_elementRef, cdr, _overlay, _platform) {
-        super(_elementRef, cdr);
-        this._elementRef = _elementRef;
-        this.cdr = cdr;
-        this._overlay = _overlay;
-        this._platform = _platform;
-        this.isRtl = new AXPlatform().isRtl();
-        this._levelCount = 0;
-        this._loadingOptions = {
-            text: AXTranslator.get('layout.loading.text'),
-        };
-    }
-    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';
-        }
-    }
-    // private _removeActive(items: any): void {
-    //   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;
-                    }
-                }
-                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();
-    }
-    isActive(item) {
-        if (typeof this.activeCallback == 'function') {
-            return this.activeCallback(item);
-        }
-        return false;
-    }
-    refresh() {
-        this.cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2$1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal", activeCallback: "activeCallback" }, 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\">\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n    <ng-container\n      *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"\n    ></ng-container>\n  </ul>\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        *ngIf=\"item[visibleField] !== false\"\n        [class.ax-state-disabled]=\"item[disableField]\"\n        (click)=\"_onMenuClick($event, item)\"\n      >\n        <div\n          class=\"ax-menu-item\"\n          [ngClass]=\"{\n            'ax-is-parent': item.children?.length,\n            'ax-is-child': !isRoot,\n            'ax-state-active ': item.isActive\n          }\"\n          *ngIf=\"itemTemplate == null; else tmpItem\"\n        >\n          <div class=\"ax-menu-item-prefix\">\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n          </div>\n          <div class=\"ax-menu-item-suffix\">\n            <span\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n              [ngClass]=\"{\n                'ax-icon-chevron-down': item?.children?.length > 0,\n                'ax-menu-active-icon': item.opened\n              }\"\n              *ngIf=\"!item.isLoading\"\n            ></span>\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n          </div>\n        </div>\n        <!--------------- check for custom  item template  --------------->\n        <ng-template #tmpItem>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n          </ng-container>\n        </ng-template>\n        <ul\n          *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\"\n          [class.ax-state-disabled]=\"item[disableField]\"\n        >\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\">\n          </ng-container>\n        </ul>\n      </li>\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n    </ng-container>\n  </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n  <ng-template>\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n      <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n  <ng-container *ngIf=\"!isLoading\">\n    <!--------------- check for custom template  --------------->\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n    </ng-container>\n    <ng-template #elseEmptyTemplate>\n      {{ 'common.no-result-found' | trans }}\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}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-state-active{color:rgba(var(--ax-color-primary-500))}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-default))}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-default));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-default));color:rgba(var(--ax-color-default-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-default));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding-inline-start:.75rem}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;font-size:1rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider) .ax-is-child{font-size:.875rem}\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", "context"], 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.1.9", ngImport: i0, type: AXMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-menu', inputs: [
-                        'disabled',
-                        'tabIndex',
-                        'textField',
-                        'valueField',
-                        'items',
-                        'parentId',
-                        'iconField',
-                        'tooltip',
-                        'opened',
-                        '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\">\n  <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n    <ng-container\n      *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"\n    ></ng-container>\n  </ul>\n  <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n    <ng-container *ngFor=\"let item of list\">\n      <li\n        *ngIf=\"item[visibleField] !== false\"\n        [class.ax-state-disabled]=\"item[disableField]\"\n        (click)=\"_onMenuClick($event, item)\"\n      >\n        <div\n          class=\"ax-menu-item\"\n          [ngClass]=\"{\n            'ax-is-parent': item.children?.length,\n            'ax-is-child': !isRoot,\n            'ax-state-active ': item.isActive\n          }\"\n          *ngIf=\"itemTemplate == null; else tmpItem\"\n        >\n          <div class=\"ax-menu-item-prefix\">\n            <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n            <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n          </div>\n          <div class=\"ax-menu-item-suffix\">\n            <span\n              class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n              [ngClass]=\"{\n                'ax-icon-chevron-down': item?.children?.length > 0,\n                'ax-menu-active-icon': item.opened\n              }\"\n              *ngIf=\"!item.isLoading\"\n            ></span>\n            <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n          </div>\n        </div>\n        <!--------------- check for custom  item template  --------------->\n        <ng-template #tmpItem>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n          </ng-container>\n        </ng-template>\n        <ul\n          *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\"\n          [class.ax-state-disabled]=\"item[disableField]\"\n        >\n          <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\">\n          </ng-container>\n        </ul>\n      </li>\n      <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n    </ng-container>\n  </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n  <ng-template>\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n      <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n  <ng-container *ngIf=\"!isLoading\">\n    <!--------------- check for custom template  --------------->\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n    </ng-container>\n    <ng-template #elseEmptyTemplate>\n      {{ 'common.no-result-found' | trans }}\n    </ng-template>\n  </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}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-state-active{color:rgba(var(--ax-color-primary-500))}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-default))}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-default));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-default));color:rgba(var(--ax-color-default-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-default));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding-inline-start:.75rem}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;font-size:1rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider) .ax-is-child{font-size:.875rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2$1.AXPlatform }]; }, propDecorators: { activeCallback: [{
-                type: Input
-            }], _contentEmptyTemplate: [{
-                type: ContentChild,
-                args: ['emptyTemplate']
-            }], _contentItemTemplate: [{
-                type: ContentChild,
-                args: ['itemTemplate']
-            }] } });
-
-class AXMenu2Component extends MXBaseComponent {
+class AXMenuComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.oriatation = 'horizontal';
+        this.openOn = 'click';
     }
     ngAfterViewInit() {
         this.children.forEach((c) => {
@@ -464,24 +158,26 @@ class AXMenu2Component extends MXBaseComponent {
     get __hostClass() {
         return `ax-oriatation-${this.oriatation}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenu2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenu2Component, selector: "ax-menu2", inputs: { oriatation: "oriatation" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuComponent, selector: "ax-menu", inputs: { oriatation: "oriatation", openOn: "openOn" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXRootMenu,
-                useExisting: AXMenu2Component,
+                useExisting: AXMenuComponent,
             },
-        ], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-menu-item"></ng-content>`, isInline: true, styles: ["ax-menu2{font-size:inherit;width:100%}ax-menu2.ax-oriatation-horizontal{display:flex}ax-menu2.ax-oriatation-horizontal ax-menu-item:not(ax-menu2.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu2.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu2.ax-oriatation-vertical ax-menu-item:not(ax-menu2.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu2 ax-menu-item:hover:not(ax-menu2 ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:all .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){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);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-default),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-menu-item,ng-container"></ng-content>`, isInline: true, styles: ["ax-menu{font-size:.875em;width:100%;color:inherit}ax-menu.ax-oriatation-horizontal{display:flex}ax-menu.ax-oriatation-horizontal ax-menu-item:not(ax-menu.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu.ax-oriatation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-oriatation-vertical ax-menu-item:not(ax-menu.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu.ax-oriatation-vertical ax-menu-item ax-popover{position:absolute}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:color .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){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);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenu2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu2', template: `<ng-content select="ax-menu-item"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-menu', template: `<ng-content select="ax-menu-item,ng-container"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AXRootMenu,
-                            useExisting: AXMenu2Component,
+                            useExisting: AXMenuComponent,
                         },
-                    ], styles: ["ax-menu2{font-size:inherit;width:100%}ax-menu2.ax-oriatation-horizontal{display:flex}ax-menu2.ax-oriatation-horizontal ax-menu-item:not(ax-menu2.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu2.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu2.ax-oriatation-vertical ax-menu-item:not(ax-menu2.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu2 ax-menu-item:hover:not(ax-menu2 ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:all .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){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);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-default),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
+                    ], styles: ["ax-menu{font-size:.875em;width:100%;color:inherit}ax-menu.ax-oriatation-horizontal{display:flex}ax-menu.ax-oriatation-horizontal ax-menu-item:not(ax-menu.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu.ax-oriatation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-oriatation-vertical ax-menu-item:not(ax-menu.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu.ax-oriatation-vertical ax-menu-item ax-popover{position:absolute}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:color .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){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);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
         }], propDecorators: { oriatation: [{
                 type: Input
+            }], openOn: [{
+                type: Input
             }], children: [{
                 type: ContentChildren,
                 args: [AXMenuItemComponent]
@@ -490,11 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT = [AXMenuItemComponent, AXMenuComponent, AXMenu2Component];
+const COMPONENT = [AXMenuItemComponent, AXMenuComponent];
 const MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];
 class AXMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent, AXMenu2Component], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule], exports: [AXMenuItemComponent, AXMenuComponent, AXMenu2Component] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule], exports: [AXMenuItemComponent, AXMenuComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, decorators: [{
@@ -511,5 +207,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMenu2Component, AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXRootMenu };
+export { AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXRootMenu };
 //# sourceMappingURL=acorex-components-menu.mjs.map