@progress/kendo-angular-menu 21.4.1 → 22.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data-binding/binding-directive-base.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-menu.mjs +87 -87
- package/menu-base.d.ts +1 -1
- package/package.json +11 -19
- package/esm2022/constants.mjs +0 -8
- package/esm2022/context-menu/context-menu-event.mjs +0 -25
- package/esm2022/context-menu/context-menu-items.service.mjs +0 -27
- package/esm2022/context-menu/context-menu-popup-event.mjs +0 -29
- package/esm2022/context-menu/context-menu-select-event.mjs +0 -14
- package/esm2022/context-menu/context-menu-target-container.directive.mjs +0 -49
- package/esm2022/context-menu/context-menu-target.directive.mjs +0 -62
- package/esm2022/context-menu/context-menu-target.service.mjs +0 -27
- package/esm2022/context-menu/context-menu-template.directive.mjs +0 -39
- package/esm2022/context-menu/context-menu.component.mjs +0 -527
- package/esm2022/context-menu/context-menu.module.mjs +0 -69
- package/esm2022/context-menu/context-menu.service.mjs +0 -30
- package/esm2022/data-binding/binding-directive-base.mjs +0 -46
- package/esm2022/data-binding/flat-binding.directive.mjs +0 -139
- package/esm2022/data-binding/hierachy-binding.directive.mjs +0 -124
- package/esm2022/data-binding/utils.mjs +0 -31
- package/esm2022/directives.mjs +0 -48
- package/esm2022/dom-queries.mjs +0 -104
- package/esm2022/index.mjs +0 -29
- package/esm2022/menu-animation.interface.mjs +0 -5
- package/esm2022/menu-base.mjs +0 -103
- package/esm2022/menu-event.mjs +0 -22
- package/esm2022/menu-item.component.mjs +0 -149
- package/esm2022/menu-item.interface.mjs +0 -5
- package/esm2022/menu-select-event.mjs +0 -14
- package/esm2022/menu.component.mjs +0 -304
- package/esm2022/menu.module.mjs +0 -65
- package/esm2022/menus.module.mjs +0 -59
- package/esm2022/open-on-click-settings.mjs +0 -10
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/preventable-event.mjs +0 -34
- package/esm2022/progress-kendo-angular-menu.mjs +0 -8
- package/esm2022/rendering/arrow.component.mjs +0 -70
- package/esm2022/rendering/link.directive.mjs +0 -69
- package/esm2022/rendering/list.component.mjs +0 -679
- package/esm2022/rendering/popup-settings.mjs +0 -74
- package/esm2022/services/actions.service.mjs +0 -192
- package/esm2022/services/hover.service.mjs +0 -127
- package/esm2022/services/items.service.mjs +0 -128
- package/esm2022/services/navigation.service.mjs +0 -268
- package/esm2022/size.mjs +0 -5
- package/esm2022/templates/item-content-template.directive.mjs +0 -53
- package/esm2022/templates/item-link-template.directive.mjs +0 -57
- package/esm2022/templates/item-template.directive.mjs +0 -54
- package/esm2022/utils.mjs +0 -52
|
@@ -1,527 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Input, ContentChild, ViewChild, EventEmitter, Output, NgZone, Renderer2, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
|
|
6
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
|
|
8
|
-
import { hasObservers, Keys, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
|
|
9
|
-
import { MenuBase } from '../menu-base';
|
|
10
|
-
import { ContextMenuPopupEvent } from './context-menu-popup-event';
|
|
11
|
-
import { ContextMenuService } from './context-menu.service';
|
|
12
|
-
import { ContextMenuItemsService } from './context-menu-items.service';
|
|
13
|
-
import { ContextMenuTemplateDirective } from './context-menu-template.directive';
|
|
14
|
-
import { closest, findInContainer, isFocusable, hasClass } from '../dom-queries';
|
|
15
|
-
import { defined } from '../utils';
|
|
16
|
-
import { ItemsService } from '../services/items.service';
|
|
17
|
-
import { ContextMenuTargetContainerDirective } from './context-menu-target-container.directive';
|
|
18
|
-
import { TARGET_CLASS } from './context-menu-target.directive';
|
|
19
|
-
import { bodyFactory } from '../utils';
|
|
20
|
-
import { MenuComponent } from '../menu.component';
|
|
21
|
-
import { DEFAULT_MARGIN } from '../rendering/popup-settings';
|
|
22
|
-
import * as i0 from "@angular/core";
|
|
23
|
-
import * as i1 from "@progress/kendo-angular-popup";
|
|
24
|
-
import * as i2 from "./context-menu.service";
|
|
25
|
-
const CONTEXT_MENU = 'contextmenu';
|
|
26
|
-
const DEFAULT_ANCHOR_ALIGN = { horizontal: 'left', vertical: 'bottom' };
|
|
27
|
-
const DEFAULT_POPUP_ALIGN = { horizontal: 'left', vertical: 'top' };
|
|
28
|
-
const DEFAULT_COLLISION = { horizontal: 'fit', vertical: 'flip' };
|
|
29
|
-
const preventDefault = e => e.preventDefault();
|
|
30
|
-
/**
|
|
31
|
-
* Represents the [Kendo UI ContextMenu component for Angular]({% slug overview_contextmenu %}).
|
|
32
|
-
*
|
|
33
|
-
* @example
|
|
34
|
-
* ```ts
|
|
35
|
-
* _@Component({
|
|
36
|
-
* selector: 'my-app',
|
|
37
|
-
* template: `
|
|
38
|
-
* <div #target>
|
|
39
|
-
* Right-click to open Context menu</p>
|
|
40
|
-
* </div>
|
|
41
|
-
* <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
|
|
42
|
-
* `
|
|
43
|
-
* })
|
|
44
|
-
* class AppComponent {
|
|
45
|
-
* public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
|
|
46
|
-
* }
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
export class ContextMenuComponent extends MenuBase {
|
|
50
|
-
popupService;
|
|
51
|
-
service;
|
|
52
|
-
ngZone;
|
|
53
|
-
renderer;
|
|
54
|
-
/**
|
|
55
|
-
* Specifies the event on which the ContextMenu will open ([see example]({% slug showon_contextmenu %})).
|
|
56
|
-
* Accepts the name of a native DOM event. For example, `click`, `dblclick`, `mouseover`, etc.
|
|
57
|
-
*
|
|
58
|
-
* @default 'contextmenu'
|
|
59
|
-
*/
|
|
60
|
-
showOn = CONTEXT_MENU;
|
|
61
|
-
/**
|
|
62
|
-
* Specifies the element for which the ContextMenu will open ([see example]({% slug target_contextmenu %}#toc-configuration)).
|
|
63
|
-
*/
|
|
64
|
-
target;
|
|
65
|
-
/**
|
|
66
|
-
* Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open
|
|
67
|
-
* ([see example](slug:target_contextmenu#toc-changing-items-for-specific-targets)).
|
|
68
|
-
*/
|
|
69
|
-
filter;
|
|
70
|
-
/**
|
|
71
|
-
* Specifies if the ContextMenu will be aligned to the target or to the `filter` element (if specified).
|
|
72
|
-
*
|
|
73
|
-
* @default false
|
|
74
|
-
*/
|
|
75
|
-
alignToAnchor = false;
|
|
76
|
-
/**
|
|
77
|
-
* Specifies if the Menu will be vertically rendered ([see example]({% slug orientation_contextmenu %})).
|
|
78
|
-
*
|
|
79
|
-
* @default true
|
|
80
|
-
*/
|
|
81
|
-
vertical = true;
|
|
82
|
-
/**
|
|
83
|
-
* Specifies the popup animation.
|
|
84
|
-
*
|
|
85
|
-
* @default true
|
|
86
|
-
*/
|
|
87
|
-
popupAnimate;
|
|
88
|
-
/**
|
|
89
|
-
* Specifies the pivot point of the popup.
|
|
90
|
-
*
|
|
91
|
-
* @default { horizontal: 'left', vertical: 'top' }
|
|
92
|
-
*/
|
|
93
|
-
popupAlign;
|
|
94
|
-
/**
|
|
95
|
-
* Specifies the pivot point of the anchor. Applicable if `alignToAnchor` is `true`.
|
|
96
|
-
*
|
|
97
|
-
* @default { horizontal: 'left', vertical: 'bottom' }
|
|
98
|
-
*/
|
|
99
|
-
anchorAlign;
|
|
100
|
-
/**
|
|
101
|
-
* Configures the collision behavior of the popup.
|
|
102
|
-
*
|
|
103
|
-
* @default { horizontal: 'fit', vertical: 'flip' }
|
|
104
|
-
*/
|
|
105
|
-
collision;
|
|
106
|
-
/**
|
|
107
|
-
* Defines the container to which the popups will be appended.
|
|
108
|
-
*/
|
|
109
|
-
appendTo;
|
|
110
|
-
/**
|
|
111
|
-
* Sets the value for the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) attribute of the ContextMenu.
|
|
112
|
-
*/
|
|
113
|
-
ariaLabel;
|
|
114
|
-
/**
|
|
115
|
-
* Fires when the Menu is opened ([see example](slug:events_contextmenu)).
|
|
116
|
-
*/
|
|
117
|
-
popupOpen = new EventEmitter();
|
|
118
|
-
/**
|
|
119
|
-
* Fires when the Menu is closed ([see example](slug:events_contextmenu)).
|
|
120
|
-
*/
|
|
121
|
-
popupClose = new EventEmitter();
|
|
122
|
-
/**
|
|
123
|
-
* Fires when a Menu item is selected ([see example](slug:events_contextmenu)).
|
|
124
|
-
*/
|
|
125
|
-
select = new EventEmitter();
|
|
126
|
-
/**
|
|
127
|
-
* Fires when a Menu item is opened ([see example](slug:events_contextmenu)).
|
|
128
|
-
*/
|
|
129
|
-
open = new EventEmitter();
|
|
130
|
-
/**
|
|
131
|
-
* Fires when a Menu item is closed ([see example](slug:events_contextmenu)).
|
|
132
|
-
*/
|
|
133
|
-
close = new EventEmitter();
|
|
134
|
-
/**
|
|
135
|
-
* @hidden
|
|
136
|
-
*/
|
|
137
|
-
contentTemplate;
|
|
138
|
-
/**
|
|
139
|
-
* @hidden
|
|
140
|
-
*/
|
|
141
|
-
defaultContentTemplate;
|
|
142
|
-
closeSubscription;
|
|
143
|
-
showSubscription;
|
|
144
|
-
keydownSubscription;
|
|
145
|
-
popupSubscriptions;
|
|
146
|
-
popupRef;
|
|
147
|
-
currentTarget;
|
|
148
|
-
directiveTarget;
|
|
149
|
-
activeTarget;
|
|
150
|
-
constructor(popupService, service, ngZone, renderer) {
|
|
151
|
-
super();
|
|
152
|
-
this.popupService = popupService;
|
|
153
|
-
this.service = service;
|
|
154
|
-
this.ngZone = ngZone;
|
|
155
|
-
this.renderer = renderer;
|
|
156
|
-
this.service.owner = this;
|
|
157
|
-
this.popupKeyDownHandler = this.popupKeyDownHandler.bind(this);
|
|
158
|
-
}
|
|
159
|
-
/**
|
|
160
|
-
* Hides the ContextMenu.
|
|
161
|
-
*/
|
|
162
|
-
hide() {
|
|
163
|
-
this.removePopup();
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* Shows the ContextMenu for the specified target.
|
|
167
|
-
*
|
|
168
|
-
* @param target - The offset or the target element for which the ContextMenu will open.
|
|
169
|
-
*/
|
|
170
|
-
show(target) {
|
|
171
|
-
if (!target) {
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
const showTarget = target;
|
|
175
|
-
this.removePopup();
|
|
176
|
-
if (defined(showTarget.left) && defined(showTarget.top)) {
|
|
177
|
-
this.createPopup({ offset: showTarget });
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
this.currentTarget = showTarget.nativeElement || showTarget;
|
|
181
|
-
this.createPopup({ anchor: this.currentTarget });
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
ngOnChanges(changes) {
|
|
185
|
-
if (changes.target || changes.showOn) {
|
|
186
|
-
this.bindShowHandler();
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
ngOnInit() {
|
|
190
|
-
this.ngZone.runOutsideAngular(() => {
|
|
191
|
-
const closeClickSubscription = this.renderer.listen('document', 'mousedown', (e) => {
|
|
192
|
-
if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement) && this.service.leaveMenu(e)) {
|
|
193
|
-
this.closePopup(e);
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
const closeBlurSubscription = this.renderer.listen('window', 'blur', (e) => {
|
|
197
|
-
if (this.popupRef) {
|
|
198
|
-
this.closePopup(e);
|
|
199
|
-
}
|
|
200
|
-
});
|
|
201
|
-
this.closeSubscription = () => {
|
|
202
|
-
closeClickSubscription();
|
|
203
|
-
closeBlurSubscription();
|
|
204
|
-
};
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
ngOnDestroy() {
|
|
208
|
-
if (this.closeSubscription) {
|
|
209
|
-
this.closeSubscription();
|
|
210
|
-
this.closeSubscription = null;
|
|
211
|
-
}
|
|
212
|
-
this.unbindShowHandler();
|
|
213
|
-
this.removePopup();
|
|
214
|
-
}
|
|
215
|
-
/**
|
|
216
|
-
* @hidden
|
|
217
|
-
*/
|
|
218
|
-
emitMenuEvent(name, args) {
|
|
219
|
-
args.target = this.currentTarget;
|
|
220
|
-
args.sender = this;
|
|
221
|
-
this[name].emit(args);
|
|
222
|
-
if (name === 'select' && !args.hasContent) {
|
|
223
|
-
this.closeAndFocus(args.originalEvent);
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
bindShowHandler() {
|
|
227
|
-
this.unbindShowHandler();
|
|
228
|
-
this.ngZone.runOutsideAngular(() => {
|
|
229
|
-
const element = this.targetElement();
|
|
230
|
-
if (!element) {
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
|
-
const eventName = this.showOn || CONTEXT_MENU;
|
|
234
|
-
this.showSubscription = this.renderer.listen(element, this.showOn || CONTEXT_MENU, (e) => {
|
|
235
|
-
this.showContextMenu(e, element);
|
|
236
|
-
});
|
|
237
|
-
if (eventName === CONTEXT_MENU) {
|
|
238
|
-
this.keydownSubscription = this.renderer.listen(element, 'keydown', (e) => {
|
|
239
|
-
if (e.shiftKey && e.code === Keys.F10) {
|
|
240
|
-
this.showContextMenu(e, element);
|
|
241
|
-
}
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
|
-
});
|
|
245
|
-
}
|
|
246
|
-
showContextMenu(e, element) {
|
|
247
|
-
const filter = this.targetFilter();
|
|
248
|
-
let currentTarget = element;
|
|
249
|
-
if (filter) {
|
|
250
|
-
currentTarget = findInContainer(e.target, filter, element);
|
|
251
|
-
if (currentTarget && currentTarget !== e.target && isFocusable(e.target)) {
|
|
252
|
-
return;
|
|
253
|
-
}
|
|
254
|
-
if (currentTarget && this.directiveTarget) {
|
|
255
|
-
currentTarget = this.target.targetService.find(currentTarget);
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
if (!currentTarget) {
|
|
259
|
-
this.closePopup(e);
|
|
260
|
-
return;
|
|
261
|
-
}
|
|
262
|
-
this.ngZone.run(() => {
|
|
263
|
-
if (!this.closePopup(e)) {
|
|
264
|
-
this.currentTarget = currentTarget;
|
|
265
|
-
this.openPopup(e);
|
|
266
|
-
}
|
|
267
|
-
});
|
|
268
|
-
}
|
|
269
|
-
unbindShowHandler() {
|
|
270
|
-
if (this.showSubscription) {
|
|
271
|
-
this.showSubscription();
|
|
272
|
-
this.showSubscription = null;
|
|
273
|
-
}
|
|
274
|
-
if (this.keydownSubscription) {
|
|
275
|
-
this.keydownSubscription();
|
|
276
|
-
this.keydownSubscription = null;
|
|
277
|
-
}
|
|
278
|
-
}
|
|
279
|
-
targetElement() {
|
|
280
|
-
if (!isDocumentAvailable()) {
|
|
281
|
-
return;
|
|
282
|
-
}
|
|
283
|
-
this.directiveTarget = false;
|
|
284
|
-
let target = this.target;
|
|
285
|
-
if (typeof target === 'string') {
|
|
286
|
-
target = document.querySelector(target); // maybe querySelectorAll?
|
|
287
|
-
}
|
|
288
|
-
else if (target && target.nativeElement) {
|
|
289
|
-
target = target.nativeElement;
|
|
290
|
-
}
|
|
291
|
-
else if (target instanceof ContextMenuTargetContainerDirective) {
|
|
292
|
-
target = target.element;
|
|
293
|
-
this.directiveTarget = true;
|
|
294
|
-
}
|
|
295
|
-
return target;
|
|
296
|
-
}
|
|
297
|
-
targetFilter() {
|
|
298
|
-
if (this.directiveTarget) {
|
|
299
|
-
return `.${TARGET_CLASS}`;
|
|
300
|
-
}
|
|
301
|
-
return this.filter;
|
|
302
|
-
}
|
|
303
|
-
closePopup(e) {
|
|
304
|
-
if (!this.popupRef) {
|
|
305
|
-
return;
|
|
306
|
-
}
|
|
307
|
-
return this.popupAction('popupClose', e, () => {
|
|
308
|
-
this.removePopup();
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
removePopup() {
|
|
312
|
-
if (this.popupRef) {
|
|
313
|
-
this.popupRef.close();
|
|
314
|
-
this.popupRef = null;
|
|
315
|
-
this.currentTarget = null;
|
|
316
|
-
}
|
|
317
|
-
if (this.popupSubscriptions) {
|
|
318
|
-
this.popupSubscriptions();
|
|
319
|
-
this.popupSubscriptions = null;
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
openPopup(e) {
|
|
323
|
-
this.popupAction('popupOpen', e, () => {
|
|
324
|
-
e.preventDefault();
|
|
325
|
-
let anchor, offset;
|
|
326
|
-
if (this.alignToAnchor || e.type === 'keydown') {
|
|
327
|
-
anchor = this.currentTargetElement;
|
|
328
|
-
}
|
|
329
|
-
else {
|
|
330
|
-
offset = { left: e.pageX, top: e.pageY };
|
|
331
|
-
}
|
|
332
|
-
this.createPopup({ anchor, offset });
|
|
333
|
-
});
|
|
334
|
-
}
|
|
335
|
-
createPopup(options) {
|
|
336
|
-
const customClasses = this.popupSettings?.popupClass ? parseCSSClassNames(this.popupSettings.popupClass) : [];
|
|
337
|
-
this.popupRef = this.popupService.open(Object.assign({
|
|
338
|
-
animate: defined(this.popupAnimate) ? this.popupAnimate : true,
|
|
339
|
-
appendTo: this.appendTo,
|
|
340
|
-
collision: this.collision || DEFAULT_COLLISION,
|
|
341
|
-
popupAlign: this.popupAlign || DEFAULT_POPUP_ALIGN,
|
|
342
|
-
anchorAlign: this.anchorAlign || DEFAULT_ANCHOR_ALIGN,
|
|
343
|
-
content: this.contentTemplate ? this.contentTemplate.templateRef : this.defaultContentTemplate,
|
|
344
|
-
popupClass: ['k-menu-popup', ...customClasses],
|
|
345
|
-
margin: this.popupSettings?.margin ?? DEFAULT_MARGIN,
|
|
346
|
-
positionMode: 'absolute'
|
|
347
|
-
}, options));
|
|
348
|
-
const element = this.popupRef.popupElement;
|
|
349
|
-
this.renderer.addClass(element, 'k-context-menu-popup');
|
|
350
|
-
this.renderer.setAttribute(element, 'tabindex', '-1');
|
|
351
|
-
this.renderer.setStyle(element, 'outline', '0'); //possibly move to styles
|
|
352
|
-
if (this.ariaLabel) {
|
|
353
|
-
this.renderer.setAttribute(element, 'aria-label', this.ariaLabel);
|
|
354
|
-
}
|
|
355
|
-
this.activeTarget = this.currentTargetElement === document.activeElement;
|
|
356
|
-
this.ngZone.runOutsideAngular(() => {
|
|
357
|
-
const unbindKeyDown = this.renderer.listen(element, 'keydown', this.popupKeyDownHandler);
|
|
358
|
-
const unbindContextmenu = this.renderer.listen(element, 'contextmenu', preventDefault);
|
|
359
|
-
this.popupSubscriptions = () => {
|
|
360
|
-
unbindKeyDown();
|
|
361
|
-
unbindContextmenu();
|
|
362
|
-
};
|
|
363
|
-
});
|
|
364
|
-
element.focus();
|
|
365
|
-
}
|
|
366
|
-
closeAndFocus(e) {
|
|
367
|
-
const currentTarget = this.currentTargetElement;
|
|
368
|
-
if (!this.closePopup(e) && this.activeTarget) {
|
|
369
|
-
currentTarget.focus();
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
popupKeyDownHandler(e) {
|
|
373
|
-
const element = this.popupRef.popupElement;
|
|
374
|
-
if (e.code === Keys.Escape && (hasClass(e.target, 'k-menu-item') || e.target === element)) {
|
|
375
|
-
this.closeAndFocus(e);
|
|
376
|
-
}
|
|
377
|
-
else if (e.target === element) {
|
|
378
|
-
this.service.keydown.emit(e);
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
popupAction(name, originalEvent, callback) {
|
|
382
|
-
const emitter = this[name];
|
|
383
|
-
let prevented = false;
|
|
384
|
-
if (hasObservers(emitter)) {
|
|
385
|
-
this.ngZone.run(() => {
|
|
386
|
-
const args = new ContextMenuPopupEvent({
|
|
387
|
-
originalEvent: originalEvent,
|
|
388
|
-
sender: this,
|
|
389
|
-
target: this.currentTarget
|
|
390
|
-
});
|
|
391
|
-
emitter.emit(args);
|
|
392
|
-
if (!args.isDefaultPrevented()) {
|
|
393
|
-
callback();
|
|
394
|
-
}
|
|
395
|
-
prevented = args.isDefaultPrevented();
|
|
396
|
-
});
|
|
397
|
-
}
|
|
398
|
-
else {
|
|
399
|
-
callback();
|
|
400
|
-
}
|
|
401
|
-
return prevented;
|
|
402
|
-
}
|
|
403
|
-
get currentTargetElement() {
|
|
404
|
-
return this.directiveTarget && this.currentTarget ? this.currentTarget.element : this.currentTarget;
|
|
405
|
-
}
|
|
406
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.PopupService }, { token: i2.ContextMenuService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ContextMenuComponent, isStandalone: true, selector: "kendo-contextmenu", inputs: { showOn: "showOn", target: "target", filter: "filter", alignToAnchor: "alignToAnchor", vertical: "vertical", popupAnimate: "popupAnimate", popupAlign: "popupAlign", anchorAlign: "anchorAlign", collision: "collision", appendTo: "appendTo", ariaLabel: "ariaLabel" }, outputs: { popupOpen: "popupOpen", popupClose: "popupClose", select: "select", open: "open", close: "close" }, providers: [
|
|
408
|
-
ContextMenuService,
|
|
409
|
-
LocalizationService,
|
|
410
|
-
{
|
|
411
|
-
provide: L10N_PREFIX,
|
|
412
|
-
useValue: 'kendo.contextmenu'
|
|
413
|
-
},
|
|
414
|
-
{
|
|
415
|
-
provide: ItemsService,
|
|
416
|
-
useClass: ContextMenuItemsService
|
|
417
|
-
},
|
|
418
|
-
{
|
|
419
|
-
provide: MenuBase,
|
|
420
|
-
useExisting: forwardRef(() => ContextMenuComponent)
|
|
421
|
-
},
|
|
422
|
-
PopupService,
|
|
423
|
-
{
|
|
424
|
-
provide: POPUP_CONTAINER,
|
|
425
|
-
useFactory: bodyFactory
|
|
426
|
-
}
|
|
427
|
-
], queries: [{ propertyName: "contentTemplate", first: true, predicate: ContextMenuTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContentTemplate", first: true, predicate: ["default"], descendants: true }], exportAs: ["kendoContextMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
428
|
-
<ng-template #default>
|
|
429
|
-
<kendo-menu [items]="rootItems"
|
|
430
|
-
[appendTo]="appendTo"
|
|
431
|
-
[size]="size"
|
|
432
|
-
ariaRole="menu"
|
|
433
|
-
[vertical]="vertical"
|
|
434
|
-
[openOnClick]="openOnClick"
|
|
435
|
-
[hoverDelay]="hoverDelay"
|
|
436
|
-
[animate]="animate"
|
|
437
|
-
[popupSettings]="popupSettings"
|
|
438
|
-
[menuItemTemplate]="itemTemplate.first?.templateRef"
|
|
439
|
-
[menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
|
|
440
|
-
></kendo-menu>
|
|
441
|
-
</ng-template>
|
|
442
|
-
`, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
|
|
443
|
-
}
|
|
444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuComponent, decorators: [{
|
|
445
|
-
type: Component,
|
|
446
|
-
args: [{
|
|
447
|
-
exportAs: 'kendoContextMenu',
|
|
448
|
-
providers: [
|
|
449
|
-
ContextMenuService,
|
|
450
|
-
LocalizationService,
|
|
451
|
-
{
|
|
452
|
-
provide: L10N_PREFIX,
|
|
453
|
-
useValue: 'kendo.contextmenu'
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
provide: ItemsService,
|
|
457
|
-
useClass: ContextMenuItemsService
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
provide: MenuBase,
|
|
461
|
-
useExisting: forwardRef(() => ContextMenuComponent)
|
|
462
|
-
},
|
|
463
|
-
PopupService,
|
|
464
|
-
{
|
|
465
|
-
provide: POPUP_CONTAINER,
|
|
466
|
-
useFactory: bodyFactory
|
|
467
|
-
}
|
|
468
|
-
],
|
|
469
|
-
selector: 'kendo-contextmenu',
|
|
470
|
-
template: `
|
|
471
|
-
<ng-template #default>
|
|
472
|
-
<kendo-menu [items]="rootItems"
|
|
473
|
-
[appendTo]="appendTo"
|
|
474
|
-
[size]="size"
|
|
475
|
-
ariaRole="menu"
|
|
476
|
-
[vertical]="vertical"
|
|
477
|
-
[openOnClick]="openOnClick"
|
|
478
|
-
[hoverDelay]="hoverDelay"
|
|
479
|
-
[animate]="animate"
|
|
480
|
-
[popupSettings]="popupSettings"
|
|
481
|
-
[menuItemTemplate]="itemTemplate.first?.templateRef"
|
|
482
|
-
[menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
|
|
483
|
-
></kendo-menu>
|
|
484
|
-
</ng-template>
|
|
485
|
-
`,
|
|
486
|
-
standalone: true,
|
|
487
|
-
imports: [MenuComponent]
|
|
488
|
-
}]
|
|
489
|
-
}], ctorParameters: () => [{ type: i1.PopupService }, { type: i2.ContextMenuService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { showOn: [{
|
|
490
|
-
type: Input
|
|
491
|
-
}], target: [{
|
|
492
|
-
type: Input
|
|
493
|
-
}], filter: [{
|
|
494
|
-
type: Input
|
|
495
|
-
}], alignToAnchor: [{
|
|
496
|
-
type: Input
|
|
497
|
-
}], vertical: [{
|
|
498
|
-
type: Input
|
|
499
|
-
}], popupAnimate: [{
|
|
500
|
-
type: Input
|
|
501
|
-
}], popupAlign: [{
|
|
502
|
-
type: Input
|
|
503
|
-
}], anchorAlign: [{
|
|
504
|
-
type: Input
|
|
505
|
-
}], collision: [{
|
|
506
|
-
type: Input
|
|
507
|
-
}], appendTo: [{
|
|
508
|
-
type: Input
|
|
509
|
-
}], ariaLabel: [{
|
|
510
|
-
type: Input
|
|
511
|
-
}], popupOpen: [{
|
|
512
|
-
type: Output
|
|
513
|
-
}], popupClose: [{
|
|
514
|
-
type: Output
|
|
515
|
-
}], select: [{
|
|
516
|
-
type: Output
|
|
517
|
-
}], open: [{
|
|
518
|
-
type: Output
|
|
519
|
-
}], close: [{
|
|
520
|
-
type: Output
|
|
521
|
-
}], contentTemplate: [{
|
|
522
|
-
type: ContentChild,
|
|
523
|
-
args: [ContextMenuTemplateDirective, { static: false }]
|
|
524
|
-
}], defaultContentTemplate: [{
|
|
525
|
-
type: ViewChild,
|
|
526
|
-
args: ['default', { static: false }]
|
|
527
|
-
}] } });
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_CONTEXTMENU } from '../directives';
|
|
7
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
9
|
-
import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./context-menu.component";
|
|
12
|
-
import * as i2 from "./context-menu-template.directive";
|
|
13
|
-
import * as i3 from "./context-menu-target.directive";
|
|
14
|
-
import * as i4 from "./context-menu-target-container.directive";
|
|
15
|
-
import * as i5 from "../menu.component";
|
|
16
|
-
import * as i6 from "../menu-item.component";
|
|
17
|
-
import * as i7 from "../templates/item-template.directive";
|
|
18
|
-
import * as i8 from "../templates/item-link-template.directive";
|
|
19
|
-
import * as i9 from "../templates/item-content-template.directive";
|
|
20
|
-
import * as i10 from "../data-binding/hierachy-binding.directive";
|
|
21
|
-
import * as i11 from "../data-binding/flat-binding.directive";
|
|
22
|
-
import * as i12 from "../rendering/link.directive";
|
|
23
|
-
import * as i13 from "../rendering/arrow.component";
|
|
24
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
25
|
-
/**
|
|
26
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
27
|
-
* definition for the ContextMenu component.
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
*
|
|
31
|
-
* ```ts-no-run
|
|
32
|
-
* // Import the ContextMenu module
|
|
33
|
-
* import { ContextMenuModule } from '@progress/kendo-angular-menu';
|
|
34
|
-
*
|
|
35
|
-
* // The browser platform with a compiler
|
|
36
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
37
|
-
* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
38
|
-
*
|
|
39
|
-
* import { NgModule } from '@angular/core';
|
|
40
|
-
*
|
|
41
|
-
* // Import the app component
|
|
42
|
-
* import { AppComponent } from './app.component';
|
|
43
|
-
*
|
|
44
|
-
* // Define the app module
|
|
45
|
-
* _@NgModule({
|
|
46
|
-
* declarations: [AppComponent], // declare app component
|
|
47
|
-
* imports: [BrowserModule, BrowserAnimationsModule, ContextMenuModule], // import ContextMenuModule module
|
|
48
|
-
* bootstrap: [AppComponent]
|
|
49
|
-
* })
|
|
50
|
-
* export class AppModule {}
|
|
51
|
-
*
|
|
52
|
-
* // Compile and launch the module
|
|
53
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
54
|
-
*
|
|
55
|
-
* ```
|
|
56
|
-
*/
|
|
57
|
-
export class ContextMenuModule {
|
|
58
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
59
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuModule, imports: [i1.ContextMenuComponent, i2.ContextMenuTemplateDirective, i3.ContextMenuTargetDirective, i4.ContextMenuTargetContainerDirective, i5.MenuComponent, i6.MenuItemComponent, i7.ItemTemplateDirective, i8.ItemLinkTemplateDirective, i9.ItemContentTemplateDirective, i10.HierarchyBindingDirective, i11.FlatBindingDirective, i12.LinkDirective, i13.ExpandArrowComponent], exports: [i1.ContextMenuComponent, i2.ContextMenuTemplateDirective, i3.ContextMenuTargetDirective, i4.ContextMenuTargetContainerDirective, i5.MenuComponent, i6.MenuItemComponent, i7.ItemTemplateDirective, i8.ItemLinkTemplateDirective, i9.ItemContentTemplateDirective, i10.HierarchyBindingDirective, i11.FlatBindingDirective, i12.LinkDirective, i13.ExpandArrowComponent] });
|
|
60
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [i1.ContextMenuComponent, i5.MenuComponent, i13.ExpandArrowComponent] });
|
|
61
|
-
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuModule, decorators: [{
|
|
63
|
-
type: NgModule,
|
|
64
|
-
args: [{
|
|
65
|
-
exports: [...KENDO_CONTEXTMENU],
|
|
66
|
-
imports: [...KENDO_CONTEXTMENU],
|
|
67
|
-
providers: [PopupService, IconsService, ResizeBatchService]
|
|
68
|
-
}]
|
|
69
|
-
}] });
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Injectable, EventEmitter } from '@angular/core';
|
|
6
|
-
import { hasObservers } from '@progress/kendo-angular-common';
|
|
7
|
-
import { inMenu } from '../dom-queries';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export class ContextMenuService {
|
|
13
|
-
keydown = new EventEmitter();
|
|
14
|
-
owner;
|
|
15
|
-
items;
|
|
16
|
-
emit(name, args) {
|
|
17
|
-
this.owner.emitMenuEvent(name, args);
|
|
18
|
-
}
|
|
19
|
-
hasObservers(name) {
|
|
20
|
-
return this.owner && hasObservers(this.owner[name]);
|
|
21
|
-
}
|
|
22
|
-
leaveMenu(e) {
|
|
23
|
-
return this.items ? !inMenu(e.target, this.items) : true;
|
|
24
|
-
}
|
|
25
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
26
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuService });
|
|
27
|
-
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContextMenuService, decorators: [{
|
|
29
|
-
type: Injectable
|
|
30
|
-
}] });
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive } from '@angular/core';
|
|
6
|
-
import { MenuBase } from '../menu-base';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "../menu-base";
|
|
9
|
-
const ITEM_FIELDS = ['textField', 'urlField', 'iconField', 'svgIconField', 'disabledField', 'cssClassField', 'cssStyleField', 'separatorField'];
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export class BindingDirectiveBase {
|
|
14
|
-
menu;
|
|
15
|
-
data;
|
|
16
|
-
fields;
|
|
17
|
-
constructor(menu) {
|
|
18
|
-
this.menu = menu;
|
|
19
|
-
}
|
|
20
|
-
ngOnChanges() {
|
|
21
|
-
this.rebind();
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Rebinds the Menu items.
|
|
25
|
-
*/
|
|
26
|
-
rebind() {
|
|
27
|
-
const fields = this.fields = [];
|
|
28
|
-
for (let idx = 0; idx < ITEM_FIELDS.length; idx++) {
|
|
29
|
-
const inputName = ITEM_FIELDS[idx];
|
|
30
|
-
const inputValue = this[inputName];
|
|
31
|
-
if (inputValue) {
|
|
32
|
-
fields.push({ target: inputName.replace('Field', ''), source: inputValue });
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
this.menu.items = this.data ? this.mapItems(this.data) : [];
|
|
36
|
-
}
|
|
37
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BindingDirectiveBase, deps: [{ token: i1.MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
|
|
38
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: BindingDirectiveBase, selector: "kendoBindingBase", usesOnChanges: true, ngImport: i0 });
|
|
39
|
-
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BindingDirectiveBase, decorators: [{
|
|
41
|
-
type: Directive,
|
|
42
|
-
args: [{
|
|
43
|
-
// eslint-disable-next-line
|
|
44
|
-
selector: 'kendoBindingBase'
|
|
45
|
-
}]
|
|
46
|
-
}], ctorParameters: () => [{ type: i1.MenuBase }] });
|