@acorex/components 18.9.8 → 18.10.1

package/fesm2022/acorex-components-menu.mjs

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, input, output, afterNextRender, Component, ViewChild, ContentChildren, HostBinding, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import { signal, Injectable, inject, input, output, afterNextRender, effect, Component, ViewEncapsulation, ViewChild, ContentChildren, HostBinding, HostListener, NgModule } from '@angular/core';
 import { MXInteractiveComponent, MXBaseComponent } from '@acorex/components/common';
 import * as i1 from '@acorex/components/popover';
 import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
 import { BehaviorSubject } from 'rxjs';
+import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXButtonModule } from '@acorex/components/button';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXTranslationModule } from '@acorex/core/translation';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -20,6 +22,10 @@ class AXRootMenu {
 class AXMenuService {
     constructor() {
         this.activeMenus$ = new BehaviorSubject([]);
+        this.rightOverflow = signal(0);
+        this.leftOverflow = signal(0);
+        this.overflowElements = signal([]);
+        this.notOverflowElements = signal([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService, providedIn: 'root' }); }
@@ -39,42 +45,43 @@ class AXMenuItemComponent extends MXInteractiveComponent {
     /** @ignore */
     constructor() {
         super();
+        this.service = inject(AXMenuService);
         /**
-       * Injects the `AXMenuService` for managing menu interactions.
-       */
+         * Injects the `AXMenuService` for managing menu interactions.
+         */
         this.menuService = inject(AXMenuService);
         /**
-       * The vertical offset for positioning, initialized to 0.
-       */
+         * The vertical offset for positioning, initialized to 0.
+         */
         this.offsetY = signal(0);
         /**
-       * The horizontal offset for positioning, initialized to 0.
-       */
+         * The horizontal offset for positioning, initialized to 0.
+         */
         this.offsetX = signal(0);
         /**
-       * The text content, initialized to an empty string.
-       */
+         * The text content, initialized to an empty string.
+         */
         this.text = input();
         /**
-       * Indicates whether the item is active.
-       */
+         * Indicates whether the item is active.
+         */
         this.active = input();
         /**
-       * Emitted when the active state changes.
-       */
+         * Emitted when the active state changes.
+         */
         this.activeChange = output();
         /**
-       * Emitted when the element is clicked.
-       */
+         * Emitted when the element is clicked.
+         */
         this.onClick = output();
         /**
-       * Indicates whether the component is a root menu item.
-       * @defaultValue false
-       */
+         * Indicates whether the component is a root menu item.
+         * @defaultValue false
+         */
         this.isRoot = false;
         /**
-       * Injects the root menu service.
-       */
+         * Injects the root menu service.
+         */
         this.rootMenu = inject(AXRootMenu);
         afterNextRender(() => {
             this.children.forEach((c) => {
@@ -84,19 +91,25 @@ class AXMenuItemComponent extends MXInteractiveComponent {
             this.offsetX.set(this.isRoot ? 0 : 4);
             this.getPlacement();
         });
+        effect(() => {
+            if (!this.getHostElement().getClientRects()[0]?.right)
+                return;
+            //add overflow items to array
+            if (this.getHostElement().getClientRects()[0]?.right > this.service.rightOverflow() ||
+                this.getHostElement().getClientRects()[0]?.left < this.service.leftOverflow()) {
+                this.service.overflowElements.update((prev) => [...prev, this.getHostElement()]);
+            }
+            else {
+                this.service.notOverflowElements.update((prev) => [...prev, this.getHostElement()]);
+            }
+        }, { allowSignalWrites: true });
     }
     /**
-   * Closes the popover if it is open.
-   */
+     * Closes the popover if it is open.
+     */
     close() {
         this.popover?.close();
     }
-    // @HostListener('mouseleave', ['$event'])
-    // private onMouseHover(e: MouseEvent) {
-    //   this.children.forEach((c) => {
-    //     c.close();
-    //   });
-    // }
     /** @ignore */
     _handleOnOpened() {
         this.parent.children.forEach((c) => {
@@ -115,8 +128,8 @@ class AXMenuItemComponent extends MXInteractiveComponent {
         });
     }
     /**
-   * Returns the icon based on the orientation of the root menu.
-   */
+     * Returns the icon based on the orientation of the root menu.
+     */
     getIcon() {
         if (this.rootMenu.orientation() == 'vertical') {
             return 'ax-icon-arrow-right';
@@ -126,8 +139,8 @@ class AXMenuItemComponent extends MXInteractiveComponent {
         }
     }
     /**
-   * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.
-   */
+     * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.
+     */
     getPlacement() {
         switch (this.rootMenu.orientation()) {
             case 'horizontal':
@@ -169,11 +182,11 @@ class AXMenuItemComponent extends MXInteractiveComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" }, 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: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <div class=\"ax-menu-item-text\">{{ text() }}</div>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if(children.length){\n<i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n<ax-popover #popover [closeOn]=\"'clickOut'\" [openOn]=\"rootMenu.openOn()\" [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\" [offsetX]=\"offsetX()\" [placement]=\"getPlacement()\" (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\">\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>", dependencies: [{ kind: "component", type: i1.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: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" }, 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: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n  <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n  #popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn()\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\"\n  [offsetX]=\"offsetX()\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu-item', inputs: ['disabled'], host: { ngSkipHydration: 'true' }, template: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <div class=\"ax-menu-item-text\">{{ text() }}</div>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if(children.length){\n<i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n<ax-popover #popover [closeOn]=\"'clickOut'\" [openOn]=\"rootMenu.openOn()\" [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\" [offsetX]=\"offsetX()\" [placement]=\"getPlacement()\" (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\">\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>" }]
+            args: [{ selector: 'ax-menu-item', inputs: ['disabled'], host: { ngSkipHydration: 'true' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n  <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n  #popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn()\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\"\n  [offsetX]=\"offsetX()\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n", styles: [".ax-menu-item-text{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent]
@@ -194,9 +207,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  */
 class AXMenuComponent extends MXBaseComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.orientation = input('horizontal');
         this.openOn = input('toggle');
+        this.service = inject(AXMenuService);
+        this.menuHeight = signal('');
+        this.isMenuOpen = signal(false);
+        afterNextRender(() => {
+            //add menu container border for detect overflow happen
+            this.menuHeight.set(`${this.getHostElement()?.getClientRects()[0]?.height}px`);
+            this.service.rightOverflow.set(this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.right);
+            this.service.leftOverflow.set(this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.left);
+        });
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            //add menu container border for detect overflow happen
+            clearTimeout(resizeTimer);
+            if (!this.getHostElement())
+                return;
+            resizeTimer = setTimeout(() => {
+                this.service.rightOverflow.set(this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].right);
+                this.service.leftOverflow.set(this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].left);
+                this.service.notOverflowElements.set([]);
+                this.service.overflowElements.set([]);
+                this.isMenuOpen.set(false);
+            }, 200);
+        });
+        effect(() => {
+            //rearrange items base on menu state
+            const overflowMenu = this.getHostElement().querySelector('.overflowMenu');
+            const originalMenu = this.getHostElement().querySelector('.originalMenu');
+            const injectContainer = this.getHostElement().querySelector('.ax-overflow-menu-container');
+            const injectContainer2 = this.getHostElement().querySelector('.ax-menu-item-container');
+            if (this.isMenuOpen()) {
+                overflowMenu?.remove();
+                const axMenu = document.createElement('ax-menu');
+                axMenu.classList.add('overflowMenu');
+                this.service.overflowElements().forEach((item) => {
+                    axMenu.appendChild(item);
+                });
+                injectContainer.appendChild(axMenu);
+            }
+            else {
+                originalMenu?.remove();
+                overflowMenu?.remove();
+                const axMenu = document.createElement('ax-menu');
+                axMenu.classList.add('originalMenu');
+                const allItems = [...this.service.overflowElements(), ...this.service.notOverflowElements()];
+                allItems.forEach((item) => {
+                    axMenu.appendChild(item);
+                });
+                injectContainer2.appendChild(axMenu);
+            }
+        });
+    }
+    showMenuHandler() {
+        this.isMenuOpen.update((prev) => !prev);
     }
     /** @ignore */
     ngAfterViewInit() {
@@ -207,10 +273,10 @@ class AXMenuComponent extends MXBaseComponent {
     }
     /** @ignore */
     get __hostClass() {
-        return `ax-orientation-${this.orientation()}`;
+        return `ax-orientation-${this.orientation()} main-menu`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXMenuComponent, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuComponent, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXRootMenu,
                 useExisting: AXMenuComponent,
@@ -218,11 +284,51 @@ class AXMenuComponent extends MXBaseComponent {
             {
                 provide: AXMenuService,
             },
-        ], 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{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}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{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.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))}.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:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-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: `
+    <div class="ax-main-menu-container">
+      <div
+        [style]="{ width: this.service.overflowElements().length !== 0 ? '90%' : '100%' }"
+        class="ax-menu-item-container"
+      >
+        <ng-content select="ax-menu-item,ng-container"></ng-content>
+      </div>
+      @if (this.service.overflowElements().length !== 0) {
+        <div class="ax-show-truncate-menu">
+          <button (click)="showMenuHandler()" tabindex="0" type="button">
+            <ax-icon class="ax-icon ax-icon-more-horizontal ng-star-inserted ax-text-xl"></ax-icon>
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (this.service.overflowElements().length !== 0) {
+      <div [style]="{ top: menuHeight() }" class="ax-overflow-menu-container ax-menu-item-children"></div>
+    }
+  `, isInline: true, styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden}ax-menu .originalMenu{display:flex;overflow:hidden;width:100%}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:10%}ax-menu .ax-overflow-menu-container{position:absolute;right:0}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}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{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.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))}.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:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], dependencies: [{ kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', template: `<ng-content select="ax-menu-item,ng-container"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-menu', template: `
+    <div class="ax-main-menu-container">
+      <div
+        [style]="{ width: this.service.overflowElements().length !== 0 ? '90%' : '100%' }"
+        class="ax-menu-item-container"
+      >
+        <ng-content select="ax-menu-item,ng-container"></ng-content>
+      </div>
+      @if (this.service.overflowElements().length !== 0) {
+        <div class="ax-show-truncate-menu">
+          <button (click)="showMenuHandler()" tabindex="0" type="button">
+            <ax-icon class="ax-icon ax-icon-more-horizontal ng-star-inserted ax-text-xl"></ax-icon>
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (this.service.overflowElements().length !== 0) {
+      <div [style]="{ top: menuHeight() }" class="ax-overflow-menu-container ax-menu-item-children"></div>
+    }
+  `, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AXRootMenu,
                             useExisting: AXMenuComponent,
@@ -230,8 +336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         {
                             provide: AXMenuService,
                         },
-                    ], styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}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{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.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))}.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:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
-        }], propDecorators: { children: [{
+                    ], styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu .ax-main-menu-container{display:flex;align-items:center;width:100%;overflow:hidden}ax-menu .ax-menu-item-container{display:flex;overflow:hidden}ax-menu .originalMenu{display:flex;overflow:hidden;width:100%}ax-menu .ax-show-truncate-menu{position:absolute;right:0;width:10%}ax-menu .ax-overflow-menu-container{position:absolute;right:0}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}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{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.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))}.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:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { children: [{
                 type: ContentChildren,
                 args: [AXMenuItemComponent]
             }], __hostClass: [{
@@ -243,14 +349,14 @@ const COMPONENT = [AXMenuItemComponent, AXMenuComponent];
 const MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];
 class AXMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule, AXButtonModule], exports: [AXMenuItemComponent, AXMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES, AXButtonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
-                    imports: [CommonModule, ...MODULES],
+                    imports: [CommonModule, ...MODULES, AXButtonModule],
                     exports: [...COMPONENT],
                     providers: [],
                 }]

package/fesm2022/acorex-components-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu.service.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { WritableSignal, signal } from '@angular/core';\nimport { AXMenuPopoverTrigger } from './popover.class';\nexport class AXRootMenu {\n  orientation: WritableSignal<AXOrientation> = signal('horizontal');\n  openOn: WritableSignal<AXMenuPopoverTrigger> = signal('toggle');\n}\n","import { Injectable } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXMenuService {\n  activeMenus$: BehaviorSubject<AXMenuItemComponent[]> = new BehaviorSubject<AXMenuItemComponent[]>([]);\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n  Component,\n  ContentChildren,\n  HostBinding,\n  HostListener,\n  QueryList,\n  ViewChild,\n  afterNextRender,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\nimport { AXMenuService } from '../menu.service';\n\n/**\n * Represents a menu item component used within an `ax-menu`.\n * @category Components\n */\n@Component({\n  selector: 'ax-menu-item',\n  inputs: ['disabled'],\n  templateUrl: './menu-item.component.html',\n  host: { ngSkipHydration: 'true' },\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent {\n\n  /** @ignore */\n  @ViewChild(AXPopoverComponent)\n\n  /** @ignore */\n  private popover: AXPopoverComponent;\n\n  /**\n * Injects the `AXMenuService` for managing menu interactions.\n */\n  menuService = inject(AXMenuService);\n\n  /**\n * The vertical offset for positioning, initialized to 0.\n */\n  offsetY = signal(0);\n\n  /**\n * The horizontal offset for positioning, initialized to 0.\n */\n  offsetX = signal(0);\n\n  /**\n * The text content, initialized to an empty string.\n */\n  text = input<string>();\n\n  /**\n * Indicates whether the item is active.\n */\n  active = input<boolean>();\n\n  /**\n * Emitted when the active state changes.\n */\n  activeChange = output<boolean>();\n\n  /**\n * Emitted when the element is clicked.\n */\n  onClick = output<AXClickEvent>();\n\n  /**\n * Indicates whether the component is a root menu item.\n * @defaultValue false\n */\n  isRoot = false;\n\n  /**\n * The parent menu item component, if any.\n */\n  parent?: AXMenuItemComponent;\n\n  /**\n * Injects the root menu service.\n */\n  rootMenu = inject(AXRootMenu);\n\n  /** @ignore */\n  @ContentChildren(AXMenuItemComponent)\n  children: QueryList<AXMenuItemComponent>;\n\n  /** @ignore */\n  constructor() {\n    super();\n    afterNextRender(() => {\n      this.children.forEach((c) => {\n        c.parent = this;\n      });\n\n      this.offsetY.set(this.isRoot ? 8 : 0);\n      this.offsetX.set(this.isRoot ? 0 : 4);\n\n      this.getPlacement();\n    });\n  }\n\n  /**\n * Closes the popover if it is open.\n */\n  close() {\n    this.popover?.close();\n  }\n\n  // @HostListener('mouseleave', ['$event'])\n  // private onMouseHover(e: MouseEvent) {\n  //   this.children.forEach((c) => {\n  //     c.close();\n  //   });\n  // }\n\n  /** @ignore */\n  _handleOnOpened() {\n    this.parent.children.forEach((c) => {\n      if (c != this) {\n        c.close();\n      }\n    });\n    if (this.children.length) {\n      this.menuService.activeMenus$.next(this.menuService.activeMenus$.getValue().concat(this));\n    }\n  }\n\n  /** @ignore */\n  _handleOnClosed() {\n    this.children.forEach((c) => {\n      c.close();\n    });\n  }\n\n  /**\n * Returns the icon based on the orientation of the root menu.\n */\n  getIcon() {\n    if (this.rootMenu.orientation() == 'vertical') {\n      return 'ax-icon-arrow-right';\n    } else {\n      return 'ax-icon-arrow-down';\n    }\n  }\n\n  /**\n * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.\n */\n  getPlacement() {\n    switch (this.rootMenu.orientation()) {\n      case 'horizontal':\n        if (this.isRoot) {\n          return 'bottom-start';\n        } else {\n          return 'end-top';\n        }\n        break;\n      case 'vertical':\n        if (this.isRoot) {\n          return 'end-top';\n        } else {\n          return 'end-top';\n        }\n        break;\n      default:\n        return 'bottom-start';\n    }\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active() ? 'ax-state-active' : ''}`];\n  }\n\n  /** @ignore */\n  @HostListener('click', ['$event'])\n  private __hostClick(e: MouseEvent) {\n    if (!this.disabled) {\n      this.onClick.emit({\n        component: this,\n        htmlElement: this.getHostElement(),\n        nativeEvent: e,\n      });\n      if (!this.children.length) {\n        this.menuService.activeMenus$.subscribe((c) => c.forEach((x) => x.close())).unsubscribe();\n        this.menuService.activeMenus$.next([]);\n      }\n    }\n  }\n}\n","<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <div class=\"ax-menu-item-text\">{{ text() }}</div>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if(children.length){\n<i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n<ax-popover #popover [closeOn]=\"'clickOut'\" [openOn]=\"rootMenu.openOn()\" [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\" [offsetX]=\"offsetX()\" [placement]=\"getPlacement()\" (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\">\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport { AfterViewInit, Component, ContentChildren, HostBinding, QueryList, ViewEncapsulation, input } from '@angular/core';\nimport { AXMenuPopoverTrigger } from './class/popover.class';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuService } from './menu.service';\n\n/**\n * Represents a menu component that displays menu items.\n * @category Components\n */\n@Component({\n  selector: 'ax-menu',\n  template: `<ng-content select=\"ax-menu-item,ng-container\"></ng-content>`,\n  styleUrls: ['./menu.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: AXRootMenu,\n      useExisting: AXMenuComponent,\n    },\n    {\n      provide: AXMenuService,\n    },\n  ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n  orientation = input<AXOrientation>('horizontal');\n  openOn = input<AXMenuPopoverTrigger>('toggle');\n\n  /** @ignore */\n  @ContentChildren(AXMenuItemComponent)\n  children: QueryList<AXMenuItemComponent>;\n\n  /** @ignore */\n  ngAfterViewInit() {\n    this.children.forEach((c) => {\n      c.isRoot = true;\n      c.parent = this as unknown as AXMenuItemComponent;\n    });\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-orientation-${this.orientation()}`;\n  }\n}\n","import { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [CommonModule, ...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-menu.mjs","sources":["../../../../libs/components/menu/src/lib/class/root-menu.class.ts","../../../../libs/components/menu/src/lib/menu.service.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.ts","../../../../libs/components/menu/src/lib/menu-item/menu-item.component.html","../../../../libs/components/menu/src/lib/menu.component.ts","../../../../libs/components/menu/src/lib/menu.module.ts","../../../../libs/components/menu/src/acorex-components-menu.ts"],"sourcesContent":["import { AXOrientation } from '@acorex/components/common';\nimport { WritableSignal, signal } from '@angular/core';\nimport { AXMenuPopoverTrigger } from './popover.class';\nexport class AXRootMenu {\n  orientation: WritableSignal<AXOrientation> = signal('horizontal');\n  openOn: WritableSignal<AXMenuPopoverTrigger> = signal('toggle');\n}\n","import { Injectable, signal } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXMenuService {\n  activeMenus$: BehaviorSubject<AXMenuItemComponent[]> = new BehaviorSubject<AXMenuItemComponent[]>([]);\n\n  rightOverflow = signal<number>(0);\n  leftOverflow = signal<number>(0);\n  overflowElements = signal<HTMLElement[]>([]);\n  notOverflowElements = signal<HTMLElement[]>([]);\n}\n","import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport {\n  Component,\n  ContentChildren,\n  HostBinding,\n  HostListener,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { AXRootMenu } from '../class/root-menu.class';\nimport { AXMenuService } from '../menu.service';\n\n/**\n * Represents a menu item component used within an `ax-menu`.\n * @category Components\n */\n@Component({\n  selector: 'ax-menu-item',\n  inputs: ['disabled'],\n  templateUrl: './menu-item.component.html',\n  host: { ngSkipHydration: 'true' },\n  styles: `\n    .ax-menu-item-text {\n      white-space: nowrap;\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXMenuItemComponent extends MXInteractiveComponent {\n  service = inject(AXMenuService);\n\n  /** @ignore */\n  @ViewChild(AXPopoverComponent)\n\n  /** @ignore */\n  private popover: AXPopoverComponent;\n\n  /**\n   * Injects the `AXMenuService` for managing menu interactions.\n   */\n  menuService = inject(AXMenuService);\n\n  /**\n   * The vertical offset for positioning, initialized to 0.\n   */\n  offsetY = signal(0);\n\n  /**\n   * The horizontal offset for positioning, initialized to 0.\n   */\n  offsetX = signal(0);\n\n  /**\n   * The text content, initialized to an empty string.\n   */\n  text = input<string>();\n\n  /**\n   * Indicates whether the item is active.\n   */\n  active = input<boolean>();\n\n  /**\n   * Emitted when the active state changes.\n   */\n  activeChange = output<boolean>();\n\n  /**\n   * Emitted when the element is clicked.\n   */\n  onClick = output<AXClickEvent>();\n\n  /**\n   * Indicates whether the component is a root menu item.\n   * @defaultValue false\n   */\n  isRoot = false;\n\n  /**\n   * The parent menu item component, if any.\n   */\n  parent?: AXMenuItemComponent;\n\n  /**\n   * Injects the root menu service.\n   */\n  rootMenu = inject(AXRootMenu);\n\n  /** @ignore */\n  @ContentChildren(AXMenuItemComponent)\n  children: QueryList<AXMenuItemComponent>;\n\n  /** @ignore */\n  constructor() {\n    super();\n\n    afterNextRender(() => {\n      this.children.forEach((c) => {\n        c.parent = this;\n      });\n\n      this.offsetY.set(this.isRoot ? 8 : 0);\n      this.offsetX.set(this.isRoot ? 0 : 4);\n\n      this.getPlacement();\n    });\n\n    effect(\n      () => {\n        if (!this.getHostElement().getClientRects()[0]?.right) return;\n        //add overflow items to array\n        if (\n          this.getHostElement().getClientRects()[0]?.right > this.service.rightOverflow() ||\n          this.getHostElement().getClientRects()[0]?.left < this.service.leftOverflow()\n        ) {\n          this.service.overflowElements.update((prev) => [...prev, this.getHostElement()]);\n        } else {\n          this.service.notOverflowElements.update((prev) => [...prev, this.getHostElement()]);\n        }\n      },\n      { allowSignalWrites: true },\n    );\n  }\n\n  /**\n   * Closes the popover if it is open.\n   */\n  close() {\n    this.popover?.close();\n  }\n\n  /** @ignore */\n  _handleOnOpened() {\n    this.parent.children.forEach((c) => {\n      if (c != this) {\n        c.close();\n      }\n    });\n    if (this.children.length) {\n      this.menuService.activeMenus$.next(this.menuService.activeMenus$.getValue().concat(this));\n    }\n  }\n\n  /** @ignore */\n  _handleOnClosed() {\n    this.children.forEach((c) => {\n      c.close();\n    });\n  }\n\n  /**\n   * Returns the icon based on the orientation of the root menu.\n   */\n  getIcon() {\n    if (this.rootMenu.orientation() == 'vertical') {\n      return 'ax-icon-arrow-right';\n    } else {\n      return 'ax-icon-arrow-down';\n    }\n  }\n\n  /**\n   * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.\n   */\n  getPlacement() {\n    switch (this.rootMenu.orientation()) {\n      case 'horizontal':\n        if (this.isRoot) {\n          return 'bottom-start';\n        } else {\n          return 'end-top';\n        }\n        break;\n      case 'vertical':\n        if (this.isRoot) {\n          return 'end-top';\n        } else {\n          return 'end-top';\n        }\n        break;\n      default:\n        return 'bottom-start';\n    }\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active() ? 'ax-state-active' : ''}`];\n  }\n\n  /** @ignore */\n  @HostListener('click', ['$event'])\n  private __hostClick(e: MouseEvent) {\n    if (!this.disabled) {\n      this.onClick.emit({\n        component: this,\n        htmlElement: this.getHostElement(),\n        nativeEvent: e,\n      });\n      if (!this.children.length) {\n        this.menuService.activeMenus$.subscribe((c) => c.forEach((x) => x.close())).unsubscribe();\n        this.menuService.activeMenus$.next([]);\n      }\n    }\n  }\n}\n","<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <p class=\"ax-menu-item-text\">{{ text() }}</p>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length) {\n  <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n  #popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn()\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\"\n  [offsetX]=\"offsetX()\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n","import { AXOrientation, MXBaseComponent } from '@acorex/components/common';\nimport {\n  afterNextRender,\n  AfterViewInit,\n  Component,\n  ContentChildren,\n  effect,\n  HostBinding,\n  inject,\n  input,\n  QueryList,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXMenuPopoverTrigger } from './class/popover.class';\nimport { AXRootMenu } from './class/root-menu.class';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuService } from './menu.service';\n\n/**\n * Represents a menu component that displays menu items.\n * @category Components\n */\n@Component({\n  selector: 'ax-menu',\n  template: `\n    <div class=\"ax-main-menu-container\">\n      <div\n        [style]=\"{ width: this.service.overflowElements().length !== 0 ? '90%' : '100%' }\"\n        class=\"ax-menu-item-container\"\n      >\n        <ng-content select=\"ax-menu-item,ng-container\"></ng-content>\n      </div>\n      @if (this.service.overflowElements().length !== 0) {\n        <div class=\"ax-show-truncate-menu\">\n          <button (click)=\"showMenuHandler()\" tabindex=\"0\" type=\"button\">\n            <ax-icon class=\"ax-icon ax-icon-more-horizontal ng-star-inserted ax-text-xl\"></ax-icon>\n          </button>\n        </div>\n      }\n    </div>\n\n    @if (this.service.overflowElements().length !== 0) {\n      <div [style]=\"{ top: menuHeight() }\" class=\"ax-overflow-menu-container ax-menu-item-children\"></div>\n    }\n  `,\n  styleUrls: ['./menu.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: AXRootMenu,\n      useExisting: AXMenuComponent,\n    },\n    {\n      provide: AXMenuService,\n    },\n  ],\n})\nexport class AXMenuComponent extends MXBaseComponent implements AfterViewInit {\n  orientation = input<AXOrientation>('horizontal');\n  openOn = input<AXMenuPopoverTrigger>('toggle');\n  service = inject(AXMenuService);\n  menuHeight = signal<string>('');\n  isMenuOpen = signal(false);\n\n  /** @ignore */\n  @ContentChildren(AXMenuItemComponent)\n  children: QueryList<AXMenuItemComponent>;\n\n  constructor() {\n    super();\n\n    afterNextRender(() => {\n      //add menu container border for detect overflow happen\n      this.menuHeight.set(`${this.getHostElement()?.getClientRects()[0]?.height}px`);\n      this.service.rightOverflow.set(\n        this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.right,\n      );\n      this.service.leftOverflow.set(\n        this.getHostElement().querySelector('.ax-menu-item-container')?.getClientRects()[0]?.left,\n      );\n    });\n\n    let resizeTimer;\n\n    window.addEventListener('resize', () => {\n      //add menu container border for detect overflow happen\n      clearTimeout(resizeTimer);\n      if (!this.getHostElement()) return;\n      resizeTimer = setTimeout(() => {\n        this.service.rightOverflow.set(\n          this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].right,\n        );\n        this.service.leftOverflow.set(\n          this.getHostElement().querySelector('.ax-menu-item-container').getClientRects()[0].left,\n        );\n        this.service.notOverflowElements.set([]);\n        this.service.overflowElements.set([]);\n        this.isMenuOpen.set(false);\n      }, 200);\n    });\n\n    effect(() => {\n      //rearrange items base on menu state\n      const overflowMenu = this.getHostElement().querySelector('.overflowMenu');\n      const originalMenu = this.getHostElement().querySelector('.originalMenu');\n      const injectContainer = this.getHostElement().querySelector('.ax-overflow-menu-container');\n      const injectContainer2 = this.getHostElement().querySelector('.ax-menu-item-container');\n\n      if (this.isMenuOpen()) {\n        overflowMenu?.remove();\n        const axMenu = document.createElement('ax-menu');\n        axMenu.classList.add('overflowMenu');\n        this.service.overflowElements().forEach((item) => {\n          axMenu.appendChild(item);\n        });\n        injectContainer.appendChild(axMenu);\n      } else {\n        originalMenu?.remove();\n        overflowMenu?.remove();\n        const axMenu = document.createElement('ax-menu');\n        axMenu.classList.add('originalMenu');\n        const allItems = [...this.service.overflowElements(), ...this.service.notOverflowElements()];\n        allItems.forEach((item) => {\n          axMenu.appendChild(item);\n        });\n\n        injectContainer2.appendChild(axMenu);\n      }\n    });\n  }\n\n  showMenuHandler() {\n    this.isMenuOpen.update((prev) => !prev);\n  }\n\n  /** @ignore */\n  ngAfterViewInit() {\n    this.children.forEach((c) => {\n      c.isRoot = true;\n      c.parent = this as unknown as AXMenuItemComponent;\n    });\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `ax-orientation-${this.orientation()} main-menu`;\n  }\n}\n","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXMenuItemComponent } from './menu-item/menu-item.component';\nimport { AXMenuComponent } from './menu.component';\n\nconst COMPONENT = [AXMenuItemComponent, AXMenuComponent];\nconst MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [CommonModule, ...MODULES, AXButtonModule],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/acorex-components-qrcode.mjs

@@ -1,18 +1,16 @@
+import { generateQRCode } from '@acorex/cdk/qrcode';
 import { AXValuableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { input, signal, viewChild, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, signal, viewChild, computed, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import QRCode from 'qrcode';
 import { CommonModule } from '@angular/common';
 
 function debounce(func, delay) {
     let timeoutId;
     return function (...args) {
-        // Clear the existing timeout if there is one
         if (timeoutId) {
             clearTimeout(timeoutId);
         }
-        // Set a new timeout
         timeoutId = setTimeout(() => {
             func(...args);
         }, delay);
@@ -20,9 +18,6 @@ function debounce(func, delay) {
 }
 
 class AXQrcodeComponent {
-    /**
-     * @ignore
-     */
     constructor() {
         /**
          * @description Value of QR code
@@ -68,58 +63,40 @@ class AXQrcodeComponent {
          * @ignore
          */
         this.svg = viewChild('svg');
+        /**
+         * @ignore
+         */
+        this.calculateLogoSize = computed(() => {
+            switch (this.level()) {
+                case 'L':
+                    return Math.sqrt((5 / 100) * (this.size() * this.size()));
+                case 'M':
+                    return Math.sqrt((8 / 100) * (this.size() * this.size()));
+                case 'Q':
+                    return Math.sqrt((11 / 100) * (this.size() * this.size()));
+                case 'H':
+                    return Math.sqrt((14 / 100) * (this.size() * this.size()));
+            }
+        });
         effect(() => {
-            this.generateQRCode();
+            this.generate();
         }, {
             allowSignalWrites: true,
         });
     }
-    // ngOnChanges(): void {
-    //   const debunce = debounce(this.generateQRCode, 500);
-    //   debunce();
-    // }
     ngAfterViewInit() {
-        this.generateQRCode();
+        this.generate();
     }
-    generateQRCode() {
-        if (!this.content())
-            return;
-        const options = {
-            margin: 0,
-            width: this.size(),
-            errorCorrectionLevel: this.level(),
-            color: {
-                dark: this.color(),
-                light: this.backgroundColor(),
-            },
-        };
-        if (this.outputType() === 'canvas') {
-            QRCode.toCanvas(this.canvas().nativeElement, this.content(), options, (error) => {
-                if (error) {
-                    console.error(error);
-                }
-            });
-        }
-        else if (this.outputType() === 'svg') {
-            QRCode.toString(this.content(), { ...options, type: 'svg' }, (error, svgString) => {
-                if (error) {
-                    console.error(error);
-                }
-                else {
-                    this.svg().nativeElement.innerHTML = svgString;
-                }
-            });
-        }
-        else {
-            QRCode.toDataURL(this.content(), options, (error, url) => {
-                if (error) {
-                    console.error(error);
-                }
-                else {
-                    this.qrCodeUrl.set(url);
-                }
-            });
-        }
+    generate() {
+        generateQRCode(this.content(), this.size(), this.level(), this.color(), this.backgroundColor(), this.outputType(), this.canvas()?.nativeElement, this.svg()?.nativeElement)
+            .then((result) => {
+            if (this.outputType() === 'url') {
+                this.qrCodeUrl.set(result);
+            }
+        })
+            .catch((error) => {
+            console.error(error);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXQrcodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXQrcodeComponent, selector: "ax-qrcode", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
@@ -129,7 +106,7 @@ class AXQrcodeComponent {
                 useExisting: forwardRef(() => AXQrcodeComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"qrcode\"></div>\n@if (outputType() === 'canvas') {\n  <canvas #canvas></canvas>\n} @else if (outputType() === 'svg') {\n  <div #svg></div>\n} @else {\n  <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" #img />\n}\n", styles: [".qrcode{width:fit-content;height:fit-content;border:1px solid black}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"qrcode\">\n  @if (outputType() === 'canvas') {\n    <canvas #canvas></canvas>\n  } @else if (outputType() === 'svg') {\n    <div #svg></div>\n  } @else {\n    <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n  }\n  <div class=\"logo-container\" [style.width.px]=\"calculateLogoSize()\" [style.height.px]=\"calculateLogoSize()\">\n    <ng-content select=\"img\"></ng-content>\n  </div>\n</div>\n", styles: [".qrcode{position:relative}.qrcode .logo-container{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXQrcodeComponent, decorators: [{
             type: Component,
@@ -140,7 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => AXQrcodeComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"qrcode\"></div>\n@if (outputType() === 'canvas') {\n  <canvas #canvas></canvas>\n} @else if (outputType() === 'svg') {\n  <div #svg></div>\n} @else {\n  <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" #img />\n}\n", styles: [".qrcode{width:fit-content;height:fit-content;border:1px solid black}\n"] }]
+                    ], template: "<div class=\"qrcode\">\n  @if (outputType() === 'canvas') {\n    <canvas #canvas></canvas>\n  } @else if (outputType() === 'svg') {\n    <div #svg></div>\n  } @else {\n    <img [src]=\"qrCodeUrl()\" alt=\"QR Code\" />\n  }\n  <div class=\"logo-container\" [style.width.px]=\"calculateLogoSize()\" [style.height.px]=\"calculateLogoSize()\">\n    <ng-content select=\"img\"></ng-content>\n  </div>\n</div>\n", styles: [".qrcode{position:relative}.qrcode .logo-container{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
         }], ctorParameters: () => [] });
 
 class QrcodeModule {