@alaarab/ogrid-angular-primeng 2.5.9 → 2.6.1

package/dist/esm/column-header-menu/column-header-menu.component.js

@@ -0,0 +1,68 @@
+import { Component, computed, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { MenuModule } from 'primeng/menu';
+import { BaseColumnHeaderMenuComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+import * as i1 from "primeng/button";
+import * as i2 from "primeng/menu";
+const _c0 = ["menu"];
+export class ColumnHeaderMenuComponent extends BaseColumnHeaderMenuComponent {
+    constructor() {
+        super(...arguments);
+        this.menuModel = computed(() => {
+            const result = [];
+            for (const item of this.menuItems()) {
+                result.push({
+                    label: item.label,
+                    disabled: item.disabled,
+                    command: () => this.handleMenuItemClick(item.id),
+                });
+                if (item.divider) {
+                    result.push({ separator: true });
+                }
+            }
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "menuModel" }] : []));
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵColumnHeaderMenuComponent_BaseFactory; return function ColumnHeaderMenuComponent_Factory(__ngFactoryType__) { return (ɵColumnHeaderMenuComponent_BaseFactory || (ɵColumnHeaderMenuComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ColumnHeaderMenuComponent)))(__ngFactoryType__ || ColumnHeaderMenuComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnHeaderMenuComponent, selectors: [["column-header-menu"]], viewQuery: function ColumnHeaderMenuComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuRef = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [["menu", ""], ["pButton", "", "type", "button", "icon", "pi pi-ellipsis-v", 1, "p-button-text", "p-button-sm", "column-header-menu-trigger", 3, "click"], ["appendTo", "body", 3, "model", "popup"]], template: function ColumnHeaderMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 1);
+            i0.ɵɵlistener("click", function ColumnHeaderMenuComponent_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const menu_r2 = i0.ɵɵreference(2); return i0.ɵɵresetView(menu_r2.toggle($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(1, "p-menu", 2, 0);
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-label", "Column options for " + ctx.columnId);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("model", ctx.menuModel())("popup", true);
+        } }, dependencies: [ButtonModule, i1.ButtonDirective, MenuModule, i2.Menu], styles: [".column-header-menu-trigger[_ngcontent-%COMP%] {\n      padding: 0.25rem;\n      min-width: 24px;\n      height: 24px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      border-radius: 4px;\n      transition: background-color 0.15s;\n    }\n    \n\n\n    @media (hover: hover) {\n      .column-header-menu-trigger[_ngcontent-%COMP%] { visibility: hidden; }\n    }\n    .column-header-menu-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnHeaderMenuComponent, [{
+        type: Component,
+        args: [{ selector: 'column-header-menu', standalone: true, imports: [ButtonModule, MenuModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      pButton
+      type="button"
+      icon="pi pi-ellipsis-v"
+      class="p-button-text p-button-sm column-header-menu-trigger"
+      (click)="menu.toggle($event)"
+      [attr.aria-label]="'Column options for ' + columnId"
+    ></button>
+
+    <p-menu
+      #menu
+      [model]="menuModel()"
+      [popup]="true"
+      appendTo="body"
+    ></p-menu>
+  `, styles: ["\n    .column-header-menu-trigger {\n      padding: 0.25rem;\n      min-width: 24px;\n      height: 24px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n      border-radius: 4px;\n      transition: background-color 0.15s;\n    }\n    /* Always reserve space; hide on hover-capable devices until column is hovered.\n       The th:hover rule lives in the parent (ViewEncapsulation.None) styles. */\n    @media (hover: hover) {\n      .column-header-menu-trigger { visibility: hidden; }\n    }\n    .column-header-menu-trigger:hover {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "] }]
+    }], null, { menuRef: [{
+            type: ViewChild,
+            args: ['menu']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnHeaderMenuComponent, { className: "ColumnHeaderMenuComponent", filePath: "column-header-menu/column-header-menu.component.ts", lineNumber: 53 }); })();