@progress/kendo-angular-menu 3.0.6 → 4.0.0-next.202203230842

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.
Files changed (199) hide show
  1. package/bundles/kendo-angular-menu.umd.js +5 -0
  2. package/{dist/es2015/constants.d.ts → constants.d.ts} +0 -0
  3. package/{dist/es2015/context-menu → context-menu}/context-menu-event.d.ts +0 -0
  4. package/{dist/es2015/context-menu → context-menu}/context-menu-items.service.d.ts +3 -0
  5. package/{dist/es2015/context-menu → context-menu}/context-menu-popup-event.d.ts +0 -0
  6. package/{dist/es2015/context-menu → context-menu}/context-menu-select-event.d.ts +0 -0
  7. package/{dist/es2015/context-menu → context-menu}/context-menu-target-container.directive.d.ts +3 -0
  8. package/{dist/es2015/context-menu → context-menu}/context-menu-target.directive.d.ts +3 -0
  9. package/{dist/es2015/context-menu → context-menu}/context-menu-target.service.d.ts +3 -0
  10. package/{dist/es2015/context-menu → context-menu}/context-menu-template.directive.d.ts +3 -0
  11. package/{dist/es2015/context-menu → context-menu}/context-menu.component.d.ts +4 -1
  12. package/{dist/es2015/context-menu → context-menu}/context-menu.module.d.ts +11 -0
  13. package/{dist/es2015/context-menu → context-menu}/context-menu.service.d.ts +3 -0
  14. package/{dist/es2015/data-binding → data-binding}/binding-directive-base.d.ts +3 -0
  15. package/{dist/es2015/data-binding → data-binding}/flat-binding.directive.d.ts +3 -0
  16. package/{dist/es2015/data-binding → data-binding}/hierachy-binding.directive.d.ts +3 -0
  17. package/{dist/es2015/data-binding → data-binding}/utils.d.ts +0 -0
  18. package/{dist/es2015/dom-queries.d.ts → dom-queries.d.ts} +0 -0
  19. package/{dist/es2015 → esm2015}/constants.js +0 -0
  20. package/{dist/es2015 → esm2015}/context-menu/context-menu-event.js +0 -0
  21. package/esm2015/context-menu/context-menu-items.service.js +25 -0
  22. package/{dist/es2015 → esm2015}/context-menu/context-menu-popup-event.js +0 -0
  23. package/{dist/es2015 → esm2015}/context-menu/context-menu-select-event.js +0 -0
  24. package/esm2015/context-menu/context-menu-target-container.directive.js +32 -0
  25. package/esm2015/context-menu/context-menu-target.directive.js +46 -0
  26. package/{dist/es2015 → esm2015}/context-menu/context-menu-target.service.js +8 -10
  27. package/esm2015/context-menu/context-menu-template.directive.js +32 -0
  28. package/{dist/es2015 → esm2015}/context-menu/context-menu.component.js +107 -113
  29. package/{dist/es2015 → esm2015}/context-menu/context-menu.module.js +20 -11
  30. package/{dist/es2015 → esm2015}/context-menu/context-menu.service.js +8 -10
  31. package/{dist/es2015 → esm2015}/data-binding/binding-directive-base.js +11 -0
  32. package/esm2015/data-binding/flat-binding.directive.js +82 -0
  33. package/esm2015/data-binding/hierachy-binding.directive.js +71 -0
  34. package/{dist/es2015 → esm2015}/data-binding/utils.js +0 -1
  35. package/{dist/es2015 → esm2015}/dom-queries.js +0 -3
  36. package/{dist/es/constants.js → esm2015/kendo-angular-menu.js} +2 -2
  37. package/{dist/es → esm2015}/main.js +3 -2
  38. package/{dist/es → esm2015}/menu-animation.interface.js +1 -0
  39. package/esm2015/menu-base.js +69 -0
  40. package/{dist/es2015 → esm2015}/menu-event.js +0 -0
  41. package/{dist/es2015 → esm2015}/menu-item.component.js +41 -60
  42. package/{dist/es → esm2015}/menu-item.interface.js +1 -0
  43. package/{dist/es2015 → esm2015}/menu-select-event.js +0 -0
  44. package/{dist/es2015 → esm2015}/menu.component.js +76 -63
  45. package/{dist/es2015 → esm2015}/menu.module.js +32 -13
  46. package/{dist/es2015 → esm2015}/menus.module.js +12 -9
  47. package/{dist/es2015 → esm2015}/open-on-click-settings.js +0 -1
  48. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  49. package/{dist/es2015 → esm2015}/preventable-event.js +0 -0
  50. package/esm2015/rendering/arrow.directive.js +62 -0
  51. package/esm2015/rendering/link.directive.js +54 -0
  52. package/esm2015/rendering/list.component.js +546 -0
  53. package/{dist/es2015 → esm2015}/rendering/popup-settings.js +0 -0
  54. package/{dist/es2015 → esm2015}/services/actions.service.js +21 -14
  55. package/{dist/es2015 → esm2015}/services/hover.service.js +10 -10
  56. package/{dist/es2015 → esm2015}/services/items.service.js +8 -13
  57. package/{dist/es2015 → esm2015}/services/navigation.service.js +12 -15
  58. package/{dist/es2015 → esm2015}/templates/item-content-template.directive.js +14 -12
  59. package/{dist/es2015 → esm2015}/templates/item-link-template.directive.js +14 -12
  60. package/{dist/es2015 → esm2015}/templates/item-template.directive.js +14 -12
  61. package/{dist/es2015 → esm2015}/utils.js +0 -0
  62. package/{dist/fesm2015/index.js → fesm2015/kendo-angular-menu.js} +1112 -1113
  63. package/kendo-angular-menu.d.ts +9 -0
  64. package/{dist/es2015/main.d.ts → main.d.ts} +3 -2
  65. package/{dist/es2015/menu-animation.interface.d.ts → menu-animation.interface.d.ts} +0 -0
  66. package/{dist/es2015/menu-base.d.ts → menu-base.d.ts} +4 -1
  67. package/{dist/es2015/menu-event.d.ts → menu-event.d.ts} +0 -0
  68. package/{dist/es2015/menu-item.component.d.ts → menu-item.component.d.ts} +7 -4
  69. package/{dist/es2015/menu-item.interface.d.ts → menu-item.interface.d.ts} +0 -0
  70. package/{dist/es2015/menu-select-event.d.ts → menu-select-event.d.ts} +0 -0
  71. package/{dist/es2015/menu.component.d.ts → menu.component.d.ts} +7 -4
  72. package/menu.module.d.ts +54 -0
  73. package/{dist/es2015/menus.module.d.ts → menus.module.d.ts} +6 -0
  74. package/{dist/es2015/open-on-click-settings.d.ts → open-on-click-settings.d.ts} +0 -0
  75. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  76. package/package.json +31 -106
  77. package/{dist/es2015/preventable-event.d.ts → preventable-event.d.ts} +0 -0
  78. package/{dist/es2015/rendering → rendering}/arrow.directive.d.ts +6 -3
  79. package/{dist/es2015/rendering → rendering}/link.directive.d.ts +4 -1
  80. package/rendering/list.component.d.ts +104 -0
  81. package/{dist/es2015/rendering → rendering}/popup-settings.d.ts +0 -0
  82. package/schematics/ngAdd/index.js +5 -2
  83. package/schematics/ngAdd/index.js.map +1 -1
  84. package/{dist/es2015/services → services}/actions.service.d.ts +24 -1
  85. package/{dist/es2015/services → services}/hover.service.d.ts +7 -2
  86. package/{dist/es2015/services → services}/items.service.d.ts +4 -1
  87. package/{dist/es2015/services → services}/navigation.service.d.ts +6 -3
  88. package/{dist/es2015/templates → templates}/item-content-template.directive.d.ts +3 -0
  89. package/{dist/es2015/templates → templates}/item-link-template.directive.d.ts +3 -0
  90. package/{dist/es2015/templates → templates}/item-template.directive.d.ts +3 -0
  91. package/{dist/es2015/utils.d.ts → utils.d.ts} +1 -1
  92. package/dist/cdn/js/kendo-angular-menu.js +0 -20
  93. package/dist/cdn/main.js +0 -5
  94. package/dist/es/context-menu/context-menu-event.js +0 -13
  95. package/dist/es/context-menu/context-menu-items.service.js +0 -26
  96. package/dist/es/context-menu/context-menu-popup-event.js +0 -17
  97. package/dist/es/context-menu/context-menu-select-event.js +0 -17
  98. package/dist/es/context-menu/context-menu-target-container.directive.js +0 -31
  99. package/dist/es/context-menu/context-menu-target.directive.js +0 -48
  100. package/dist/es/context-menu/context-menu-target.service.js +0 -29
  101. package/dist/es/context-menu/context-menu-template.directive.js +0 -31
  102. package/dist/es/context-menu/context-menu.component.js +0 -456
  103. package/dist/es/context-menu/context-menu.module.js +0 -64
  104. package/dist/es/context-menu/context-menu.service.js +0 -30
  105. package/dist/es/data-binding/binding-directive-base.js +0 -32
  106. package/dist/es/data-binding/flat-binding.directive.js +0 -104
  107. package/dist/es/data-binding/hierachy-binding.directive.js +0 -94
  108. package/dist/es/data-binding/utils.js +0 -32
  109. package/dist/es/dom-queries.js +0 -107
  110. package/dist/es/index.js +0 -21
  111. package/dist/es/menu-base.js +0 -79
  112. package/dist/es/menu-event.js +0 -17
  113. package/dist/es/menu-item.component.js +0 -165
  114. package/dist/es/menu-select-event.js +0 -17
  115. package/dist/es/menu.component.js +0 -256
  116. package/dist/es/menu.module.js +0 -79
  117. package/dist/es/menus.module.js +0 -41
  118. package/dist/es/open-on-click-settings.js +0 -13
  119. package/dist/es/package-metadata.js +0 -15
  120. package/dist/es/preventable-event.js +0 -36
  121. package/dist/es/rendering/arrow.directive.js +0 -81
  122. package/dist/es/rendering/item.component.js +0 -337
  123. package/dist/es/rendering/link.directive.js +0 -62
  124. package/dist/es/rendering/list.component.js +0 -219
  125. package/dist/es/rendering/popup-settings.js +0 -66
  126. package/dist/es/services/actions.service.js +0 -178
  127. package/dist/es/services/hover.service.js +0 -136
  128. package/dist/es/services/items.service.js +0 -140
  129. package/dist/es/services/navigation.service.js +0 -274
  130. package/dist/es/templates/item-content-template.directive.js +0 -50
  131. package/dist/es/templates/item-link-template.directive.js +0 -52
  132. package/dist/es/templates/item-template.directive.js +0 -51
  133. package/dist/es/utils.js +0 -18
  134. package/dist/es2015/context-menu/context-menu-items.service.js +0 -25
  135. package/dist/es2015/context-menu/context-menu-target-container.directive.js +0 -30
  136. package/dist/es2015/context-menu/context-menu-target.directive.js +0 -47
  137. package/dist/es2015/context-menu/context-menu-template.directive.js +0 -30
  138. package/dist/es2015/data-binding/flat-binding.directive.js +0 -101
  139. package/dist/es2015/data-binding/hierachy-binding.directive.js +0 -90
  140. package/dist/es2015/index.d.ts +0 -21
  141. package/dist/es2015/index.js +0 -21
  142. package/dist/es2015/index.metadata.json +0 -1
  143. package/dist/es2015/main.js +0 -26
  144. package/dist/es2015/menu-animation.interface.js +0 -4
  145. package/dist/es2015/menu-base.js +0 -73
  146. package/dist/es2015/menu-item.interface.js +0 -4
  147. package/dist/es2015/menu.module.d.ts +0 -38
  148. package/dist/es2015/rendering/arrow.directive.js +0 -68
  149. package/dist/es2015/rendering/item.component.d.ts +0 -64
  150. package/dist/es2015/rendering/item.component.js +0 -327
  151. package/dist/es2015/rendering/link.directive.js +0 -57
  152. package/dist/es2015/rendering/list.component.d.ts +0 -41
  153. package/dist/es2015/rendering/list.component.js +0 -233
  154. package/dist/fesm5/index.js +0 -3222
  155. package/dist/npm/constants.js +0 -10
  156. package/dist/npm/context-menu/context-menu-event.js +0 -15
  157. package/dist/npm/context-menu/context-menu-items.service.js +0 -28
  158. package/dist/npm/context-menu/context-menu-popup-event.js +0 -19
  159. package/dist/npm/context-menu/context-menu-select-event.js +0 -19
  160. package/dist/npm/context-menu/context-menu-target-container.directive.js +0 -33
  161. package/dist/npm/context-menu/context-menu-target.directive.js +0 -50
  162. package/dist/npm/context-menu/context-menu-target.service.js +0 -31
  163. package/dist/npm/context-menu/context-menu-template.directive.js +0 -33
  164. package/dist/npm/context-menu/context-menu.component.js +0 -459
  165. package/dist/npm/context-menu/context-menu.module.js +0 -66
  166. package/dist/npm/context-menu/context-menu.service.js +0 -32
  167. package/dist/npm/data-binding/binding-directive-base.js +0 -34
  168. package/dist/npm/data-binding/flat-binding.directive.js +0 -106
  169. package/dist/npm/data-binding/hierachy-binding.directive.js +0 -96
  170. package/dist/npm/data-binding/utils.js +0 -34
  171. package/dist/npm/dom-queries.js +0 -110
  172. package/dist/npm/index.js +0 -37
  173. package/dist/npm/main.js +0 -50
  174. package/dist/npm/menu-animation.interface.js +0 -6
  175. package/dist/npm/menu-base.js +0 -81
  176. package/dist/npm/menu-event.js +0 -19
  177. package/dist/npm/menu-item.component.js +0 -167
  178. package/dist/npm/menu-item.interface.js +0 -6
  179. package/dist/npm/menu-select-event.js +0 -19
  180. package/dist/npm/menu.component.js +0 -258
  181. package/dist/npm/menu.module.js +0 -81
  182. package/dist/npm/menus.module.js +0 -43
  183. package/dist/npm/open-on-click-settings.js +0 -15
  184. package/dist/npm/package-metadata.js +0 -17
  185. package/dist/npm/preventable-event.js +0 -38
  186. package/dist/npm/rendering/arrow.directive.js +0 -83
  187. package/dist/npm/rendering/item.component.js +0 -339
  188. package/dist/npm/rendering/link.directive.js +0 -64
  189. package/dist/npm/rendering/list.component.js +0 -221
  190. package/dist/npm/rendering/popup-settings.js +0 -68
  191. package/dist/npm/services/actions.service.js +0 -180
  192. package/dist/npm/services/hover.service.js +0 -138
  193. package/dist/npm/services/items.service.js +0 -143
  194. package/dist/npm/services/navigation.service.js +0 -276
  195. package/dist/npm/templates/item-content-template.directive.js +0 -52
  196. package/dist/npm/templates/item-link-template.directive.js +0 -54
  197. package/dist/npm/templates/item-template.directive.js +0 -53
  198. package/dist/npm/utils.js +0 -20
  199. package/dist/systemjs/kendo-angular-menu.js +0 -5
@@ -0,0 +1,546 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Component, Input } from '@angular/core';
6
+ import { HostBinding, ViewChild } from '@angular/core';
7
+ import { isDocumentAvailable } from '@progress/kendo-angular-common';
8
+ import { POPUP_CONTAINER, PopupService } from '@progress/kendo-angular-popup';
9
+ import { NODE_INDEX } from '../constants';
10
+ import { closest, closestItem, hasClass, inMenu, isFocusable, nodeIndex } from '../dom-queries';
11
+ import { bodyFactory } from '../utils';
12
+ import { POPUP_SETTINGS, POPUP_SETTINGS_RTL } from './popup-settings';
13
+ import * as i0 from "@angular/core";
14
+ import * as i1 from "../services/items.service";
15
+ import * as i2 from "../services/hover.service";
16
+ import * as i3 from "../services/actions.service";
17
+ import * as i4 from "../services/navigation.service";
18
+ import * as i5 from "@angular/common";
19
+ import * as i6 from "@progress/kendo-angular-popup";
20
+ /* eslint-disable @angular-eslint/component-selector */
21
+ /**
22
+ * @hidden
23
+ */
24
+ export class ListComponent {
25
+ constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
26
+ this.itemsService = itemsService;
27
+ this.hover = hover;
28
+ this.actions = actions;
29
+ this.navigation = navigation;
30
+ this.renderer = renderer;
31
+ this.ngZone = ngZone;
32
+ this.element = element;
33
+ this.animate = true;
34
+ }
35
+ hierarchyIndex(index) {
36
+ return this.itemsService.itemIndex(this.index, index);
37
+ }
38
+ ngOnInit() {
39
+ this.itemsService.addList(this);
40
+ this.initDomEvents();
41
+ }
42
+ ngOnDestroy() {
43
+ this.itemsService.removeList(this);
44
+ if (this.domSubscriptions) {
45
+ this.domSubscriptions();
46
+ }
47
+ }
48
+ initDomEvents() {
49
+ if (!isDocumentAvailable() || !this.element) {
50
+ return;
51
+ }
52
+ this.ngZone.runOutsideAngular(() => {
53
+ const element = this.element.nativeElement;
54
+ const container = this.level > 0 ? closest(element, (node) => hasClass(node, 'k-popup')) : element;
55
+ const overSubscription = this.renderer.listen(element, 'mouseover', (e) => {
56
+ if (e.target === element && this.level === 0) {
57
+ this.onLeave();
58
+ }
59
+ else {
60
+ const item = this.nodeItem(e.target) || this.itemsService.get(this.index);
61
+ if (item && !(this.openOnClick && this.openOnClick.toggle === 'click' && item.level === 0 && !item.hasContent)) {
62
+ this.hover.over(item);
63
+ }
64
+ }
65
+ });
66
+ const leaveSubscription = this.renderer.listen(container, 'mouseleave', (e) => {
67
+ if (this.leavesMenu(e)) {
68
+ this.onLeave();
69
+ }
70
+ });
71
+ const keydownSubscription = this.renderer.listen(element, 'keydown', (e) => {
72
+ if (hasClass(e.target, 'k-menu-item')) {
73
+ this.navigation.keydown(e);
74
+ }
75
+ });
76
+ const blurSubscription = this.renderer.listen(element, 'focusout', (e) => {
77
+ if (this.leavesMenu(e)) {
78
+ this.navigation.focusLeave();
79
+ }
80
+ });
81
+ /**
82
+ * Handle focus/blur open/close for iOS devices since it behaves inconsistently with the rest
83
+ * Refer to: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
84
+ */
85
+ const touchSubscription = this.renderer.listen(document, 'touchstart', (e) => {
86
+ if (inMenu(e.target, this.itemsService)) {
87
+ const item = this.nodeItem(e.target);
88
+ // Needs to be called because the 'click' handler will be called only on secondary tap and the item will remain unfocused
89
+ this.navigation.focus(item);
90
+ // This is needed since the 'mouseover' event is not always dispatched
91
+ if (!item.opened) {
92
+ this.hover.over(item);
93
+ }
94
+ }
95
+ else if (this.navigation.focusedIdx) {
96
+ // If the touch is outside of the menu and the menu is not currently in focus
97
+ const activeItem = this.itemsService.get(this.navigation.activeIndex);
98
+ this.onLeave(); // needs to be called explicitly since mouseleave event is not triggered
99
+ activeItem.blur(); // needs to be called explicitly otherwise the item remains focused => triggers focusout
100
+ }
101
+ });
102
+ const clickSubscription = this.renderer.listen(element, 'click', this.clickHandler.bind(this));
103
+ this.domSubscriptions = () => {
104
+ overSubscription();
105
+ leaveSubscription();
106
+ keydownSubscription();
107
+ blurSubscription();
108
+ clickSubscription();
109
+ touchSubscription();
110
+ };
111
+ });
112
+ }
113
+ leavesMenu(e) {
114
+ if (!e.relatedTarget) {
115
+ return true;
116
+ }
117
+ return !inMenu(e.relatedTarget, this.itemsService);
118
+ }
119
+ onLeave() {
120
+ const openOnClick = this.openOnClick;
121
+ if (!openOnClick || openOnClick.toggle !== 'click') {
122
+ this.hover.leave(openOnClick && openOnClick.toggle === 'leave');
123
+ }
124
+ }
125
+ nodeItem(target) {
126
+ const node = closestItem(target, this.element.nativeElement);
127
+ if (node) {
128
+ const index = nodeIndex(node);
129
+ return this.itemsService.get(index);
130
+ }
131
+ }
132
+ clickHandler(e) {
133
+ if (isFocusable(e.target) && !hasClass(e.target, 'k-menu-item')) {
134
+ return;
135
+ }
136
+ const item = this.nodeItem(e.target);
137
+ if (!item || item.isContent || item.navigating) {
138
+ return;
139
+ }
140
+ if (item.disabled) {
141
+ e.preventDefault();
142
+ return;
143
+ }
144
+ this.actions.select(item, e, () => {
145
+ e.preventDefault();
146
+ });
147
+ this.navigation.focus(item);
148
+ if (item.level > 0 && !item.hasContent) {
149
+ this.actions.closeToRoot(item);
150
+ }
151
+ if (this.openOnClick) {
152
+ const hover = this.hover;
153
+ if (item.opened) {
154
+ if (item.level === 0) {
155
+ hover.openOnOver = false;
156
+ this.actions.close(item);
157
+ }
158
+ }
159
+ else if (item.hasContent) {
160
+ hover.openOnOver = true;
161
+ this.actions.closeOthers(item);
162
+ this.actions.open(item);
163
+ }
164
+ else {
165
+ hover.openOnOver = false;
166
+ if (item.level === 0 && this.openOnClick.toggle === 'click') {
167
+ this.hover.closeCurrent();
168
+ }
169
+ }
170
+ }
171
+ this.actions.execute();
172
+ }
173
+ }
174
+ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: i1.ItemsService }, { token: i2.HoverService }, { token: i3.ActionsService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
175
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", 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\" kendoMenuItem\n [item]=\"item\" [level]=\"level\" [vertical]=\"vertical\" [animate]=\"animate\" [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\" [itemLinkTemplate]=\"itemLinkTemplate\" [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\" [siblingIndex]=\"idx\" [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\" [class.k-last]=\"idx === items.length - 1\"\n [class.k-state-disabled]=\"item.disabled\"></li>\n <li *ngIf=\"item.separator\" class=\"k-separator k-item\"\n role=\"separator\" [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
176
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
177
+ type: Component,
178
+ args: [{
179
+ selector: '[kendoMenuList]',
180
+ template: `
181
+ <ng-container *ngFor="let item of items; let idx = index">
182
+ <li *ngIf="!item.separator" kendoMenuItem
183
+ [item]="item" [level]="level" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
184
+ [itemTemplate]="itemTemplate" [itemLinkTemplate]="itemLinkTemplate" [openOnClick]="openOnClick"
185
+ [index]="hierarchyIndex(idx)" [siblingIndex]="idx" [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
186
+ [ngClass]="item.cssClass" [ngStyle]="item.cssStyle"
187
+ role="menuitem"
188
+ class="k-item k-menu-item"
189
+ [class.k-first]="idx === 0" [class.k-last]="idx === items.length - 1"
190
+ [class.k-state-disabled]="item.disabled"></li>
191
+ <li *ngIf="item.separator" class="k-separator k-item"
192
+ role="separator" [ngClass]="item.cssClass" [ngStyle]="item.cssStyle">
193
+ &nbsp;
194
+ </li>
195
+ </ng-container>
196
+ `
197
+ }]
198
+ }], ctorParameters: function () { return [{ type: i1.ItemsService }, { type: i2.HoverService }, { type: i3.ActionsService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
199
+ type: Input
200
+ }], level: [{
201
+ type: Input
202
+ }], index: [{
203
+ type: Input
204
+ }], animate: [{
205
+ type: Input
206
+ }], vertical: [{
207
+ type: Input
208
+ }], rtl: [{
209
+ type: Input
210
+ }], openOnClick: [{
211
+ type: Input
212
+ }], itemTemplate: [{
213
+ type: Input
214
+ }], itemLinkTemplate: [{
215
+ type: Input
216
+ }] } });
217
+ /**
218
+ * @hidden
219
+ */
220
+ export class ItemComponent {
221
+ constructor(itemsService, navigation, changeDetector, renderer, popupService, element) {
222
+ this.itemsService = itemsService;
223
+ this.navigation = navigation;
224
+ this.changeDetector = changeDetector;
225
+ this.renderer = renderer;
226
+ this.popupService = popupService;
227
+ this.element = element;
228
+ this.animate = true;
229
+ this.openOnClick = false;
230
+ this.opened = false;
231
+ this.navigating = false;
232
+ this.destroyed = false;
233
+ }
234
+ set index(index) {
235
+ if (this._index && this._index !== index) {
236
+ this.itemsService.remove(this);
237
+ this._index = index;
238
+ this.itemsService.add(this);
239
+ }
240
+ else {
241
+ this._index = index;
242
+ }
243
+ this.childId = this.itemsService.childId(index);
244
+ }
245
+ get index() {
246
+ return this._index;
247
+ }
248
+ get disabled() {
249
+ return this.item.disabled;
250
+ }
251
+ get hasPopup() {
252
+ return this.hasContent ? true : null;
253
+ }
254
+ get expanded() {
255
+ return this.hasContent ? this.opened : null;
256
+ }
257
+ get label() {
258
+ return this.item.text ? this.item.text : null;
259
+ }
260
+ get activeId() {
261
+ return this.index === this.navigation.activeIndex ? '0' : '-1';
262
+ }
263
+ get popupSettings() {
264
+ const settings = this.rtl ? POPUP_SETTINGS_RTL : POPUP_SETTINGS;
265
+ return this.horizontal ? settings.horizontal : settings.vertical;
266
+ }
267
+ get horizontal() {
268
+ return this.vertical || this.level > 0;
269
+ }
270
+ get hasLink() {
271
+ return Boolean(this.item.url);
272
+ }
273
+ get linkTemplate() {
274
+ return this.item.linkTemplate || this.itemLinkTemplate;
275
+ }
276
+ get hasContent() {
277
+ const items = this.item.items;
278
+ return items && items.length || this.item.contentTemplate;
279
+ }
280
+ get isContent() {
281
+ return Boolean(this.item.content);
282
+ }
283
+ get iconClass() {
284
+ return `k-i-${this.item.icon}`;
285
+ }
286
+ get children() {
287
+ const item = this.item;
288
+ if (item.contentTemplate) {
289
+ if (!this.contentItems) {
290
+ this.contentItems = [{
291
+ content: item.contentTemplate,
292
+ owner: item,
293
+ ownerIndex: this.index
294
+ }];
295
+ }
296
+ return this.contentItems;
297
+ }
298
+ return item.items;
299
+ }
300
+ get template() {
301
+ return this.item.template || this.itemTemplate;
302
+ }
303
+ hasContentTemplates() {
304
+ const item = this.item;
305
+ return this.itemTemplate || item.contentTemplate || this.itemLinkTemplate ||
306
+ (item.items && item.items.find(current => current.template || current.linkTemplate));
307
+ }
308
+ ngOnInit() {
309
+ this.itemsService.add(this);
310
+ }
311
+ ngOnDestroy() {
312
+ this.itemsService.remove(this);
313
+ this.destroyed = true;
314
+ if (this.popupRef) {
315
+ this.popupRef.close();
316
+ this.popupRef = null;
317
+ }
318
+ }
319
+ focus() {
320
+ this.element.nativeElement.focus();
321
+ }
322
+ blur() {
323
+ this.element.nativeElement.blur();
324
+ }
325
+ toggleActive(isActive) {
326
+ if (isActive) {
327
+ this.setAttribute('tabindex', '0');
328
+ }
329
+ else {
330
+ this.setAttribute('tabindex', '-1');
331
+ }
332
+ }
333
+ open() {
334
+ if (!this.destroyed && this.hasContent && !this.opened) {
335
+ const popupSettings = this.popupSettings;
336
+ const animate = this.animate ? Object.assign({}, this.animate, {
337
+ direction: popupSettings.animate
338
+ }) : false;
339
+ this.opened = true;
340
+ this.popupRef = this.popupService.open({
341
+ popupAlign: popupSettings.popup,
342
+ anchorAlign: popupSettings.anchor,
343
+ collision: popupSettings.collision,
344
+ anchor: this.element,
345
+ positionMode: 'absolute',
346
+ content: this.popupTemplate,
347
+ popupClass: {
348
+ 'k-rtl': this.rtl,
349
+ 'k-menu-popup': true
350
+ },
351
+ animate: animate
352
+ });
353
+ this.setAttribute('aria-expanded', 'true');
354
+ this.setAttribute('aria-owns', this.childId);
355
+ this.changeDetector.detectChanges();
356
+ }
357
+ }
358
+ close() {
359
+ if (!this.destroyed && this.opened) {
360
+ this.opened = false;
361
+ if (this.popupRef) {
362
+ this.popupRef.close();
363
+ this.popupRef = null;
364
+ }
365
+ this.changeDetector.detectChanges();
366
+ this.setAttribute('aria-expanded', 'false');
367
+ this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
368
+ }
369
+ }
370
+ navigate() {
371
+ let link;
372
+ if (this.linkTemplate) {
373
+ link = this.element.nativeElement.querySelector('a.k-menu-link');
374
+ }
375
+ else if (this.hasLink) {
376
+ link = this.link.nativeElement;
377
+ }
378
+ if (link) {
379
+ this.navigating = true;
380
+ link.click();
381
+ this.navigating = false;
382
+ }
383
+ }
384
+ setAttribute(name, value) {
385
+ this.renderer.setAttribute(this.element.nativeElement, name, value);
386
+ }
387
+ }
388
+ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemComponent, deps: [{ token: i1.ItemsService }, { token: i4.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i6.PopupService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
389
+ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ItemComponent, selector: "[kendoMenuItem]", inputs: { item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-expanded": "this.expanded", "attr.aria-label": "this.label", "attr.tabindex": "this.activeId" } }, providers: [PopupService, {
390
+ provide: POPUP_CONTAINER,
391
+ useFactory: bodyFactory
392
+ }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
393
+ <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
394
+ [class.k-state-active]="opened" role="presentation">
395
+ <ng-template [ngTemplateOutlet]="itemcontent">
396
+ </ng-template>
397
+ </span>
398
+ <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
399
+ [class.k-state-active]="opened" tabindex="-1" role="presentation">
400
+ <ng-template [ngTemplateOutlet]="itemcontent">
401
+ </ng-template>
402
+ </a>
403
+ <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
404
+ [ngTemplateOutletContext]="{ item: item, index: index }">
405
+ </ng-template>
406
+
407
+ <div class="k-content" *ngIf="item.content" role="presentation">
408
+ <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
409
+ </ng-template>
410
+ </div>
411
+
412
+ <ng-template #popupTemplate>
413
+ <ul kendoMenuList
414
+ [attr.id]="childId"
415
+ [animate]="animate"
416
+ [rtl]="rtl"
417
+ [vertical]="vertical"
418
+ [openOnClick]="openOnClick"
419
+ [items]="children"
420
+ [level]="level + 1"
421
+ [index]="index"
422
+ [itemTemplate]="itemTemplate"
423
+ [itemLinkTemplate]="itemLinkTemplate"
424
+ role="menu"
425
+ class="k-group k-menu-group k-reset">
426
+ </ul>
427
+ </ng-template>
428
+
429
+ <ng-template #itemcontent>
430
+ <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
431
+ <ng-container *ngIf="!template">
432
+ <span class="k-menu-link-text">{{ item.text }}</span>
433
+ </ng-container>
434
+ <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
435
+ </ng-template>
436
+ <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
437
+ role="presentation"
438
+ [class.k-i-arrow-60-down]="!horizontal"
439
+ [class.k-i-arrow-60-right]="horizontal && !rtl"
440
+ [class.k-i-arrow-60-left]="horizontal && rtl">
441
+ </span>
442
+ </ng-template>
443
+ `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemComponent, decorators: [{
445
+ type: Component,
446
+ args: [{
447
+ providers: [PopupService, {
448
+ provide: POPUP_CONTAINER,
449
+ useFactory: bodyFactory
450
+ }],
451
+ selector: '[kendoMenuItem]',
452
+ template: `
453
+ <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
454
+ [class.k-state-active]="opened" role="presentation">
455
+ <ng-template [ngTemplateOutlet]="itemcontent">
456
+ </ng-template>
457
+ </span>
458
+ <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
459
+ [class.k-state-active]="opened" tabindex="-1" role="presentation">
460
+ <ng-template [ngTemplateOutlet]="itemcontent">
461
+ </ng-template>
462
+ </a>
463
+ <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
464
+ [ngTemplateOutletContext]="{ item: item, index: index }">
465
+ </ng-template>
466
+
467
+ <div class="k-content" *ngIf="item.content" role="presentation">
468
+ <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
469
+ </ng-template>
470
+ </div>
471
+
472
+ <ng-template #popupTemplate>
473
+ <ul kendoMenuList
474
+ [attr.id]="childId"
475
+ [animate]="animate"
476
+ [rtl]="rtl"
477
+ [vertical]="vertical"
478
+ [openOnClick]="openOnClick"
479
+ [items]="children"
480
+ [level]="level + 1"
481
+ [index]="index"
482
+ [itemTemplate]="itemTemplate"
483
+ [itemLinkTemplate]="itemLinkTemplate"
484
+ role="menu"
485
+ class="k-group k-menu-group k-reset">
486
+ </ul>
487
+ </ng-template>
488
+
489
+ <ng-template #itemcontent>
490
+ <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
491
+ <ng-container *ngIf="!template">
492
+ <span class="k-menu-link-text">{{ item.text }}</span>
493
+ </ng-container>
494
+ <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
495
+ </ng-template>
496
+ <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
497
+ role="presentation"
498
+ [class.k-i-arrow-60-down]="!horizontal"
499
+ [class.k-i-arrow-60-right]="horizontal && !rtl"
500
+ [class.k-i-arrow-60-left]="horizontal && rtl">
501
+ </span>
502
+ </ng-template>
503
+ `
504
+ }]
505
+ }], ctorParameters: function () { return [{ type: i1.ItemsService }, { type: i4.NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i6.PopupService }, { type: i0.ElementRef }]; }, propDecorators: { item: [{
506
+ type: Input
507
+ }], level: [{
508
+ type: Input
509
+ }], index: [{
510
+ type: Input
511
+ }], siblingIndex: [{
512
+ type: Input
513
+ }], animate: [{
514
+ type: Input
515
+ }], vertical: [{
516
+ type: Input
517
+ }], rtl: [{
518
+ type: Input
519
+ }], openOnClick: [{
520
+ type: Input
521
+ }], itemTemplate: [{
522
+ type: Input
523
+ }], itemLinkTemplate: [{
524
+ type: Input
525
+ }], link: [{
526
+ type: ViewChild,
527
+ args: ['link', { static: false }]
528
+ }], popupTemplate: [{
529
+ type: ViewChild,
530
+ args: ['popupTemplate', { static: true }]
531
+ }], disabled: [{
532
+ type: HostBinding,
533
+ args: ['attr.aria-disabled']
534
+ }], hasPopup: [{
535
+ type: HostBinding,
536
+ args: ['attr.aria-haspopup']
537
+ }], expanded: [{
538
+ type: HostBinding,
539
+ args: ['attr.aria-expanded']
540
+ }], label: [{
541
+ type: HostBinding,
542
+ args: ['attr.aria-label']
543
+ }], activeId: [{
544
+ type: HostBinding,
545
+ args: ['attr.tabindex']
546
+ }] } });
@@ -2,17 +2,25 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import * as tslib_1 from "tslib";
6
5
  import { NgZone, Injectable } from '@angular/core';
7
- import { ItemsService } from './items.service';
8
- import { MenuEvent } from '../menu-event';
9
- import { hasObservers } from '@progress/kendo-angular-common';
6
+ import { hasObservers, PreventableEvent } from '@progress/kendo-angular-common';
7
+ import * as i0 from "@angular/core";
8
+ import * as i1 from "./items.service";
10
9
  const canPerformAction = (item, action) => !((action === 'open' && item.opened) || (action === 'close' && !item.opened));
11
- const ɵ0 = canPerformAction;
12
10
  /**
11
+ * Used to remove cyclic dependency error. Dublicates MenuEvent
13
12
  * @hidden
14
13
  */
15
- let ActionsService = class ActionsService {
14
+ export class MenuStateEvent extends PreventableEvent {
15
+ constructor(args) {
16
+ super();
17
+ Object.assign(this, args);
18
+ }
19
+ }
20
+ /**
21
+ * @hidden
22
+ */
23
+ export class ActionsService {
16
24
  constructor(ngZone, items) {
17
25
  this.ngZone = ngZone;
18
26
  this.items = items;
@@ -81,7 +89,7 @@ let ActionsService = class ActionsService {
81
89
  }
82
90
  emit(name, item, domEvent) {
83
91
  const owner = this.owner;
84
- const eventArgs = new MenuEvent({
92
+ const eventArgs = new MenuStateEvent({
85
93
  sender: owner,
86
94
  item: item.item,
87
95
  index: item.index,
@@ -160,10 +168,9 @@ let ActionsService = class ActionsService {
160
168
  this.close(items[idx]);
161
169
  }
162
170
  }
163
- };
164
- ActionsService = tslib_1.__decorate([
165
- Injectable(),
166
- tslib_1.__metadata("design:paramtypes", [NgZone, ItemsService])
167
- ], ActionsService);
168
- export { ActionsService };
169
- export { ɵ0 };
171
+ }
172
+ ActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService, deps: [{ token: i0.NgZone }, { token: i1.ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
173
+ ActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService });
174
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsService, decorators: [{
175
+ type: Injectable
176
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ItemsService }]; } });
@@ -2,15 +2,15 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import * as tslib_1 from "tslib";
6
5
  import { Injectable } from '@angular/core';
7
- import { ItemsService } from './items.service';
8
- import { ActionsService } from './actions.service';
6
+ import * as i0 from "@angular/core";
7
+ import * as i1 from "./actions.service";
8
+ import * as i2 from "./items.service";
9
9
  const DISABLE_OPEN_ON_OVER_DELAY = 500;
10
10
  /**
11
11
  * @hidden
12
12
  */
13
- let HoverService = class HoverService {
13
+ export class HoverService {
14
14
  constructor(actions, items) {
15
15
  this.actions = actions;
16
16
  this.items = items;
@@ -114,9 +114,9 @@ let HoverService = class HoverService {
114
114
  }
115
115
  }
116
116
  }
117
- };
118
- HoverService = tslib_1.__decorate([
119
- Injectable(),
120
- tslib_1.__metadata("design:paramtypes", [ActionsService, ItemsService])
121
- ], HoverService);
122
- export { HoverService };
117
+ }
118
+ HoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService, deps: [{ token: i1.ActionsService }, { token: i2.ItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
119
+ HoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService });
120
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverService, decorators: [{
121
+ type: Injectable
122
+ }], ctorParameters: function () { return [{ type: i1.ActionsService }, { type: i2.ItemsService }]; } });