@progress/kendo-angular-menu
Version:
Kendo UI Angular Menu component
169 lines (168 loc) • 6.87 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { OnInit, OnChanges, OnDestroy, EventEmitter, NgZone, Renderer2, TemplateRef, ElementRef, ViewContainerRef } from '@angular/core';
import { PopupService, Offset, Align, Collision, PopupAnimation } from '@progress/kendo-angular-popup';
import { MenuBase } from '../menu-base';
import { ContextMenuEvent } from './context-menu-event';
import { ContextMenuSelectEvent } from './context-menu-select-event';
import { ContextMenuPopupEvent } from './context-menu-popup-event';
import { ContextMenuService } from './context-menu.service';
import { ContextMenuTemplateDirective } from './context-menu-template.directive';
import { ContextMenuTargetContainerDirective } from './context-menu-target-container.directive';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ContextMenu component for Angular]({% slug overview_contextmenu %}).
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <div #target>
* Right-click to open Context menu</p>
* </div>
* <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
* `
* })
* class AppComponent {
* public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
* }
* ```
*/
export declare class ContextMenuComponent extends MenuBase implements OnInit, OnChanges, OnDestroy {
private popupService;
private service;
private ngZone;
private renderer;
/**
* Specifies the event on which the ContextMenu will open ([see example]({% slug showon_contextmenu %})).
* Accepts the name of a native DOM event. For example, `click`, `dblclick`, `mouseover`, etc.
*
* @default 'contextmenu'
*/
showOn: string;
/**
* Specifies the element for which the ContextMenu will open ([see example]({% slug target_contextmenu %}#toc-configuration)).
*/
target: HTMLElement | ElementRef | ContextMenuTargetContainerDirective | string;
/**
* Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open
* ([see example](slug:target_contextmenu#toc-changing-items-for-specific-targets)).
*/
filter: string;
/**
* Specifies if the ContextMenu will be aligned to the target or to the `filter` element (if specified).
*
* @default false
*/
alignToAnchor: boolean;
/**
* Specifies if the Menu will be vertically rendered ([see example]({% slug orientation_contextmenu %})).
*
* @default true
*/
vertical: boolean;
/**
* Specifies the popup animation.
*
* @default true
*/
popupAnimate: boolean | PopupAnimation;
/**
* Specifies the pivot point of the popup.
*
* @default { horizontal: 'left', vertical: 'top' }
*/
popupAlign: Align;
/**
* Specifies the pivot point of the anchor. Applicable if `alignToAnchor` is `true`.
*
* @default { horizontal: 'left', vertical: 'bottom' }
*/
anchorAlign: Align;
/**
* Configures the collision behavior of the popup.
*
* @default { horizontal: 'fit', vertical: 'flip' }
*/
collision: Collision;
/**
* Defines the container to which the popups will be appended.
*/
appendTo: ViewContainerRef;
/**
* Sets the value for the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) attribute of the ContextMenu.
*/
ariaLabel: string;
/**
* Fires when the Menu is opened ([see example](slug:events_contextmenu)).
*/
popupOpen: EventEmitter<ContextMenuPopupEvent>;
/**
* Fires when the Menu is closed ([see example](slug:events_contextmenu)).
*/
popupClose: EventEmitter<ContextMenuPopupEvent>;
/**
* Fires when a Menu item is selected ([see example](slug:events_contextmenu)).
*/
select: EventEmitter<ContextMenuSelectEvent>;
/**
* Fires when a Menu item is opened ([see example](slug:events_contextmenu)).
*/
open: EventEmitter<ContextMenuEvent>;
/**
* Fires when a Menu item is closed ([see example](slug:events_contextmenu)).
*/
close: EventEmitter<ContextMenuEvent>;
/**
* @hidden
*/
contentTemplate: ContextMenuTemplateDirective;
/**
* @hidden
*/
defaultContentTemplate: TemplateRef<any>;
private closeSubscription;
private showSubscription;
private keydownSubscription;
private popupSubscriptions;
private popupRef;
private currentTarget;
private directiveTarget;
private activeTarget;
constructor(popupService: PopupService, service: ContextMenuService, ngZone: NgZone, renderer: Renderer2);
/**
* Hides the ContextMenu.
*/
hide(): void;
/**
* Shows the ContextMenu for the specified target.
*
* @param target - The offset or the target element for which the ContextMenu will open.
*/
show(target: Offset | HTMLElement | ElementRef): void;
ngOnChanges(changes: any): void;
ngOnInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
emitMenuEvent(name: string, args: any): void;
private bindShowHandler;
private showContextMenu;
private unbindShowHandler;
private targetElement;
private targetFilter;
private closePopup;
private removePopup;
private openPopup;
private createPopup;
private closeAndFocus;
private popupKeyDownHandler;
private popupAction;
private get currentTargetElement();
static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ContextMenuComponent, "kendo-contextmenu", ["kendoContextMenu"], { "showOn": { "alias": "showOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "alignToAnchor": { "alias": "alignToAnchor"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "popupAnimate": { "alias": "popupAnimate"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "popupOpen": "popupOpen"; "popupClose": "popupClose"; "select": "select"; "open": "open"; "close": "close"; }, ["contentTemplate"], never, true, never>;
}