feat(chips): added onChipContextMenu output analog to onChipClick (#1…

…5763) Co-authored-by: Cihan Polat <[email protected]>
primefaces · Nov 18, 2024 · 663bd6c · 663bd6c
1 parent 8be7eb6
commit 663bd6c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/app/components/chips/chips.interface.ts b/src/app/components/chips/chips.interface.ts
@@ -29,6 +29,13 @@ export interface ChipsRemoveEvent extends ChipsAddEvent {}
  * @group Events
  */
 export interface ChipsClickEvent extends ChipsAddEvent {}
+/**
+ * Custom contextmenu event.
+ * @see {@link Chips.onChipContextMenu}
+ * @extends {ChipsAddEvent}
+ * @group Events
+ */
+export interface ChipsContextMenuEvent extends ChipsAddEvent {}
 /**
  * Defines valid templates in Chips.
  * @group Templates

diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
@@ -27,7 +27,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { InputTextModule } from 'primeng/inputtext';
 import { Nullable } from 'primeng/ts-helpers';
 import { UniqueComponentId } from 'primeng/utils';
-import { ChipsAddEvent, ChipsClickEvent, ChipsRemoveEvent } from './chips.interface';
+import { ChipsAddEvent, ChipsClickEvent, ChipsContextMenuEvent, ChipsRemoveEvent } from './chips.interface';
 
 export const CHIPS_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -81,6 +81,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                     [attr.data-p-focused]="focusedIndex === i"
                     [ngClass]="{ 'p-chips-token': true, 'p-focus': focusedIndex === i }"
                     (click)="onItemClick($event, item)"
+                    (contextmenu)="onItemContextMenu($event, item)"
                     [attr.data-pc-section]="'token'"
                 >
                     <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
@@ -268,6 +269,12 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
      * @group Emits
      */
     @Output() onChipClick: EventEmitter<ChipsClickEvent> = new EventEmitter<ChipsClickEvent>();
+    /**
+     * Callback to invoke on chip contextmenu.
+     * @param {ChipsClickEvent} event - Custom chip contextmenu event.
+     * @group Emits
+     */
+    @Output() onChipContextMenu: EventEmitter<ChipsContextMenuEvent> = new EventEmitter<ChipsContextMenuEvent>();
     /**
      * Callback to invoke on clear token clicked.
      * @group Emits
@@ -437,6 +444,13 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         });
     }
 
+    onItemContextMenu(event: Event, item: any) {
+        this.onChipContextMenu.emit({
+            originalEvent: event,
+            value: item
+        });
+    }
+
     writeValue(value: any): void {
         this.value = value;
         this.updateMaxedOut();

diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
@@ -7658,6 +7658,16 @@
                             ],
                             "description": "Callback to invoke on chip clicked."
                         },
+                        {
+                            "name": "onChipContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "ChipsContextMenuEvent"
+                                }
+                            ],
+                            "description": "Callback to invoke on chip contextmenu."
+                        },
                         {
                             "name": "onClear",
                             "parameters": [
@@ -7743,7 +7753,27 @@
                                 "optional": false,
                                 "readonly": false,
                                 "type": "any",
-                                "description": "Added/Removed item value."
+                                "description": "Clicked item value."
+                            }
+                        ]
+                    },
+                    {
+                        "name": "ChipsContextMenuEvent",
+                        "description": "Custom contextmenu event.",
+                        "props": [
+                            {
+                                "name": "originalEvent",
+                                "optional": false,
+                                "readonly": false,
+                                "type": "Event",
+                                "description": "Browser event."
+                            },
+                            {
+                                "name": "value",
+                                "optional": false,
+                                "readonly": false,
+                                "type": "any",
+                                "description": "Contextmenu requested item value."
                             }
                         ]
                     }