@progress/kendo-angular-menu 17.0.0-develop.21 → 17.0.0-develop.23
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/context-menu/context-menu-target.directive.d.ts +1 -1
- package/context-menu/context-menu.component.d.ts +1 -1
- package/data-binding/flat-binding.directive.d.ts +1 -1
- package/data-binding/hierachy-binding.directive.d.ts +1 -1
- package/{esm2020 → esm2022}/context-menu/context-menu-event.mjs +16 -0
- package/{esm2020 → esm2022}/context-menu/context-menu-items.service.mjs +4 -3
- package/{esm2020 → esm2022}/context-menu/context-menu-popup-event.mjs +12 -0
- package/{esm2020 → esm2022}/context-menu/context-menu-select-event.mjs +4 -0
- package/{esm2020 → esm2022}/context-menu/context-menu-target-container.directive.mjs +8 -3
- package/{esm2020 → esm2022}/context-menu/context-menu-target.directive.mjs +16 -7
- package/{esm2020 → esm2022}/context-menu/context-menu-target.service.mjs +4 -6
- package/{esm2020 → esm2022}/context-menu/context-menu-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/context-menu/context-menu.component.mjs +123 -60
- package/{esm2020 → esm2022}/context-menu/context-menu.module.mjs +4 -4
- package/{esm2020 → esm2022}/context-menu/context-menu.service.mjs +6 -6
- package/{esm2020 → esm2022}/data-binding/binding-directive-base.mjs +6 -3
- package/{esm2020 → esm2022}/data-binding/flat-binding.directive.mjs +47 -3
- package/{esm2020 → esm2022}/data-binding/hierachy-binding.directive.mjs +43 -3
- package/{esm2020 → esm2022}/menu-base.mjs +49 -35
- package/{esm2020 → esm2022}/menu-event.mjs +12 -0
- package/{esm2020 → esm2022}/menu-item.component.mjs +28 -3
- package/{esm2020 → esm2022}/menu-select-event.mjs +4 -0
- package/{esm2020 → esm2022}/menu.component.mjs +73 -51
- package/{esm2020 → esm2022}/menu.module.mjs +4 -4
- package/{esm2020 → esm2022}/menus.module.mjs +4 -4
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/preventable-event.mjs +7 -7
- package/{esm2020 → esm2022}/rendering/arrow.component.mjs +19 -5
- package/{esm2020 → esm2022}/rendering/link.directive.mjs +15 -9
- package/{esm2020 → esm2022}/rendering/list.component.mjs +73 -35
- package/{esm2020 → esm2022}/services/actions.service.mjs +19 -4
- package/{esm2020 → esm2022}/services/hover.service.mjs +13 -10
- package/{esm2020 → esm2022}/services/items.service.mjs +6 -8
- package/{esm2020 → esm2022}/services/navigation.service.mjs +16 -11
- package/{esm2020 → esm2022}/templates/item-content-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/templates/item-link-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/templates/item-template.directive.mjs +4 -3
- package/{fesm2020 → fesm2022}/progress-kendo-angular-menu.mjs +653 -298
- package/menu-base.d.ts +1 -1
- package/menu-item.component.d.ts +1 -1
- package/menu.component.d.ts +1 -1
- package/package.json +14 -20
- package/rendering/arrow.component.d.ts +1 -1
- package/rendering/link.directive.d.ts +1 -1
- package/rendering/list.component.d.ts +2 -2
- package/size.d.ts +1 -1
- package/fesm2015/progress-kendo-angular-menu.mjs +0 -3195
- /package/{esm2020 → esm2022}/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/data-binding/utils.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/dom-queries.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/menu-animation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/menu-item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/open-on-click-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-menu.mjs +0 -0
- /package/{esm2020 → esm2022}/rendering/popup-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/size.mjs +0 -0
- /package/{esm2020 → esm2022}/utils.mjs +0 -0
|
@@ -1,3195 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as i0 from '@angular/core';
|
|
6
|
-
import { Injectable, NgZone, Directive, Optional, Component, Input, ContentChildren, ElementRef, EventEmitter, forwardRef, ViewChild, HostBinding, Output, isDevMode, ContentChild, NgModule } from '@angular/core';
|
|
7
|
-
import { NgFor, NgIf, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
8
|
-
import * as i3 from '@progress/kendo-angular-l10n';
|
|
9
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
10
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
11
|
-
import { PreventableEvent as PreventableEvent$1, hasObservers, isDocumentAvailable, Keys, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
12
|
-
import { caretAltLeftIcon, caretAltRightIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
|
|
13
|
-
import * as i5 from '@progress/kendo-angular-popup';
|
|
14
|
-
import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
|
|
15
|
-
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
const packageMetadata = {
|
|
21
|
-
name: '@progress/kendo-angular-menu',
|
|
22
|
-
productName: 'Kendo UI for Angular',
|
|
23
|
-
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
24
|
-
publishDate: 1729874176,
|
|
25
|
-
version: '17.0.0-develop.21',
|
|
26
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const PARENT_REGEX = /_?\d+$/;
|
|
30
|
-
const SEPARATOR = '_';
|
|
31
|
-
let id = 0;
|
|
32
|
-
const itemIndexComparer = (a, b) => a.siblingIndex - b.siblingIndex;
|
|
33
|
-
const next = (idx, items, dir) => {
|
|
34
|
-
let current = items[idx + dir];
|
|
35
|
-
while (!current) {
|
|
36
|
-
if (idx < 0) {
|
|
37
|
-
idx = items.length - 1;
|
|
38
|
-
}
|
|
39
|
-
else if (idx >= items.length) {
|
|
40
|
-
idx = 0;
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
idx += dir;
|
|
44
|
-
}
|
|
45
|
-
current = items[idx];
|
|
46
|
-
}
|
|
47
|
-
return current;
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* @hidden
|
|
51
|
-
*/
|
|
52
|
-
class ItemsService {
|
|
53
|
-
constructor() {
|
|
54
|
-
this.items = {};
|
|
55
|
-
this.lists = [];
|
|
56
|
-
this.idPrefix = `k-menu${id++}`;
|
|
57
|
-
}
|
|
58
|
-
get hasItems() {
|
|
59
|
-
return Object.keys(this.items).length > 0;
|
|
60
|
-
}
|
|
61
|
-
childId(index) {
|
|
62
|
-
return `${this.idPrefix}-child${index}`;
|
|
63
|
-
}
|
|
64
|
-
itemIndex(parentIndex, index) {
|
|
65
|
-
return (parentIndex ? parentIndex + SEPARATOR : '') + index;
|
|
66
|
-
}
|
|
67
|
-
get(index) {
|
|
68
|
-
return this.items[index];
|
|
69
|
-
}
|
|
70
|
-
add(item) {
|
|
71
|
-
this.items[item.index] = item;
|
|
72
|
-
}
|
|
73
|
-
remove(item) {
|
|
74
|
-
if (this.items[item.index] === item) {
|
|
75
|
-
delete this.items[item.index];
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
addList(list) {
|
|
79
|
-
this.lists.push(list);
|
|
80
|
-
}
|
|
81
|
-
removeList(list) {
|
|
82
|
-
const index = this.lists.indexOf(list);
|
|
83
|
-
if (index >= 0) {
|
|
84
|
-
this.lists.splice(index, 1);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
containsList(element) {
|
|
88
|
-
return Boolean(this.lists.find(list => list.element.nativeElement === element));
|
|
89
|
-
}
|
|
90
|
-
siblings(item) {
|
|
91
|
-
const parentIndex = this.parentIndex(item.index);
|
|
92
|
-
return this.filter((index) => this.parentIndex(index) === parentIndex);
|
|
93
|
-
}
|
|
94
|
-
otherSiblings(item) {
|
|
95
|
-
const parentIndex = this.parentIndex(item.index);
|
|
96
|
-
return this.filter((index) => this.parentIndex(index) === parentIndex && index !== item.index);
|
|
97
|
-
}
|
|
98
|
-
children(item) {
|
|
99
|
-
return this.filter((index) => this.parentIndex(index) === item.index);
|
|
100
|
-
}
|
|
101
|
-
parent(item) {
|
|
102
|
-
return this.items[this.parentIndex(item.index)];
|
|
103
|
-
}
|
|
104
|
-
root(item) {
|
|
105
|
-
return this.items[this.indices(item.index)[0]];
|
|
106
|
-
}
|
|
107
|
-
indices(index) {
|
|
108
|
-
return index.split(SEPARATOR);
|
|
109
|
-
}
|
|
110
|
-
filter(predicate) {
|
|
111
|
-
const result = [];
|
|
112
|
-
const items = this.items;
|
|
113
|
-
for (const index in items) {
|
|
114
|
-
if (predicate(index, items[index])) {
|
|
115
|
-
result.push(items[index]);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
return result.sort(itemIndexComparer);
|
|
119
|
-
}
|
|
120
|
-
previous(item) {
|
|
121
|
-
const siblings = this.siblings(item);
|
|
122
|
-
const itemIndex = siblings.indexOf(item);
|
|
123
|
-
return next(itemIndex, siblings, -1);
|
|
124
|
-
}
|
|
125
|
-
next(item) {
|
|
126
|
-
const siblings = this.siblings(item);
|
|
127
|
-
const itemIndex = siblings.indexOf(item);
|
|
128
|
-
return next(itemIndex, siblings, 1);
|
|
129
|
-
}
|
|
130
|
-
hasParent(item, parent) {
|
|
131
|
-
return item.index.startsWith(parent.index);
|
|
132
|
-
}
|
|
133
|
-
areSiblings(item1, item2) {
|
|
134
|
-
return item1 !== item2 && this.parent(item1) === this.parent(item2);
|
|
135
|
-
}
|
|
136
|
-
forEach(callback) {
|
|
137
|
-
const items = this.items;
|
|
138
|
-
for (const index in items) {
|
|
139
|
-
if (items.hasOwnProperty(index)) {
|
|
140
|
-
callback(items[index]);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
parentIndex(index) {
|
|
145
|
-
return index.replace(PARENT_REGEX, '');
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
ItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
149
|
-
ItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemsService });
|
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemsService, decorators: [{
|
|
151
|
-
type: Injectable
|
|
152
|
-
}] });
|
|
153
|
-
|
|
154
|
-
const canPerformAction = (item, action) => !((action === 'open' && item.opened) || (action === 'close' && !item.opened));
|
|
155
|
-
/**
|
|
156
|
-
* Used to remove cyclic dependency error. Dublicates MenuEvent
|
|
157
|
-
* @hidden
|
|
158
|
-
*/
|
|
159
|
-
class MenuStateEvent extends PreventableEvent$1 {
|
|
160
|
-
constructor(args) {
|
|
161
|
-
super();
|
|
162
|
-
Object.assign(this, args);
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
/**
|
|
166
|
-
* @hidden
|
|
167
|
-
*/
|
|
168
|
-
class ActionsService {
|
|
169
|
-
constructor(ngZone, items) {
|
|
170
|
-
this.ngZone = ngZone;
|
|
171
|
-
this.items = items;
|
|
172
|
-
this.actions = [];
|
|
173
|
-
}
|
|
174
|
-
open(item, finished) {
|
|
175
|
-
if (item.disabled) {
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
if (item.hasContent && !item.opened) {
|
|
179
|
-
this.actions.push({
|
|
180
|
-
name: 'open',
|
|
181
|
-
requiresZone: item.hasContentTemplates(),
|
|
182
|
-
item,
|
|
183
|
-
finished
|
|
184
|
-
});
|
|
185
|
-
}
|
|
186
|
-
else if (finished) {
|
|
187
|
-
finished();
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
close(item) {
|
|
191
|
-
this.closeChildren(item);
|
|
192
|
-
this.closeItem(item);
|
|
193
|
-
}
|
|
194
|
-
closeItem(item) {
|
|
195
|
-
if (item.opened) {
|
|
196
|
-
this.actions.push({
|
|
197
|
-
name: 'close',
|
|
198
|
-
item
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
closeToRoot(item) {
|
|
203
|
-
this.closeChildren(item);
|
|
204
|
-
let current = item;
|
|
205
|
-
do {
|
|
206
|
-
this.closeItem(current);
|
|
207
|
-
current = this.items.parent(current);
|
|
208
|
-
} while (current);
|
|
209
|
-
}
|
|
210
|
-
closeOthers(item) {
|
|
211
|
-
this.closeChildren(item);
|
|
212
|
-
let current = item;
|
|
213
|
-
while (current) {
|
|
214
|
-
const siblings = this.items.otherSiblings(current);
|
|
215
|
-
this.closeItems(siblings);
|
|
216
|
-
current = this.items.parent(current);
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
closeAll() {
|
|
220
|
-
this.items.forEach((item) => {
|
|
221
|
-
if (item.opened && item.level === 0) {
|
|
222
|
-
this.close(item);
|
|
223
|
-
}
|
|
224
|
-
});
|
|
225
|
-
}
|
|
226
|
-
select(item, domEvent, prevented, finished) {
|
|
227
|
-
this.actions.push({
|
|
228
|
-
name: 'select',
|
|
229
|
-
item,
|
|
230
|
-
prevented,
|
|
231
|
-
finished,
|
|
232
|
-
domEvent
|
|
233
|
-
});
|
|
234
|
-
}
|
|
235
|
-
emit(name, item, domEvent) {
|
|
236
|
-
const owner = this.owner;
|
|
237
|
-
const eventArgs = new MenuStateEvent({
|
|
238
|
-
sender: owner,
|
|
239
|
-
item: item.item,
|
|
240
|
-
index: item.index,
|
|
241
|
-
originalEvent: domEvent,
|
|
242
|
-
hasContent: item.hasContent
|
|
243
|
-
});
|
|
244
|
-
owner[name].emit(eventArgs);
|
|
245
|
-
if (owner.contextService) {
|
|
246
|
-
owner.contextService.emit(name, eventArgs);
|
|
247
|
-
}
|
|
248
|
-
return eventArgs.isDefaultPrevented();
|
|
249
|
-
}
|
|
250
|
-
get hasPending() {
|
|
251
|
-
return this.actions.length > 0;
|
|
252
|
-
}
|
|
253
|
-
execute(toExecute) {
|
|
254
|
-
if (!this.hasPending && !toExecute) {
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
const actions = toExecute || this.clear();
|
|
258
|
-
if (!NgZone.isInAngularZone() && this.requiresZone(actions)) {
|
|
259
|
-
this.ngZone.run(() => {
|
|
260
|
-
this.executeActions(actions);
|
|
261
|
-
});
|
|
262
|
-
}
|
|
263
|
-
else {
|
|
264
|
-
this.executeActions(actions);
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
clear() {
|
|
268
|
-
const actions = this.actions;
|
|
269
|
-
this.actions = [];
|
|
270
|
-
return actions;
|
|
271
|
-
}
|
|
272
|
-
executeActions(actions) {
|
|
273
|
-
for (let idx = 0; idx < actions.length; idx++) {
|
|
274
|
-
const { item, name, prevented, finished, domEvent } = actions[idx];
|
|
275
|
-
if (!canPerformAction(item, name)) {
|
|
276
|
-
continue;
|
|
277
|
-
}
|
|
278
|
-
if (!this.emit(name, item, domEvent)) {
|
|
279
|
-
if (item[name]) {
|
|
280
|
-
item[name]();
|
|
281
|
-
}
|
|
282
|
-
if (finished) {
|
|
283
|
-
finished();
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
else if (prevented) {
|
|
287
|
-
prevented();
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
requiresZone(toExecute) {
|
|
292
|
-
const actions = toExecute || this.actions;
|
|
293
|
-
const owner = this.owner;
|
|
294
|
-
const contextService = owner.contextService;
|
|
295
|
-
for (let idx = 0; idx < actions.length; idx++) {
|
|
296
|
-
const action = actions[idx];
|
|
297
|
-
const name = action.name;
|
|
298
|
-
if (action.requiresZone || (name && (hasObservers(owner[name]) || (contextService && contextService.hasObservers(name))))) {
|
|
299
|
-
return true;
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
return false;
|
|
303
|
-
}
|
|
304
|
-
closeChildren(item) {
|
|
305
|
-
if (!item.opened) {
|
|
306
|
-
return;
|
|
307
|
-
}
|
|
308
|
-
const children = this.items.children(item);
|
|
309
|
-
this.closeItems(children);
|
|
310
|
-
}
|
|
311
|
-
closeItems(items) {
|
|
312
|
-
for (let idx = 0; idx < items.length; idx++) {
|
|
313
|
-
this.close(items[idx]);
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
ActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionsService, deps: [{ token: i0.NgZone }, { token: ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
318
|
-
ActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionsService });
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionsService, decorators: [{
|
|
320
|
-
type: Injectable
|
|
321
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ItemsService }]; } });
|
|
322
|
-
|
|
323
|
-
const DEFAULT_ACTIVE = '0';
|
|
324
|
-
const NO_SPACE_REGEX = /\S/;
|
|
325
|
-
const handlers = {};
|
|
326
|
-
handlers['37'] = 'left';
|
|
327
|
-
handlers['39'] = 'right';
|
|
328
|
-
handlers['38'] = 'up';
|
|
329
|
-
handlers['40'] = 'down';
|
|
330
|
-
handlers['36'] = 'home';
|
|
331
|
-
handlers['35'] = 'end';
|
|
332
|
-
handlers['32'] = 'enter';
|
|
333
|
-
handlers['13'] = 'enter';
|
|
334
|
-
handlers['27'] = 'esc';
|
|
335
|
-
handlers['9'] = 'tab';
|
|
336
|
-
const handlersRTL = Object.assign({}, handlers, {
|
|
337
|
-
'37': 'right',
|
|
338
|
-
'39': 'left'
|
|
339
|
-
});
|
|
340
|
-
function isPrintableCharacter(key) {
|
|
341
|
-
return key.length === 1 && NO_SPACE_REGEX.test(key);
|
|
342
|
-
}
|
|
343
|
-
const resolvedPromise = Promise.resolve(null);
|
|
344
|
-
/**
|
|
345
|
-
* @hidden
|
|
346
|
-
*/
|
|
347
|
-
class NavigationService {
|
|
348
|
-
constructor(items, actions, localization, ngZone) {
|
|
349
|
-
this.items = items;
|
|
350
|
-
this.actions = actions;
|
|
351
|
-
this.localization = localization;
|
|
352
|
-
this.ngZone = ngZone;
|
|
353
|
-
this.vertical = false;
|
|
354
|
-
this.activeIndex = DEFAULT_ACTIVE;
|
|
355
|
-
}
|
|
356
|
-
get focusedItem() {
|
|
357
|
-
return this.items.get(this.focusedIdx);
|
|
358
|
-
}
|
|
359
|
-
get activeItem() {
|
|
360
|
-
return this.items.get(this.activeIndex);
|
|
361
|
-
}
|
|
362
|
-
get handlers() {
|
|
363
|
-
return this.localization.rtl ? handlersRTL : handlers;
|
|
364
|
-
}
|
|
365
|
-
focus(item) {
|
|
366
|
-
if (item.index === this.focusedIdx) {
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
369
|
-
if (!this.activeItem || !this.items.hasParent(item, this.activeItem)) {
|
|
370
|
-
this.setActive(item);
|
|
371
|
-
}
|
|
372
|
-
this.setFocus(item);
|
|
373
|
-
}
|
|
374
|
-
setFocus(item) {
|
|
375
|
-
this.focusedIdx = item.index;
|
|
376
|
-
item.focus();
|
|
377
|
-
}
|
|
378
|
-
focusLeave() {
|
|
379
|
-
const focused = this.focusedItem;
|
|
380
|
-
if (focused) {
|
|
381
|
-
this.actions.closeToRoot(focused);
|
|
382
|
-
this.actions.execute();
|
|
383
|
-
}
|
|
384
|
-
this.focusedIdx = null;
|
|
385
|
-
}
|
|
386
|
-
updateActive() {
|
|
387
|
-
if (!this.activeItem && this.items.hasItems) {
|
|
388
|
-
const firstItem = this.items.get(DEFAULT_ACTIVE);
|
|
389
|
-
firstItem.toggleActive(true);
|
|
390
|
-
this.ngZone.runOutsideAngular(() => {
|
|
391
|
-
resolvedPromise.then(() => {
|
|
392
|
-
this.activeIndex = DEFAULT_ACTIVE;
|
|
393
|
-
});
|
|
394
|
-
});
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
keydown(e) {
|
|
398
|
-
const current = this.focusedItem || this.activeItem;
|
|
399
|
-
const handler = this.handlers[e.keyCode];
|
|
400
|
-
if (!current) {
|
|
401
|
-
return;
|
|
402
|
-
}
|
|
403
|
-
if (handler) {
|
|
404
|
-
if (handler !== 'tab') {
|
|
405
|
-
e.preventDefault();
|
|
406
|
-
}
|
|
407
|
-
this[handler](current, e);
|
|
408
|
-
}
|
|
409
|
-
else if (isPrintableCharacter(e.key)) {
|
|
410
|
-
this.search(current, e.key);
|
|
411
|
-
}
|
|
412
|
-
this.actions.execute();
|
|
413
|
-
}
|
|
414
|
-
focusIndex(index) {
|
|
415
|
-
if (!index && this.activeItem) {
|
|
416
|
-
this.setFocus(this.activeItem);
|
|
417
|
-
}
|
|
418
|
-
else if (index === 'first') {
|
|
419
|
-
this.focusFirst();
|
|
420
|
-
}
|
|
421
|
-
else if (index === 'last') {
|
|
422
|
-
this.focusLast();
|
|
423
|
-
}
|
|
424
|
-
else {
|
|
425
|
-
const item = this.items.get(index);
|
|
426
|
-
if (item) {
|
|
427
|
-
this.focus(item);
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
focusFirst() {
|
|
432
|
-
const items = this.items.siblings(this.items.get('0'));
|
|
433
|
-
this.focus(items[0]);
|
|
434
|
-
}
|
|
435
|
-
focusLast() {
|
|
436
|
-
const items = this.items.siblings(this.items.get('0'));
|
|
437
|
-
this.focus(items[items.length - 1]);
|
|
438
|
-
}
|
|
439
|
-
search(current, key) {
|
|
440
|
-
const siblings = this.items.siblings(current);
|
|
441
|
-
const startIndex = siblings.indexOf(current);
|
|
442
|
-
const items = siblings.slice(startIndex + 1).concat(siblings.slice(0, startIndex));
|
|
443
|
-
for (let idx = 0; idx < items.length; idx++) {
|
|
444
|
-
const sibling = items[idx];
|
|
445
|
-
const text = sibling.item.text || "";
|
|
446
|
-
if (text.toLowerCase().startsWith(key.toLowerCase())) {
|
|
447
|
-
this.focus(sibling);
|
|
448
|
-
break;
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
}
|
|
452
|
-
down(current) {
|
|
453
|
-
if (current.level === 0 && !this.vertical) {
|
|
454
|
-
if (current.hasContent) {
|
|
455
|
-
this.actions.open(current, this.focusChild(current, 0));
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
else {
|
|
459
|
-
this.focus(this.items.next(current));
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
up(current) {
|
|
463
|
-
if (current.level === 0 && !this.vertical) {
|
|
464
|
-
if (current.hasContent) {
|
|
465
|
-
this.actions.open(current, this.focusChild(current, current.children.length - 1));
|
|
466
|
-
}
|
|
467
|
-
}
|
|
468
|
-
else {
|
|
469
|
-
this.focus(this.items.previous(current));
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
left(current) {
|
|
473
|
-
if (this.vertical && current.level === 0 && current.disabled) {
|
|
474
|
-
return;
|
|
475
|
-
}
|
|
476
|
-
if (current.level > 1 || (this.vertical && current.level > 0)) {
|
|
477
|
-
const parent = this.items.parent(current);
|
|
478
|
-
this.focus(parent);
|
|
479
|
-
this.actions.close(parent);
|
|
480
|
-
}
|
|
481
|
-
else if (this.vertical && current.level === 0 && !current.disabled) {
|
|
482
|
-
if (current.hasContent) {
|
|
483
|
-
this.actions.open(current, this.focusChild(current, current.children.length - 1));
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
else {
|
|
487
|
-
this.focus(this.items.previous(this.activeItem));
|
|
488
|
-
}
|
|
489
|
-
}
|
|
490
|
-
right(current) {
|
|
491
|
-
if (this.vertical && current.level === 0 && current.disabled) {
|
|
492
|
-
return;
|
|
493
|
-
}
|
|
494
|
-
if (current.horizontal && !current.disabled) {
|
|
495
|
-
if (current.hasContent) {
|
|
496
|
-
this.actions.open(current, this.focusChild(current, 0));
|
|
497
|
-
}
|
|
498
|
-
else if (!this.vertical || current.level > 0) {
|
|
499
|
-
this.focus(this.items.next(this.activeItem));
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
else {
|
|
503
|
-
this.focus(this.items.next(this.activeItem));
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
home(current) {
|
|
507
|
-
const siblings = this.items.siblings(current);
|
|
508
|
-
this.focus(siblings[0]);
|
|
509
|
-
}
|
|
510
|
-
end(current) {
|
|
511
|
-
const siblings = this.items.siblings(current);
|
|
512
|
-
this.focus(siblings[siblings.length - 1]);
|
|
513
|
-
}
|
|
514
|
-
enter(current, domEvent) {
|
|
515
|
-
const actions = this.actions;
|
|
516
|
-
if (current.disabled) {
|
|
517
|
-
return;
|
|
518
|
-
}
|
|
519
|
-
if (current.hasContent) {
|
|
520
|
-
actions.select(current, domEvent);
|
|
521
|
-
actions.open(current, this.focusChild(current, 0));
|
|
522
|
-
}
|
|
523
|
-
else {
|
|
524
|
-
actions.select(current, domEvent, null, () => {
|
|
525
|
-
current.navigate();
|
|
526
|
-
});
|
|
527
|
-
this.focus(this.items.root(current));
|
|
528
|
-
actions.closeToRoot(current);
|
|
529
|
-
}
|
|
530
|
-
}
|
|
531
|
-
esc(current) {
|
|
532
|
-
if (current.level > 0) {
|
|
533
|
-
const parent = this.items.parent(current);
|
|
534
|
-
this.actions.close(parent);
|
|
535
|
-
this.focus(parent);
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
tab(current) {
|
|
539
|
-
if (current.level > 0) {
|
|
540
|
-
this.activeItem.focus();
|
|
541
|
-
}
|
|
542
|
-
}
|
|
543
|
-
focusChild(item, index) {
|
|
544
|
-
return () => {
|
|
545
|
-
const child = this.items.children(item)[index];
|
|
546
|
-
this.setFocus(child);
|
|
547
|
-
};
|
|
548
|
-
}
|
|
549
|
-
setActive(item) {
|
|
550
|
-
const focused = this.focusedItem;
|
|
551
|
-
const active = this.items.root(item);
|
|
552
|
-
if (this.activeItem) {
|
|
553
|
-
this.activeItem.toggleActive(false);
|
|
554
|
-
}
|
|
555
|
-
this.activeIndex = active.index;
|
|
556
|
-
active.toggleActive(true);
|
|
557
|
-
if (focused) {
|
|
558
|
-
this.actions.closeToRoot(focused);
|
|
559
|
-
if (focused.level > 0) {
|
|
560
|
-
this.actions.open(active);
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
}
|
|
565
|
-
NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: ItemsService }, { token: ActionsService }, { token: i3.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
566
|
-
NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
|
|
567
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
|
|
568
|
-
type: Injectable
|
|
569
|
-
}], ctorParameters: function () { return [{ type: ItemsService }, { type: ActionsService }, { type: i3.LocalizationService }, { type: i0.NgZone }]; } });
|
|
570
|
-
|
|
571
|
-
const DISABLE_OPEN_ON_OVER_DELAY = 500;
|
|
572
|
-
/**
|
|
573
|
-
* @hidden
|
|
574
|
-
*/
|
|
575
|
-
class HoverService {
|
|
576
|
-
constructor(actions, items) {
|
|
577
|
-
this.actions = actions;
|
|
578
|
-
this.items = items;
|
|
579
|
-
this.delay = 100;
|
|
580
|
-
this._openOnOver = true;
|
|
581
|
-
this.scheduled = [];
|
|
582
|
-
}
|
|
583
|
-
get openOnOver() {
|
|
584
|
-
return this._openOnOver;
|
|
585
|
-
}
|
|
586
|
-
set openOnOver(value) {
|
|
587
|
-
this.cancelActions();
|
|
588
|
-
this._openOnOver = value;
|
|
589
|
-
}
|
|
590
|
-
get hovered() {
|
|
591
|
-
return this.items.get(this.hoveredIdx);
|
|
592
|
-
}
|
|
593
|
-
set hovered(item) {
|
|
594
|
-
this.hoveredIdx = item ? item.index : null;
|
|
595
|
-
}
|
|
596
|
-
ngOnDestroy() {
|
|
597
|
-
this.cancelActions();
|
|
598
|
-
}
|
|
599
|
-
over(item) {
|
|
600
|
-
this.cancelActions((action) => action.name === 'openOnOver');
|
|
601
|
-
if (!this.hovered || this.hovered !== item) {
|
|
602
|
-
this.actions.closeOthers(item);
|
|
603
|
-
this.hovered = item;
|
|
604
|
-
if ((item.level > 0 || this.openOnOver) && !item.disabled) {
|
|
605
|
-
this.actions.open(item);
|
|
606
|
-
this.cancelActions((action) => (action.name === 'close' && (item === action.item || this.items.hasParent(item, action.item))) ||
|
|
607
|
-
(action.name === 'open' && !this.items.hasParent(item, action.item)));
|
|
608
|
-
}
|
|
609
|
-
this.scheduleActions();
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
leave(disableOpenOnOver) {
|
|
613
|
-
const hovered = this.hovered;
|
|
614
|
-
if (hovered) {
|
|
615
|
-
this.actions.closeToRoot(hovered);
|
|
616
|
-
this.cancelActions(action => action.name === 'open');
|
|
617
|
-
this.scheduleActions();
|
|
618
|
-
}
|
|
619
|
-
if (disableOpenOnOver && this._openOnOver) {
|
|
620
|
-
this.scheduleDisableOpenOnOver();
|
|
621
|
-
}
|
|
622
|
-
this.hovered = null;
|
|
623
|
-
}
|
|
624
|
-
closeCurrent() {
|
|
625
|
-
const hovered = this.hovered;
|
|
626
|
-
if (hovered) {
|
|
627
|
-
this.actions.closeToRoot(hovered);
|
|
628
|
-
this.hovered = null;
|
|
629
|
-
}
|
|
630
|
-
}
|
|
631
|
-
scheduleActions() {
|
|
632
|
-
if (this.actions.hasPending) {
|
|
633
|
-
const item = {};
|
|
634
|
-
item.actions = this.actions.clear();
|
|
635
|
-
item.id = setTimeout(() => {
|
|
636
|
-
this.actions.execute(item.actions);
|
|
637
|
-
this.removeScheduled(item);
|
|
638
|
-
}, this.delay);
|
|
639
|
-
this.scheduled.push(item);
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
scheduleDisableOpenOnOver() {
|
|
643
|
-
const item = {
|
|
644
|
-
actions: [{ name: 'openOnOver' }]
|
|
645
|
-
};
|
|
646
|
-
item.id = setTimeout(() => {
|
|
647
|
-
this._openOnOver = false;
|
|
648
|
-
this.removeScheduled(item);
|
|
649
|
-
}, Math.max(this.delay, DISABLE_OPEN_ON_OVER_DELAY));
|
|
650
|
-
this.scheduled.push(item);
|
|
651
|
-
}
|
|
652
|
-
removeScheduled(item) {
|
|
653
|
-
const scheduled = this.scheduled;
|
|
654
|
-
for (let idx = 0; idx < scheduled.length; idx++) {
|
|
655
|
-
if (scheduled[idx] === item) {
|
|
656
|
-
scheduled.splice(idx, 1);
|
|
657
|
-
return;
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
}
|
|
661
|
-
cancelActions(predicate) {
|
|
662
|
-
const scheduled = this.scheduled;
|
|
663
|
-
for (let idx = scheduled.length - 1; idx >= 0; idx--) {
|
|
664
|
-
const item = scheduled[idx];
|
|
665
|
-
const actions = item.actions;
|
|
666
|
-
if (predicate) {
|
|
667
|
-
for (let actionIdx = actions.length - 1; actionIdx >= 0; actionIdx--) {
|
|
668
|
-
if (predicate(actions[actionIdx])) {
|
|
669
|
-
actions.splice(actionIdx, 1);
|
|
670
|
-
}
|
|
671
|
-
}
|
|
672
|
-
}
|
|
673
|
-
if (!predicate || actions.length === 0) {
|
|
674
|
-
clearTimeout(item.id);
|
|
675
|
-
scheduled.splice(idx, 1);
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
}
|
|
680
|
-
HoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoverService, deps: [{ token: ActionsService }, { token: ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
681
|
-
HoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoverService });
|
|
682
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HoverService, decorators: [{
|
|
683
|
-
type: Injectable
|
|
684
|
-
}], ctorParameters: function () { return [{ type: ActionsService }, { type: ItemsService }]; } });
|
|
685
|
-
|
|
686
|
-
/**
|
|
687
|
-
* @hidden
|
|
688
|
-
*/
|
|
689
|
-
const normalize = (settings) => settings && Object.assign({
|
|
690
|
-
toggle: 'select'
|
|
691
|
-
}, settings);
|
|
692
|
-
|
|
693
|
-
/**
|
|
694
|
-
* @hidden
|
|
695
|
-
*/
|
|
696
|
-
const NODE_INDEX = 'data-kendo-menu-index';
|
|
697
|
-
|
|
698
|
-
const DEFAULT_ID = 'kendo-matches-container';
|
|
699
|
-
const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
|
|
700
|
-
const matches = (element, selector) => (element.matches || element.msMatchesSelector).call(element, selector);
|
|
701
|
-
/**
|
|
702
|
-
* @hidden
|
|
703
|
-
*/
|
|
704
|
-
const closest = (node, predicate) => {
|
|
705
|
-
while (node && !predicate(node)) {
|
|
706
|
-
node = node.parentNode;
|
|
707
|
-
}
|
|
708
|
-
return node;
|
|
709
|
-
};
|
|
710
|
-
/**
|
|
711
|
-
* @hidden
|
|
712
|
-
*/
|
|
713
|
-
const closestInScope = (node, predicate, scope) => {
|
|
714
|
-
while (node && node !== scope && !predicate(node)) {
|
|
715
|
-
node = node.parentNode;
|
|
716
|
-
}
|
|
717
|
-
if (node !== scope) {
|
|
718
|
-
return node;
|
|
719
|
-
}
|
|
720
|
-
};
|
|
721
|
-
/**
|
|
722
|
-
* @hidden
|
|
723
|
-
*/
|
|
724
|
-
const isFocusable = (element) => {
|
|
725
|
-
if (element.tagName) {
|
|
726
|
-
const tagName = element.tagName.toLowerCase();
|
|
727
|
-
const tabIndex = element.getAttribute('tabIndex');
|
|
728
|
-
const skipTab = tabIndex === '-1';
|
|
729
|
-
let focusable = tabIndex !== null && !skipTab;
|
|
730
|
-
if (focusableRegex.test(tagName)) {
|
|
731
|
-
focusable = !element.disabled && !skipTab;
|
|
732
|
-
}
|
|
733
|
-
return focusable;
|
|
734
|
-
}
|
|
735
|
-
return false;
|
|
736
|
-
};
|
|
737
|
-
const toClassList = (classNames) => String(classNames).trim().split(' ');
|
|
738
|
-
/**
|
|
739
|
-
* @hidden
|
|
740
|
-
*/
|
|
741
|
-
const hasClass = (element, name) => {
|
|
742
|
-
return toClassList(element.className).indexOf(name) >= 0;
|
|
743
|
-
};
|
|
744
|
-
/**
|
|
745
|
-
* @hidden
|
|
746
|
-
*/
|
|
747
|
-
const matchesClasses = (classes) => {
|
|
748
|
-
const list = toClassList(classes);
|
|
749
|
-
return (element) => {
|
|
750
|
-
const classList = toClassList(element.className);
|
|
751
|
-
return Boolean(list.find(name => classList.indexOf(name) >= 0));
|
|
752
|
-
};
|
|
753
|
-
};
|
|
754
|
-
/**
|
|
755
|
-
* @hidden
|
|
756
|
-
*/
|
|
757
|
-
const nodeIndex = (node) => node.getAttribute(NODE_INDEX);
|
|
758
|
-
/**
|
|
759
|
-
* @hidden
|
|
760
|
-
*/
|
|
761
|
-
const closestItem = (node, scope) => closestInScope(node, nodeIndex, scope);
|
|
762
|
-
/**
|
|
763
|
-
* @hidden
|
|
764
|
-
*/
|
|
765
|
-
const closestList = (node) => {
|
|
766
|
-
let list = closest(node, matchesClasses('k-menu-popup k-menu k-menu-group'));
|
|
767
|
-
if (list && hasClass(list, 'k-menu-popup')) {
|
|
768
|
-
list = list.querySelector('.k-menu-group');
|
|
769
|
-
}
|
|
770
|
-
return list;
|
|
771
|
-
};
|
|
772
|
-
/**
|
|
773
|
-
* @hidden
|
|
774
|
-
*/
|
|
775
|
-
const inMenu = (node, itemsService) => {
|
|
776
|
-
if (node === itemsService.lists[0].element.nativeElement) {
|
|
777
|
-
return false;
|
|
778
|
-
}
|
|
779
|
-
const list = closestList(node);
|
|
780
|
-
return list && itemsService.containsList(list);
|
|
781
|
-
};
|
|
782
|
-
/**
|
|
783
|
-
* @hidden
|
|
784
|
-
*/
|
|
785
|
-
const findInContainer = (element, selector, container) => {
|
|
786
|
-
const id = container.getAttribute('id');
|
|
787
|
-
if (!id) {
|
|
788
|
-
container.setAttribute('id', DEFAULT_ID);
|
|
789
|
-
}
|
|
790
|
-
const contextSelector = `#${id || DEFAULT_ID} ${selector}`;
|
|
791
|
-
const match = closestInScope(element, node => matches(node, contextSelector), container);
|
|
792
|
-
if (!id) {
|
|
793
|
-
container.removeAttribute('id');
|
|
794
|
-
}
|
|
795
|
-
return match;
|
|
796
|
-
};
|
|
797
|
-
|
|
798
|
-
/**
|
|
799
|
-
* Represents a template for the Menu items ([see example]({% slug templates_menu %})). To define a template
|
|
800
|
-
* for an item, nest an `<ng-template>` tag with the `kendoMenuItemTemplate` directive inside a `<kendo-menu-item>`
|
|
801
|
-
* component. To define a template for all Menu items, nest the template inside the `<kendo-menu>` component.
|
|
802
|
-
*
|
|
803
|
-
* The available fields in the template context are:
|
|
804
|
-
* - `item`—The item data.
|
|
805
|
-
* - `index`—The item index.
|
|
806
|
-
*
|
|
807
|
-
* @example
|
|
808
|
-
* ```ts-preview
|
|
809
|
-
*
|
|
810
|
-
* _@Component({
|
|
811
|
-
* selector: 'my-app',
|
|
812
|
-
* template: `
|
|
813
|
-
* <kendo-menu>
|
|
814
|
-
* <kendo-menu-item text="item2">
|
|
815
|
-
* <ng-template kendoMenuItemTemplate let-item="item" let-index="index">
|
|
816
|
-
* <div style="padding: 10px;">
|
|
817
|
-
* My Template for: {{ item.text }} at index: {{ index }}
|
|
818
|
-
* </div>
|
|
819
|
-
* </ng-template>
|
|
820
|
-
* </kendo-menu-item>
|
|
821
|
-
* </kendo-menu>
|
|
822
|
-
* `
|
|
823
|
-
* })
|
|
824
|
-
*
|
|
825
|
-
* class AppComponent {
|
|
826
|
-
* }
|
|
827
|
-
* ```
|
|
828
|
-
*/
|
|
829
|
-
class ItemTemplateDirective {
|
|
830
|
-
constructor(templateRef) {
|
|
831
|
-
this.templateRef = templateRef;
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
835
|
-
ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoMenuItemTemplate]", ngImport: i0 });
|
|
836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
837
|
-
type: Directive,
|
|
838
|
-
args: [{
|
|
839
|
-
selector: '[kendoMenuItemTemplate]',
|
|
840
|
-
standalone: true
|
|
841
|
-
}]
|
|
842
|
-
}], ctorParameters: function () {
|
|
843
|
-
return [{ type: i0.TemplateRef, decorators: [{
|
|
844
|
-
type: Optional
|
|
845
|
-
}] }];
|
|
846
|
-
} });
|
|
847
|
-
|
|
848
|
-
/**
|
|
849
|
-
* Represents a template for the links of the Menu items ([see example]({% slug templates_menu %})). To define a template
|
|
850
|
-
* for an item, nest an `<ng-template>` tag with the `kendoMenuItemLinkTemplate` directive inside a `<kendo-menu-item>`
|
|
851
|
-
* component. To define a template for all Menu items, nest the template inside the `<kendo-menu>` component.
|
|
852
|
-
*
|
|
853
|
-
* The available fields in the template context are:
|
|
854
|
-
* - `item`—The item data.
|
|
855
|
-
* - `index`—The item index.
|
|
856
|
-
*
|
|
857
|
-
* @example
|
|
858
|
-
* ```ts-preview
|
|
859
|
-
*
|
|
860
|
-
* _@Component({
|
|
861
|
-
* selector: 'my-app',
|
|
862
|
-
* template: `
|
|
863
|
-
* <kendo-menu>
|
|
864
|
-
* <kendo-menu-item text="item2">
|
|
865
|
-
* <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
|
|
866
|
-
* <span [kendoMenuItemLink]="index">
|
|
867
|
-
* {{ item.text }}
|
|
868
|
-
* <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
|
|
869
|
-
* </span>
|
|
870
|
-
* </ng-template>
|
|
871
|
-
* </kendo-menu-item>
|
|
872
|
-
* </kendo-menu>
|
|
873
|
-
* `
|
|
874
|
-
* })
|
|
875
|
-
*
|
|
876
|
-
* class AppComponent {
|
|
877
|
-
* }
|
|
878
|
-
* ```
|
|
879
|
-
*/
|
|
880
|
-
class ItemLinkTemplateDirective {
|
|
881
|
-
constructor(templateRef) {
|
|
882
|
-
this.templateRef = templateRef;
|
|
883
|
-
}
|
|
884
|
-
}
|
|
885
|
-
ItemLinkTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemLinkTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
886
|
-
ItemLinkTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemLinkTemplateDirective, isStandalone: true, selector: "[kendoMenuItemLinkTemplate]", ngImport: i0 });
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemLinkTemplateDirective, decorators: [{
|
|
888
|
-
type: Directive,
|
|
889
|
-
args: [{
|
|
890
|
-
selector: '[kendoMenuItemLinkTemplate]',
|
|
891
|
-
standalone: true
|
|
892
|
-
}]
|
|
893
|
-
}], ctorParameters: function () {
|
|
894
|
-
return [{ type: i0.TemplateRef, decorators: [{
|
|
895
|
-
type: Optional
|
|
896
|
-
}] }];
|
|
897
|
-
} });
|
|
898
|
-
|
|
899
|
-
/**
|
|
900
|
-
* Represents a template for the content of the Menu items ([see example]({% slug templates_menu %})). To define the template,
|
|
901
|
-
* nest an `<ng-template>` tag with the `kendoMenuItemContentTemplate` directive inside a `<kendo-menu-item>` component.
|
|
902
|
-
*
|
|
903
|
-
* The available fields in the template context are:
|
|
904
|
-
* - `item`—The item data.
|
|
905
|
-
* - `index`—The item index.
|
|
906
|
-
*
|
|
907
|
-
* @example
|
|
908
|
-
* ```ts-preview
|
|
909
|
-
*
|
|
910
|
-
* _@Component({
|
|
911
|
-
* selector: 'my-app',
|
|
912
|
-
* template: `
|
|
913
|
-
* <kendo-menu>
|
|
914
|
-
* <kendo-menu-item text="item2">
|
|
915
|
-
* <ng-template kendoMenuItemContentTemplate let-item="item" let-index="index">
|
|
916
|
-
* <div style="padding: 10px;">
|
|
917
|
-
* My Content Template for: {{ item.text }} at index: {{ index }}
|
|
918
|
-
* </div>
|
|
919
|
-
* </ng-template>
|
|
920
|
-
* </kendo-menu-item>
|
|
921
|
-
* </kendo-menu>
|
|
922
|
-
* `
|
|
923
|
-
* })
|
|
924
|
-
*
|
|
925
|
-
* class AppComponent {
|
|
926
|
-
* }
|
|
927
|
-
* ```
|
|
928
|
-
*/
|
|
929
|
-
class ItemContentTemplateDirective {
|
|
930
|
-
constructor(templateRef) {
|
|
931
|
-
this.templateRef = templateRef;
|
|
932
|
-
}
|
|
933
|
-
}
|
|
934
|
-
ItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
935
|
-
ItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemContentTemplateDirective, isStandalone: true, selector: "[kendoMenuItemContentTemplate]", ngImport: i0 });
|
|
936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemContentTemplateDirective, decorators: [{
|
|
937
|
-
type: Directive,
|
|
938
|
-
args: [{
|
|
939
|
-
selector: '[kendoMenuItemContentTemplate]',
|
|
940
|
-
standalone: true
|
|
941
|
-
}]
|
|
942
|
-
}], ctorParameters: function () {
|
|
943
|
-
return [{ type: i0.TemplateRef, decorators: [{
|
|
944
|
-
type: Optional
|
|
945
|
-
}] }];
|
|
946
|
-
} });
|
|
947
|
-
|
|
948
|
-
/**
|
|
949
|
-
* A component that can be used to specify the Menu items
|
|
950
|
-
* ([more information and examples]({% slug items_menu %})).
|
|
951
|
-
*
|
|
952
|
-
* @example
|
|
953
|
-
* ```ts-preview
|
|
954
|
-
*
|
|
955
|
-
* _@Component({
|
|
956
|
-
* selector: 'my-app',
|
|
957
|
-
* template: `
|
|
958
|
-
* <kendo-menu>
|
|
959
|
-
* <kendo-menu-item text="item1">
|
|
960
|
-
* <kendo-menu-item text="item1.1" url="https://example.com">
|
|
961
|
-
* </kendo-menu-item>
|
|
962
|
-
* <kendo-menu-item text="item1.2" [disabled]="true">
|
|
963
|
-
* </kendo-menu-item>
|
|
964
|
-
* </kendo-menu-item>
|
|
965
|
-
* <kendo-menu-item text="item2">
|
|
966
|
-
* <ng-template kendoMenuItemContentTemplate let-item="item">
|
|
967
|
-
* <div style="padding: 10px;">
|
|
968
|
-
* My Content Template: {{ item.text }}
|
|
969
|
-
* </div>
|
|
970
|
-
* </ng-template>
|
|
971
|
-
* <ng-template kendoMenuItemTemplate let-item="item">
|
|
972
|
-
* <div style="padding: 10px;">
|
|
973
|
-
* My Template: {{ item.text }}
|
|
974
|
-
* </div>
|
|
975
|
-
* </ng-template>
|
|
976
|
-
* </kendo-menu-item>
|
|
977
|
-
* <kendo-menu-item text="item3">
|
|
978
|
-
* <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
|
|
979
|
-
* <span [kendoMenuItemLink]="index">
|
|
980
|
-
* {{ item.text }}
|
|
981
|
-
* <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
|
|
982
|
-
* </span>
|
|
983
|
-
* </ng-template>
|
|
984
|
-
* </kendo-menu-item>
|
|
985
|
-
* </kendo-menu>
|
|
986
|
-
* `
|
|
987
|
-
* })
|
|
988
|
-
*
|
|
989
|
-
* class AppComponent {
|
|
990
|
-
* }
|
|
991
|
-
* ```
|
|
992
|
-
*/
|
|
993
|
-
class MenuItemComponent {
|
|
994
|
-
/**
|
|
995
|
-
* @hidden
|
|
996
|
-
*/
|
|
997
|
-
get template() {
|
|
998
|
-
if (this.itemTemplate && this.itemTemplate.length) {
|
|
999
|
-
return this.itemTemplate.first.templateRef;
|
|
1000
|
-
}
|
|
1001
|
-
}
|
|
1002
|
-
/**
|
|
1003
|
-
* @hidden
|
|
1004
|
-
*/
|
|
1005
|
-
get linkTemplate() {
|
|
1006
|
-
if (this.itemLinkTemplate && this.itemLinkTemplate.length) {
|
|
1007
|
-
return this.itemLinkTemplate.first.templateRef;
|
|
1008
|
-
}
|
|
1009
|
-
}
|
|
1010
|
-
/**
|
|
1011
|
-
* @hidden
|
|
1012
|
-
*/
|
|
1013
|
-
get contentTemplate() {
|
|
1014
|
-
if (this.itemContentTemplate && this.itemContentTemplate.length) {
|
|
1015
|
-
return this.itemContentTemplate.first.templateRef;
|
|
1016
|
-
}
|
|
1017
|
-
}
|
|
1018
|
-
/**
|
|
1019
|
-
* @hidden
|
|
1020
|
-
*/
|
|
1021
|
-
get items() {
|
|
1022
|
-
if (this.children.length) {
|
|
1023
|
-
return this.children.toArray().filter(c => c !== this);
|
|
1024
|
-
}
|
|
1025
|
-
}
|
|
1026
|
-
}
|
|
1027
|
-
MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1028
|
-
MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuItemComponent, isStandalone: true, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
1030
|
-
type: Component,
|
|
1031
|
-
args: [{
|
|
1032
|
-
selector: 'kendo-menu-item',
|
|
1033
|
-
template: ``,
|
|
1034
|
-
standalone: true
|
|
1035
|
-
}]
|
|
1036
|
-
}], propDecorators: { text: [{
|
|
1037
|
-
type: Input
|
|
1038
|
-
}], url: [{
|
|
1039
|
-
type: Input
|
|
1040
|
-
}], disabled: [{
|
|
1041
|
-
type: Input
|
|
1042
|
-
}], cssClass: [{
|
|
1043
|
-
type: Input
|
|
1044
|
-
}], cssStyle: [{
|
|
1045
|
-
type: Input
|
|
1046
|
-
}], icon: [{
|
|
1047
|
-
type: Input
|
|
1048
|
-
}], svgIcon: [{
|
|
1049
|
-
type: Input
|
|
1050
|
-
}], data: [{
|
|
1051
|
-
type: Input
|
|
1052
|
-
}], separator: [{
|
|
1053
|
-
type: Input
|
|
1054
|
-
}], itemTemplate: [{
|
|
1055
|
-
type: ContentChildren,
|
|
1056
|
-
args: [ItemTemplateDirective]
|
|
1057
|
-
}], itemLinkTemplate: [{
|
|
1058
|
-
type: ContentChildren,
|
|
1059
|
-
args: [ItemLinkTemplateDirective]
|
|
1060
|
-
}], itemContentTemplate: [{
|
|
1061
|
-
type: ContentChildren,
|
|
1062
|
-
args: [ItemContentTemplateDirective]
|
|
1063
|
-
}], children: [{
|
|
1064
|
-
type: ContentChildren,
|
|
1065
|
-
args: [MenuItemComponent]
|
|
1066
|
-
}] } });
|
|
1067
|
-
|
|
1068
|
-
/**
|
|
1069
|
-
* @hidden
|
|
1070
|
-
*/
|
|
1071
|
-
class MenuBase {
|
|
1072
|
-
constructor() {
|
|
1073
|
-
/**
|
|
1074
|
-
* Specifies if the Menu will be vertical ([see example]({% slug vertical_menu %})).
|
|
1075
|
-
*/
|
|
1076
|
-
this.vertical = false;
|
|
1077
|
-
/**
|
|
1078
|
-
* Specifies that the root items can be opened only on click
|
|
1079
|
-
* ([see example]({% slug openclose_menu %}#toc-opening-on-click)).
|
|
1080
|
-
*/
|
|
1081
|
-
this.openOnClick = false;
|
|
1082
|
-
/**
|
|
1083
|
-
* Specifies the delay in milliseconds before the Menu items are opened or closed on item hover
|
|
1084
|
-
* or leave ([see example]({% slug openclose_menu %}#toc-delay-on-hover)). Used to avoid the accidental
|
|
1085
|
-
* opening or closing of the items.
|
|
1086
|
-
*/
|
|
1087
|
-
this.hoverDelay = 100;
|
|
1088
|
-
/**
|
|
1089
|
-
* Sets the Menu animation.
|
|
1090
|
-
*/
|
|
1091
|
-
this.animate = true;
|
|
1092
|
-
/**
|
|
1093
|
-
* Sets the Menu size.
|
|
1094
|
-
*
|
|
1095
|
-
* The possible values are:
|
|
1096
|
-
* * `small`
|
|
1097
|
-
* * `medium` (default)
|
|
1098
|
-
* * `large`
|
|
1099
|
-
* * `none`
|
|
1100
|
-
*
|
|
1101
|
-
*/
|
|
1102
|
-
this.size = 'medium';
|
|
1103
|
-
}
|
|
1104
|
-
/**
|
|
1105
|
-
* @hidden
|
|
1106
|
-
*/
|
|
1107
|
-
get rootItems() {
|
|
1108
|
-
return this.items || (this.children ? this.children.toArray() : []);
|
|
1109
|
-
}
|
|
1110
|
-
}
|
|
1111
|
-
MenuBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1112
|
-
MenuBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuBase, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuBase, decorators: [{
|
|
1114
|
-
type: Component,
|
|
1115
|
-
args: [{
|
|
1116
|
-
selector: 'kendo-menu-base',
|
|
1117
|
-
template: ``
|
|
1118
|
-
}]
|
|
1119
|
-
}], propDecorators: { items: [{
|
|
1120
|
-
type: Input
|
|
1121
|
-
}], vertical: [{
|
|
1122
|
-
type: Input
|
|
1123
|
-
}], openOnClick: [{
|
|
1124
|
-
type: Input
|
|
1125
|
-
}], hoverDelay: [{
|
|
1126
|
-
type: Input
|
|
1127
|
-
}], animate: [{
|
|
1128
|
-
type: Input
|
|
1129
|
-
}], size: [{
|
|
1130
|
-
type: Input
|
|
1131
|
-
}], itemTemplate: [{
|
|
1132
|
-
type: ContentChildren,
|
|
1133
|
-
args: [ItemTemplateDirective]
|
|
1134
|
-
}], itemLinkTemplate: [{
|
|
1135
|
-
type: ContentChildren,
|
|
1136
|
-
args: [ItemLinkTemplateDirective]
|
|
1137
|
-
}], children: [{
|
|
1138
|
-
type: ContentChildren,
|
|
1139
|
-
args: [MenuItemComponent]
|
|
1140
|
-
}] } });
|
|
1141
|
-
|
|
1142
|
-
/**
|
|
1143
|
-
* @hidden
|
|
1144
|
-
*/
|
|
1145
|
-
const defined = (value) => typeof value !== 'undefined';
|
|
1146
|
-
/**
|
|
1147
|
-
* @hidden
|
|
1148
|
-
*/
|
|
1149
|
-
const bodyFactory = () => {
|
|
1150
|
-
if (isDocumentAvailable()) {
|
|
1151
|
-
return new ElementRef(document.body);
|
|
1152
|
-
}
|
|
1153
|
-
};
|
|
1154
|
-
/**
|
|
1155
|
-
* @hidden
|
|
1156
|
-
*/
|
|
1157
|
-
const getSizeClass = (size) => {
|
|
1158
|
-
const SIZE_CLASSES = {
|
|
1159
|
-
'small': 'k-menu-group-sm',
|
|
1160
|
-
'medium': 'k-menu-group-md',
|
|
1161
|
-
'large': 'k-menu-group-lg'
|
|
1162
|
-
};
|
|
1163
|
-
return SIZE_CLASSES[size];
|
|
1164
|
-
};
|
|
1165
|
-
/**
|
|
1166
|
-
* @hidden
|
|
1167
|
-
*/
|
|
1168
|
-
const getFontIcon = (horizontal, rtl) => {
|
|
1169
|
-
const icon = horizontal ?
|
|
1170
|
-
rtl ?
|
|
1171
|
-
'caret-alt-left' :
|
|
1172
|
-
'caret-alt-right' :
|
|
1173
|
-
'caret-alt-down';
|
|
1174
|
-
return icon;
|
|
1175
|
-
};
|
|
1176
|
-
/**
|
|
1177
|
-
* @hidden
|
|
1178
|
-
*/
|
|
1179
|
-
const getSVGIcon = (horizontal, rtl) => {
|
|
1180
|
-
const icon = horizontal ?
|
|
1181
|
-
rtl ?
|
|
1182
|
-
caretAltLeftIcon :
|
|
1183
|
-
caretAltRightIcon :
|
|
1184
|
-
caretAltDownIcon;
|
|
1185
|
-
return icon;
|
|
1186
|
-
};
|
|
1187
|
-
|
|
1188
|
-
const POPUP_ALIGN = {
|
|
1189
|
-
vertical: 'top',
|
|
1190
|
-
horizontal: 'left'
|
|
1191
|
-
};
|
|
1192
|
-
const POPUP_ALIGN_RTL = {
|
|
1193
|
-
vertical: 'top',
|
|
1194
|
-
horizontal: 'right'
|
|
1195
|
-
};
|
|
1196
|
-
const VERTICAL_COLLISION = {
|
|
1197
|
-
vertical: 'flip',
|
|
1198
|
-
horizontal: 'fit'
|
|
1199
|
-
};
|
|
1200
|
-
const HORIZONTAL_COLLISION = {
|
|
1201
|
-
vertical: 'fit',
|
|
1202
|
-
horizontal: 'flip'
|
|
1203
|
-
};
|
|
1204
|
-
/**
|
|
1205
|
-
* @hidden
|
|
1206
|
-
*/
|
|
1207
|
-
const POPUP_SETTINGS_RTL = {
|
|
1208
|
-
vertical: {
|
|
1209
|
-
anchor: {
|
|
1210
|
-
vertical: 'bottom',
|
|
1211
|
-
horizontal: 'right'
|
|
1212
|
-
},
|
|
1213
|
-
popup: POPUP_ALIGN_RTL,
|
|
1214
|
-
collision: VERTICAL_COLLISION,
|
|
1215
|
-
animate: 'down'
|
|
1216
|
-
},
|
|
1217
|
-
horizontal: {
|
|
1218
|
-
anchor: {
|
|
1219
|
-
vertical: 'top',
|
|
1220
|
-
horizontal: 'left'
|
|
1221
|
-
},
|
|
1222
|
-
popup: POPUP_ALIGN_RTL,
|
|
1223
|
-
collision: HORIZONTAL_COLLISION,
|
|
1224
|
-
animate: 'left'
|
|
1225
|
-
}
|
|
1226
|
-
};
|
|
1227
|
-
/**
|
|
1228
|
-
* @hidden
|
|
1229
|
-
*/
|
|
1230
|
-
const POPUP_SETTINGS = {
|
|
1231
|
-
vertical: {
|
|
1232
|
-
anchor: {
|
|
1233
|
-
vertical: 'bottom',
|
|
1234
|
-
horizontal: 'left'
|
|
1235
|
-
},
|
|
1236
|
-
popup: POPUP_ALIGN,
|
|
1237
|
-
collision: VERTICAL_COLLISION,
|
|
1238
|
-
animate: 'down'
|
|
1239
|
-
},
|
|
1240
|
-
horizontal: {
|
|
1241
|
-
anchor: {
|
|
1242
|
-
vertical: 'top',
|
|
1243
|
-
horizontal: 'right'
|
|
1244
|
-
},
|
|
1245
|
-
popup: POPUP_ALIGN,
|
|
1246
|
-
collision: HORIZONTAL_COLLISION,
|
|
1247
|
-
animate: 'right'
|
|
1248
|
-
}
|
|
1249
|
-
};
|
|
1250
|
-
|
|
1251
|
-
/**
|
|
1252
|
-
* @hidden
|
|
1253
|
-
*/
|
|
1254
|
-
class ContextMenuService {
|
|
1255
|
-
constructor() {
|
|
1256
|
-
this.keydown = new EventEmitter();
|
|
1257
|
-
}
|
|
1258
|
-
emit(name, args) {
|
|
1259
|
-
this.owner.emitMenuEvent(name, args);
|
|
1260
|
-
}
|
|
1261
|
-
hasObservers(name) {
|
|
1262
|
-
return this.owner && hasObservers(this.owner[name]);
|
|
1263
|
-
}
|
|
1264
|
-
leaveMenu(e) {
|
|
1265
|
-
return this.items ? !inMenu(e.target, this.items) : true;
|
|
1266
|
-
}
|
|
1267
|
-
}
|
|
1268
|
-
ContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1269
|
-
ContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuService });
|
|
1270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuService, decorators: [{
|
|
1271
|
-
type: Injectable
|
|
1272
|
-
}] });
|
|
1273
|
-
|
|
1274
|
-
/* eslint-disable @angular-eslint/component-selector */
|
|
1275
|
-
/**
|
|
1276
|
-
* @hidden
|
|
1277
|
-
*/
|
|
1278
|
-
class ListComponent {
|
|
1279
|
-
constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
|
|
1280
|
-
this.itemsService = itemsService;
|
|
1281
|
-
this.hover = hover;
|
|
1282
|
-
this.actions = actions;
|
|
1283
|
-
this.navigation = navigation;
|
|
1284
|
-
this.renderer = renderer;
|
|
1285
|
-
this.ngZone = ngZone;
|
|
1286
|
-
this.element = element;
|
|
1287
|
-
this.animate = true;
|
|
1288
|
-
this.size = 'medium';
|
|
1289
|
-
}
|
|
1290
|
-
hierarchyIndex(index) {
|
|
1291
|
-
return this.itemsService.itemIndex(this.index, index);
|
|
1292
|
-
}
|
|
1293
|
-
ngOnInit() {
|
|
1294
|
-
this.itemsService.addList(this);
|
|
1295
|
-
this.initDomEvents();
|
|
1296
|
-
}
|
|
1297
|
-
ngOnDestroy() {
|
|
1298
|
-
this.itemsService.removeList(this);
|
|
1299
|
-
if (this.domSubscriptions) {
|
|
1300
|
-
this.domSubscriptions();
|
|
1301
|
-
}
|
|
1302
|
-
}
|
|
1303
|
-
initDomEvents() {
|
|
1304
|
-
if (!isDocumentAvailable() || !this.element) {
|
|
1305
|
-
return;
|
|
1306
|
-
}
|
|
1307
|
-
this.ngZone.runOutsideAngular(() => {
|
|
1308
|
-
const element = this.element.nativeElement;
|
|
1309
|
-
const container = this.level > 0 ? closest(element, (node) => hasClass(node, 'k-popup')) : element;
|
|
1310
|
-
const overSubscription = this.renderer.listen(element, 'mouseover', (e) => {
|
|
1311
|
-
if (e.target === element && this.level === 0) {
|
|
1312
|
-
this.onLeave();
|
|
1313
|
-
}
|
|
1314
|
-
else {
|
|
1315
|
-
const item = this.nodeItem(e.target) || this.itemsService.get(this.index);
|
|
1316
|
-
if (item && !(this.openOnClick && this.openOnClick.toggle === 'click' && item.level === 0 && !item.hasContent)) {
|
|
1317
|
-
this.hover.over(item);
|
|
1318
|
-
}
|
|
1319
|
-
}
|
|
1320
|
-
});
|
|
1321
|
-
const leaveSubscription = this.renderer.listen(container, 'mouseleave', (e) => {
|
|
1322
|
-
if (this.leavesMenu(e)) {
|
|
1323
|
-
this.onLeave();
|
|
1324
|
-
}
|
|
1325
|
-
});
|
|
1326
|
-
const keydownSubscription = this.renderer.listen(element, 'keydown', (e) => {
|
|
1327
|
-
if (hasClass(e.target, 'k-menu-item')) {
|
|
1328
|
-
this.navigation.keydown(e);
|
|
1329
|
-
}
|
|
1330
|
-
});
|
|
1331
|
-
const blurSubscription = this.renderer.listen(element, 'focusout', (e) => {
|
|
1332
|
-
if (this.leavesMenu(e)) {
|
|
1333
|
-
this.navigation.focusLeave();
|
|
1334
|
-
}
|
|
1335
|
-
});
|
|
1336
|
-
/**
|
|
1337
|
-
* Handle focus/blur open/close for iOS devices since it behaves inconsistently with the rest
|
|
1338
|
-
* Refer to: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
|
|
1339
|
-
*/
|
|
1340
|
-
const touchSubscription = this.renderer.listen(document, 'touchstart', (e) => {
|
|
1341
|
-
if (inMenu(e.target, this.itemsService)) {
|
|
1342
|
-
const item = this.nodeItem(e.target);
|
|
1343
|
-
// Needs to be called because the 'click' handler will be called only on secondary tap and the item will remain unfocused
|
|
1344
|
-
this.navigation.focus(item);
|
|
1345
|
-
// This is needed since the 'mouseover' event is not always dispatched
|
|
1346
|
-
if (!item.opened) {
|
|
1347
|
-
this.hover.over(item);
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
|
-
else if (this.navigation.focusedIdx) {
|
|
1351
|
-
// If the touch is outside of the menu and the menu is not currently in focus
|
|
1352
|
-
const activeItem = this.itemsService.get(this.navigation.activeIndex);
|
|
1353
|
-
this.onLeave(); // needs to be called explicitly since mouseleave event is not triggered
|
|
1354
|
-
activeItem.blur(); // needs to be called explicitly otherwise the item remains focused => triggers focusout
|
|
1355
|
-
}
|
|
1356
|
-
});
|
|
1357
|
-
const clickSubscription = this.renderer.listen(element, 'click', this.clickHandler.bind(this));
|
|
1358
|
-
this.domSubscriptions = () => {
|
|
1359
|
-
overSubscription();
|
|
1360
|
-
leaveSubscription();
|
|
1361
|
-
keydownSubscription();
|
|
1362
|
-
blurSubscription();
|
|
1363
|
-
clickSubscription();
|
|
1364
|
-
touchSubscription();
|
|
1365
|
-
};
|
|
1366
|
-
});
|
|
1367
|
-
}
|
|
1368
|
-
leavesMenu(e) {
|
|
1369
|
-
if (!e.relatedTarget) {
|
|
1370
|
-
return true;
|
|
1371
|
-
}
|
|
1372
|
-
return !inMenu(e.relatedTarget, this.itemsService);
|
|
1373
|
-
}
|
|
1374
|
-
onLeave() {
|
|
1375
|
-
const openOnClick = this.openOnClick;
|
|
1376
|
-
if (!openOnClick || openOnClick.toggle !== 'click') {
|
|
1377
|
-
this.hover.leave(openOnClick && openOnClick.toggle === 'leave');
|
|
1378
|
-
}
|
|
1379
|
-
}
|
|
1380
|
-
nodeItem(target) {
|
|
1381
|
-
const node = closestItem(target, this.element.nativeElement);
|
|
1382
|
-
if (node) {
|
|
1383
|
-
const index = nodeIndex(node);
|
|
1384
|
-
return this.itemsService.get(index);
|
|
1385
|
-
}
|
|
1386
|
-
}
|
|
1387
|
-
clickHandler(e) {
|
|
1388
|
-
if (isFocusable(e.target) && !hasClass(e.target, 'k-menu-item')) {
|
|
1389
|
-
return;
|
|
1390
|
-
}
|
|
1391
|
-
const item = this.nodeItem(e.target);
|
|
1392
|
-
if (!item || item.isContent || item.navigating) {
|
|
1393
|
-
return;
|
|
1394
|
-
}
|
|
1395
|
-
if (item.disabled) {
|
|
1396
|
-
e.preventDefault();
|
|
1397
|
-
return;
|
|
1398
|
-
}
|
|
1399
|
-
this.actions.select(item, e, () => {
|
|
1400
|
-
e.preventDefault();
|
|
1401
|
-
});
|
|
1402
|
-
this.navigation.focus(item);
|
|
1403
|
-
if (item.level > 0 && !item.hasContent) {
|
|
1404
|
-
this.actions.closeToRoot(item);
|
|
1405
|
-
}
|
|
1406
|
-
if (this.openOnClick) {
|
|
1407
|
-
const hover = this.hover;
|
|
1408
|
-
if (item.opened) {
|
|
1409
|
-
if (item.level === 0) {
|
|
1410
|
-
hover.openOnOver = false;
|
|
1411
|
-
this.actions.close(item);
|
|
1412
|
-
}
|
|
1413
|
-
}
|
|
1414
|
-
else if (item.hasContent) {
|
|
1415
|
-
hover.openOnOver = true;
|
|
1416
|
-
this.actions.closeOthers(item);
|
|
1417
|
-
this.actions.open(item);
|
|
1418
|
-
}
|
|
1419
|
-
else {
|
|
1420
|
-
hover.openOnOver = false;
|
|
1421
|
-
if (item.level === 0 && this.openOnClick.toggle === 'click') {
|
|
1422
|
-
this.hover.closeCurrent();
|
|
1423
|
-
}
|
|
1424
|
-
}
|
|
1425
|
-
}
|
|
1426
|
-
this.actions.execute();
|
|
1427
|
-
}
|
|
1428
|
-
}
|
|
1429
|
-
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1430
|
-
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [appendTo]=\"appendTo\"\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n \n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, decorators: [{
|
|
1432
|
-
type: Component,
|
|
1433
|
-
args: [{
|
|
1434
|
-
selector: '[kendoMenuList]',
|
|
1435
|
-
template: `
|
|
1436
|
-
<ng-container *ngFor="let item of items; let idx = index">
|
|
1437
|
-
<li *ngIf="!item.separator"
|
|
1438
|
-
kendoMenuItem
|
|
1439
|
-
[appendTo]="appendTo"
|
|
1440
|
-
[item]="item"
|
|
1441
|
-
[level]="level"
|
|
1442
|
-
[size]="size"
|
|
1443
|
-
[vertical]="vertical"
|
|
1444
|
-
[animate]="animate"
|
|
1445
|
-
[rtl]="rtl"
|
|
1446
|
-
[itemTemplate]="itemTemplate"
|
|
1447
|
-
[itemLinkTemplate]="itemLinkTemplate"
|
|
1448
|
-
[openOnClick]="openOnClick"
|
|
1449
|
-
[index]="hierarchyIndex(idx)"
|
|
1450
|
-
[siblingIndex]="idx"
|
|
1451
|
-
[attr.${NODE_INDEX}]="hierarchyIndex(idx)"
|
|
1452
|
-
[ngClass]="item.cssClass"
|
|
1453
|
-
[ngStyle]="item.cssStyle"
|
|
1454
|
-
role="menuitem"
|
|
1455
|
-
class="k-item k-menu-item"
|
|
1456
|
-
[class.k-first]="idx === 0"
|
|
1457
|
-
[class.k-last]="idx === items.length - 1"
|
|
1458
|
-
[class.k-disabled]="item.disabled"></li>
|
|
1459
|
-
<li
|
|
1460
|
-
*ngIf="item.separator"
|
|
1461
|
-
class="k-separator k-item"
|
|
1462
|
-
[ngClass]="item.cssClass"
|
|
1463
|
-
aria-hidden="true"
|
|
1464
|
-
[ngStyle]="item.cssStyle">
|
|
1465
|
-
|
|
1466
|
-
</li>
|
|
1467
|
-
</ng-container>
|
|
1468
|
-
`,
|
|
1469
|
-
standalone: true,
|
|
1470
|
-
imports: [NgFor, NgIf, forwardRef(() => ItemComponent), NgClass, NgStyle]
|
|
1471
|
-
}]
|
|
1472
|
-
}], ctorParameters: function () { return [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { appendTo: [{
|
|
1473
|
-
type: Input
|
|
1474
|
-
}], items: [{
|
|
1475
|
-
type: Input
|
|
1476
|
-
}], level: [{
|
|
1477
|
-
type: Input
|
|
1478
|
-
}], index: [{
|
|
1479
|
-
type: Input
|
|
1480
|
-
}], animate: [{
|
|
1481
|
-
type: Input
|
|
1482
|
-
}], size: [{
|
|
1483
|
-
type: Input
|
|
1484
|
-
}], vertical: [{
|
|
1485
|
-
type: Input
|
|
1486
|
-
}], rtl: [{
|
|
1487
|
-
type: Input
|
|
1488
|
-
}], openOnClick: [{
|
|
1489
|
-
type: Input
|
|
1490
|
-
}], itemTemplate: [{
|
|
1491
|
-
type: Input
|
|
1492
|
-
}], itemLinkTemplate: [{
|
|
1493
|
-
type: Input
|
|
1494
|
-
}] } });
|
|
1495
|
-
/**
|
|
1496
|
-
* @hidden
|
|
1497
|
-
*/
|
|
1498
|
-
class ItemComponent {
|
|
1499
|
-
constructor(itemsService, navigation, changeDetector, renderer, popupService, element, contextService) {
|
|
1500
|
-
this.itemsService = itemsService;
|
|
1501
|
-
this.navigation = navigation;
|
|
1502
|
-
this.changeDetector = changeDetector;
|
|
1503
|
-
this.renderer = renderer;
|
|
1504
|
-
this.popupService = popupService;
|
|
1505
|
-
this.element = element;
|
|
1506
|
-
this.contextService = contextService;
|
|
1507
|
-
this.animate = true;
|
|
1508
|
-
this.size = 'medium';
|
|
1509
|
-
this.openOnClick = false;
|
|
1510
|
-
/**
|
|
1511
|
-
* @hidden
|
|
1512
|
-
*/
|
|
1513
|
-
this.fontIcon = getFontIcon;
|
|
1514
|
-
/**
|
|
1515
|
-
* @hidden
|
|
1516
|
-
*/
|
|
1517
|
-
this.SVGIcon = getSVGIcon;
|
|
1518
|
-
this.opened = false;
|
|
1519
|
-
this.navigating = false;
|
|
1520
|
-
this.destroyed = false;
|
|
1521
|
-
}
|
|
1522
|
-
set index(index) {
|
|
1523
|
-
if (this._index && this._index !== index) {
|
|
1524
|
-
this.itemsService.remove(this);
|
|
1525
|
-
this._index = index;
|
|
1526
|
-
this.itemsService.add(this);
|
|
1527
|
-
}
|
|
1528
|
-
else {
|
|
1529
|
-
this._index = index;
|
|
1530
|
-
}
|
|
1531
|
-
this.childId = this.itemsService.childId(index);
|
|
1532
|
-
}
|
|
1533
|
-
get index() {
|
|
1534
|
-
return this._index;
|
|
1535
|
-
}
|
|
1536
|
-
get disabled() {
|
|
1537
|
-
return this.item.disabled;
|
|
1538
|
-
}
|
|
1539
|
-
get hasPopup() {
|
|
1540
|
-
return this.hasContent ? true : null;
|
|
1541
|
-
}
|
|
1542
|
-
get label() {
|
|
1543
|
-
return this.item.text ? this.item.text : null;
|
|
1544
|
-
}
|
|
1545
|
-
get popupSettings() {
|
|
1546
|
-
const settings = this.rtl ? POPUP_SETTINGS_RTL : POPUP_SETTINGS;
|
|
1547
|
-
return this.horizontal ? settings.horizontal : settings.vertical;
|
|
1548
|
-
}
|
|
1549
|
-
get horizontal() {
|
|
1550
|
-
return this.vertical || this.level > 0;
|
|
1551
|
-
}
|
|
1552
|
-
get hasLink() {
|
|
1553
|
-
return Boolean(this.item.url);
|
|
1554
|
-
}
|
|
1555
|
-
get linkTemplate() {
|
|
1556
|
-
return this.item.linkTemplate || this.itemLinkTemplate;
|
|
1557
|
-
}
|
|
1558
|
-
get hasContent() {
|
|
1559
|
-
const items = this.item.items;
|
|
1560
|
-
return items && items.length || this.item.contentTemplate;
|
|
1561
|
-
}
|
|
1562
|
-
get isContent() {
|
|
1563
|
-
return Boolean(this.item.content);
|
|
1564
|
-
}
|
|
1565
|
-
get iconClass() {
|
|
1566
|
-
return `k-i-${this.item.icon}`;
|
|
1567
|
-
}
|
|
1568
|
-
get isContextMenu() {
|
|
1569
|
-
return Boolean(this.contextService);
|
|
1570
|
-
}
|
|
1571
|
-
get menuListClasses() {
|
|
1572
|
-
const sizeClass = getSizeClass(this.size);
|
|
1573
|
-
return this.isContextMenu ? `k-context-menu k-menu-group ${sizeClass}` : `k-menu-group ${sizeClass}`;
|
|
1574
|
-
}
|
|
1575
|
-
get children() {
|
|
1576
|
-
const item = this.item;
|
|
1577
|
-
if (item.contentTemplate) {
|
|
1578
|
-
if (!this.contentItems) {
|
|
1579
|
-
this.contentItems = [{
|
|
1580
|
-
content: item.contentTemplate,
|
|
1581
|
-
owner: item,
|
|
1582
|
-
ownerIndex: this.index
|
|
1583
|
-
}];
|
|
1584
|
-
}
|
|
1585
|
-
return this.contentItems;
|
|
1586
|
-
}
|
|
1587
|
-
return item.items;
|
|
1588
|
-
}
|
|
1589
|
-
get template() {
|
|
1590
|
-
return this.item.template || this.itemTemplate;
|
|
1591
|
-
}
|
|
1592
|
-
hasContentTemplates() {
|
|
1593
|
-
const item = this.item;
|
|
1594
|
-
return this.itemTemplate || item.contentTemplate || this.itemLinkTemplate ||
|
|
1595
|
-
(item.items && item.items.find(current => current.template || current.linkTemplate));
|
|
1596
|
-
}
|
|
1597
|
-
ngOnInit() {
|
|
1598
|
-
this.itemsService.add(this);
|
|
1599
|
-
}
|
|
1600
|
-
ngAfterViewInit() {
|
|
1601
|
-
if (this.hasContent) {
|
|
1602
|
-
this.setAttribute('aria-expanded', this.opened.toString());
|
|
1603
|
-
}
|
|
1604
|
-
this.index === this.navigation.activeIndex ? this.setAttribute('tabindex', '0') : this.setAttribute('tabindex', '-1');
|
|
1605
|
-
}
|
|
1606
|
-
ngOnDestroy() {
|
|
1607
|
-
this.itemsService.remove(this);
|
|
1608
|
-
this.destroyed = true;
|
|
1609
|
-
if (this.popupRef) {
|
|
1610
|
-
this.popupRef.close();
|
|
1611
|
-
this.popupRef = null;
|
|
1612
|
-
}
|
|
1613
|
-
}
|
|
1614
|
-
focus() {
|
|
1615
|
-
this.element.nativeElement.focus();
|
|
1616
|
-
}
|
|
1617
|
-
blur() {
|
|
1618
|
-
this.element.nativeElement.blur();
|
|
1619
|
-
}
|
|
1620
|
-
toggleActive(isActive) {
|
|
1621
|
-
if (isActive) {
|
|
1622
|
-
this.setAttribute('tabindex', '0');
|
|
1623
|
-
}
|
|
1624
|
-
else {
|
|
1625
|
-
this.setAttribute('tabindex', '-1');
|
|
1626
|
-
}
|
|
1627
|
-
}
|
|
1628
|
-
open() {
|
|
1629
|
-
if (!this.destroyed && this.hasContent && !this.opened) {
|
|
1630
|
-
const popupSettings = this.popupSettings;
|
|
1631
|
-
const animate = this.animate ? Object.assign({}, this.animate, {
|
|
1632
|
-
direction: popupSettings.animate
|
|
1633
|
-
}) : false;
|
|
1634
|
-
this.opened = true;
|
|
1635
|
-
this.popupRef = this.popupService.open({
|
|
1636
|
-
appendTo: this.appendTo,
|
|
1637
|
-
popupAlign: popupSettings.popup,
|
|
1638
|
-
anchorAlign: popupSettings.anchor,
|
|
1639
|
-
collision: popupSettings.collision,
|
|
1640
|
-
anchor: this.element,
|
|
1641
|
-
positionMode: 'absolute',
|
|
1642
|
-
content: this.popupTemplate,
|
|
1643
|
-
popupClass: {
|
|
1644
|
-
'k-rtl': this.rtl,
|
|
1645
|
-
'k-menu-popup': true
|
|
1646
|
-
},
|
|
1647
|
-
animate: animate
|
|
1648
|
-
});
|
|
1649
|
-
this.setAttribute('aria-expanded', 'true');
|
|
1650
|
-
this.setAttribute('aria-controls', this.childId);
|
|
1651
|
-
this.changeDetector.detectChanges();
|
|
1652
|
-
}
|
|
1653
|
-
}
|
|
1654
|
-
close() {
|
|
1655
|
-
if (!this.destroyed && this.opened) {
|
|
1656
|
-
this.opened = false;
|
|
1657
|
-
if (this.popupRef) {
|
|
1658
|
-
this.popupRef.close();
|
|
1659
|
-
this.popupRef = null;
|
|
1660
|
-
}
|
|
1661
|
-
this.changeDetector.detectChanges();
|
|
1662
|
-
this.setAttribute('aria-expanded', 'false');
|
|
1663
|
-
this.renderer.removeAttribute(this.element.nativeElement, 'aria-controls');
|
|
1664
|
-
}
|
|
1665
|
-
}
|
|
1666
|
-
navigate() {
|
|
1667
|
-
let link;
|
|
1668
|
-
if (this.linkTemplate) {
|
|
1669
|
-
link = this.element.nativeElement.querySelector('a.k-menu-link');
|
|
1670
|
-
}
|
|
1671
|
-
else if (this.hasLink) {
|
|
1672
|
-
link = this.link.nativeElement;
|
|
1673
|
-
}
|
|
1674
|
-
if (link) {
|
|
1675
|
-
this.navigating = true;
|
|
1676
|
-
link.click();
|
|
1677
|
-
this.navigating = false;
|
|
1678
|
-
}
|
|
1679
|
-
}
|
|
1680
|
-
setAttribute(name, value) {
|
|
1681
|
-
this.renderer.setAttribute(this.element.nativeElement, name, value);
|
|
1682
|
-
}
|
|
1683
|
-
}
|
|
1684
|
-
ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1685
|
-
ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
|
|
1686
|
-
provide: POPUP_CONTAINER,
|
|
1687
|
-
useFactory: bodyFactory
|
|
1688
|
-
}], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
|
|
1689
|
-
<span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
|
|
1690
|
-
[class.k-active]="opened" role="presentation">
|
|
1691
|
-
<ng-template [ngTemplateOutlet]="itemcontent">
|
|
1692
|
-
</ng-template>
|
|
1693
|
-
</span>
|
|
1694
|
-
<a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
|
|
1695
|
-
[class.k-active]="opened" tabindex="-1" role="presentation">
|
|
1696
|
-
<ng-template [ngTemplateOutlet]="itemcontent">
|
|
1697
|
-
</ng-template>
|
|
1698
|
-
</a>
|
|
1699
|
-
<ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
|
|
1700
|
-
[ngTemplateOutletContext]="{ item: item, index: index }">
|
|
1701
|
-
</ng-template>
|
|
1702
|
-
|
|
1703
|
-
<div class="k-content" *ngIf="item.content" role="presentation">
|
|
1704
|
-
<ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
|
|
1705
|
-
</ng-template>
|
|
1706
|
-
</div>
|
|
1707
|
-
|
|
1708
|
-
<ng-template #popupTemplate>
|
|
1709
|
-
<ul kendoMenuList
|
|
1710
|
-
[appendTo]="appendTo"
|
|
1711
|
-
[attr.id]="childId"
|
|
1712
|
-
[animate]="animate"
|
|
1713
|
-
[rtl]="rtl"
|
|
1714
|
-
[vertical]="vertical"
|
|
1715
|
-
[size]="size"
|
|
1716
|
-
[openOnClick]="openOnClick"
|
|
1717
|
-
[items]="children"
|
|
1718
|
-
[level]="level + 1"
|
|
1719
|
-
[index]="index"
|
|
1720
|
-
[itemTemplate]="itemTemplate"
|
|
1721
|
-
[itemLinkTemplate]="itemLinkTemplate"
|
|
1722
|
-
[ngClass]="menuListClasses"
|
|
1723
|
-
role="menu">
|
|
1724
|
-
</ul>
|
|
1725
|
-
</ng-template>
|
|
1726
|
-
|
|
1727
|
-
<ng-template #itemcontent>
|
|
1728
|
-
<kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
|
|
1729
|
-
<ng-container *ngIf="!template">
|
|
1730
|
-
<span class="k-menu-link-text">{{ item.text }}</span>
|
|
1731
|
-
</ng-container>
|
|
1732
|
-
<ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
|
|
1733
|
-
</ng-template>
|
|
1734
|
-
<kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
|
|
1735
|
-
</ng-template>
|
|
1736
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
1737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemComponent, decorators: [{
|
|
1738
|
-
type: Component,
|
|
1739
|
-
args: [{
|
|
1740
|
-
providers: [PopupService, {
|
|
1741
|
-
provide: POPUP_CONTAINER,
|
|
1742
|
-
useFactory: bodyFactory
|
|
1743
|
-
}],
|
|
1744
|
-
selector: '[kendoMenuItem]',
|
|
1745
|
-
template: `
|
|
1746
|
-
<span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
|
|
1747
|
-
[class.k-active]="opened" role="presentation">
|
|
1748
|
-
<ng-template [ngTemplateOutlet]="itemcontent">
|
|
1749
|
-
</ng-template>
|
|
1750
|
-
</span>
|
|
1751
|
-
<a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
|
|
1752
|
-
[class.k-active]="opened" tabindex="-1" role="presentation">
|
|
1753
|
-
<ng-template [ngTemplateOutlet]="itemcontent">
|
|
1754
|
-
</ng-template>
|
|
1755
|
-
</a>
|
|
1756
|
-
<ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
|
|
1757
|
-
[ngTemplateOutletContext]="{ item: item, index: index }">
|
|
1758
|
-
</ng-template>
|
|
1759
|
-
|
|
1760
|
-
<div class="k-content" *ngIf="item.content" role="presentation">
|
|
1761
|
-
<ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
|
|
1762
|
-
</ng-template>
|
|
1763
|
-
</div>
|
|
1764
|
-
|
|
1765
|
-
<ng-template #popupTemplate>
|
|
1766
|
-
<ul kendoMenuList
|
|
1767
|
-
[appendTo]="appendTo"
|
|
1768
|
-
[attr.id]="childId"
|
|
1769
|
-
[animate]="animate"
|
|
1770
|
-
[rtl]="rtl"
|
|
1771
|
-
[vertical]="vertical"
|
|
1772
|
-
[size]="size"
|
|
1773
|
-
[openOnClick]="openOnClick"
|
|
1774
|
-
[items]="children"
|
|
1775
|
-
[level]="level + 1"
|
|
1776
|
-
[index]="index"
|
|
1777
|
-
[itemTemplate]="itemTemplate"
|
|
1778
|
-
[itemLinkTemplate]="itemLinkTemplate"
|
|
1779
|
-
[ngClass]="menuListClasses"
|
|
1780
|
-
role="menu">
|
|
1781
|
-
</ul>
|
|
1782
|
-
</ng-template>
|
|
1783
|
-
|
|
1784
|
-
<ng-template #itemcontent>
|
|
1785
|
-
<kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
|
|
1786
|
-
<ng-container *ngIf="!template">
|
|
1787
|
-
<span class="k-menu-link-text">{{ item.text }}</span>
|
|
1788
|
-
</ng-container>
|
|
1789
|
-
<ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
|
|
1790
|
-
</ng-template>
|
|
1791
|
-
<kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
|
|
1792
|
-
</ng-template>
|
|
1793
|
-
`,
|
|
1794
|
-
standalone: true,
|
|
1795
|
-
imports: [NgIf, NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
|
|
1796
|
-
}]
|
|
1797
|
-
}], ctorParameters: function () {
|
|
1798
|
-
return [{ type: ItemsService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupService }, { type: i0.ElementRef }, { type: ContextMenuService, decorators: [{
|
|
1799
|
-
type: Optional
|
|
1800
|
-
}] }];
|
|
1801
|
-
}, propDecorators: { appendTo: [{
|
|
1802
|
-
type: Input
|
|
1803
|
-
}], item: [{
|
|
1804
|
-
type: Input
|
|
1805
|
-
}], level: [{
|
|
1806
|
-
type: Input
|
|
1807
|
-
}], index: [{
|
|
1808
|
-
type: Input
|
|
1809
|
-
}], siblingIndex: [{
|
|
1810
|
-
type: Input
|
|
1811
|
-
}], animate: [{
|
|
1812
|
-
type: Input
|
|
1813
|
-
}], size: [{
|
|
1814
|
-
type: Input
|
|
1815
|
-
}], vertical: [{
|
|
1816
|
-
type: Input
|
|
1817
|
-
}], rtl: [{
|
|
1818
|
-
type: Input
|
|
1819
|
-
}], openOnClick: [{
|
|
1820
|
-
type: Input
|
|
1821
|
-
}], itemTemplate: [{
|
|
1822
|
-
type: Input
|
|
1823
|
-
}], itemLinkTemplate: [{
|
|
1824
|
-
type: Input
|
|
1825
|
-
}], link: [{
|
|
1826
|
-
type: ViewChild,
|
|
1827
|
-
args: ['link', { static: false }]
|
|
1828
|
-
}], popupTemplate: [{
|
|
1829
|
-
type: ViewChild,
|
|
1830
|
-
args: ['popupTemplate', { static: true }]
|
|
1831
|
-
}], disabled: [{
|
|
1832
|
-
type: HostBinding,
|
|
1833
|
-
args: ['attr.aria-disabled']
|
|
1834
|
-
}], hasPopup: [{
|
|
1835
|
-
type: HostBinding,
|
|
1836
|
-
args: ['attr.aria-haspopup']
|
|
1837
|
-
}], label: [{
|
|
1838
|
-
type: HostBinding,
|
|
1839
|
-
args: ['attr.aria-label']
|
|
1840
|
-
}] } });
|
|
1841
|
-
|
|
1842
|
-
/**
|
|
1843
|
-
* Represents the [Kendo UI Menu component for Angular]({% slug overview_menu %}).
|
|
1844
|
-
*
|
|
1845
|
-
* @example
|
|
1846
|
-
* ```ts
|
|
1847
|
-
* _@Component({
|
|
1848
|
-
* selector: 'my-app',
|
|
1849
|
-
* template: `
|
|
1850
|
-
* <kendo-menu [items]="items">
|
|
1851
|
-
* </kendo-menu>
|
|
1852
|
-
* `
|
|
1853
|
-
* })
|
|
1854
|
-
* class AppComponent {
|
|
1855
|
-
* public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
|
|
1856
|
-
* }
|
|
1857
|
-
* ```
|
|
1858
|
-
*/
|
|
1859
|
-
class MenuComponent extends MenuBase {
|
|
1860
|
-
constructor(itemsService, hover, actions, navigation, localization, ngZone, renderer, contextService) {
|
|
1861
|
-
super();
|
|
1862
|
-
this.itemsService = itemsService;
|
|
1863
|
-
this.hover = hover;
|
|
1864
|
-
this.actions = actions;
|
|
1865
|
-
this.navigation = navigation;
|
|
1866
|
-
this.localization = localization;
|
|
1867
|
-
this.ngZone = ngZone;
|
|
1868
|
-
this.renderer = renderer;
|
|
1869
|
-
this.contextService = contextService;
|
|
1870
|
-
/**
|
|
1871
|
-
* @hidden
|
|
1872
|
-
*/
|
|
1873
|
-
this.ariaRole = 'menubar';
|
|
1874
|
-
/**
|
|
1875
|
-
* Fires when a Menu item is selected ([see example](slug:events_menu)).
|
|
1876
|
-
*/
|
|
1877
|
-
this.select = new EventEmitter();
|
|
1878
|
-
/**
|
|
1879
|
-
* Fires when a Menu item is opened ([see example](slug:events_menu)).
|
|
1880
|
-
*/
|
|
1881
|
-
this.open = new EventEmitter();
|
|
1882
|
-
/**
|
|
1883
|
-
* Fires when a Menu item is closed ([see example](slug:events_menu)).
|
|
1884
|
-
*/
|
|
1885
|
-
this.close = new EventEmitter();
|
|
1886
|
-
validatePackage(packageMetadata);
|
|
1887
|
-
this.actions.owner = this;
|
|
1888
|
-
if (contextService) {
|
|
1889
|
-
contextService.items = this.itemsService;
|
|
1890
|
-
this.contextKeyDownSubscription = contextService.keydown.subscribe(this.contextKeyDown.bind(this));
|
|
1891
|
-
}
|
|
1892
|
-
}
|
|
1893
|
-
/**
|
|
1894
|
-
* @hidden
|
|
1895
|
-
*/
|
|
1896
|
-
get ariaOrientation() {
|
|
1897
|
-
if (this.vertical) {
|
|
1898
|
-
return 'vertical';
|
|
1899
|
-
}
|
|
1900
|
-
}
|
|
1901
|
-
/**
|
|
1902
|
-
* @hidden
|
|
1903
|
-
*/
|
|
1904
|
-
get isContextMenu() {
|
|
1905
|
-
return Boolean(this.contextService);
|
|
1906
|
-
}
|
|
1907
|
-
get direction() {
|
|
1908
|
-
return this.rtl;
|
|
1909
|
-
}
|
|
1910
|
-
get rtl() {
|
|
1911
|
-
return this.localization.rtl;
|
|
1912
|
-
}
|
|
1913
|
-
/**
|
|
1914
|
-
* @hidden
|
|
1915
|
-
*/
|
|
1916
|
-
get menuClasses() {
|
|
1917
|
-
const sizeClass = getSizeClass(this.size);
|
|
1918
|
-
const staticClasses = 'k-reset k-header k-menu';
|
|
1919
|
-
if (this.isContextMenu) {
|
|
1920
|
-
return `k-context-menu k-menu-group ${sizeClass}`;
|
|
1921
|
-
}
|
|
1922
|
-
return `${staticClasses} k-menu-${this.vertical ? 'vertical' : 'horizontal'}`;
|
|
1923
|
-
}
|
|
1924
|
-
/**
|
|
1925
|
-
* Opens or closes the specified Menu items.
|
|
1926
|
-
*
|
|
1927
|
-
* @param open - A Boolean value which indicates if the items will be opened or closed.
|
|
1928
|
-
* @param indices - One or more values which represent the hierarchical indices of the items that will be opened or closed.
|
|
1929
|
-
*/
|
|
1930
|
-
toggle(open, ...indices) {
|
|
1931
|
-
for (let idx = 0; idx < indices.length; idx++) {
|
|
1932
|
-
const item = this.itemsService.get(indices[idx]);
|
|
1933
|
-
if (item && !item.disabled) {
|
|
1934
|
-
if (open) {
|
|
1935
|
-
item.open();
|
|
1936
|
-
}
|
|
1937
|
-
else {
|
|
1938
|
-
item.close();
|
|
1939
|
-
}
|
|
1940
|
-
}
|
|
1941
|
-
}
|
|
1942
|
-
}
|
|
1943
|
-
/**
|
|
1944
|
-
* @hidden
|
|
1945
|
-
*/
|
|
1946
|
-
focus(index) {
|
|
1947
|
-
this.navigation.focusIndex(index);
|
|
1948
|
-
}
|
|
1949
|
-
ngOnChanges(changes) {
|
|
1950
|
-
this.navigation.vertical = this.vertical;
|
|
1951
|
-
this.hover.delay = this.hoverDelay;
|
|
1952
|
-
if (changes.openOnClick) {
|
|
1953
|
-
const openOnClick = this.openOnClick = normalize(this.openOnClick);
|
|
1954
|
-
this.hover.openOnOver = !openOnClick;
|
|
1955
|
-
if (openOnClick && openOnClick.toggle === 'click') {
|
|
1956
|
-
this.attachCloseClick();
|
|
1957
|
-
}
|
|
1958
|
-
else {
|
|
1959
|
-
this.unsubscribeClick();
|
|
1960
|
-
}
|
|
1961
|
-
}
|
|
1962
|
-
}
|
|
1963
|
-
ngAfterViewChecked() {
|
|
1964
|
-
this.navigation.updateActive();
|
|
1965
|
-
}
|
|
1966
|
-
ngOnDestroy() {
|
|
1967
|
-
this.unsubscribeClick();
|
|
1968
|
-
if (this.contextService) {
|
|
1969
|
-
this.contextService.items = null;
|
|
1970
|
-
this.contextKeyDownSubscription.unsubscribe();
|
|
1971
|
-
}
|
|
1972
|
-
}
|
|
1973
|
-
attachCloseClick() {
|
|
1974
|
-
if (!this.closeClickSubscription && isDocumentAvailable()) {
|
|
1975
|
-
this.ngZone.runOutsideAngular(() => {
|
|
1976
|
-
this.closeClickSubscription = this.renderer.listen('document', 'click', (e) => {
|
|
1977
|
-
if (!inMenu(e.target, this.itemsService)) {
|
|
1978
|
-
this.hover.openOnOver = false;
|
|
1979
|
-
this.actions.closeAll();
|
|
1980
|
-
this.actions.execute();
|
|
1981
|
-
}
|
|
1982
|
-
});
|
|
1983
|
-
});
|
|
1984
|
-
}
|
|
1985
|
-
}
|
|
1986
|
-
unsubscribeClick() {
|
|
1987
|
-
if (this.closeClickSubscription) {
|
|
1988
|
-
this.closeClickSubscription();
|
|
1989
|
-
}
|
|
1990
|
-
}
|
|
1991
|
-
contextKeyDown(e) {
|
|
1992
|
-
if (!this.itemsService.hasItems) {
|
|
1993
|
-
return;
|
|
1994
|
-
}
|
|
1995
|
-
const keyCode = e.keyCode;
|
|
1996
|
-
const rtl = this.localization.rtl;
|
|
1997
|
-
const first = keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight;
|
|
1998
|
-
const last = keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft;
|
|
1999
|
-
let index;
|
|
2000
|
-
if ((first && !rtl) || (last && rtl)) {
|
|
2001
|
-
index = 'first';
|
|
2002
|
-
}
|
|
2003
|
-
else if ((first && rtl) || (last && !rtl)) {
|
|
2004
|
-
index = 'last';
|
|
2005
|
-
}
|
|
2006
|
-
if (index) {
|
|
2007
|
-
e.preventDefault();
|
|
2008
|
-
this.focus(index);
|
|
2009
|
-
}
|
|
2010
|
-
}
|
|
2011
|
-
}
|
|
2012
|
-
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2013
|
-
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuComponent, isStandalone: true, selector: "kendo-menu", inputs: { appendTo: "appendTo", menuItemTemplate: "menuItemTemplate", ariaRole: "ariaRole", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
|
|
2014
|
-
ItemsService,
|
|
2015
|
-
ActionsService,
|
|
2016
|
-
NavigationService,
|
|
2017
|
-
HoverService,
|
|
2018
|
-
LocalizationService,
|
|
2019
|
-
{
|
|
2020
|
-
provide: L10N_PREFIX,
|
|
2021
|
-
useValue: 'kendo.menu'
|
|
2022
|
-
},
|
|
2023
|
-
{
|
|
2024
|
-
provide: MenuBase,
|
|
2025
|
-
useExisting: forwardRef(() => MenuComponent)
|
|
2026
|
-
}
|
|
2027
|
-
], exportAs: ["kendoMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
2028
|
-
<ul
|
|
2029
|
-
[attr.role]="ariaRole"
|
|
2030
|
-
[attr.aria-orientation]="ariaOrientation"
|
|
2031
|
-
kendoMenuList [items]="rootItems" [level]="0" [appendTo]="appendTo"
|
|
2032
|
-
[size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
|
|
2033
|
-
[itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
|
|
2034
|
-
[itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
|
|
2035
|
-
[ngClass]="menuClasses">
|
|
2036
|
-
</ul>
|
|
2037
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2039
|
-
type: Component,
|
|
2040
|
-
args: [{
|
|
2041
|
-
exportAs: 'kendoMenu',
|
|
2042
|
-
providers: [
|
|
2043
|
-
ItemsService,
|
|
2044
|
-
ActionsService,
|
|
2045
|
-
NavigationService,
|
|
2046
|
-
HoverService,
|
|
2047
|
-
LocalizationService,
|
|
2048
|
-
{
|
|
2049
|
-
provide: L10N_PREFIX,
|
|
2050
|
-
useValue: 'kendo.menu'
|
|
2051
|
-
},
|
|
2052
|
-
{
|
|
2053
|
-
provide: MenuBase,
|
|
2054
|
-
useExisting: forwardRef(() => MenuComponent)
|
|
2055
|
-
}
|
|
2056
|
-
],
|
|
2057
|
-
selector: 'kendo-menu',
|
|
2058
|
-
template: `
|
|
2059
|
-
<ul
|
|
2060
|
-
[attr.role]="ariaRole"
|
|
2061
|
-
[attr.aria-orientation]="ariaOrientation"
|
|
2062
|
-
kendoMenuList [items]="rootItems" [level]="0" [appendTo]="appendTo"
|
|
2063
|
-
[size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
|
|
2064
|
-
[itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
|
|
2065
|
-
[itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
|
|
2066
|
-
[ngClass]="menuClasses">
|
|
2067
|
-
</ul>
|
|
2068
|
-
`,
|
|
2069
|
-
standalone: true,
|
|
2070
|
-
imports: [ListComponent, NgClass]
|
|
2071
|
-
}]
|
|
2072
|
-
}], ctorParameters: function () {
|
|
2073
|
-
return [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i3.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ContextMenuService, decorators: [{
|
|
2074
|
-
type: Optional
|
|
2075
|
-
}] }];
|
|
2076
|
-
}, propDecorators: { appendTo: [{
|
|
2077
|
-
type: Input
|
|
2078
|
-
}], menuItemTemplate: [{
|
|
2079
|
-
type: Input
|
|
2080
|
-
}], ariaRole: [{
|
|
2081
|
-
type: Input
|
|
2082
|
-
}], menuItemLinkTemplate: [{
|
|
2083
|
-
type: Input
|
|
2084
|
-
}], select: [{
|
|
2085
|
-
type: Output
|
|
2086
|
-
}], open: [{
|
|
2087
|
-
type: Output
|
|
2088
|
-
}], close: [{
|
|
2089
|
-
type: Output
|
|
2090
|
-
}], direction: [{
|
|
2091
|
-
type: HostBinding,
|
|
2092
|
-
args: ['class.k-rtl']
|
|
2093
|
-
}] } });
|
|
2094
|
-
|
|
2095
|
-
/**
|
|
2096
|
-
* Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
|
|
2097
|
-
* of the items to apply the default styling and behavior.
|
|
2098
|
-
*/
|
|
2099
|
-
class LinkDirective {
|
|
2100
|
-
constructor(itemsService) {
|
|
2101
|
-
this.itemsService = itemsService;
|
|
2102
|
-
this.hostClasses = true;
|
|
2103
|
-
this.role = 'presentation';
|
|
2104
|
-
this.tabindex = '-1';
|
|
2105
|
-
}
|
|
2106
|
-
get activeClass() {
|
|
2107
|
-
return this.item.opened;
|
|
2108
|
-
}
|
|
2109
|
-
ngOnInit() {
|
|
2110
|
-
if (isDevMode() && !this.index) {
|
|
2111
|
-
throw new Error('The kendoMenuItemLink directive requires the item index to be set.');
|
|
2112
|
-
}
|
|
2113
|
-
this.item = this.itemsService.get(this.index) || {};
|
|
2114
|
-
}
|
|
2115
|
-
}
|
|
2116
|
-
LinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkDirective, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2117
|
-
LinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LinkDirective, isStandalone: true, selector: "[kendoMenuItemLink]", inputs: { index: ["kendoMenuItemLink", "index"] }, host: { properties: { "class.k-link": "this.hostClasses", "class.k-menu-link": "this.hostClasses", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.k-active": "this.activeClass" } }, ngImport: i0 });
|
|
2118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkDirective, decorators: [{
|
|
2119
|
-
type: Directive,
|
|
2120
|
-
args: [{
|
|
2121
|
-
selector: '[kendoMenuItemLink]',
|
|
2122
|
-
standalone: true
|
|
2123
|
-
}]
|
|
2124
|
-
}], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
|
|
2125
|
-
type: Input,
|
|
2126
|
-
args: ['kendoMenuItemLink']
|
|
2127
|
-
}], hostClasses: [{
|
|
2128
|
-
type: HostBinding,
|
|
2129
|
-
args: ['class.k-link']
|
|
2130
|
-
}, {
|
|
2131
|
-
type: HostBinding,
|
|
2132
|
-
args: ['class.k-menu-link']
|
|
2133
|
-
}], role: [{
|
|
2134
|
-
type: HostBinding,
|
|
2135
|
-
args: ['attr.role']
|
|
2136
|
-
}], tabindex: [{
|
|
2137
|
-
type: HostBinding,
|
|
2138
|
-
args: ['attr.tabindex']
|
|
2139
|
-
}], activeClass: [{
|
|
2140
|
-
type: HostBinding,
|
|
2141
|
-
args: ['class.k-active']
|
|
2142
|
-
}] } });
|
|
2143
|
-
|
|
2144
|
-
/**
|
|
2145
|
-
* Represents a component that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
|
|
2146
|
-
* of the items to render the default expand arrow.
|
|
2147
|
-
*/
|
|
2148
|
-
class ExpandArrowComponent {
|
|
2149
|
-
constructor(itemsService) {
|
|
2150
|
-
this.itemsService = itemsService;
|
|
2151
|
-
this.hostClasses = true;
|
|
2152
|
-
this.ariaHidden = 'true';
|
|
2153
|
-
}
|
|
2154
|
-
ngOnInit() {
|
|
2155
|
-
if (isDevMode() && !this.index) {
|
|
2156
|
-
throw new Error('The kendoMenuExpandArrow component requires the item index to be set.');
|
|
2157
|
-
}
|
|
2158
|
-
this.item = this.itemsService.get(this.index) || {};
|
|
2159
|
-
this.fontIcon = getFontIcon(this.item.horizontal, this.item.rtl);
|
|
2160
|
-
this.SVGIcon = getSVGIcon(this.item.horizontal, this.item.rtl);
|
|
2161
|
-
}
|
|
2162
|
-
}
|
|
2163
|
-
ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2164
|
-
ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExpandArrowComponent, isStandalone: true, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
2165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpandArrowComponent, decorators: [{
|
|
2166
|
-
type: Component,
|
|
2167
|
-
args: [{
|
|
2168
|
-
selector: '[kendoMenuExpandArrow]',
|
|
2169
|
-
template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`,
|
|
2170
|
-
standalone: true,
|
|
2171
|
-
imports: [IconWrapperComponent]
|
|
2172
|
-
}]
|
|
2173
|
-
}], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
|
|
2174
|
-
type: Input,
|
|
2175
|
-
args: ['kendoMenuExpandArrow']
|
|
2176
|
-
}], hostClasses: [{
|
|
2177
|
-
type: HostBinding,
|
|
2178
|
-
args: ['class.k-menu-expand-arrow']
|
|
2179
|
-
}], ariaHidden: [{
|
|
2180
|
-
type: HostBinding,
|
|
2181
|
-
args: ['attr.aria-hidden']
|
|
2182
|
-
}] } });
|
|
2183
|
-
|
|
2184
|
-
/**
|
|
2185
|
-
* @hidden
|
|
2186
|
-
*/
|
|
2187
|
-
class PreventableEvent {
|
|
2188
|
-
/**
|
|
2189
|
-
* @hidden
|
|
2190
|
-
*/
|
|
2191
|
-
constructor(args) {
|
|
2192
|
-
this.prevented = false;
|
|
2193
|
-
Object.assign(this, args);
|
|
2194
|
-
}
|
|
2195
|
-
/**
|
|
2196
|
-
* Prevents the default action for a specified event.
|
|
2197
|
-
* In this way, the source component suppresses
|
|
2198
|
-
* the built-in behavior that follows the event.
|
|
2199
|
-
*/
|
|
2200
|
-
preventDefault() {
|
|
2201
|
-
this.prevented = true;
|
|
2202
|
-
}
|
|
2203
|
-
/**
|
|
2204
|
-
* Returns `true` if the event was prevented
|
|
2205
|
-
* by any of its subscribers.
|
|
2206
|
-
*
|
|
2207
|
-
* @returns `true` if the default action was prevented.
|
|
2208
|
-
* Otherwise, returns `false`.
|
|
2209
|
-
*/
|
|
2210
|
-
isDefaultPrevented() {
|
|
2211
|
-
return this.prevented;
|
|
2212
|
-
}
|
|
2213
|
-
}
|
|
2214
|
-
|
|
2215
|
-
/**
|
|
2216
|
-
* Arguments for the `open` and `close` events of the Menu.
|
|
2217
|
-
*/
|
|
2218
|
-
class MenuEvent extends PreventableEvent {
|
|
2219
|
-
}
|
|
2220
|
-
|
|
2221
|
-
/**
|
|
2222
|
-
* Arguments for the `select` event of the Menu.
|
|
2223
|
-
*/
|
|
2224
|
-
class MenuSelectEvent extends MenuEvent {
|
|
2225
|
-
}
|
|
2226
|
-
|
|
2227
|
-
const ITEM_FIELDS = ['textField', 'urlField', 'iconField', 'svgIconField', 'disabledField', 'cssClassField', 'cssStyleField', 'separatorField'];
|
|
2228
|
-
/**
|
|
2229
|
-
* @hidden
|
|
2230
|
-
*/
|
|
2231
|
-
class BindingDirectiveBase {
|
|
2232
|
-
constructor(menu) {
|
|
2233
|
-
this.menu = menu;
|
|
2234
|
-
}
|
|
2235
|
-
ngOnChanges() {
|
|
2236
|
-
this.rebind();
|
|
2237
|
-
}
|
|
2238
|
-
/**
|
|
2239
|
-
* Rebinds the Menu items.
|
|
2240
|
-
*/
|
|
2241
|
-
rebind() {
|
|
2242
|
-
const fields = this.fields = [];
|
|
2243
|
-
for (let idx = 0; idx < ITEM_FIELDS.length; idx++) {
|
|
2244
|
-
const inputName = ITEM_FIELDS[idx];
|
|
2245
|
-
const inputValue = this[inputName];
|
|
2246
|
-
if (inputValue) {
|
|
2247
|
-
fields.push({ target: inputName.replace('Field', ''), source: inputValue });
|
|
2248
|
-
}
|
|
2249
|
-
}
|
|
2250
|
-
this.menu.items = this.data ? this.mapItems(this.data) : [];
|
|
2251
|
-
}
|
|
2252
|
-
}
|
|
2253
|
-
BindingDirectiveBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BindingDirectiveBase, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2254
|
-
BindingDirectiveBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BindingDirectiveBase, selector: "kendoBindingBase", usesOnChanges: true, ngImport: i0 });
|
|
2255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BindingDirectiveBase, decorators: [{
|
|
2256
|
-
type: Directive,
|
|
2257
|
-
args: [{
|
|
2258
|
-
// eslint-disable-next-line
|
|
2259
|
-
selector: 'kendoBindingBase'
|
|
2260
|
-
}]
|
|
2261
|
-
}], ctorParameters: function () { return [{ type: MenuBase }]; } });
|
|
2262
|
-
|
|
2263
|
-
const FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
|
|
2264
|
-
const getterCache = {};
|
|
2265
|
-
getterCache['undefined'] = (obj) => obj;
|
|
2266
|
-
/**
|
|
2267
|
-
* @hidden
|
|
2268
|
-
*/
|
|
2269
|
-
const getter = (field) => {
|
|
2270
|
-
if (getterCache[field]) {
|
|
2271
|
-
return getterCache[field];
|
|
2272
|
-
}
|
|
2273
|
-
const fields = [];
|
|
2274
|
-
field.replace(FIELD_REGEX, (_match, index, indexAccessor, name) => {
|
|
2275
|
-
fields.push(index !== undefined ? index : (indexAccessor || name));
|
|
2276
|
-
});
|
|
2277
|
-
getterCache[field] = (obj) => {
|
|
2278
|
-
let result = obj;
|
|
2279
|
-
for (let idx = 0; idx < fields.length && result; idx++) {
|
|
2280
|
-
result = result[fields[idx]];
|
|
2281
|
-
}
|
|
2282
|
-
return result;
|
|
2283
|
-
};
|
|
2284
|
-
return getterCache[field];
|
|
2285
|
-
};
|
|
2286
|
-
/**
|
|
2287
|
-
* @hidden
|
|
2288
|
-
*/
|
|
2289
|
-
const last = (arr) => arr[arr.length - 1];
|
|
2290
|
-
|
|
2291
|
-
const getField = (field, level) => Array.isArray(field) ? field[level] || last(field) : field;
|
|
2292
|
-
/**
|
|
2293
|
-
* A directive that converts the provided hierarchical data to [MenuItems]({% slug api_menu_menuitem %}) and binds them to the Menu.
|
|
2294
|
-
*/
|
|
2295
|
-
class HierarchyBindingDirective extends BindingDirectiveBase {
|
|
2296
|
-
constructor(menu) {
|
|
2297
|
-
super(menu);
|
|
2298
|
-
}
|
|
2299
|
-
mapItems(items, level = 0) {
|
|
2300
|
-
return items.map((item) => {
|
|
2301
|
-
const menuItem = this.createItem(item, level);
|
|
2302
|
-
const children = this.getChildren(item, level);
|
|
2303
|
-
if (children) {
|
|
2304
|
-
menuItem.items = this.mapItems(children, level + 1);
|
|
2305
|
-
}
|
|
2306
|
-
return menuItem;
|
|
2307
|
-
});
|
|
2308
|
-
}
|
|
2309
|
-
createItem(item, level) {
|
|
2310
|
-
const result = { data: item };
|
|
2311
|
-
const fields = this.fields;
|
|
2312
|
-
for (let idx = 0; idx < fields.length; idx++) {
|
|
2313
|
-
const { target, source } = fields[idx];
|
|
2314
|
-
result[target] = getter(getField(source, level))(item);
|
|
2315
|
-
}
|
|
2316
|
-
return result;
|
|
2317
|
-
}
|
|
2318
|
-
getChildren(item, level) {
|
|
2319
|
-
if (this.childrenField) {
|
|
2320
|
-
const field = getField(this.childrenField, level);
|
|
2321
|
-
return item[field];
|
|
2322
|
-
}
|
|
2323
|
-
}
|
|
2324
|
-
}
|
|
2325
|
-
HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2326
|
-
HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HierarchyBindingDirective, isStandalone: true, selector: "[kendoMenuHierarchyBinding]", inputs: { data: ["kendoMenuHierarchyBinding", "data"], textField: "textField", urlField: "urlField", iconField: "iconField", svgIconField: "svgIconField", disabledField: "disabledField", cssClassField: "cssClassField", cssStyleField: "cssStyleField", separatorField: "separatorField", childrenField: "childrenField" }, exportAs: ["kendoMenuHierarchyBinding"], usesInheritance: true, ngImport: i0 });
|
|
2327
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
|
|
2328
|
-
type: Directive,
|
|
2329
|
-
args: [{
|
|
2330
|
-
exportAs: 'kendoMenuHierarchyBinding',
|
|
2331
|
-
selector: '[kendoMenuHierarchyBinding]',
|
|
2332
|
-
standalone: true
|
|
2333
|
-
}]
|
|
2334
|
-
}], ctorParameters: function () { return [{ type: MenuBase }]; }, propDecorators: { data: [{
|
|
2335
|
-
type: Input,
|
|
2336
|
-
args: ["kendoMenuHierarchyBinding"]
|
|
2337
|
-
}], textField: [{
|
|
2338
|
-
type: Input
|
|
2339
|
-
}], urlField: [{
|
|
2340
|
-
type: Input
|
|
2341
|
-
}], iconField: [{
|
|
2342
|
-
type: Input
|
|
2343
|
-
}], svgIconField: [{
|
|
2344
|
-
type: Input
|
|
2345
|
-
}], disabledField: [{
|
|
2346
|
-
type: Input
|
|
2347
|
-
}], cssClassField: [{
|
|
2348
|
-
type: Input
|
|
2349
|
-
}], cssStyleField: [{
|
|
2350
|
-
type: Input
|
|
2351
|
-
}], separatorField: [{
|
|
2352
|
-
type: Input
|
|
2353
|
-
}], childrenField: [{
|
|
2354
|
-
type: Input
|
|
2355
|
-
}] } });
|
|
2356
|
-
|
|
2357
|
-
/**
|
|
2358
|
-
* A directive that converts the provided flat data to [MenuItems]({% slug api_menu_menuitem %}) and binds them to the Menu.
|
|
2359
|
-
*/
|
|
2360
|
-
class FlatBindingDirective extends BindingDirectiveBase {
|
|
2361
|
-
constructor(menu) {
|
|
2362
|
-
super(menu);
|
|
2363
|
-
}
|
|
2364
|
-
mapItems(items) {
|
|
2365
|
-
if (!this.idField || !this.parentIdField) {
|
|
2366
|
-
return items.map(item => this.createItem(item));
|
|
2367
|
-
}
|
|
2368
|
-
const result = [];
|
|
2369
|
-
const map = {};
|
|
2370
|
-
for (let idx = 0; idx < items.length; idx++) {
|
|
2371
|
-
const item = items[idx];
|
|
2372
|
-
const menuItem = this.createItem(item);
|
|
2373
|
-
const id = getter(this.idField)(item);
|
|
2374
|
-
const parentId = getter(this.parentIdField)(item);
|
|
2375
|
-
if (parentId === null || parentId === undefined) {
|
|
2376
|
-
result.push(menuItem);
|
|
2377
|
-
}
|
|
2378
|
-
else {
|
|
2379
|
-
const parent = map[parentId] = map[parentId] || {};
|
|
2380
|
-
parent.items = parent.items || [];
|
|
2381
|
-
parent.items.push(menuItem);
|
|
2382
|
-
}
|
|
2383
|
-
if (map[id]) {
|
|
2384
|
-
menuItem.items = map[id].items;
|
|
2385
|
-
}
|
|
2386
|
-
map[id] = menuItem;
|
|
2387
|
-
}
|
|
2388
|
-
return result;
|
|
2389
|
-
}
|
|
2390
|
-
createItem(dataItem) {
|
|
2391
|
-
const result = { data: dataItem };
|
|
2392
|
-
const fields = this.fields;
|
|
2393
|
-
for (let idx = 0; idx < fields.length; idx++) {
|
|
2394
|
-
const { source, target } = fields[idx];
|
|
2395
|
-
result[target] = getter(source)(dataItem);
|
|
2396
|
-
}
|
|
2397
|
-
return result;
|
|
2398
|
-
}
|
|
2399
|
-
}
|
|
2400
|
-
FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatBindingDirective, deps: [{ token: MenuBase }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2401
|
-
FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FlatBindingDirective, isStandalone: true, selector: "[kendoMenuFlatBinding]", inputs: { data: ["kendoMenuFlatBinding", "data"], textField: "textField", urlField: "urlField", iconField: "iconField", svgIconField: "svgIconField", disabledField: "disabledField", cssClassField: "cssClassField", cssStyleField: "cssStyleField", separatorField: "separatorField", idField: "idField", parentIdField: "parentIdField" }, exportAs: ["kendoMenuFlatBinding"], usesInheritance: true, ngImport: i0 });
|
|
2402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatBindingDirective, decorators: [{
|
|
2403
|
-
type: Directive,
|
|
2404
|
-
args: [{
|
|
2405
|
-
exportAs: 'kendoMenuFlatBinding',
|
|
2406
|
-
selector: '[kendoMenuFlatBinding]',
|
|
2407
|
-
standalone: true
|
|
2408
|
-
}]
|
|
2409
|
-
}], ctorParameters: function () { return [{ type: MenuBase }]; }, propDecorators: { data: [{
|
|
2410
|
-
type: Input,
|
|
2411
|
-
args: ["kendoMenuFlatBinding"]
|
|
2412
|
-
}], textField: [{
|
|
2413
|
-
type: Input
|
|
2414
|
-
}], urlField: [{
|
|
2415
|
-
type: Input
|
|
2416
|
-
}], iconField: [{
|
|
2417
|
-
type: Input
|
|
2418
|
-
}], svgIconField: [{
|
|
2419
|
-
type: Input
|
|
2420
|
-
}], disabledField: [{
|
|
2421
|
-
type: Input
|
|
2422
|
-
}], cssClassField: [{
|
|
2423
|
-
type: Input
|
|
2424
|
-
}], cssStyleField: [{
|
|
2425
|
-
type: Input
|
|
2426
|
-
}], separatorField: [{
|
|
2427
|
-
type: Input
|
|
2428
|
-
}], idField: [{
|
|
2429
|
-
type: Input
|
|
2430
|
-
}], parentIdField: [{
|
|
2431
|
-
type: Input
|
|
2432
|
-
}] } });
|
|
2433
|
-
|
|
2434
|
-
/**
|
|
2435
|
-
* Arguments for the `popupOpen` and `popupClose` events of the ContextMenu.
|
|
2436
|
-
*/
|
|
2437
|
-
class ContextMenuPopupEvent extends PreventableEvent {
|
|
2438
|
-
}
|
|
2439
|
-
|
|
2440
|
-
/**
|
|
2441
|
-
* @hidden
|
|
2442
|
-
*/
|
|
2443
|
-
class ContextMenuItemsService {
|
|
2444
|
-
constructor(contextService) {
|
|
2445
|
-
this.contextService = contextService;
|
|
2446
|
-
}
|
|
2447
|
-
get(index) {
|
|
2448
|
-
if (this.contextService.items) {
|
|
2449
|
-
return this.contextService.items.get(index);
|
|
2450
|
-
}
|
|
2451
|
-
}
|
|
2452
|
-
}
|
|
2453
|
-
ContextMenuItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuItemsService, deps: [{ token: ContextMenuService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2454
|
-
ContextMenuItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuItemsService });
|
|
2455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuItemsService, decorators: [{
|
|
2456
|
-
type: Injectable
|
|
2457
|
-
}], ctorParameters: function () { return [{ type: ContextMenuService }]; } });
|
|
2458
|
-
|
|
2459
|
-
/**
|
|
2460
|
-
* Represents a template for the content of the ContextMenu. To define a template, nest an `<ng-template>`
|
|
2461
|
-
* tag with the `kendoContextMenuTemplate` directive inside a `<kendo-contextmenu>` component
|
|
2462
|
-
* ([more information and examples]({% slug templates_contextmenu %})).
|
|
2463
|
-
*
|
|
2464
|
-
* {% meta height:200 %}
|
|
2465
|
-
* {% embed_file context-menu/template/app.component.ts preview %}
|
|
2466
|
-
* {% embed_file shared/app.module.ts %}
|
|
2467
|
-
* {% embed_file shared/main.ts %}
|
|
2468
|
-
* {% endmeta %}
|
|
2469
|
-
*/
|
|
2470
|
-
class ContextMenuTemplateDirective {
|
|
2471
|
-
constructor(templateRef) {
|
|
2472
|
-
this.templateRef = templateRef;
|
|
2473
|
-
}
|
|
2474
|
-
}
|
|
2475
|
-
ContextMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2476
|
-
ContextMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ContextMenuTemplateDirective, isStandalone: true, selector: "[kendoContextMenuTemplate]", ngImport: i0 });
|
|
2477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTemplateDirective, decorators: [{
|
|
2478
|
-
type: Directive,
|
|
2479
|
-
args: [{
|
|
2480
|
-
selector: '[kendoContextMenuTemplate]',
|
|
2481
|
-
standalone: true
|
|
2482
|
-
}]
|
|
2483
|
-
}], ctorParameters: function () {
|
|
2484
|
-
return [{ type: i0.TemplateRef, decorators: [{
|
|
2485
|
-
type: Optional
|
|
2486
|
-
}] }];
|
|
2487
|
-
} });
|
|
2488
|
-
|
|
2489
|
-
/**
|
|
2490
|
-
* @hidden
|
|
2491
|
-
*/
|
|
2492
|
-
class ContextMenuTargetService {
|
|
2493
|
-
constructor() {
|
|
2494
|
-
this.targets = [];
|
|
2495
|
-
}
|
|
2496
|
-
add(target) {
|
|
2497
|
-
this.targets.push(target);
|
|
2498
|
-
}
|
|
2499
|
-
remove(target) {
|
|
2500
|
-
const index = this.targets.indexOf(target);
|
|
2501
|
-
this.targets.splice(index, 1);
|
|
2502
|
-
}
|
|
2503
|
-
find(targetElement) {
|
|
2504
|
-
return this.targets.find(target => target.element === targetElement);
|
|
2505
|
-
}
|
|
2506
|
-
}
|
|
2507
|
-
ContextMenuTargetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2508
|
-
ContextMenuTargetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetService });
|
|
2509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetService, decorators: [{
|
|
2510
|
-
type: Injectable
|
|
2511
|
-
}] });
|
|
2512
|
-
|
|
2513
|
-
/**
|
|
2514
|
-
* Specifies a container for the [targets]({% slug api_menu_contextmenutargetdirective %}) of the ContextMenu.
|
|
2515
|
-
*/
|
|
2516
|
-
class ContextMenuTargetContainerDirective {
|
|
2517
|
-
/**
|
|
2518
|
-
* @hidden
|
|
2519
|
-
*/
|
|
2520
|
-
constructor(elementRef, targetService) {
|
|
2521
|
-
this.targetService = targetService;
|
|
2522
|
-
if (elementRef) {
|
|
2523
|
-
this.element = elementRef.nativeElement;
|
|
2524
|
-
}
|
|
2525
|
-
}
|
|
2526
|
-
}
|
|
2527
|
-
ContextMenuTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: ContextMenuTargetService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2528
|
-
ContextMenuTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ContextMenuTargetContainerDirective, isStandalone: true, selector: "[kendoContextMenuTargetContainer]", providers: [ContextMenuTargetService], exportAs: ["kendoContextMenuTargetContainer"], ngImport: i0 });
|
|
2529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetContainerDirective, decorators: [{
|
|
2530
|
-
type: Directive,
|
|
2531
|
-
args: [{
|
|
2532
|
-
selector: '[kendoContextMenuTargetContainer]',
|
|
2533
|
-
exportAs: 'kendoContextMenuTargetContainer',
|
|
2534
|
-
providers: [ContextMenuTargetService],
|
|
2535
|
-
standalone: true
|
|
2536
|
-
}]
|
|
2537
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextMenuTargetService }]; } });
|
|
2538
|
-
|
|
2539
|
-
/**
|
|
2540
|
-
* @hidden
|
|
2541
|
-
*/
|
|
2542
|
-
const TARGET_CLASS = 'k-contextmenu-target';
|
|
2543
|
-
/**
|
|
2544
|
-
* Specifies a [target]({% slug api_menu_contextmenutargetdirective %}) for the ContextMenu
|
|
2545
|
-
* ([see example]({% slug target_contextmenu %}#toc-directives)).
|
|
2546
|
-
*/
|
|
2547
|
-
class ContextMenuTargetDirective {
|
|
2548
|
-
constructor(elementRef, targetService) {
|
|
2549
|
-
this.targetService = targetService;
|
|
2550
|
-
/**
|
|
2551
|
-
* @hidden
|
|
2552
|
-
*/
|
|
2553
|
-
this.hostClass = true;
|
|
2554
|
-
if (elementRef) {
|
|
2555
|
-
this.element = elementRef.nativeElement;
|
|
2556
|
-
}
|
|
2557
|
-
targetService.add(this);
|
|
2558
|
-
}
|
|
2559
|
-
ngOnDestroy() {
|
|
2560
|
-
this.targetService.remove(this);
|
|
2561
|
-
}
|
|
2562
|
-
}
|
|
2563
|
-
ContextMenuTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetDirective, deps: [{ token: i0.ElementRef }, { token: ContextMenuTargetService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2564
|
-
ContextMenuTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ContextMenuTargetDirective, isStandalone: true, selector: "[kendoContextMenuTarget]", inputs: { data: ["kendoContextMenuTarget", "data"] }, host: { properties: { "class.k-contextmenu-target": "this.hostClass" } }, exportAs: ["kendoContextMenuTarget"], ngImport: i0 });
|
|
2565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuTargetDirective, decorators: [{
|
|
2566
|
-
type: Directive,
|
|
2567
|
-
args: [{
|
|
2568
|
-
selector: '[kendoContextMenuTarget]',
|
|
2569
|
-
exportAs: 'kendoContextMenuTarget',
|
|
2570
|
-
standalone: true
|
|
2571
|
-
}]
|
|
2572
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextMenuTargetService }]; }, propDecorators: { data: [{
|
|
2573
|
-
type: Input,
|
|
2574
|
-
args: ['kendoContextMenuTarget']
|
|
2575
|
-
}], hostClass: [{
|
|
2576
|
-
type: HostBinding,
|
|
2577
|
-
args: [`class.${TARGET_CLASS}`]
|
|
2578
|
-
}] } });
|
|
2579
|
-
|
|
2580
|
-
const CONTEXT_MENU = 'contextmenu';
|
|
2581
|
-
const DEFAULT_ANCHOR_ALIGN = { horizontal: 'left', vertical: 'bottom' };
|
|
2582
|
-
const DEFAULT_POPUP_ALIGN = { horizontal: 'left', vertical: 'top' };
|
|
2583
|
-
const DEFAULT_COLLISION = { horizontal: 'fit', vertical: 'flip' };
|
|
2584
|
-
const preventDefault = e => e.preventDefault();
|
|
2585
|
-
/**
|
|
2586
|
-
* Represents the [Kendo UI ContextMenu component for Angular]({% slug overview_contextmenu %}).
|
|
2587
|
-
*
|
|
2588
|
-
* @example
|
|
2589
|
-
* ```ts
|
|
2590
|
-
* _@Component({
|
|
2591
|
-
* selector: 'my-app',
|
|
2592
|
-
* template: `
|
|
2593
|
-
* <div #target>
|
|
2594
|
-
* Right-click to open Context menu</p>
|
|
2595
|
-
* </div>
|
|
2596
|
-
* <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
|
|
2597
|
-
* `
|
|
2598
|
-
* })
|
|
2599
|
-
* class AppComponent {
|
|
2600
|
-
* public items: any[] = [{ text: 'item1', items: [{ text: 'item1.1' }] }, { text: 'item2', disabled: true }];
|
|
2601
|
-
* }
|
|
2602
|
-
* ```
|
|
2603
|
-
*/
|
|
2604
|
-
class ContextMenuComponent extends MenuBase {
|
|
2605
|
-
constructor(popupService, service, ngZone, renderer) {
|
|
2606
|
-
super();
|
|
2607
|
-
this.popupService = popupService;
|
|
2608
|
-
this.service = service;
|
|
2609
|
-
this.ngZone = ngZone;
|
|
2610
|
-
this.renderer = renderer;
|
|
2611
|
-
/**
|
|
2612
|
-
* Specifies the event on which the ContextMenu will open ([see example]({% slug showon_contextmenu %})).
|
|
2613
|
-
* Accepts the name of a native DOM event. For example, `click`, `dblclick`, `mouseover`, etc.
|
|
2614
|
-
* @default 'contextmenu'
|
|
2615
|
-
*/
|
|
2616
|
-
this.showOn = CONTEXT_MENU;
|
|
2617
|
-
/**
|
|
2618
|
-
* Indicates that the ContextMenu will be aligned to the target or to the `filter` element (if specified).
|
|
2619
|
-
* @default false
|
|
2620
|
-
*/
|
|
2621
|
-
this.alignToAnchor = false;
|
|
2622
|
-
/**
|
|
2623
|
-
* Specifies if the Menu will be vertically rendered ([see example]({% slug orientation_contextmenu %})).
|
|
2624
|
-
* @default true
|
|
2625
|
-
*/
|
|
2626
|
-
this.vertical = true;
|
|
2627
|
-
/**
|
|
2628
|
-
* Fires when the Menu is opened ([see example](slug:events_contextmenu)).
|
|
2629
|
-
*/
|
|
2630
|
-
this.popupOpen = new EventEmitter();
|
|
2631
|
-
/**
|
|
2632
|
-
* Fires when the Menu is closed ([see example](slug:events_contextmenu)).
|
|
2633
|
-
*/
|
|
2634
|
-
this.popupClose = new EventEmitter();
|
|
2635
|
-
/**
|
|
2636
|
-
* Fires when a Menu item is selected ([see example](slug:events_contextmenu)).
|
|
2637
|
-
*/
|
|
2638
|
-
this.select = new EventEmitter();
|
|
2639
|
-
/**
|
|
2640
|
-
* Fires when a Menu item is opened ([see example](slug:events_contextmenu)).
|
|
2641
|
-
*/
|
|
2642
|
-
this.open = new EventEmitter();
|
|
2643
|
-
/**
|
|
2644
|
-
* Fires when a Menu item is closed ([see example](slug:events_contextmenu)).
|
|
2645
|
-
*/
|
|
2646
|
-
this.close = new EventEmitter();
|
|
2647
|
-
this.service.owner = this;
|
|
2648
|
-
this.popupKeyDownHandler = this.popupKeyDownHandler.bind(this);
|
|
2649
|
-
}
|
|
2650
|
-
/**
|
|
2651
|
-
* Hides the ContextMenu.
|
|
2652
|
-
*/
|
|
2653
|
-
hide() {
|
|
2654
|
-
this.removePopup();
|
|
2655
|
-
}
|
|
2656
|
-
/**
|
|
2657
|
-
* Shows the ContextMenu for the specified target.
|
|
2658
|
-
* @param target - The offset or the target element for which the ContextMenu will open.
|
|
2659
|
-
*/
|
|
2660
|
-
show(target) {
|
|
2661
|
-
if (!target) {
|
|
2662
|
-
return;
|
|
2663
|
-
}
|
|
2664
|
-
const showTarget = target;
|
|
2665
|
-
this.removePopup();
|
|
2666
|
-
if (defined(showTarget.left) && defined(showTarget.top)) {
|
|
2667
|
-
this.createPopup({ offset: showTarget });
|
|
2668
|
-
}
|
|
2669
|
-
else {
|
|
2670
|
-
this.currentTarget = showTarget.nativeElement || showTarget;
|
|
2671
|
-
this.createPopup({ anchor: this.currentTarget });
|
|
2672
|
-
}
|
|
2673
|
-
}
|
|
2674
|
-
ngOnChanges(changes) {
|
|
2675
|
-
if (changes.target || changes.showOn) {
|
|
2676
|
-
this.bindShowHandler();
|
|
2677
|
-
}
|
|
2678
|
-
}
|
|
2679
|
-
ngOnInit() {
|
|
2680
|
-
this.ngZone.runOutsideAngular(() => {
|
|
2681
|
-
const closeClickSubscription = this.renderer.listen('document', 'mousedown', (e) => {
|
|
2682
|
-
if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement) && this.service.leaveMenu(e)) {
|
|
2683
|
-
this.closePopup(e);
|
|
2684
|
-
}
|
|
2685
|
-
});
|
|
2686
|
-
const closeBlurSubscription = this.renderer.listen('window', 'blur', (e) => {
|
|
2687
|
-
if (this.popupRef) {
|
|
2688
|
-
this.closePopup(e);
|
|
2689
|
-
}
|
|
2690
|
-
});
|
|
2691
|
-
this.closeSubscription = () => {
|
|
2692
|
-
closeClickSubscription();
|
|
2693
|
-
closeBlurSubscription();
|
|
2694
|
-
};
|
|
2695
|
-
});
|
|
2696
|
-
}
|
|
2697
|
-
ngOnDestroy() {
|
|
2698
|
-
if (this.closeSubscription) {
|
|
2699
|
-
this.closeSubscription();
|
|
2700
|
-
this.closeSubscription = null;
|
|
2701
|
-
}
|
|
2702
|
-
this.unbindShowHandler();
|
|
2703
|
-
this.removePopup();
|
|
2704
|
-
}
|
|
2705
|
-
/**
|
|
2706
|
-
* @hidden
|
|
2707
|
-
*/
|
|
2708
|
-
emitMenuEvent(name, args) {
|
|
2709
|
-
args.target = this.currentTarget;
|
|
2710
|
-
args.sender = this;
|
|
2711
|
-
this[name].emit(args);
|
|
2712
|
-
if (name === 'select' && !args.hasContent) {
|
|
2713
|
-
this.closeAndFocus(args.originalEvent);
|
|
2714
|
-
}
|
|
2715
|
-
}
|
|
2716
|
-
bindShowHandler() {
|
|
2717
|
-
this.unbindShowHandler();
|
|
2718
|
-
this.ngZone.runOutsideAngular(() => {
|
|
2719
|
-
const element = this.targetElement();
|
|
2720
|
-
if (!element) {
|
|
2721
|
-
return;
|
|
2722
|
-
}
|
|
2723
|
-
const eventName = this.showOn || CONTEXT_MENU;
|
|
2724
|
-
this.showSubscription = this.renderer.listen(element, this.showOn || CONTEXT_MENU, (e) => {
|
|
2725
|
-
this.showContextMenu(e, element);
|
|
2726
|
-
});
|
|
2727
|
-
if (eventName === CONTEXT_MENU) {
|
|
2728
|
-
this.keydownSubscription = this.renderer.listen(element, 'keydown', (e) => {
|
|
2729
|
-
if (e.shiftKey && e.keyCode === Keys.F10) {
|
|
2730
|
-
this.showContextMenu(e, element);
|
|
2731
|
-
}
|
|
2732
|
-
});
|
|
2733
|
-
}
|
|
2734
|
-
});
|
|
2735
|
-
}
|
|
2736
|
-
showContextMenu(e, element) {
|
|
2737
|
-
const filter = this.targetFilter();
|
|
2738
|
-
let currentTarget = element;
|
|
2739
|
-
if (filter) {
|
|
2740
|
-
currentTarget = findInContainer(e.target, filter, element);
|
|
2741
|
-
if (currentTarget && currentTarget !== e.target && isFocusable(e.target)) {
|
|
2742
|
-
return;
|
|
2743
|
-
}
|
|
2744
|
-
if (currentTarget && this.directiveTarget) {
|
|
2745
|
-
currentTarget = this.target.targetService.find(currentTarget);
|
|
2746
|
-
}
|
|
2747
|
-
}
|
|
2748
|
-
if (!currentTarget) {
|
|
2749
|
-
this.closePopup(e);
|
|
2750
|
-
return;
|
|
2751
|
-
}
|
|
2752
|
-
this.ngZone.run(() => {
|
|
2753
|
-
if (!this.closePopup(e)) {
|
|
2754
|
-
this.currentTarget = currentTarget;
|
|
2755
|
-
this.openPopup(e);
|
|
2756
|
-
}
|
|
2757
|
-
});
|
|
2758
|
-
}
|
|
2759
|
-
unbindShowHandler() {
|
|
2760
|
-
if (this.showSubscription) {
|
|
2761
|
-
this.showSubscription();
|
|
2762
|
-
this.showSubscription = null;
|
|
2763
|
-
}
|
|
2764
|
-
if (this.keydownSubscription) {
|
|
2765
|
-
this.keydownSubscription();
|
|
2766
|
-
this.keydownSubscription = null;
|
|
2767
|
-
}
|
|
2768
|
-
}
|
|
2769
|
-
targetElement() {
|
|
2770
|
-
if (!isDocumentAvailable()) {
|
|
2771
|
-
return;
|
|
2772
|
-
}
|
|
2773
|
-
this.directiveTarget = false;
|
|
2774
|
-
let target = this.target;
|
|
2775
|
-
if (typeof target === 'string') {
|
|
2776
|
-
target = document.querySelector(target); // maybe querySelectorAll?
|
|
2777
|
-
}
|
|
2778
|
-
else if (target && target.nativeElement) {
|
|
2779
|
-
target = target.nativeElement;
|
|
2780
|
-
}
|
|
2781
|
-
else if (target instanceof ContextMenuTargetContainerDirective) {
|
|
2782
|
-
target = target.element;
|
|
2783
|
-
this.directiveTarget = true;
|
|
2784
|
-
}
|
|
2785
|
-
return target;
|
|
2786
|
-
}
|
|
2787
|
-
targetFilter() {
|
|
2788
|
-
if (this.directiveTarget) {
|
|
2789
|
-
return `.${TARGET_CLASS}`;
|
|
2790
|
-
}
|
|
2791
|
-
return this.filter;
|
|
2792
|
-
}
|
|
2793
|
-
closePopup(e) {
|
|
2794
|
-
if (!this.popupRef) {
|
|
2795
|
-
return;
|
|
2796
|
-
}
|
|
2797
|
-
return this.popupAction('popupClose', e, () => {
|
|
2798
|
-
this.removePopup();
|
|
2799
|
-
});
|
|
2800
|
-
}
|
|
2801
|
-
removePopup() {
|
|
2802
|
-
if (this.popupRef) {
|
|
2803
|
-
this.popupRef.close();
|
|
2804
|
-
this.popupRef = null;
|
|
2805
|
-
this.currentTarget = null;
|
|
2806
|
-
}
|
|
2807
|
-
if (this.popupSubscriptions) {
|
|
2808
|
-
this.popupSubscriptions();
|
|
2809
|
-
this.popupSubscriptions = null;
|
|
2810
|
-
}
|
|
2811
|
-
}
|
|
2812
|
-
openPopup(e) {
|
|
2813
|
-
this.popupAction('popupOpen', e, () => {
|
|
2814
|
-
e.preventDefault();
|
|
2815
|
-
let anchor, offset;
|
|
2816
|
-
if (this.alignToAnchor || e.type === 'keydown') {
|
|
2817
|
-
anchor = this.currentTargetElement;
|
|
2818
|
-
}
|
|
2819
|
-
else {
|
|
2820
|
-
offset = { left: e.pageX, top: e.pageY };
|
|
2821
|
-
}
|
|
2822
|
-
this.createPopup({ anchor, offset });
|
|
2823
|
-
});
|
|
2824
|
-
}
|
|
2825
|
-
createPopup(options) {
|
|
2826
|
-
this.popupRef = this.popupService.open(Object.assign({
|
|
2827
|
-
animate: defined(this.popupAnimate) ? this.popupAnimate : true,
|
|
2828
|
-
appendTo: this.appendTo,
|
|
2829
|
-
collision: this.collision || DEFAULT_COLLISION,
|
|
2830
|
-
popupAlign: this.popupAlign || DEFAULT_POPUP_ALIGN,
|
|
2831
|
-
anchorAlign: this.anchorAlign || DEFAULT_ANCHOR_ALIGN,
|
|
2832
|
-
content: this.contentTemplate ? this.contentTemplate.templateRef : this.defaultContentTemplate,
|
|
2833
|
-
popupClass: 'k-menu-popup',
|
|
2834
|
-
positionMode: 'absolute'
|
|
2835
|
-
}, options));
|
|
2836
|
-
const element = this.popupRef.popupElement;
|
|
2837
|
-
this.renderer.addClass(element, 'k-context-menu-popup');
|
|
2838
|
-
this.renderer.setAttribute(element, 'tabindex', '-1');
|
|
2839
|
-
this.renderer.setStyle(element, 'outline', '0'); //possibly move to styles
|
|
2840
|
-
if (this.ariaLabel) {
|
|
2841
|
-
this.renderer.setAttribute(element, 'aria-label', this.ariaLabel);
|
|
2842
|
-
}
|
|
2843
|
-
this.activeTarget = this.currentTargetElement === document.activeElement;
|
|
2844
|
-
this.ngZone.runOutsideAngular(() => {
|
|
2845
|
-
const unbindKeyDown = this.renderer.listen(element, 'keydown', this.popupKeyDownHandler);
|
|
2846
|
-
const unbindContextmenu = this.renderer.listen(element, 'contextmenu', preventDefault);
|
|
2847
|
-
this.popupSubscriptions = () => {
|
|
2848
|
-
unbindKeyDown();
|
|
2849
|
-
unbindContextmenu();
|
|
2850
|
-
};
|
|
2851
|
-
});
|
|
2852
|
-
element.focus();
|
|
2853
|
-
}
|
|
2854
|
-
closeAndFocus(e) {
|
|
2855
|
-
const currentTarget = this.currentTargetElement;
|
|
2856
|
-
if (!this.closePopup(e) && this.activeTarget) {
|
|
2857
|
-
currentTarget.focus();
|
|
2858
|
-
}
|
|
2859
|
-
}
|
|
2860
|
-
popupKeyDownHandler(e) {
|
|
2861
|
-
const element = this.popupRef.popupElement;
|
|
2862
|
-
if (e.keyCode === Keys.Escape && (hasClass(e.target, 'k-menu-item') || e.target === element)) {
|
|
2863
|
-
this.closeAndFocus(e);
|
|
2864
|
-
}
|
|
2865
|
-
else if (e.target === element) {
|
|
2866
|
-
this.service.keydown.emit(e);
|
|
2867
|
-
}
|
|
2868
|
-
}
|
|
2869
|
-
popupAction(name, originalEvent, callback) {
|
|
2870
|
-
const emitter = this[name];
|
|
2871
|
-
let prevented = false;
|
|
2872
|
-
if (hasObservers(emitter)) {
|
|
2873
|
-
this.ngZone.run(() => {
|
|
2874
|
-
const args = new ContextMenuPopupEvent({
|
|
2875
|
-
originalEvent: originalEvent,
|
|
2876
|
-
sender: this,
|
|
2877
|
-
target: this.currentTarget
|
|
2878
|
-
});
|
|
2879
|
-
emitter.emit(args);
|
|
2880
|
-
if (!args.isDefaultPrevented()) {
|
|
2881
|
-
callback();
|
|
2882
|
-
}
|
|
2883
|
-
prevented = args.isDefaultPrevented();
|
|
2884
|
-
});
|
|
2885
|
-
}
|
|
2886
|
-
else {
|
|
2887
|
-
callback();
|
|
2888
|
-
}
|
|
2889
|
-
return prevented;
|
|
2890
|
-
}
|
|
2891
|
-
get currentTargetElement() {
|
|
2892
|
-
return this.directiveTarget && this.currentTarget ? this.currentTarget.element : this.currentTarget;
|
|
2893
|
-
}
|
|
2894
|
-
}
|
|
2895
|
-
ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i5.PopupService }, { token: ContextMenuService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2896
|
-
ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
|
|
2897
|
-
ContextMenuService,
|
|
2898
|
-
LocalizationService,
|
|
2899
|
-
{
|
|
2900
|
-
provide: L10N_PREFIX,
|
|
2901
|
-
useValue: 'kendo.contextmenu'
|
|
2902
|
-
},
|
|
2903
|
-
{
|
|
2904
|
-
provide: ItemsService,
|
|
2905
|
-
useClass: ContextMenuItemsService
|
|
2906
|
-
},
|
|
2907
|
-
{
|
|
2908
|
-
provide: MenuBase,
|
|
2909
|
-
useExisting: forwardRef(() => ContextMenuComponent)
|
|
2910
|
-
},
|
|
2911
|
-
PopupService,
|
|
2912
|
-
{
|
|
2913
|
-
provide: POPUP_CONTAINER,
|
|
2914
|
-
useFactory: bodyFactory
|
|
2915
|
-
}
|
|
2916
|
-
], 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: `
|
|
2917
|
-
<ng-template #default>
|
|
2918
|
-
<kendo-menu [items]="rootItems"
|
|
2919
|
-
[appendTo]="appendTo"
|
|
2920
|
-
[size]="size"
|
|
2921
|
-
ariaRole="menu"
|
|
2922
|
-
[vertical]="vertical"
|
|
2923
|
-
[openOnClick]="openOnClick"
|
|
2924
|
-
[hoverDelay]="hoverDelay"
|
|
2925
|
-
[animate]="animate"
|
|
2926
|
-
[menuItemTemplate]="itemTemplate.first?.templateRef"
|
|
2927
|
-
[menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
|
|
2928
|
-
></kendo-menu>
|
|
2929
|
-
</ng-template>
|
|
2930
|
-
`, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
|
|
2931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuComponent, decorators: [{
|
|
2932
|
-
type: Component,
|
|
2933
|
-
args: [{
|
|
2934
|
-
exportAs: 'kendoContextMenu',
|
|
2935
|
-
providers: [
|
|
2936
|
-
ContextMenuService,
|
|
2937
|
-
LocalizationService,
|
|
2938
|
-
{
|
|
2939
|
-
provide: L10N_PREFIX,
|
|
2940
|
-
useValue: 'kendo.contextmenu'
|
|
2941
|
-
},
|
|
2942
|
-
{
|
|
2943
|
-
provide: ItemsService,
|
|
2944
|
-
useClass: ContextMenuItemsService
|
|
2945
|
-
},
|
|
2946
|
-
{
|
|
2947
|
-
provide: MenuBase,
|
|
2948
|
-
useExisting: forwardRef(() => ContextMenuComponent)
|
|
2949
|
-
},
|
|
2950
|
-
PopupService,
|
|
2951
|
-
{
|
|
2952
|
-
provide: POPUP_CONTAINER,
|
|
2953
|
-
useFactory: bodyFactory
|
|
2954
|
-
}
|
|
2955
|
-
],
|
|
2956
|
-
selector: 'kendo-contextmenu',
|
|
2957
|
-
template: `
|
|
2958
|
-
<ng-template #default>
|
|
2959
|
-
<kendo-menu [items]="rootItems"
|
|
2960
|
-
[appendTo]="appendTo"
|
|
2961
|
-
[size]="size"
|
|
2962
|
-
ariaRole="menu"
|
|
2963
|
-
[vertical]="vertical"
|
|
2964
|
-
[openOnClick]="openOnClick"
|
|
2965
|
-
[hoverDelay]="hoverDelay"
|
|
2966
|
-
[animate]="animate"
|
|
2967
|
-
[menuItemTemplate]="itemTemplate.first?.templateRef"
|
|
2968
|
-
[menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
|
|
2969
|
-
></kendo-menu>
|
|
2970
|
-
</ng-template>
|
|
2971
|
-
`,
|
|
2972
|
-
standalone: true,
|
|
2973
|
-
imports: [MenuComponent]
|
|
2974
|
-
}]
|
|
2975
|
-
}], ctorParameters: function () { return [{ type: i5.PopupService }, { type: ContextMenuService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { showOn: [{
|
|
2976
|
-
type: Input
|
|
2977
|
-
}], target: [{
|
|
2978
|
-
type: Input
|
|
2979
|
-
}], filter: [{
|
|
2980
|
-
type: Input
|
|
2981
|
-
}], alignToAnchor: [{
|
|
2982
|
-
type: Input
|
|
2983
|
-
}], vertical: [{
|
|
2984
|
-
type: Input
|
|
2985
|
-
}], popupAnimate: [{
|
|
2986
|
-
type: Input
|
|
2987
|
-
}], popupAlign: [{
|
|
2988
|
-
type: Input
|
|
2989
|
-
}], anchorAlign: [{
|
|
2990
|
-
type: Input
|
|
2991
|
-
}], collision: [{
|
|
2992
|
-
type: Input
|
|
2993
|
-
}], appendTo: [{
|
|
2994
|
-
type: Input
|
|
2995
|
-
}], ariaLabel: [{
|
|
2996
|
-
type: Input
|
|
2997
|
-
}], popupOpen: [{
|
|
2998
|
-
type: Output
|
|
2999
|
-
}], popupClose: [{
|
|
3000
|
-
type: Output
|
|
3001
|
-
}], select: [{
|
|
3002
|
-
type: Output
|
|
3003
|
-
}], open: [{
|
|
3004
|
-
type: Output
|
|
3005
|
-
}], close: [{
|
|
3006
|
-
type: Output
|
|
3007
|
-
}], contentTemplate: [{
|
|
3008
|
-
type: ContentChild,
|
|
3009
|
-
args: [ContextMenuTemplateDirective, { static: false }]
|
|
3010
|
-
}], defaultContentTemplate: [{
|
|
3011
|
-
type: ViewChild,
|
|
3012
|
-
args: ['default', { static: false }]
|
|
3013
|
-
}] } });
|
|
3014
|
-
|
|
3015
|
-
/**
|
|
3016
|
-
* Utility array that contains all `Menu` related components and directives.
|
|
3017
|
-
*/
|
|
3018
|
-
const KENDO_MENU = [
|
|
3019
|
-
MenuComponent,
|
|
3020
|
-
MenuItemComponent,
|
|
3021
|
-
ItemTemplateDirective,
|
|
3022
|
-
ItemLinkTemplateDirective,
|
|
3023
|
-
ItemContentTemplateDirective,
|
|
3024
|
-
HierarchyBindingDirective,
|
|
3025
|
-
FlatBindingDirective,
|
|
3026
|
-
LinkDirective,
|
|
3027
|
-
ExpandArrowComponent
|
|
3028
|
-
];
|
|
3029
|
-
/**
|
|
3030
|
-
* Utility array that contains all `ContextMenu` related components and directives.
|
|
3031
|
-
*/
|
|
3032
|
-
const KENDO_CONTEXTMENU = [
|
|
3033
|
-
ContextMenuComponent,
|
|
3034
|
-
ContextMenuTemplateDirective,
|
|
3035
|
-
ContextMenuTargetDirective,
|
|
3036
|
-
ContextMenuTargetContainerDirective,
|
|
3037
|
-
...KENDO_MENU
|
|
3038
|
-
];
|
|
3039
|
-
/**
|
|
3040
|
-
* Utility array that contains all `@progress/kendo-angular-menu` related components and directives.
|
|
3041
|
-
*/
|
|
3042
|
-
const KENDO_MENUS = [
|
|
3043
|
-
...KENDO_MENU,
|
|
3044
|
-
...KENDO_CONTEXTMENU
|
|
3045
|
-
];
|
|
3046
|
-
|
|
3047
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
3048
|
-
/**
|
|
3049
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
3050
|
-
* definition for the Menu component.
|
|
3051
|
-
*
|
|
3052
|
-
* @example
|
|
3053
|
-
*
|
|
3054
|
-
* ```ts-no-run
|
|
3055
|
-
* // Import the Menu module
|
|
3056
|
-
* import { MenuModule } from '@progress/kendo-angular-menu';
|
|
3057
|
-
*
|
|
3058
|
-
* // The browser platform with a compiler
|
|
3059
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
3060
|
-
* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
3061
|
-
*
|
|
3062
|
-
* import { NgModule } from '@angular/core';
|
|
3063
|
-
*
|
|
3064
|
-
* // Import the app component
|
|
3065
|
-
* import { AppComponent } from './app.component';
|
|
3066
|
-
*
|
|
3067
|
-
* // Define the app module
|
|
3068
|
-
* _@NgModule({
|
|
3069
|
-
* declarations: [AppComponent], // declare app component
|
|
3070
|
-
* imports: [BrowserModule, BrowserAnimationsModule, MenuModule], // import Menu module
|
|
3071
|
-
* bootstrap: [AppComponent]
|
|
3072
|
-
* })
|
|
3073
|
-
* export class AppModule {}
|
|
3074
|
-
*
|
|
3075
|
-
* // Compile and launch the module
|
|
3076
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
3077
|
-
*
|
|
3078
|
-
* ```
|
|
3079
|
-
*/
|
|
3080
|
-
class MenuModule {
|
|
3081
|
-
}
|
|
3082
|
-
MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3083
|
-
MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MenuModule, imports: [MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent], exports: [MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent] });
|
|
3084
|
-
MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [MenuComponent, MenuItemComponent, ExpandArrowComponent] });
|
|
3085
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuModule, decorators: [{
|
|
3086
|
-
type: NgModule,
|
|
3087
|
-
args: [{
|
|
3088
|
-
exports: [...KENDO_MENU],
|
|
3089
|
-
imports: [...KENDO_MENU],
|
|
3090
|
-
providers: [PopupService, IconsService, ResizeBatchService]
|
|
3091
|
-
}]
|
|
3092
|
-
}] });
|
|
3093
|
-
|
|
3094
|
-
/**
|
|
3095
|
-
* Arguments for the `open` and `close` events of the ContextMenu.
|
|
3096
|
-
*/
|
|
3097
|
-
class ContextMenuEvent {
|
|
3098
|
-
}
|
|
3099
|
-
|
|
3100
|
-
/**
|
|
3101
|
-
* Arguments for the `select` event of the ContextMenu.
|
|
3102
|
-
*/
|
|
3103
|
-
class ContextMenuSelectEvent extends ContextMenuEvent {
|
|
3104
|
-
}
|
|
3105
|
-
|
|
3106
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
3107
|
-
/**
|
|
3108
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
3109
|
-
* definition for the ContextMenu component.
|
|
3110
|
-
*
|
|
3111
|
-
* @example
|
|
3112
|
-
*
|
|
3113
|
-
* ```ts-no-run
|
|
3114
|
-
* // Import the ContextMenu module
|
|
3115
|
-
* import { ContextMenuModule } from '@progress/kendo-angular-menu';
|
|
3116
|
-
*
|
|
3117
|
-
* // The browser platform with a compiler
|
|
3118
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
3119
|
-
* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
3120
|
-
*
|
|
3121
|
-
* import { NgModule } from '@angular/core';
|
|
3122
|
-
*
|
|
3123
|
-
* // Import the app component
|
|
3124
|
-
* import { AppComponent } from './app.component';
|
|
3125
|
-
*
|
|
3126
|
-
* // Define the app module
|
|
3127
|
-
* _@NgModule({
|
|
3128
|
-
* declarations: [AppComponent], // declare app component
|
|
3129
|
-
* imports: [BrowserModule, BrowserAnimationsModule, ContextMenuModule], // import ContextMenuModule module
|
|
3130
|
-
* bootstrap: [AppComponent]
|
|
3131
|
-
* })
|
|
3132
|
-
* export class AppModule {}
|
|
3133
|
-
*
|
|
3134
|
-
* // Compile and launch the module
|
|
3135
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
3136
|
-
*
|
|
3137
|
-
* ```
|
|
3138
|
-
*/
|
|
3139
|
-
class ContextMenuModule {
|
|
3140
|
-
}
|
|
3141
|
-
ContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3142
|
-
ContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuModule, imports: [ContextMenuComponent, ContextMenuTemplateDirective, ContextMenuTargetDirective, ContextMenuTargetContainerDirective, MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent], exports: [ContextMenuComponent, ContextMenuTemplateDirective, ContextMenuTargetDirective, ContextMenuTargetContainerDirective, MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent] });
|
|
3143
|
-
ContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [ContextMenuComponent, MenuComponent, MenuItemComponent, ExpandArrowComponent] });
|
|
3144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContextMenuModule, decorators: [{
|
|
3145
|
-
type: NgModule,
|
|
3146
|
-
args: [{
|
|
3147
|
-
exports: [...KENDO_CONTEXTMENU],
|
|
3148
|
-
imports: [...KENDO_CONTEXTMENU],
|
|
3149
|
-
providers: [PopupService, IconsService, ResizeBatchService]
|
|
3150
|
-
}]
|
|
3151
|
-
}] });
|
|
3152
|
-
|
|
3153
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
3154
|
-
/**
|
|
3155
|
-
* A [module](link:site.data.urls.angular['ngmoduleapi']) that includes the Menu and ContextMenu components and directives.
|
|
3156
|
-
* Imports the MenusModule into your application [root module](link:site.data.urls.angular['ngmodules']#angular-modularity)
|
|
3157
|
-
* or any other sub-module that will use the Menu and ContextMenu components.
|
|
3158
|
-
*
|
|
3159
|
-
* @example
|
|
3160
|
-
* ```ts-no-run
|
|
3161
|
-
* import { NgModule } from '@angular/core';
|
|
3162
|
-
* import { BrowserModule } from '@angular/platform-browser';
|
|
3163
|
-
* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
3164
|
-
* import { MenusModule } from '@progress/kendo-angular-menu';
|
|
3165
|
-
* import { AppComponent } from './app.component';
|
|
3166
|
-
*
|
|
3167
|
-
* _@NgModule({
|
|
3168
|
-
* bootstrap: [AppComponent],
|
|
3169
|
-
* declarations: [AppComponent],
|
|
3170
|
-
* imports: [BrowserModule, BrowserAnimationsModule, MenusModule]
|
|
3171
|
-
* })
|
|
3172
|
-
* export class AppModule {
|
|
3173
|
-
* }
|
|
3174
|
-
* ```
|
|
3175
|
-
*/
|
|
3176
|
-
class MenusModule {
|
|
3177
|
-
}
|
|
3178
|
-
MenusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3179
|
-
MenusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MenusModule, imports: [MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent, ContextMenuComponent, ContextMenuTemplateDirective, ContextMenuTargetDirective, ContextMenuTargetContainerDirective, MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent], exports: [MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent, ContextMenuComponent, ContextMenuTemplateDirective, ContextMenuTargetDirective, ContextMenuTargetContainerDirective, MenuComponent, MenuItemComponent, ItemTemplateDirective, ItemLinkTemplateDirective, ItemContentTemplateDirective, HierarchyBindingDirective, FlatBindingDirective, LinkDirective, ExpandArrowComponent] });
|
|
3180
|
-
MenusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenusModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [MenuComponent, MenuItemComponent, ExpandArrowComponent, ContextMenuComponent, MenuComponent, MenuItemComponent, ExpandArrowComponent] });
|
|
3181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenusModule, decorators: [{
|
|
3182
|
-
type: NgModule,
|
|
3183
|
-
args: [{
|
|
3184
|
-
exports: [...KENDO_MENUS],
|
|
3185
|
-
imports: [...KENDO_MENUS],
|
|
3186
|
-
providers: [PopupService, IconsService, ResizeBatchService]
|
|
3187
|
-
}]
|
|
3188
|
-
}] });
|
|
3189
|
-
|
|
3190
|
-
/**
|
|
3191
|
-
* Generated bundle index. Do not edit.
|
|
3192
|
-
*/
|
|
3193
|
-
|
|
3194
|
-
export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowComponent, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, ItemsService, KENDO_CONTEXTMENU, KENDO_MENU, KENDO_MENUS, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
|
|
3195
|
-
|