ng-prime-tools 1.1.31 → 1.1.32

package/fesm2022/ng-prime-tools.mjs

@@ -6103,7 +6103,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 class PTMenuFancyComponent {
-    constructor() {
+    static { this.DEFAULT_TEXT_COLOR = '#000'; }
+    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_COLOR = '#000'; }
+    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
+    /**
+     * Track the currently opened PTMenuFancyComponent instance.
+     * Only one menu can remain open at a time.
+     */
+    static { this.openMenuInstance = null; }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.config = {
             icon: {
                 code: 'pi pi-ellipsis-v',
@@ -6119,16 +6130,14 @@ class PTMenuFancyComponent {
         };
         this.isOpen = false;
     }
-    static { this.DEFAULT_TEXT_COLOR = '#000'; }
-    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
-    static { this.DEFAULT_ICON_COLOR = '#000'; }
-    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
-    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
-    static { this.openMenuInstance = null; }
+    // ============================================================
+    // MENU OPEN / CLOSE
+    // ============================================================
     toggleMenu() {
-        if (PTMenuFancyComponent.openMenuInstance &&
-            PTMenuFancyComponent.openMenuInstance !== this) {
-            PTMenuFancyComponent.openMenuInstance.closeMenu();
+        const currentOpenMenu = PTMenuFancyComponent.openMenuInstance;
+        // Close another menu before opening this one.
+        if (currentOpenMenu && currentOpenMenu !== this) {
+            currentOpenMenu.closeMenu();
         }
         this.isOpen = !this.isOpen;
         PTMenuFancyComponent.openMenuInstance = this.isOpen ? this : null;
@@ -6139,6 +6148,13 @@ class PTMenuFancyComponent {
             PTMenuFancyComponent.openMenuInstance = null;
         }
     }
+    // ============================================================
+    // ICONS
+    // ============================================================
+    /**
+     * Supports PrimeIcons, Font Awesome, and any CSS icon library.
+     * The icon classes are preserved without transformation.
+     */
     getMenuItemIconClass(item) {
         if (typeof item.icon === 'string') {
             return item.icon.trim();
@@ -6170,6 +6186,9 @@ class PTMenuFancyComponent {
                 PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
         };
     }
+    // ============================================================
+    // MENU ITEMS
+    // ============================================================
     getTextStyles(item) {
         return {
             color: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
@@ -6183,38 +6202,45 @@ class PTMenuFancyComponent {
         if (this.isItemDisabled(item)) {
             return;
         }
+        // Close the dropdown before executing the action.
         this.closeMenu();
         item.action?.();
     }
+    // ============================================================
+    // CLICK OUTSIDE
+    // ============================================================
+    /**
+     * Close this menu when clicking anywhere outside its host.
+     *
+     * ElementRef ensures the comparison is made against this
+     * specific component instance rather than another menu.
+     */
     onDocumentClick(event) {
+        if (!this.isOpen) {
+            return;
+        }
         const target = event.target;
-        if (!(target instanceof Element)) {
+        if (!(target instanceof Node)) {
             this.closeMenu();
             return;
         }
-        const clickedInsideOwnMenu = target.closest('.pt-menu-fancy') === this.getHostElement(target);
-        if (!clickedInsideOwnMenu) {
+        if (!this.elementRef.nativeElement.contains(target)) {
             this.closeMenu();
         }
     }
-    getHostElement(target) {
-        const nearestMenu = target.closest('.pt-menu-fancy');
-        if (!nearestMenu) {
-            return null;
-        }
-        // Only the currently active menu should remain open.
-        return PTMenuFancyComponent.openMenuInstance === this ? nearestMenu : null;
-    }
+    // ============================================================
+    // CLEANUP
+    // ============================================================
     ngOnDestroy() {
         this.closeMenu();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMenuFancyComponent, isStandalone: false, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pt-menu-fancy', standalone: false, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"] }]
-        }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], onDocumentClick: [{
                 type: HostListener,