@progress/kendo-angular-toolbar 5.0.2 → 6.0.0-dev.202204131416

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 (134) hide show
  1. package/bundles/kendo-angular-toolbar.umd.js +5 -0
  2. package/{dist/es2015/common → common}/constants.d.ts +0 -0
  3. package/{dist/es2015/common → common}/preventable-event.d.ts +0 -0
  4. package/{dist/es2015/common → common}/renderer-click.d.ts +0 -0
  5. package/{dist/es2015/direction.d.ts → direction.d.ts} +0 -0
  6. package/{dist/es2015/display-mode.d.ts → display-mode.d.ts} +0 -0
  7. package/{dist/es2015 → esm2015}/common/constants.js +0 -0
  8. package/{dist/es2015 → esm2015}/common/preventable-event.js +0 -0
  9. package/{dist/es → esm2015}/common/renderer-click.js +1 -0
  10. package/{dist/es2015 → esm2015}/direction.js +1 -0
  11. package/{dist/es2015 → esm2015}/display-mode.js +1 -0
  12. package/{dist/es2015 → esm2015}/group-selection-settings.js +1 -0
  13. package/{dist/es/common/constants.js → esm2015/kendo-angular-toolbar.js} +2 -2
  14. package/esm2015/localization/custom-messages.component.js +40 -0
  15. package/esm2015/localization/localized-toolbar-messages.directive.js +36 -0
  16. package/esm2015/localization/messages.js +23 -0
  17. package/{dist/es → esm2015}/main.js +0 -0
  18. package/{dist/es2015 → esm2015}/navigation.service.js +9 -9
  19. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  20. package/{dist/es → esm2015}/popup-settings.js +1 -0
  21. package/{dist/es2015 → esm2015}/refresh.service.js +8 -10
  22. package/{dist/es → esm2015}/render-location.js +1 -0
  23. package/{dist/es2015 → esm2015}/renderer.component.js +36 -41
  24. package/{dist/es2015 → esm2015}/renderer.service.js +8 -7
  25. package/{dist/es → esm2015}/tool-options.js +1 -0
  26. package/{dist/es2015 → esm2015}/toolbar.component.js +166 -135
  27. package/{dist/es2015 → esm2015}/toolbar.module.js +27 -11
  28. package/{dist/es2015 → esm2015}/tools/toolbar-button.component.js +117 -114
  29. package/esm2015/tools/toolbar-buttongroup.component.js +267 -0
  30. package/esm2015/tools/toolbar-buttonlist.component.js +94 -0
  31. package/{dist/es2015 → esm2015}/tools/toolbar-dropdownbutton.component.js +119 -121
  32. package/esm2015/tools/toolbar-separator.component.js +68 -0
  33. package/{dist/es2015 → esm2015}/tools/toolbar-splitbutton.component.js +129 -125
  34. package/{dist/es2015 → esm2015}/tools/toolbar-tool.component.js +15 -19
  35. package/{dist/es2015 → esm2015}/util.js +0 -0
  36. package/{dist/fesm2015/index.js → fesm2015/kendo-angular-toolbar.js} +1019 -886
  37. package/{dist/es2015/group-selection-settings.d.ts → group-selection-settings.d.ts} +0 -0
  38. package/kendo-angular-toolbar.d.ts +9 -0
  39. package/{dist/es2015/localization → localization}/custom-messages.component.d.ts +4 -1
  40. package/{dist/es2015/localization → localization}/localized-toolbar-messages.directive.d.ts +3 -0
  41. package/{dist/es2015/localization → localization}/messages.d.ts +3 -0
  42. package/{dist/es2015/main.d.ts → main.d.ts} +0 -0
  43. package/{dist/es2015/navigation.service.d.ts → navigation.service.d.ts} +3 -0
  44. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  45. package/package.json +34 -102
  46. package/{dist/es2015/popup-settings.d.ts → popup-settings.d.ts} +0 -0
  47. package/{dist/es2015/refresh.service.d.ts → refresh.service.d.ts} +3 -0
  48. package/{dist/es2015/render-location.d.ts → render-location.d.ts} +0 -0
  49. package/{dist/es2015/renderer.component.d.ts → renderer.component.d.ts} +4 -1
  50. package/{dist/es2015/renderer.service.d.ts → renderer.service.d.ts} +3 -0
  51. package/schematics/ngAdd/index.js +5 -2
  52. package/schematics/ngAdd/index.js.map +1 -1
  53. package/{dist/es2015/tool-options.d.ts → tool-options.d.ts} +0 -0
  54. package/{dist/es2015/toolbar.component.d.ts → toolbar.component.d.ts} +30 -18
  55. package/toolbar.module.d.ts +37 -0
  56. package/{dist/es2015/tools → tools}/toolbar-button.component.d.ts +10 -6
  57. package/{dist/es2015/tools → tools}/toolbar-buttongroup.component.d.ts +7 -5
  58. package/{dist/es2015/tools → tools}/toolbar-buttonlist.component.d.ts +3 -0
  59. package/{dist/es2015/tools → tools}/toolbar-dropdownbutton.component.d.ts +15 -10
  60. package/{dist/es2015/tools → tools}/toolbar-separator.component.d.ts +3 -0
  61. package/{dist/es2015/tools → tools}/toolbar-splitbutton.component.d.ts +14 -9
  62. package/{dist/es2015/tools → tools}/toolbar-tool.component.d.ts +5 -2
  63. package/{dist/es2015/util.d.ts → util.d.ts} +0 -0
  64. package/dist/cdn/js/kendo-angular-toolbar.js +0 -20
  65. package/dist/cdn/main.js +0 -5
  66. package/dist/es/common/preventable-event.js +0 -29
  67. package/dist/es/direction.js +0 -4
  68. package/dist/es/display-mode.js +0 -4
  69. package/dist/es/group-selection-settings.js +0 -4
  70. package/dist/es/index.js +0 -14
  71. package/dist/es/localization/custom-messages.component.js +0 -43
  72. package/dist/es/localization/localized-toolbar-messages.directive.js +0 -35
  73. package/dist/es/localization/messages.js +0 -22
  74. package/dist/es/navigation.service.js +0 -130
  75. package/dist/es/package-metadata.js +0 -15
  76. package/dist/es/refresh.service.js +0 -22
  77. package/dist/es/renderer.component.js +0 -132
  78. package/dist/es/renderer.service.js +0 -52
  79. package/dist/es/toolbar.component.js +0 -641
  80. package/dist/es/toolbar.module.js +0 -60
  81. package/dist/es/tools/toolbar-button.component.js +0 -310
  82. package/dist/es/tools/toolbar-buttongroup.component.js +0 -165
  83. package/dist/es/tools/toolbar-buttonlist.component.js +0 -66
  84. package/dist/es/tools/toolbar-dropdownbutton.component.js +0 -368
  85. package/dist/es/tools/toolbar-separator.component.js +0 -67
  86. package/dist/es/tools/toolbar-splitbutton.component.js +0 -380
  87. package/dist/es/tools/toolbar-tool.component.js +0 -76
  88. package/dist/es/util.js +0 -204
  89. package/dist/es2015/common/renderer-click.js +0 -4
  90. package/dist/es2015/index.d.ts +0 -14
  91. package/dist/es2015/index.js +0 -14
  92. package/dist/es2015/index.metadata.json +0 -1
  93. package/dist/es2015/localization/custom-messages.component.js +0 -35
  94. package/dist/es2015/localization/localized-toolbar-messages.directive.js +0 -31
  95. package/dist/es2015/localization/messages.js +0 -16
  96. package/dist/es2015/main.js +0 -14
  97. package/dist/es2015/popup-settings.js +0 -4
  98. package/dist/es2015/render-location.js +0 -4
  99. package/dist/es2015/tool-options.js +0 -4
  100. package/dist/es2015/toolbar.module.d.ts +0 -18
  101. package/dist/es2015/tools/toolbar-buttongroup.component.js +0 -216
  102. package/dist/es2015/tools/toolbar-buttonlist.component.js +0 -87
  103. package/dist/es2015/tools/toolbar-separator.component.js +0 -68
  104. package/dist/fesm5/index.js +0 -2665
  105. package/dist/npm/common/constants.js +0 -10
  106. package/dist/npm/common/preventable-event.js +0 -31
  107. package/dist/npm/common/renderer-click.js +0 -6
  108. package/dist/npm/direction.js +0 -6
  109. package/dist/npm/display-mode.js +0 -6
  110. package/dist/npm/group-selection-settings.js +0 -6
  111. package/dist/npm/index.js +0 -23
  112. package/dist/npm/localization/custom-messages.component.js +0 -45
  113. package/dist/npm/localization/localized-toolbar-messages.directive.js +0 -37
  114. package/dist/npm/localization/messages.js +0 -24
  115. package/dist/npm/main.js +0 -26
  116. package/dist/npm/navigation.service.js +0 -132
  117. package/dist/npm/package-metadata.js +0 -17
  118. package/dist/npm/popup-settings.js +0 -6
  119. package/dist/npm/refresh.service.js +0 -24
  120. package/dist/npm/render-location.js +0 -6
  121. package/dist/npm/renderer.component.js +0 -134
  122. package/dist/npm/renderer.service.js +0 -54
  123. package/dist/npm/tool-options.js +0 -6
  124. package/dist/npm/toolbar.component.js +0 -643
  125. package/dist/npm/toolbar.module.js +0 -62
  126. package/dist/npm/tools/toolbar-button.component.js +0 -312
  127. package/dist/npm/tools/toolbar-buttongroup.component.js +0 -167
  128. package/dist/npm/tools/toolbar-buttonlist.component.js +0 -68
  129. package/dist/npm/tools/toolbar-dropdownbutton.component.js +0 -370
  130. package/dist/npm/tools/toolbar-separator.component.js +0 -69
  131. package/dist/npm/tools/toolbar-splitbutton.component.js +0 -382
  132. package/dist/npm/tools/toolbar-tool.component.js +0 -78
  133. package/dist/npm/util.js +0 -209
  134. package/dist/systemjs/kendo-angular-toolbar.js +0 -5
@@ -1,643 +0,0 @@
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
- "use strict";
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- var tslib_1 = require("tslib");
8
- var core_1 = require("@angular/core");
9
- var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
10
- var kendo_angular_common_1 = require("@progress/kendo-angular-common");
11
- var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
12
- var kendo_licensing_1 = require("@progress/kendo-licensing");
13
- var package_metadata_1 = require("./package-metadata");
14
- var refresh_service_1 = require("./refresh.service");
15
- var navigation_service_1 = require("./navigation.service");
16
- var toolbar_tool_component_1 = require("./tools/toolbar-tool.component");
17
- var util_1 = require("./util");
18
- var kendo_angular_common_2 = require("@progress/kendo-angular-common");
19
- var preventable_event_1 = require("./common/preventable-event");
20
- var rxjs_1 = require("rxjs");
21
- var operators_1 = require("rxjs/operators");
22
- var operators_2 = require("rxjs/operators");
23
- var kendo_angular_common_3 = require("@progress/kendo-angular-common");
24
- var constants_1 = require("./common/constants");
25
- var getInitialPopupSettings = function (isRtl) { return ({
26
- animate: true,
27
- anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
28
- popupAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'top' }
29
- }); };
30
- var ɵ0 = getInitialPopupSettings;
31
- exports.ɵ0 = ɵ0;
32
- /**
33
- * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
34
- */
35
- var ToolBarComponent = /** @class */ (function () {
36
- function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer) {
37
- this.localization = localization;
38
- this.popupService = popupService;
39
- this.refreshService = refreshService;
40
- this.navigationService = navigationService;
41
- this.element = element;
42
- this.zone = zone;
43
- this.renderer = renderer;
44
- /**
45
- * Hides the overflowing tools in a popup.
46
- */
47
- this.overflow = false;
48
- /**
49
- * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
50
- */
51
- this.tabindex = 0;
52
- /**
53
- * Fires when the overflow popup of the ToolBar is opened.
54
- */
55
- this.open = new core_1.EventEmitter();
56
- /**
57
- * Fires when the overflow popup of the ToolBar is closed.
58
- */
59
- this.close = new core_1.EventEmitter();
60
- this.hostClasses = true;
61
- this.cancelRenderedToolsSubscription$ = new rxjs_1.Subject();
62
- this.subscriptions = new rxjs_1.Subscription();
63
- kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
64
- this.direction = localization.rtl ? 'rtl' : 'ltr';
65
- }
66
- Object.defineProperty(ToolBarComponent.prototype, "resizable", {
67
- get: function () {
68
- return this.overflow;
69
- },
70
- /**
71
- * @hidden
72
- */
73
- set: function (value) {
74
- this.overflow = value;
75
- },
76
- enumerable: true,
77
- configurable: true
78
- });
79
- Object.defineProperty(ToolBarComponent.prototype, "popupSettings", {
80
- get: function () {
81
- return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
82
- },
83
- /**
84
- * Configures the popup of the ToolBar drop-down list.
85
- *
86
- * The available options are:
87
- * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
88
- * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
89
- */
90
- set: function (settings) {
91
- this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
92
- },
93
- enumerable: true,
94
- configurable: true
95
- });
96
- Object.defineProperty(ToolBarComponent.prototype, "tabIndex", {
97
- get: function () {
98
- return this.tabindex;
99
- },
100
- /**
101
- * @hidden
102
- */
103
- set: function (tabIndex) {
104
- this.tabindex = tabIndex;
105
- },
106
- enumerable: true,
107
- configurable: true
108
- });
109
- Object.defineProperty(ToolBarComponent.prototype, "appendTo", {
110
- get: function () {
111
- var appendTo = this.popupSettings.appendTo;
112
- if (!appendTo || appendTo === 'root') {
113
- return undefined;
114
- }
115
- return appendTo === 'component' ? this.container : appendTo;
116
- },
117
- enumerable: true,
118
- configurable: true
119
- });
120
- Object.defineProperty(ToolBarComponent.prototype, "popupOpen", {
121
- get: function () {
122
- return this._open;
123
- },
124
- set: function (open) {
125
- if (this.popupOpen === open) {
126
- return;
127
- }
128
- var eventArgs = new preventable_event_1.PreventableEvent();
129
- if (open) {
130
- this.open.emit(eventArgs);
131
- }
132
- else {
133
- this.close.emit(eventArgs);
134
- }
135
- if (eventArgs.isDefaultPrevented()) {
136
- return;
137
- }
138
- this.toggle(open);
139
- },
140
- enumerable: true,
141
- configurable: true
142
- });
143
- /**
144
- * @hidden
145
- */
146
- ToolBarComponent.prototype.onFocus = function (ev) {
147
- this.navigationService.resetNavigation();
148
- this.navigationService.focusFirst(ev);
149
- // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
150
- this.element.nativeElement.setAttribute('tabindex', '-1');
151
- };
152
- /**
153
- * @hidden
154
- */
155
- ToolBarComponent.prototype.onFocusOut = function (event) {
156
- var _this = this;
157
- // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
158
- if (util_1.closest(event.relatedTarget, function (el) { return el === _this.element.nativeElement; })) {
159
- this.element.nativeElement.setAttribute('tabindex', '-1');
160
- return;
161
- }
162
- this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
163
- };
164
- Object.defineProperty(ToolBarComponent.prototype, "getRole", {
165
- get: function () {
166
- return 'toolbar';
167
- },
168
- enumerable: true,
169
- configurable: true
170
- });
171
- Object.defineProperty(ToolBarComponent.prototype, "getDir", {
172
- get: function () {
173
- return this.direction;
174
- },
175
- enumerable: true,
176
- configurable: true
177
- });
178
- Object.defineProperty(ToolBarComponent.prototype, "resizableClass", {
179
- get: function () {
180
- return this.overflow;
181
- },
182
- enumerable: true,
183
- configurable: true
184
- });
185
- ToolBarComponent.prototype.ngAfterViewInit = function () {
186
- var _this = this;
187
- var element = this.element.nativeElement;
188
- if (!element.getAttribute('tabindex')) {
189
- this.element.nativeElement.setAttribute('tabindex', '0');
190
- }
191
- this.zone.runOutsideAngular(function () {
192
- _this.toolbarKeydownListener = _this.renderer.listen(_this.element.nativeElement, 'keydown', function (ev) {
193
- switch (ev.keyCode) {
194
- case kendo_angular_common_2.Keys.ArrowLeft:
195
- _this.zone.run(function () {
196
- ev.preventDefault();
197
- _this.direction === 'ltr' ? _this.navigationService.focusPrev(ev) : _this.navigationService.focusNext(ev);
198
- // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
199
- _this.element.nativeElement.setAttribute('tabindex', '-1');
200
- });
201
- break;
202
- case kendo_angular_common_2.Keys.ArrowRight:
203
- _this.zone.run(function () {
204
- ev.preventDefault();
205
- _this.direction === 'ltr' ? _this.navigationService.focusNext(ev) : _this.navigationService.focusPrev(ev);
206
- // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
207
- _this.element.nativeElement.setAttribute('tabindex', '-1');
208
- });
209
- break;
210
- case kendo_angular_common_2.Keys.Tab:
211
- _this.zone.run(function () { return _this.navigationService.resetNavigation(); });
212
- break;
213
- case kendo_angular_common_2.Keys.Escape:
214
- _this.zone.run(function () { return _this.toggle(false); });
215
- break;
216
- default:
217
- break;
218
- }
219
- });
220
- });
221
- if (this.overflow) {
222
- this.subscriptions.add(rxjs_1.merge(
223
- // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
224
- this.resizeSensor.resize.pipe(operators_1.bufferTime(200), operators_2.filter(function (v) { return v.length > 0; })), this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
225
- // because of https://github.com/telerik/kendo-angular-buttons/pull/276
226
- // calling onResize twice is the trade-off for removing the manual ChangeDetection
227
- // triggering altogether - it ensures correct layout and calculations
228
- // when some tools need overflow on initial rendering
229
- this.zone.runOutsideAngular(function () { return setTimeout(function () { _this.onResize(); _this.onResize(); }); });
230
- this.navigationService.overflowButton = this.overflowButton;
231
- }
232
- this.navigationService.setRenderedTools(this.renderedTools.toArray());
233
- this.subscriptions.add(this.renderedTools.changes.subscribe(function (rts) {
234
- return _this.navigationService.setRenderedTools(rts.toArray());
235
- }));
236
- };
237
- ToolBarComponent.prototype.ngOnInit = function () {
238
- var _this = this;
239
- this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
240
- var rtl = _a.rtl;
241
- return (_this.direction = rtl ? 'rtl' : 'ltr');
242
- }));
243
- if (kendo_angular_common_3.isDocumentAvailable()) {
244
- this.zone.runOutsideAngular(function () {
245
- return _this.subscriptions.add(rxjs_1.fromEvent(document, 'click')
246
- .pipe(operators_2.filter(function () { return !!_this.popupRef; }), operators_2.filter(function (ev) { return !_this.popupRef.popup.instance.container.nativeElement.contains(ev.target); }), operators_2.filter(function (ev) { return !_this.overflowButton.nativeElement.contains(ev.target); }))
247
- .subscribe(function () {
248
- _this.zone.run(function () {
249
- _this.popupOpen = false;
250
- });
251
- }));
252
- });
253
- }
254
- };
255
- ToolBarComponent.prototype.ngOnChanges = function (changes) {
256
- if (changes.tabindex) {
257
- // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
258
- this.element.nativeElement.setAttribute('tabindex', changes.tabindex.currentValue.toString());
259
- }
260
- };
261
- ToolBarComponent.prototype.ngOnDestroy = function () {
262
- if (this.popupRef) {
263
- this.popupRef.close();
264
- }
265
- if (this.toolbarKeydownListener) {
266
- this.toolbarKeydownListener();
267
- }
268
- this.cancelRenderedToolsSubscription$.next();
269
- this.subscriptions.unsubscribe();
270
- };
271
- Object.defineProperty(ToolBarComponent.prototype, "moreToolsTitle", {
272
- /**
273
- * @hidden
274
- */
275
- get: function () {
276
- return this.localization.get('moreToolsTitle');
277
- },
278
- enumerable: true,
279
- configurable: true
280
- });
281
- /**
282
- * @hidden
283
- */
284
- ToolBarComponent.prototype.onRendererClick = function (data) {
285
- this.navigationService.click(data);
286
- this.element.nativeElement.setAttribute('tabindex', '-1');
287
- };
288
- /**
289
- * @hidden
290
- */
291
- ToolBarComponent.prototype.showPopup = function () {
292
- this.popupOpen = !this.popupOpen;
293
- this.navigationService.click({ context: undefined, event: undefined });
294
- };
295
- /**
296
- * Toggles the visibility of the overflow popup.
297
- */
298
- ToolBarComponent.prototype.toggle = function (popupOpen) {
299
- this._open = popupOpen !== undefined ? popupOpen : !this.popupOpen;
300
- if (this.popupRef) {
301
- this.popupRef.close();
302
- this.popupRef = null;
303
- }
304
- if (this.popupOpen) {
305
- this.popupRef = this.popupService.open({
306
- anchor: this.overflowButton,
307
- anchorAlign: this.popupSettings.anchorAlign,
308
- popupAlign: this.popupSettings.popupAlign,
309
- content: this.popupTemplate,
310
- appendTo: this.appendTo,
311
- animate: this.popupSettings.animate,
312
- popupClass: this.popupSettings.popupClass,
313
- positionMode: 'absolute'
314
- });
315
- this.setPopupContentDimensions();
316
- this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this));
317
- this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this));
318
- }
319
- };
320
- /**
321
- * @hidden
322
- */
323
- ToolBarComponent.prototype.onResize = function () {
324
- var _this = this;
325
- if (kendo_angular_common_3.isDocumentAvailable()) {
326
- var containerWidth = util_1.innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
327
- this.shrink(containerWidth, this.childrenWidth);
328
- this.stretch(containerWidth, this.childrenWidth);
329
- this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
330
- _this.displayAnchor();
331
- });
332
- }
333
- this.resizeSensor.acceptSize();
334
- };
335
- /**
336
- * @hidden
337
- */
338
- ToolBarComponent.prototype.onPopupOpen = function () {
339
- var _this = this;
340
- this.zone.runOutsideAngular(function () {
341
- _this.overflowKeydownListener = _this.renderer.listen(_this.popupRef.popupElement, 'keydown', function (ev) {
342
- switch (ev.keyCode) {
343
- case kendo_angular_common_2.Keys.ArrowUp:
344
- _this.zone.run(function () {
345
- ev.preventDefault();
346
- _this.navigationService.focusPrev(ev);
347
- });
348
- break;
349
- case kendo_angular_common_2.Keys.ArrowDown:
350
- _this.zone.run(function () {
351
- ev.preventDefault();
352
- _this.navigationService.focusNext(ev);
353
- });
354
- break;
355
- case kendo_angular_common_2.Keys.Escape:
356
- _this.zone.run(function () { return _this.toggle(false); });
357
- break;
358
- case kendo_angular_common_2.Keys.Tab:
359
- _this.zone.run(function () {
360
- _this.toggle(false);
361
- _this.navigationService.resetNavigation();
362
- });
363
- break;
364
- default:
365
- break;
366
- }
367
- });
368
- });
369
- this.cancelRenderedToolsSubscription$.next();
370
- this.navigationService.moveFocusToPopup();
371
- this.navigationService.setRenderedTools(this.overflowRenderedTools.toArray());
372
- this.overflowRenderedTools.changes
373
- .pipe(operators_1.takeUntil(this.cancelRenderedToolsSubscription$))
374
- .subscribe(function (rts) { return _this.navigationService.setRenderedTools(rts.toArray()); });
375
- };
376
- /**
377
- * @hidden
378
- */
379
- ToolBarComponent.prototype.onPopupClose = function () {
380
- var _this = this;
381
- this.cancelRenderedToolsSubscription$.next();
382
- this.navigationService.setRenderedTools(this.renderedTools.toArray());
383
- this.renderedTools.changes
384
- .pipe(operators_1.takeUntil(this.cancelRenderedToolsSubscription$))
385
- .subscribe(function (rts) { return _this.navigationService.setRenderedTools(rts.toArray()); });
386
- this.navigationService.moveFocusToToolBar();
387
- if (this.overflowKeydownListener) {
388
- this.overflowKeydownListener();
389
- }
390
- };
391
- ToolBarComponent.prototype.displayAnchor = function () {
392
- var visibility = this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
393
- this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
394
- };
395
- Object.defineProperty(ToolBarComponent.prototype, "popupWidth", {
396
- get: function () {
397
- if (!this.popupSettings || !this.popupSettings.width) {
398
- return constants_1.defaultPopupWidth;
399
- }
400
- return isNaN(this.popupSettings.width) ? this.popupSettings.width : this.popupSettings.width + "px";
401
- },
402
- enumerable: true,
403
- configurable: true
404
- });
405
- Object.defineProperty(ToolBarComponent.prototype, "popupHeight", {
406
- get: function () {
407
- if (!this.popupSettings || !this.popupSettings.height) {
408
- return;
409
- }
410
- return isNaN(this.popupSettings.height) ? this.popupSettings.height : this.popupSettings.height + "px";
411
- },
412
- enumerable: true,
413
- configurable: true
414
- });
415
- Object.defineProperty(ToolBarComponent.prototype, "overflowAnchorWidth", {
416
- get: function () {
417
- if (!this.overflow) {
418
- return 0;
419
- }
420
- if (!this.cachedOverflowAnchorWidth) {
421
- this.cachedOverflowAnchorWidth = util_1.outerWidth(this.overflowButton.nativeElement);
422
- }
423
- return this.cachedOverflowAnchorWidth;
424
- },
425
- enumerable: true,
426
- configurable: true
427
- });
428
- Object.defineProperty(ToolBarComponent.prototype, "gap", {
429
- get: function () {
430
- if (util_1.isPresent(this.cachedGap)) {
431
- return this.cachedGap;
432
- }
433
- var computedGap = getComputedStyle(this.element.nativeElement).gap;
434
- this.cachedGap = util_1.isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
435
- return this.cachedGap;
436
- },
437
- enumerable: true,
438
- configurable: true
439
- });
440
- Object.defineProperty(ToolBarComponent.prototype, "childrenWidth", {
441
- get: function () {
442
- var _this = this;
443
- var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth + (tool.isDisplayed() ? _this.gap : 0); }, 0);
444
- return Math.ceil(width);
445
- },
446
- enumerable: true,
447
- configurable: true
448
- });
449
- Object.defineProperty(ToolBarComponent.prototype, "visibleTools", {
450
- get: function () {
451
- return this.allTools.filter(function (tool) {
452
- return tool.overflows === false;
453
- });
454
- },
455
- enumerable: true,
456
- configurable: true
457
- });
458
- Object.defineProperty(ToolBarComponent.prototype, "overflowTools", {
459
- get: function () {
460
- return this.allTools.filter(function (tool) {
461
- return tool.overflows === true;
462
- });
463
- },
464
- enumerable: true,
465
- configurable: true
466
- });
467
- ToolBarComponent.prototype.shrink = function (containerWidth, childrenWidth) {
468
- var width;
469
- if (containerWidth < childrenWidth) {
470
- for (var i = this.visibleTools.length - 1; i >= 0; i--) {
471
- if (containerWidth > childrenWidth) {
472
- break;
473
- }
474
- else {
475
- width = this.hideLastVisibleTool();
476
- childrenWidth -= width;
477
- }
478
- }
479
- }
480
- };
481
- ToolBarComponent.prototype.stretch = function (containerWidth, childrenWidth) {
482
- var width;
483
- if (containerWidth > childrenWidth) {
484
- for (var i = this.overflowTools.length - 1; i >= 0; i--) {
485
- width = this.showFirstHiddenTool(containerWidth, childrenWidth);
486
- if (width) {
487
- childrenWidth += width;
488
- }
489
- else {
490
- break;
491
- }
492
- }
493
- }
494
- };
495
- ToolBarComponent.prototype.hideLastVisibleTool = function () {
496
- var tool = this.visibleTools[this.visibleTools.length - 1];
497
- var renderedElement = this.renderedTools.find(function (r) {
498
- return r.tool === tool;
499
- });
500
- var width = renderedElement.width;
501
- tool.overflows = true;
502
- this.refreshService.refresh(tool);
503
- return width;
504
- };
505
- ToolBarComponent.prototype.showFirstHiddenTool = function (containerWidth, childrenWidth) {
506
- var tool = this.overflowTools[0];
507
- var renderedElement = this.renderedTools.find(function (r) { return r.tool === tool; });
508
- tool.overflows = false;
509
- tool.visibility = 'hidden';
510
- this.refreshService.refresh(tool);
511
- if (containerWidth > childrenWidth + renderedElement.width) {
512
- tool.visibility = 'visible';
513
- this.refreshService.refresh(tool);
514
- }
515
- else {
516
- tool.overflows = true;
517
- this.refreshService.refresh(tool);
518
- }
519
- return renderedElement.width; // returns 0 if `overflows` is true
520
- };
521
- ToolBarComponent.prototype.setPopupContentDimensions = function () {
522
- var popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
523
- popupContentContainer.style.width = this.popupWidth;
524
- popupContentContainer.style.height = this.popupHeight;
525
- popupContentContainer.style.overflow = 'auto';
526
- };
527
- tslib_1.__decorate([
528
- core_1.Input(),
529
- tslib_1.__metadata("design:type", Boolean)
530
- ], ToolBarComponent.prototype, "overflow", void 0);
531
- tslib_1.__decorate([
532
- core_1.Input(),
533
- tslib_1.__metadata("design:type", Boolean),
534
- tslib_1.__metadata("design:paramtypes", [Boolean])
535
- ], ToolBarComponent.prototype, "resizable", null);
536
- tslib_1.__decorate([
537
- core_1.Input(),
538
- tslib_1.__metadata("design:type", Object),
539
- tslib_1.__metadata("design:paramtypes", [Object])
540
- ], ToolBarComponent.prototype, "popupSettings", null);
541
- tslib_1.__decorate([
542
- core_1.Input(),
543
- tslib_1.__metadata("design:type", Number)
544
- ], ToolBarComponent.prototype, "tabindex", void 0);
545
- tslib_1.__decorate([
546
- core_1.Input('tabIndex'),
547
- tslib_1.__metadata("design:type", Number),
548
- tslib_1.__metadata("design:paramtypes", [Number])
549
- ], ToolBarComponent.prototype, "tabIndex", null);
550
- tslib_1.__decorate([
551
- core_1.Output(),
552
- tslib_1.__metadata("design:type", core_1.EventEmitter)
553
- ], ToolBarComponent.prototype, "open", void 0);
554
- tslib_1.__decorate([
555
- core_1.Output(),
556
- tslib_1.__metadata("design:type", core_1.EventEmitter)
557
- ], ToolBarComponent.prototype, "close", void 0);
558
- tslib_1.__decorate([
559
- core_1.ContentChildren(toolbar_tool_component_1.ToolBarToolComponent),
560
- tslib_1.__metadata("design:type", core_1.QueryList)
561
- ], ToolBarComponent.prototype, "allTools", void 0);
562
- tslib_1.__decorate([
563
- core_1.ViewChild('overflowButton', { static: false }),
564
- tslib_1.__metadata("design:type", core_1.ElementRef)
565
- ], ToolBarComponent.prototype, "overflowButton", void 0);
566
- tslib_1.__decorate([
567
- core_1.ViewChild('popupTemplate', { static: true }),
568
- tslib_1.__metadata("design:type", core_1.TemplateRef)
569
- ], ToolBarComponent.prototype, "popupTemplate", void 0);
570
- tslib_1.__decorate([
571
- core_1.ViewChild('resizeSensor', { static: false }),
572
- tslib_1.__metadata("design:type", kendo_angular_common_1.ResizeSensorComponent)
573
- ], ToolBarComponent.prototype, "resizeSensor", void 0);
574
- tslib_1.__decorate([
575
- core_1.ViewChild('container', { read: core_1.ViewContainerRef, static: true }),
576
- tslib_1.__metadata("design:type", core_1.ViewContainerRef)
577
- ], ToolBarComponent.prototype, "container", void 0);
578
- tslib_1.__decorate([
579
- core_1.ViewChildren('toolbarRenderer'),
580
- tslib_1.__metadata("design:type", core_1.QueryList)
581
- ], ToolBarComponent.prototype, "renderedTools", void 0);
582
- tslib_1.__decorate([
583
- core_1.ViewChildren('overflowRenderer'),
584
- tslib_1.__metadata("design:type", core_1.QueryList)
585
- ], ToolBarComponent.prototype, "overflowRenderedTools", void 0);
586
- tslib_1.__decorate([
587
- core_1.HostBinding('class.k-widget'),
588
- core_1.HostBinding('class.k-toolbar'),
589
- tslib_1.__metadata("design:type", Boolean)
590
- ], ToolBarComponent.prototype, "hostClasses", void 0);
591
- tslib_1.__decorate([
592
- core_1.HostListener('focus', ['$event']),
593
- tslib_1.__metadata("design:type", Function),
594
- tslib_1.__metadata("design:paramtypes", [Object]),
595
- tslib_1.__metadata("design:returntype", void 0)
596
- ], ToolBarComponent.prototype, "onFocus", null);
597
- tslib_1.__decorate([
598
- core_1.HostListener('focusout', ['$event']),
599
- tslib_1.__metadata("design:type", Function),
600
- tslib_1.__metadata("design:paramtypes", [Object]),
601
- tslib_1.__metadata("design:returntype", void 0)
602
- ], ToolBarComponent.prototype, "onFocusOut", null);
603
- tslib_1.__decorate([
604
- core_1.HostBinding('attr.role'),
605
- tslib_1.__metadata("design:type", String),
606
- tslib_1.__metadata("design:paramtypes", [])
607
- ], ToolBarComponent.prototype, "getRole", null);
608
- tslib_1.__decorate([
609
- core_1.HostBinding('attr.dir'),
610
- tslib_1.__metadata("design:type", String),
611
- tslib_1.__metadata("design:paramtypes", [])
612
- ], ToolBarComponent.prototype, "getDir", null);
613
- tslib_1.__decorate([
614
- core_1.HostBinding('class.k-toolbar-resizable'),
615
- tslib_1.__metadata("design:type", Boolean),
616
- tslib_1.__metadata("design:paramtypes", [])
617
- ], ToolBarComponent.prototype, "resizableClass", null);
618
- ToolBarComponent = tslib_1.__decorate([
619
- core_1.Component({
620
- exportAs: 'kendoToolBar',
621
- providers: [
622
- refresh_service_1.RefreshService,
623
- navigation_service_1.NavigationService,
624
- kendo_angular_l10n_1.LocalizationService,
625
- {
626
- provide: kendo_angular_l10n_1.L10N_PREFIX,
627
- useValue: 'kendo.toolbar'
628
- }
629
- ],
630
- selector: 'kendo-toolbar',
631
- template: "\n <ng-container kendoToolbarLocalizedMessages\n i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n moreToolsTitle=\"More tools\"\n >\n </ng-container>\n <ng-container *ngFor=\"let tool of allTools; let index = index\">\n <kendo-toolbar-renderer\n #toolbarRenderer\n (rendererClick)=\"onRendererClick($event)\"\n [location]=\"'toolbar'\"\n [resizable]=\"overflow\"\n [tool]=\"tool\"\n ></kendo-toolbar-renderer>\n </ng-container>\n <button\n #overflowButton\n type=\"button\"\n tabindex=\"-1\"\n [title]=\"moreToolsTitle\"\n [attr.aria-label]=\"moreToolsTitle\"\n *ngIf=\"overflow\"\n [style.visibility]=\"'hidden'\"\n class=\"k-overflow-anchor k-button\"\n (click)=\"showPopup()\"\n >\n <span class=\"k-icon k-i-more-vertical\"></span>\n </button>\n <ng-template #popupTemplate>\n <ul class=\"k-overflow-container k-list-container k-reset\">\n <ng-container *ngFor=\"let tool of allTools; let index = index\">\n <li class=\"k-item\">\n <kendo-toolbar-renderer\n #overflowRenderer\n (rendererClick)=\"onRendererClick($event)\"\n [location]=\"'overflow'\"\n [resizable]=\"overflow\"\n [tool]=\"tool\"\n ></kendo-toolbar-renderer>\n </li>\n </ng-container>\n </ul>\n </ng-template>\n <ng-container #container></ng-container>\n <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n "
632
- }),
633
- tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
634
- kendo_angular_popup_1.PopupService,
635
- refresh_service_1.RefreshService,
636
- navigation_service_1.NavigationService,
637
- core_1.ElementRef,
638
- core_1.NgZone,
639
- core_1.Renderer2])
640
- ], ToolBarComponent);
641
- return ToolBarComponent;
642
- }());
643
- exports.ToolBarComponent = ToolBarComponent;