@smallpearl/ngx-helper 0.29.23

package/fesm2022/smallpearl-ngx-helper-mat-context-menu.mjs

@@ -0,0 +1,184 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, Component, ChangeDetectionStrategy, Output } from '@angular/core';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { HoverDropDownDirective } from '@smallpearl/ngx-helper/hover-dropdown';
+
+class SPMatContextMenuComponent {
+    /**
+     * The menu items to display. Refer to ContextMenuItem doc for details
+     * on the menu items.
+     */
+    menuItems = input.required();
+    /**
+     * Label to display for the context menu. If omitted will just show the
+     * menuIcon.
+     */
+    label = input('');
+    /**
+     * Button icon. defaults to more_vert.
+     */
+    menuIconName = input('more_vert');
+    /**
+     * By default the context menu is activated whenever the mouse cursor hovers
+     * over the button. Set this to 'true' to disable this feature.
+     */
+    enableHover = input(false);
+    /**
+     * Context data for menu item disabled callback
+     */
+    contextData = input();
+    /**
+     * enable menu backdrop
+     */
+    hasBackdrop = input(false);
+    /**
+     * Event generated when use selects an item in the context menu. This event
+     * is generated only if the context menu item does not specify a route to
+     * activate. The string event parameter is ContextMenuItem.role property
+     * value.
+     */
+    selected = new EventEmitter();
+    constructor() { }
+    ngOnInit() { }
+    onSelectMenuItem(item) {
+        if (!item.route) {
+            this.selected.emit(item?.role || item.label);
+        }
+    }
+    itemDisabled(menuItem) {
+        return menuItem?.disable && menuItem.disable(this.contextData());
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: SPMatContextMenuComponent, isStandalone: true, selector: "sp-mat-context-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, menuIconName: { classPropertyName: "menuIconName", publicName: "menuIconName", isSignal: true, isRequired: false, transformFunction: null }, enableHover: { classPropertyName: "enableHover", publicName: "enableHover", isSignal: true, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
+    <button
+      #menuTrigger="matMenuTrigger"
+      mat-icon-button
+      [matMenuTriggerFor]="contextMenu"
+      hoverDropDown
+      [menu]="contextMenu"
+      [hoverTrigger]="enableHover() ? menuTrigger : null"
+    >
+      @if (menuIconName()) {
+      <mat-icon>{{ menuIconName() }}</mat-icon>
+      }
+      {{ label() }}
+    </button>
+    <mat-menu #contextMenu="matMenu" [hasBackdrop]="hasBackdrop()">
+      @for (menuItem of menuItems(); track $index) {
+        @if (menuItem.role) {
+          @if (!itemDisabled(menuItem)) {
+            <button
+              mat-menu-item
+              [routerLink]="menuItem.route ? menuItem.route : undefined"
+              (click)="$event.preventDefault(); onSelectMenuItem(menuItem)"
+              [disabled]="itemDisabled(menuItem)"
+            >
+              @if (menuItem.icon) {
+              <mat-icon>{{ menuItem.icon }}</mat-icon>
+              }
+              {{ menuItem.label }}
+            </button>
+          }
+        } @else {
+          @if (!itemDisabled(menuItem)) {
+            <div style="padding: .2em 0.6em;">
+              <strong>{{ menuItem.label }}</strong>
+            </div>
+          }
+        }
+      <!-- <button
+        mat-menu-item
+        [routerLink]="menuItem.route ? menuItem.route : undefined"
+        (click)="$event.preventDefault(); onSelectMenuItem(menuItem)"
+        [disabled]="itemDisabled(menuItem)"
+      >
+        @if (menuItem.icon) {
+        <mat-icon>{{ menuItem.icon }}</mat-icon>
+        }
+        {{ menuItem.label }}
+      </button> -->
+      }
+    </mat-menu>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: HoverDropDownDirective, selector: "[hoverDropDown]", inputs: ["hoverTrigger", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        RouterModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        HoverDropDownDirective,
+                    ],
+                    selector: 'sp-mat-context-menu',
+                    template: `
+    <button
+      #menuTrigger="matMenuTrigger"
+      mat-icon-button
+      [matMenuTriggerFor]="contextMenu"
+      hoverDropDown
+      [menu]="contextMenu"
+      [hoverTrigger]="enableHover() ? menuTrigger : null"
+    >
+      @if (menuIconName()) {
+      <mat-icon>{{ menuIconName() }}</mat-icon>
+      }
+      {{ label() }}
+    </button>
+    <mat-menu #contextMenu="matMenu" [hasBackdrop]="hasBackdrop()">
+      @for (menuItem of menuItems(); track $index) {
+        @if (menuItem.role) {
+          @if (!itemDisabled(menuItem)) {
+            <button
+              mat-menu-item
+              [routerLink]="menuItem.route ? menuItem.route : undefined"
+              (click)="$event.preventDefault(); onSelectMenuItem(menuItem)"
+              [disabled]="itemDisabled(menuItem)"
+            >
+              @if (menuItem.icon) {
+              <mat-icon>{{ menuItem.icon }}</mat-icon>
+              }
+              {{ menuItem.label }}
+            </button>
+          }
+        } @else {
+          @if (!itemDisabled(menuItem)) {
+            <div style="padding: .2em 0.6em;">
+              <strong>{{ menuItem.label }}</strong>
+            </div>
+          }
+        }
+      <!-- <button
+        mat-menu-item
+        [routerLink]="menuItem.route ? menuItem.route : undefined"
+        (click)="$event.preventDefault(); onSelectMenuItem(menuItem)"
+        [disabled]="itemDisabled(menuItem)"
+      >
+        @if (menuItem.icon) {
+        <mat-icon>{{ menuItem.icon }}</mat-icon>
+        }
+        {{ menuItem.label }}
+      </button> -->
+      }
+    </mat-menu>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SPMatContextMenuComponent };
+//# sourceMappingURL=smallpearl-ngx-helper-mat-context-menu.mjs.map

package/fesm2022/smallpearl-ngx-helper-mat-context-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smallpearl-ngx-helper-mat-context-menu.mjs","sources":["../../../../projects/smallpearl/ngx-helper/mat-context-menu/src/mat-context-menu.component.ts","../../../../projects/smallpearl/ngx-helper/mat-context-menu/smallpearl-ngx-helper-mat-context-menu.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  input,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { RouterModule } from '@angular/router';\nimport { HoverDropDownDirective } from '@smallpearl/ngx-helper/hover-dropdown';\n\n/**\n * Describes each item in the context menu.\n */\nexport interface SPContextMenuItem {\n  // Menu item label\n  label: string;\n  // Menu icon, A material icon\n  icon?: string;\n  // Angular route to navigate to when the menu item is selected.\n  route?: string | string[];\n  // Argument to the (selected) event when this menu item is selected\n  // by the user and the corresponding ContextMenuItem does not have a\n  // 'route' property value.\n  role?: string;\n  // Whether the menu item should be disabled\n  disable?: (arg: any) => boolean;\n}\n\n@Component({\n    imports: [\n        RouterModule,\n        MatButtonModule,\n        MatIconModule,\n        MatMenuModule,\n        HoverDropDownDirective,\n    ],\n    selector: 'sp-mat-context-menu',\n    template: `\n    <button\n      #menuTrigger=\"matMenuTrigger\"\n      mat-icon-button\n      [matMenuTriggerFor]=\"contextMenu\"\n      hoverDropDown\n      [menu]=\"contextMenu\"\n      [hoverTrigger]=\"enableHover() ? menuTrigger : null\"\n    >\n      @if (menuIconName()) {\n      <mat-icon>{{ menuIconName() }}</mat-icon>\n      }\n      {{ label() }}\n    </button>\n    <mat-menu #contextMenu=\"matMenu\" [hasBackdrop]=\"hasBackdrop()\">\n      @for (menuItem of menuItems(); track $index) {\n        @if (menuItem.role) {\n          @if (!itemDisabled(menuItem)) {\n            <button\n              mat-menu-item\n              [routerLink]=\"menuItem.route ? menuItem.route : undefined\"\n              (click)=\"$event.preventDefault(); onSelectMenuItem(menuItem)\"\n              [disabled]=\"itemDisabled(menuItem)\"\n            >\n              @if (menuItem.icon) {\n              <mat-icon>{{ menuItem.icon }}</mat-icon>\n              }\n              {{ menuItem.label }}\n            </button>\n          }\n        } @else {\n          @if (!itemDisabled(menuItem)) {\n            <div style=\"padding: .2em 0.6em;\">\n              <strong>{{ menuItem.label }}</strong>\n            </div>\n          }\n        }\n      <!-- <button\n        mat-menu-item\n        [routerLink]=\"menuItem.route ? menuItem.route : undefined\"\n        (click)=\"$event.preventDefault(); onSelectMenuItem(menuItem)\"\n        [disabled]=\"itemDisabled(menuItem)\"\n      >\n        @if (menuItem.icon) {\n        <mat-icon>{{ menuItem.icon }}</mat-icon>\n        }\n        {{ menuItem.label }}\n      </button> -->\n      }\n    </mat-menu>\n  `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SPMatContextMenuComponent implements OnInit {\n  /**\n   * The menu items to display. Refer to ContextMenuItem doc for details\n   * on the menu items.\n   */\n  menuItems = input.required<SPContextMenuItem[]>();\n  /**\n   * Label to display for the context menu. If omitted will just show the\n   * menuIcon.\n   */\n  label = input<string>('');\n  /**\n   * Button icon. defaults to more_vert.\n   */\n  menuIconName = input<string>('more_vert');\n  /**\n   * By default the context menu is activated whenever the mouse cursor hovers\n   * over the button. Set this to 'true' to disable this feature.\n   */\n  enableHover = input<boolean>(false);\n  /**\n   * Context data for menu item disabled callback\n   */\n  contextData = input<any>();\n  /**\n   * enable menu backdrop\n   */\n  hasBackdrop = input<boolean>(false);\n  /**\n   * Event generated when use selects an item in the context menu. This event\n   * is generated only if the context menu item does not specify a route to\n   * activate. The string event parameter is ContextMenuItem.role property\n   * value.\n   */\n  @Output() selected = new EventEmitter<string>();\n\n  constructor() {}\n\n  ngOnInit() {}\n\n\n  onSelectMenuItem(item: SPContextMenuItem) {\n    if (!item.route) {\n      this.selected.emit(item?.role || item.label);\n    }\n  }\n\n  itemDisabled(menuItem: SPContextMenuItem) {\n    return menuItem?.disable && menuItem.disable(this.contextData());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}