@progress/kendo-angular-toolbar 5.0.1 → 6.0.0-next.202203091208

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