@progress/kendo-angular-toolbar 17.0.0-develop.21 → 17.0.0-develop.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/common/fillmode.d.ts +1 -1
  2. package/common/size.d.ts +1 -1
  3. package/direction.d.ts +1 -1
  4. package/display-mode.d.ts +1 -1
  5. package/{esm2020 → esm2022}/common/preventable-event.mjs +1 -3
  6. package/{esm2020 → esm2022}/localization/custom-messages.component.mjs +9 -8
  7. package/{esm2020 → esm2022}/localization/localized-toolbar-messages.directive.mjs +9 -8
  8. package/{esm2020 → esm2022}/localization/messages.mjs +7 -3
  9. package/{esm2020 → esm2022}/navigation.service.mjs +9 -7
  10. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  11. package/{esm2020 → esm2022}/refresh.service.mjs +4 -6
  12. package/{esm2020 → esm2022}/renderer.component.mjs +22 -10
  13. package/{esm2020 → esm2022}/renderer.service.mjs +5 -3
  14. package/{esm2020 → esm2022}/toolbar.component.mjs +83 -61
  15. package/{esm2020 → esm2022}/toolbar.module.mjs +4 -4
  16. package/{esm2020 → esm2022}/tools/toolbar-button.component.mjs +106 -90
  17. package/{esm2020 → esm2022}/tools/toolbar-buttongroup.component.mjs +45 -29
  18. package/{esm2020 → esm2022}/tools/toolbar-dropdownbutton.component.mjs +112 -95
  19. package/{esm2020 → esm2022}/tools/toolbar-separator.component.mjs +7 -12
  20. package/{esm2020 → esm2022}/tools/toolbar-spacer.component.mjs +10 -16
  21. package/{esm2020 → esm2022}/tools/toolbar-splitbutton.component.mjs +117 -102
  22. package/{esm2020 → esm2022}/tools/toolbar-tool.component.mjs +23 -13
  23. package/{esm2020 → esm2022}/tools/tools.service.mjs +8 -10
  24. package/{fesm2020 → fesm2022}/progress-kendo-angular-toolbar.mjs +578 -477
  25. package/group-selection-settings.d.ts +1 -1
  26. package/localization/messages.d.ts +1 -1
  27. package/package.json +15 -21
  28. package/render-location.d.ts +1 -1
  29. package/renderer.component.d.ts +1 -1
  30. package/toolbar.component.d.ts +1 -1
  31. package/tools/toolbar-button.component.d.ts +2 -4
  32. package/tools/toolbar-buttongroup.component.d.ts +2 -4
  33. package/tools/toolbar-dropdownbutton.component.d.ts +2 -4
  34. package/tools/toolbar-separator.component.d.ts +1 -3
  35. package/tools/toolbar-spacer.component.d.ts +1 -3
  36. package/tools/toolbar-splitbutton.component.d.ts +2 -4
  37. package/tools/toolbar-tool.component.d.ts +3 -3
  38. package/fesm2015/progress-kendo-angular-toolbar.mjs +0 -3401
  39. /package/{esm2020 → esm2022}/common/fillmode.mjs +0 -0
  40. /package/{esm2020 → esm2022}/common/renderer-click.mjs +0 -0
  41. /package/{esm2020 → esm2022}/common/size.mjs +0 -0
  42. /package/{esm2020 → esm2022}/direction.mjs +0 -0
  43. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  44. /package/{esm2020 → esm2022}/display-mode.mjs +0 -0
  45. /package/{esm2020 → esm2022}/group-selection-settings.mjs +0 -0
  46. /package/{esm2020 → esm2022}/index.mjs +0 -0
  47. /package/{esm2020 → esm2022}/popup-settings.mjs +0 -0
  48. /package/{esm2020 → esm2022}/progress-kendo-angular-toolbar.mjs +0 -0
  49. /package/{esm2020 → esm2022}/render-location.mjs +0 -0
  50. /package/{esm2020 → esm2022}/tool-options.mjs +0 -0
  51. /package/{esm2020 → esm2022}/util.mjs +0 -0
@@ -5,4 +5,4 @@
5
5
  /**
6
6
  * Represents the possible fillMode options of the Toolbar.
7
7
  */
8
- export declare type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';
8
+ export type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';
package/common/size.d.ts CHANGED
@@ -6,4 +6,4 @@
6
6
  * Represents the possible size options of the Toolbar.
7
7
  * @default `medium`
8
8
  */
9
- export declare type ToolbarSize = 'small' | 'medium' | 'large' | 'none';
9
+ export type ToolbarSize = 'small' | 'medium' | 'large' | 'none';
package/direction.d.ts CHANGED
@@ -5,4 +5,4 @@
5
5
  /**
6
6
  * @hidden
7
7
  */
8
- export declare type Direction = 'rtl' | 'ltr';
8
+ export type Direction = 'rtl' | 'ltr';
package/display-mode.d.ts CHANGED
@@ -7,4 +7,4 @@
7
7
  *
8
8
  * @default 'both'
9
9
  */
10
- export declare type DisplayMode = 'both' | 'toolbar' | 'overflow';
10
+ export type DisplayMode = 'both' | 'toolbar' | 'overflow';
@@ -6,9 +6,7 @@
6
6
  * @hidden
7
7
  */
8
8
  export class PreventableEvent {
9
- constructor() {
10
- this.prevented = false;
11
- }
9
+ prevented = false;
12
10
  /**
13
11
  * Prevents the default action for a specified event.
14
12
  * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -11,6 +11,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
11
11
  * Custom component messages override default component messages.
12
12
  */
13
13
  export class ToolbarCustomMessagesComponent extends ToolbarMessages {
14
+ service;
14
15
  constructor(service) {
15
16
  super();
16
17
  this.service = service;
@@ -18,15 +19,15 @@ export class ToolbarCustomMessagesComponent extends ToolbarMessages {
18
19
  get override() {
19
20
  return true;
20
21
  }
22
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
23
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarCustomMessagesComponent, isStandalone: true, selector: "kendo-toolbar-messages", providers: [
24
+ {
25
+ provide: ToolbarMessages,
26
+ useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
27
+ }
28
+ ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
21
29
  }
22
- ToolbarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
23
- ToolbarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarCustomMessagesComponent, isStandalone: true, selector: "kendo-toolbar-messages", providers: [
24
- {
25
- provide: ToolbarMessages,
26
- useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
27
- }
28
- ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
30
31
  type: Component,
31
32
  args: [{
32
33
  providers: [
@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
11
11
  * @hidden
12
12
  */
13
13
  export class LocalizedToolbarMessagesDirective extends ToolbarMessages {
14
+ service;
14
15
  constructor(service) {
15
16
  super();
16
17
  this.service = service;
17
18
  }
19
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
20
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedToolbarMessagesDirective, isStandalone: true, selector: "[kendoToolbarLocalizedMessages]", providers: [
21
+ {
22
+ provide: ToolbarMessages,
23
+ useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
24
+ }
25
+ ], usesInheritance: true, ngImport: i0 });
18
26
  }
19
- LocalizedToolbarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
20
- LocalizedToolbarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedToolbarMessagesDirective, isStandalone: true, selector: "[kendoToolbarLocalizedMessages]", providers: [
21
- {
22
- provide: ToolbarMessages,
23
- useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
24
- }
25
- ], usesInheritance: true, ngImport: i0 });
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
27
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
27
28
  type: Directive,
28
29
  args: [{
29
30
  providers: [
@@ -9,10 +9,14 @@ import * as i0 from "@angular/core";
9
9
  * @hidden
10
10
  */
11
11
  export class ToolbarMessages extends ComponentMessages {
12
+ /**
13
+ * The title of the **more tools** button in a responsive ToolBar
14
+ */
15
+ moreToolsTitle;
16
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
17
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
12
18
  }
13
- ToolbarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
14
- ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
15
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, decorators: [{
19
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, decorators: [{
16
20
  type: Directive,
17
21
  args: [{
18
22
  // eslint-disable-next-line @angular-eslint/directive-selector
@@ -10,12 +10,14 @@ import * as i0 from "@angular/core";
10
10
  * @hidden
11
11
  */
12
12
  export class NavigationService {
13
+ zone;
14
+ overflowButton;
15
+ focused = { renderedTool: null, index: -1 };
16
+ renderedTools = [];
17
+ isPopupFocused = false;
18
+ isOverflowButtonFocused = false;
13
19
  constructor(zone) {
14
20
  this.zone = zone;
15
- this.focused = { renderedTool: null, index: -1 };
16
- this.renderedTools = [];
17
- this.isPopupFocused = false;
18
- this.isOverflowButtonFocused = false;
19
21
  }
20
22
  setRenderedTools(rts) {
21
23
  this.renderedTools = rts;
@@ -147,9 +149,9 @@ export class NavigationService {
147
149
  return (isPresent(this.overflowButton) &&
148
150
  window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
149
151
  }
152
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
153
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
150
154
  }
151
- NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
152
- NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
153
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
155
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
154
156
  type: Injectable
155
157
  }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-toolbar',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1729874097,
13
- version: '17.0.0-develop.21',
12
+ publishDate: 1730104808,
13
+ version: '17.0.0-develop.23',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
@@ -8,15 +8,13 @@ import * as i0 from "@angular/core";
8
8
  * @hidden
9
9
  */
10
10
  export class RefreshService {
11
- constructor() {
12
- this.onRefresh = new EventEmitter();
13
- }
11
+ onRefresh = new EventEmitter();
14
12
  refresh(tool) {
15
13
  this.onRefresh.emit(tool);
16
14
  }
15
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
16
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService });
17
17
  }
18
- RefreshService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
19
- RefreshService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService });
20
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, decorators: [{
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService, decorators: [{
21
19
  type: Injectable
22
20
  }] });
@@ -17,19 +17,28 @@ const MIN_SPACER_WIDTH = 18;
17
17
  * @hidden
18
18
  */
19
19
  export class ToolBarRendererComponent {
20
+ renderer;
21
+ rendererService;
22
+ refreshService;
23
+ toolsService;
24
+ viewContainer;
25
+ tool;
26
+ location;
27
+ resizable;
28
+ rendererClick = new EventEmitter();
29
+ template;
30
+ element;
31
+ get isSpacer() {
32
+ return this.tool && this.tool.__isSpacer;
33
+ }
34
+ refreshSubscription;
35
+ internalComponentRef;
20
36
  constructor(renderer, rendererService, refreshService, toolsService, viewContainer) {
21
37
  this.renderer = renderer;
22
38
  this.rendererService = rendererService;
23
39
  this.refreshService = refreshService;
24
40
  this.toolsService = toolsService;
25
41
  this.viewContainer = viewContainer;
26
- this.rendererClick = new EventEmitter();
27
- this.onClick = (ev) => {
28
- this.rendererClick.emit({ context: this, event: ev });
29
- };
30
- }
31
- get isSpacer() {
32
- return this.tool && this.tool.__isSpacer;
33
42
  }
34
43
  ngOnInit() {
35
44
  const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
@@ -101,6 +110,9 @@ export class ToolBarRendererComponent {
101
110
  setAttribute(element, attr, value) {
102
111
  this.renderer.setAttribute(element, attr, value);
103
112
  }
113
+ onClick = (ev) => {
114
+ this.rendererClick.emit({ context: this, event: ev });
115
+ };
104
116
  updateTools() {
105
117
  const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
106
118
  const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
@@ -118,10 +130,10 @@ export class ToolBarRendererComponent {
118
130
  }
119
131
  }
120
132
  }
133
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
134
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
121
135
  }
122
- ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
123
- ToolBarRendererComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
124
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
125
137
  type: Directive,
126
138
  args: [{
127
139
  providers: [RendererService],
@@ -9,6 +9,8 @@ import * as i0 from "@angular/core";
9
9
  * @hidden
10
10
  */
11
11
  export class RendererService {
12
+ element;
13
+ renderer;
12
14
  getElement() {
13
15
  return this.element.nativeElement;
14
16
  }
@@ -42,9 +44,9 @@ export class RendererService {
42
44
  setAttribute(element, attr, value) {
43
45
  this.renderer.setAttribute(element, attr, value);
44
46
  }
47
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
48
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService });
45
49
  }
46
- RendererService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
47
- RendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService });
48
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, decorators: [{
50
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService, decorators: [{
49
51
  type: Injectable
50
52
  }] });
@@ -43,57 +43,22 @@ const getInitialPopupSettings = (isRtl) => ({
43
43
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
44
44
  */
45
45
  export class ToolBarComponent {
46
- constructor(localization, popupService, refreshService, navigationService,
47
- // Needs to be public as it is being accessed in the Editor component
48
- element, zone, renderer, _cdr, toolsService) {
49
- this.localization = localization;
50
- this.popupService = popupService;
51
- this.refreshService = refreshService;
52
- this.navigationService = navigationService;
53
- this.element = element;
54
- this.zone = zone;
55
- this.renderer = renderer;
56
- this._cdr = _cdr;
57
- this.toolsService = toolsService;
58
- /**
59
- * Hides the overflowing tools in a popup.
60
- */
61
- this.overflow = false;
62
- /**
63
- * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
64
- */
65
- this.tabindex = 0;
66
- /**
67
- * Fires when the overflow popup of the ToolBar is opened.
68
- */
69
- this.open = new EventEmitter();
70
- /**
71
- * Fires when the overflow popup of the ToolBar is closed.
72
- */
73
- this.close = new EventEmitter();
74
- this.hostClass = true;
75
- this.cancelRenderedToolsSubscription$ = new Subject();
76
- this._size = DEFAULT_SIZE;
77
- this._fillMode = DEFAULT_FILL_MODE;
78
- this.overflowButtonClickedTime = null;
79
- this.subscriptions = new Subscription();
80
- this.popupSubs = new Subscription();
81
- this.role = 'toolbar';
82
- this.moreVerticalIcon = moreVerticalIcon;
83
- /**
84
- * @hidden
85
- */
86
- this.overflowBtnId = guid();
87
- /**
88
- * @hidden
89
- */
90
- this.popupId = guid();
91
- validatePackage(packageMetadata);
92
- this.direction = localization.rtl ? 'rtl' : 'ltr';
93
- }
46
+ localization;
47
+ popupService;
48
+ refreshService;
49
+ navigationService;
50
+ element;
51
+ zone;
52
+ renderer;
53
+ _cdr;
54
+ toolsService;
94
55
  get overflowClass() {
95
56
  return `k-button-${SIZES[this.size]}`;
96
57
  }
58
+ /**
59
+ * Hides the overflowing tools in a popup.
60
+ */
61
+ overflow = false;
97
62
  /**
98
63
  * @hidden
99
64
  */
@@ -130,6 +95,10 @@ export class ToolBarComponent {
130
95
  get fillMode() {
131
96
  return this._fillMode;
132
97
  }
98
+ /**
99
+ * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
100
+ */
101
+ tabindex = 0;
133
102
  /**
134
103
  * Specifies the padding of all Toolbar elements.
135
104
  *
@@ -156,6 +125,21 @@ export class ToolBarComponent {
156
125
  get tabIndex() {
157
126
  return this.tabindex;
158
127
  }
128
+ /**
129
+ * Fires when the overflow popup of the ToolBar is opened.
130
+ */
131
+ open = new EventEmitter();
132
+ /**
133
+ * Fires when the overflow popup of the ToolBar is closed.
134
+ */
135
+ close = new EventEmitter();
136
+ allTools;
137
+ overflowButton;
138
+ popupTemplate;
139
+ resizeSensor;
140
+ container;
141
+ popupRef;
142
+ direction;
159
143
  get appendTo() {
160
144
  const { appendTo } = this.popupSettings;
161
145
  if (!appendTo || appendTo === 'root') {
@@ -182,6 +166,19 @@ export class ToolBarComponent {
182
166
  get popupOpen() {
183
167
  return this._open;
184
168
  }
169
+ hostClass = true;
170
+ _popupSettings;
171
+ cachedOverflowAnchorWidth;
172
+ _open;
173
+ toolbarKeydownListener;
174
+ overflowKeydownListener;
175
+ cancelRenderedToolsSubscription$ = new Subject();
176
+ cachedGap;
177
+ _size = DEFAULT_SIZE;
178
+ _fillMode = DEFAULT_FILL_MODE;
179
+ overflowButtonClickedTime = null;
180
+ subscriptions = new Subscription();
181
+ popupSubs = new Subscription();
185
182
  /**
186
183
  * @hidden
187
184
  */
@@ -202,12 +199,29 @@ export class ToolBarComponent {
202
199
  }
203
200
  this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
204
201
  }
202
+ role = 'toolbar';
205
203
  get getDir() {
206
204
  return this.direction;
207
205
  }
208
206
  get resizableClass() {
209
207
  return this.overflow;
210
208
  }
209
+ moreVerticalIcon = moreVerticalIcon;
210
+ constructor(localization, popupService, refreshService, navigationService,
211
+ // Needs to be public as it is being accessed in the Editor component
212
+ element, zone, renderer, _cdr, toolsService) {
213
+ this.localization = localization;
214
+ this.popupService = popupService;
215
+ this.refreshService = refreshService;
216
+ this.navigationService = navigationService;
217
+ this.element = element;
218
+ this.zone = zone;
219
+ this.renderer = renderer;
220
+ this._cdr = _cdr;
221
+ this.toolsService = toolsService;
222
+ validatePackage(packageMetadata);
223
+ this.direction = localization.rtl ? 'rtl' : 'ltr';
224
+ }
211
225
  ngAfterContentInit() {
212
226
  this.toolsService.allTools = this.allTools.toArray();
213
227
  this.subscriptions.add(this.allTools.changes.subscribe(changes => {
@@ -450,6 +464,14 @@ export class ToolBarComponent {
450
464
  }
451
465
  this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
452
466
  }
467
+ /**
468
+ * @hidden
469
+ */
470
+ overflowBtnId = guid();
471
+ /**
472
+ * @hidden
473
+ */
474
+ popupId = guid();
453
475
  displayAnchor() {
454
476
  const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
455
477
  this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
@@ -597,18 +619,17 @@ export class ToolBarComponent {
597
619
  }
598
620
  return classes;
599
621
  }
600
- }
601
- ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
602
- ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
603
- RefreshService,
604
- NavigationService,
605
- LocalizationService,
606
- ToolbarToolsService,
607
- {
608
- provide: L10N_PREFIX,
609
- useValue: 'kendo.toolbar'
610
- }
611
- ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
622
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
623
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
624
+ RefreshService,
625
+ NavigationService,
626
+ LocalizationService,
627
+ ToolbarToolsService,
628
+ {
629
+ provide: L10N_PREFIX,
630
+ useValue: 'kendo.toolbar'
631
+ }
632
+ ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
612
633
  <ng-container kendoToolbarLocalizedMessages
613
634
  i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
614
635
  moreToolsTitle="More tools"
@@ -675,7 +696,8 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
675
696
  <ng-container #container></ng-container>
676
697
  <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
677
698
  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
678
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
699
+ }
700
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
679
701
  type: Component,
680
702
  args: [{
681
703
  exportAs: 'kendoToolBar',
@@ -31,11 +31,11 @@ import * as i9 from "./tools/toolbar-tool.component";
31
31
  * - `ToolBarSeparatorComponent`&mdash;The Separator Tool component class.
32
32
  */
33
33
  export class ToolBarModule {
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
35
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent], exports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent] });
36
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ToolBarComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i8.ToolBarSplitButtonComponent] });
34
37
  }
35
- ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
36
- ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent], exports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent] });
37
- ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent] });
38
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
38
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, decorators: [{
39
39
  type: NgModule,
40
40
  args: [{
41
41
  exports: [...KENDO_TOOLBAR],