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