@progress/kendo-angular-toolbar 16.10.1-develop.3 → 16.11.0-develop.10
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.
- package/esm2020/navigation.service.mjs +3 -3
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/renderer.component.mjs +73 -68
- package/esm2020/toolbar.component.mjs +71 -66
- package/esm2020/toolbar.module.mjs +1 -1
- package/esm2020/tools/toolbar-buttongroup.component.mjs +6 -6
- package/esm2020/tools/toolbar-spacer.component.mjs +10 -2
- package/esm2020/tools/toolbar-tool.component.mjs +7 -9
- package/esm2020/tools/tools.service.mjs +24 -0
- package/esm2020/util.mjs +4 -0
- package/fesm2015/progress-kendo-angular-toolbar.mjs +188 -153
- package/fesm2020/progress-kendo-angular-toolbar.mjs +186 -153
- package/package.json +7 -7
- package/renderer.component.d.ts +12 -25
- package/toolbar.component.d.ts +6 -6
- package/tools/toolbar-tool.component.d.ts +4 -2
- package/tools/tools.service.d.ts +20 -0
- package/util.d.ts +4 -0
|
@@ -18,7 +18,7 @@ export class NavigationService {
|
|
|
18
18
|
this.isOverflowButtonFocused = false;
|
|
19
19
|
}
|
|
20
20
|
setRenderedTools(rts) {
|
|
21
|
-
this.renderedTools =
|
|
21
|
+
this.renderedTools = rts;
|
|
22
22
|
}
|
|
23
23
|
click({ context, event: ev }) {
|
|
24
24
|
if (this.focused.renderedTool !== context && ev) {
|
|
@@ -31,7 +31,7 @@ export class NavigationService {
|
|
|
31
31
|
}
|
|
32
32
|
moveFocusToPopup() {
|
|
33
33
|
this.isPopupFocused = true;
|
|
34
|
-
this.
|
|
34
|
+
this.resetNavigation();
|
|
35
35
|
this.focus();
|
|
36
36
|
}
|
|
37
37
|
focusNext(ev) {
|
|
@@ -108,7 +108,7 @@ export class NavigationService {
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
getFocusableTools() {
|
|
111
|
-
return this.renderedTools.filter(rt => rt.tool.overflows === this.isPopupFocused && rt.tool.canFocus());
|
|
111
|
+
return this.renderedTools.filter(rt => (rt.tool.overflows === this.isPopupFocused) && rt.tool.canFocus());
|
|
112
112
|
}
|
|
113
113
|
focus(renderedTool, ev) {
|
|
114
114
|
// running the code below in onStable fixes issue #2939
|
|
@@ -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:
|
|
13
|
-
version: '16.
|
|
12
|
+
publishDate: 1727948223,
|
|
13
|
+
version: '16.11.0-develop.10',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -2,134 +2,148 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import {
|
|
6
|
-
import { outerWidth } from './util';
|
|
5
|
+
import { Input, Renderer2 as Renderer, Output, EventEmitter, Directive, ViewContainerRef } from '@angular/core';
|
|
6
|
+
import { isElement, outerWidth } from './util';
|
|
7
7
|
import { ToolBarToolComponent } from './tools/toolbar-tool.component';
|
|
8
8
|
import { RefreshService } from './refresh.service';
|
|
9
9
|
import { RendererService } from './renderer.service';
|
|
10
|
-
import {
|
|
10
|
+
import { ToolbarToolsService } from './tools/tools.service';
|
|
11
|
+
import { NavigationService } from './navigation.service';
|
|
11
12
|
import * as i0 from "@angular/core";
|
|
12
13
|
import * as i1 from "./renderer.service";
|
|
13
14
|
import * as i2 from "./refresh.service";
|
|
15
|
+
import * as i3 from "./tools/tools.service";
|
|
16
|
+
import * as i4 from "./navigation.service";
|
|
14
17
|
const MIN_SPACER_WIDTH = 18;
|
|
15
18
|
/**
|
|
16
19
|
* @hidden
|
|
17
20
|
*/
|
|
18
21
|
export class ToolBarRendererComponent {
|
|
19
|
-
constructor(
|
|
20
|
-
this.element = element;
|
|
22
|
+
constructor(renderer, rendererService, refreshService, toolsService, viewContainer, navigationService) {
|
|
21
23
|
this.renderer = renderer;
|
|
22
24
|
this.rendererService = rendererService;
|
|
23
25
|
this.refreshService = refreshService;
|
|
26
|
+
this.toolsService = toolsService;
|
|
27
|
+
this.viewContainer = viewContainer;
|
|
28
|
+
this.navigationService = navigationService;
|
|
24
29
|
this.rendererClick = new EventEmitter();
|
|
25
|
-
this.
|
|
26
|
-
|
|
30
|
+
this.onClick = (ev) => {
|
|
31
|
+
this.rendererClick.emit({ context: this, event: ev });
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
get isSpacer() {
|
|
35
|
+
return this.tool && this.tool.__isSpacer;
|
|
36
|
+
}
|
|
37
|
+
ngOnInit() {
|
|
38
|
+
this.internalComponentRef = this.viewContainer.get(0)?.rootNodes[0];
|
|
39
|
+
this.element = this.tool.element;
|
|
40
|
+
if (isElement(this.internalComponentRef)) {
|
|
41
|
+
this.internalComponentRef.addEventListener('click', this.onClick);
|
|
42
|
+
}
|
|
43
|
+
this.rendererService.element = this.element;
|
|
27
44
|
this.rendererService.renderer = this;
|
|
28
45
|
this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
|
|
29
46
|
if (this.tool === tool) {
|
|
30
47
|
this.refresh();
|
|
31
48
|
}
|
|
32
49
|
});
|
|
33
|
-
}
|
|
34
|
-
get spacerClass() {
|
|
35
|
-
return this.location === 'toolbar' && this.isSpacer;
|
|
36
|
-
}
|
|
37
|
-
get isSpacer() {
|
|
38
|
-
return this.tool && this.tool.__isSpacer;
|
|
39
|
-
}
|
|
40
|
-
onClick(ev) {
|
|
41
|
-
this.rendererClick.emit({ context: this, event: ev });
|
|
42
|
-
}
|
|
43
|
-
ngOnInit() {
|
|
44
50
|
if (this.resizable) {
|
|
45
51
|
if (this.location === 'toolbar') {
|
|
46
52
|
this.template = this.tool.toolbarTemplate;
|
|
47
|
-
|
|
48
|
-
|
|
53
|
+
if (isElement(this.internalComponentRef)) {
|
|
54
|
+
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
|
|
55
|
+
this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
|
|
56
|
+
}
|
|
49
57
|
}
|
|
50
58
|
else {
|
|
51
59
|
this.template = this.tool.popupTemplate;
|
|
52
|
-
|
|
60
|
+
if (isElement(this.internalComponentRef)) {
|
|
61
|
+
this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
|
|
62
|
+
}
|
|
53
63
|
}
|
|
54
64
|
}
|
|
55
65
|
else {
|
|
56
66
|
this.tool.overflows = false;
|
|
57
67
|
this.template = this.tool.toolbarTemplate;
|
|
58
|
-
|
|
59
|
-
|
|
68
|
+
if (isElement(this.internalComponentRef)) {
|
|
69
|
+
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
|
|
70
|
+
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
|
|
71
|
+
}
|
|
60
72
|
}
|
|
61
73
|
}
|
|
62
74
|
ngOnDestroy() {
|
|
63
75
|
this.refreshSubscription.unsubscribe();
|
|
76
|
+
if (isElement(this.internalComponentRef)) {
|
|
77
|
+
this.internalComponentRef.removeEventListener('click', this.onClick);
|
|
78
|
+
}
|
|
64
79
|
}
|
|
65
80
|
ngAfterViewInit() {
|
|
66
81
|
if (this.resizable) {
|
|
67
82
|
this.refresh();
|
|
68
83
|
}
|
|
84
|
+
this.updateTools();
|
|
69
85
|
}
|
|
70
86
|
/**
|
|
71
87
|
* @hidden
|
|
72
88
|
*/
|
|
73
89
|
get width() {
|
|
90
|
+
if (!isElement(this.internalComponentRef)) {
|
|
91
|
+
return 0;
|
|
92
|
+
}
|
|
74
93
|
if (this.isSpacer) {
|
|
75
94
|
return MIN_SPACER_WIDTH;
|
|
76
95
|
}
|
|
77
|
-
return this.tool.overflows ? 0 : outerWidth(this.
|
|
96
|
+
return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
|
|
78
97
|
}
|
|
79
|
-
/**
|
|
80
|
-
* @hidden
|
|
81
|
-
*/
|
|
82
98
|
isDisplayed() {
|
|
83
|
-
return this.
|
|
99
|
+
return this.internalComponentRef?.style?.display !== 'none';
|
|
84
100
|
}
|
|
85
|
-
/**
|
|
86
|
-
* @hidden
|
|
87
|
-
*/
|
|
88
101
|
refresh() {
|
|
89
102
|
if (this.resizable) {
|
|
103
|
+
if (!isElement(this.internalComponentRef)) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
90
106
|
if (this.location === 'toolbar') {
|
|
91
|
-
this.renderer.setStyle(this.
|
|
92
|
-
this.renderer.setStyle(this.
|
|
107
|
+
this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
|
|
108
|
+
this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
|
|
93
109
|
}
|
|
94
110
|
else {
|
|
95
|
-
this.renderer.setStyle(this.
|
|
111
|
+
this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
|
|
96
112
|
}
|
|
113
|
+
this.updateTools();
|
|
97
114
|
}
|
|
98
115
|
}
|
|
99
|
-
/**
|
|
100
|
-
* @hidden
|
|
101
|
-
*/
|
|
102
116
|
setAttribute(element, attr, value) {
|
|
103
117
|
this.renderer.setAttribute(element, attr, value);
|
|
104
118
|
}
|
|
119
|
+
updateTools() {
|
|
120
|
+
const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
|
|
121
|
+
const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
|
|
122
|
+
if (this.location === 'toolbar') {
|
|
123
|
+
isInPopup && (this.toolsService.overflowTools = this.toolsService.overflowTools.filter(t => t.tool !== this.tool));
|
|
124
|
+
!isInToolbar && this.toolsService.renderedTools.push(this);
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
if (!isInPopup) {
|
|
128
|
+
this.toolsService.overflowTools.push(this);
|
|
129
|
+
this.toolsService.overflowTools.sort((t1, t2) => {
|
|
130
|
+
// ensures correct navigation order in Popup
|
|
131
|
+
return this.toolsService.allTools.indexOf(t1.tool) - this.toolsService.allTools.indexOf(t2.tool);
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
105
136
|
}
|
|
106
|
-
ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.
|
|
107
|
-
ToolBarRendererComponent.ɵ
|
|
108
|
-
<ng-container *ngIf="location === 'toolbar'">
|
|
109
|
-
<ng-template [ngTemplateOutlet]="template"></ng-template>
|
|
110
|
-
</ng-container>
|
|
111
|
-
<ng-container *ngIf="location === 'overflow' && tool.responsive">
|
|
112
|
-
<ng-template [ngTemplateOutlet]="template"></ng-template>
|
|
113
|
-
</ng-container>
|
|
114
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
137
|
+
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 }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
138
|
+
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 });
|
|
115
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
|
|
116
|
-
type:
|
|
140
|
+
type: Directive,
|
|
117
141
|
args: [{
|
|
118
|
-
exportAs: 'kendoToolBarRenderer',
|
|
119
142
|
providers: [RendererService],
|
|
120
|
-
selector: 'kendo-toolbar-renderer',
|
|
121
|
-
template: `
|
|
122
|
-
<ng-container *ngIf="location === 'toolbar'">
|
|
123
|
-
<ng-template [ngTemplateOutlet]="template"></ng-template>
|
|
124
|
-
</ng-container>
|
|
125
|
-
<ng-container *ngIf="location === 'overflow' && tool.responsive">
|
|
126
|
-
<ng-template [ngTemplateOutlet]="template"></ng-template>
|
|
127
|
-
</ng-container>
|
|
128
|
-
`,
|
|
129
143
|
standalone: true,
|
|
130
|
-
|
|
144
|
+
selector: '[kendoToolbarRenderer]'
|
|
131
145
|
}]
|
|
132
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
146
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.RendererService }, { type: i2.RefreshService }, { type: i3.ToolbarToolsService }, { type: i0.ViewContainerRef }, { type: i4.NavigationService }]; }, propDecorators: { tool: [{
|
|
133
147
|
type: Input
|
|
134
148
|
}], location: [{
|
|
135
149
|
type: Input
|
|
@@ -137,13 +151,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
137
151
|
type: Input
|
|
138
152
|
}], rendererClick: [{
|
|
139
153
|
type: Output
|
|
140
|
-
}], spacerClass: [{
|
|
141
|
-
type: HostBinding,
|
|
142
|
-
args: ['class.k-spacer']
|
|
143
|
-
}], hostClass: [{
|
|
144
|
-
type: HostBinding,
|
|
145
|
-
args: ['class.k-toolbar-renderer']
|
|
146
|
-
}], onClick: [{
|
|
147
|
-
type: HostListener,
|
|
148
|
-
args: ['click', ['$event']]
|
|
149
154
|
}] } });
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/* eslint-disable no-case-declarations */
|
|
6
|
-
import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input,
|
|
6
|
+
import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
8
|
import { guid, ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
9
9
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
@@ -22,13 +22,15 @@ import { filter } from 'rxjs/operators';
|
|
|
22
22
|
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
23
23
|
import { moreVerticalIcon } from '@progress/kendo-svg-icons';
|
|
24
24
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
25
|
-
import { NgFor, NgIf, NgClass } from '@angular/common';
|
|
25
|
+
import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
26
26
|
import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
|
|
27
|
+
import { ToolbarToolsService } from './tools/tools.service';
|
|
27
28
|
import * as i0 from "@angular/core";
|
|
28
29
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
29
30
|
import * as i2 from "@progress/kendo-angular-popup";
|
|
30
31
|
import * as i3 from "./refresh.service";
|
|
31
32
|
import * as i4 from "./navigation.service";
|
|
33
|
+
import * as i5 from "./tools/tools.service";
|
|
32
34
|
const DEFAULT_SIZE = 'medium';
|
|
33
35
|
const immediateResizeThreshold = 300;
|
|
34
36
|
const getInitialPopupSettings = (isRtl) => ({
|
|
@@ -42,7 +44,7 @@ const getInitialPopupSettings = (isRtl) => ({
|
|
|
42
44
|
export class ToolBarComponent {
|
|
43
45
|
constructor(localization, popupService, refreshService, navigationService,
|
|
44
46
|
// Needs to be public as it is being accessed in the Editor component
|
|
45
|
-
element, zone, renderer, _cdr) {
|
|
47
|
+
element, zone, renderer, _cdr, toolsService) {
|
|
46
48
|
this.localization = localization;
|
|
47
49
|
this.popupService = popupService;
|
|
48
50
|
this.refreshService = refreshService;
|
|
@@ -51,6 +53,7 @@ export class ToolBarComponent {
|
|
|
51
53
|
this.zone = zone;
|
|
52
54
|
this.renderer = renderer;
|
|
53
55
|
this._cdr = _cdr;
|
|
56
|
+
this.toolsService = toolsService;
|
|
54
57
|
/**
|
|
55
58
|
* Hides the overflowing tools in a popup.
|
|
56
59
|
*/
|
|
@@ -189,7 +192,16 @@ export class ToolBarComponent {
|
|
|
189
192
|
get resizableClass() {
|
|
190
193
|
return this.overflow;
|
|
191
194
|
}
|
|
195
|
+
ngAfterContentInit() {
|
|
196
|
+
this.toolsService.allTools = this.allTools.toArray();
|
|
197
|
+
this.subscriptions.add(this.allTools.changes.subscribe(changes => {
|
|
198
|
+
this.toolsService.allTools = this.allTools.toArray();
|
|
199
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
|
|
200
|
+
}));
|
|
201
|
+
}
|
|
192
202
|
ngAfterViewInit() {
|
|
203
|
+
this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools);
|
|
204
|
+
this.toolsService.overflowToolsChange.next(this.toolsService.overflowTools);
|
|
193
205
|
const element = this.element.nativeElement;
|
|
194
206
|
if (!element.getAttribute('tabindex')) {
|
|
195
207
|
this.element.nativeElement.setAttribute('tabindex', '0');
|
|
@@ -241,7 +253,7 @@ export class ToolBarComponent {
|
|
|
241
253
|
});
|
|
242
254
|
});
|
|
243
255
|
if (this.overflow) {
|
|
244
|
-
this.subscriptions.add(merge(this.resizeSensor.resize, this.
|
|
256
|
+
this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
|
|
245
257
|
this.navigationService.overflowButton = this.overflowButton;
|
|
246
258
|
// because of https://github.com/telerik/kendo-angular-buttons/pull/276
|
|
247
259
|
// button icons are not rendered until onResize() is called
|
|
@@ -253,8 +265,7 @@ export class ToolBarComponent {
|
|
|
253
265
|
});
|
|
254
266
|
});
|
|
255
267
|
}
|
|
256
|
-
this.navigationService.setRenderedTools(this.renderedTools
|
|
257
|
-
this.subscriptions.add(this.renderedTools.changes.subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray())));
|
|
268
|
+
this.navigationService.setRenderedTools(this.toolsService.renderedTools);
|
|
258
269
|
this.handleClasses(this.size, 'size');
|
|
259
270
|
}
|
|
260
271
|
ngOnInit() {
|
|
@@ -358,7 +369,6 @@ export class ToolBarComponent {
|
|
|
358
369
|
onPopupOpen() {
|
|
359
370
|
this.zone.runOutsideAngular(() => {
|
|
360
371
|
this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
|
|
361
|
-
const currentTool = this.overflowRenderedTools.toArray().find(tool => closest(ev.target, (el) => el === tool.element.nativeElement));
|
|
362
372
|
switch (ev.keyCode) {
|
|
363
373
|
case Keys.ArrowUp:
|
|
364
374
|
this.zone.run(() => {
|
|
@@ -386,7 +396,7 @@ export class ToolBarComponent {
|
|
|
386
396
|
case Keys.Enter:
|
|
387
397
|
case Keys.Space:
|
|
388
398
|
this.zone.run(() => {
|
|
389
|
-
if (
|
|
399
|
+
if (ev.target.closest('.k-menu-item')) {
|
|
390
400
|
ev.preventDefault();
|
|
391
401
|
ev.target.click();
|
|
392
402
|
ev.target.focus();
|
|
@@ -399,11 +409,11 @@ export class ToolBarComponent {
|
|
|
399
409
|
});
|
|
400
410
|
});
|
|
401
411
|
this.cancelRenderedToolsSubscription$.next();
|
|
412
|
+
this.navigationService.setRenderedTools(this.toolsService.overflowTools);
|
|
402
413
|
this.navigationService.moveFocusToPopup();
|
|
403
|
-
this.
|
|
404
|
-
this.overflowRenderedTools.changes
|
|
414
|
+
this.toolsService.overflowToolsChange
|
|
405
415
|
.pipe(takeUntil(this.cancelRenderedToolsSubscription$))
|
|
406
|
-
.subscribe((rts) => this.navigationService.setRenderedTools(rts
|
|
416
|
+
.subscribe((rts) => this.navigationService.setRenderedTools(rts));
|
|
407
417
|
this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
|
|
408
418
|
}
|
|
409
419
|
/**
|
|
@@ -411,10 +421,10 @@ export class ToolBarComponent {
|
|
|
411
421
|
*/
|
|
412
422
|
onPopupClose() {
|
|
413
423
|
this.cancelRenderedToolsSubscription$.next();
|
|
414
|
-
this.navigationService.setRenderedTools(this.renderedTools
|
|
415
|
-
this.
|
|
424
|
+
this.navigationService.setRenderedTools(this.toolsService.renderedTools);
|
|
425
|
+
this.toolsService.renderedToolsChange
|
|
416
426
|
.pipe(takeUntil(this.cancelRenderedToolsSubscription$))
|
|
417
|
-
.subscribe((rts) => this.navigationService.setRenderedTools(rts
|
|
427
|
+
.subscribe((rts) => this.navigationService.setRenderedTools(rts));
|
|
418
428
|
this.navigationService.moveFocusToToolBar();
|
|
419
429
|
if (this.overflowKeydownListener) {
|
|
420
430
|
this.overflowKeydownListener();
|
|
@@ -455,7 +465,7 @@ export class ToolBarComponent {
|
|
|
455
465
|
return this.cachedGap;
|
|
456
466
|
}
|
|
457
467
|
get childrenWidth() {
|
|
458
|
-
const width = this.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
|
|
468
|
+
const width = this.toolsService.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
|
|
459
469
|
return Math.ceil(width);
|
|
460
470
|
}
|
|
461
471
|
get visibleTools() {
|
|
@@ -498,7 +508,10 @@ export class ToolBarComponent {
|
|
|
498
508
|
}
|
|
499
509
|
hideLastVisibleTool() {
|
|
500
510
|
const tool = this.visibleTools[this.visibleTools.length - 1];
|
|
501
|
-
|
|
511
|
+
if (!tool) {
|
|
512
|
+
return null;
|
|
513
|
+
}
|
|
514
|
+
const renderedElement = this.toolsService.renderedTools.find((r) => {
|
|
502
515
|
return r.tool === tool;
|
|
503
516
|
});
|
|
504
517
|
const width = renderedElement.width;
|
|
@@ -508,18 +521,20 @@ export class ToolBarComponent {
|
|
|
508
521
|
}
|
|
509
522
|
showFirstHiddenTool(containerWidth, childrenWidth) {
|
|
510
523
|
const tool = this.overflowTools[0];
|
|
511
|
-
|
|
524
|
+
if (!tool) {
|
|
525
|
+
return null;
|
|
526
|
+
}
|
|
527
|
+
const renderedElement = this.toolsService.renderedTools.find((r) => r.tool === tool);
|
|
512
528
|
tool.overflows = false;
|
|
513
529
|
tool.visibility = 'hidden';
|
|
514
530
|
this.refreshService.refresh(tool);
|
|
515
531
|
if (containerWidth > childrenWidth + renderedElement.width) {
|
|
516
532
|
tool.visibility = 'visible';
|
|
517
|
-
this.refreshService.refresh(tool);
|
|
518
533
|
}
|
|
519
534
|
else {
|
|
520
535
|
tool.overflows = true;
|
|
521
|
-
this.refreshService.refresh(tool);
|
|
522
536
|
}
|
|
537
|
+
this.refreshService.refresh(tool);
|
|
523
538
|
return renderedElement.width; // returns 0 if `overflows` is true
|
|
524
539
|
}
|
|
525
540
|
setPopupContentDimensions() {
|
|
@@ -564,30 +579,29 @@ export class ToolBarComponent {
|
|
|
564
579
|
return classes;
|
|
565
580
|
}
|
|
566
581
|
}
|
|
567
|
-
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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
582
|
+
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 });
|
|
568
583
|
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", 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: [
|
|
569
584
|
RefreshService,
|
|
570
585
|
NavigationService,
|
|
571
586
|
LocalizationService,
|
|
587
|
+
ToolbarToolsService,
|
|
572
588
|
{
|
|
573
589
|
provide: L10N_PREFIX,
|
|
574
590
|
useValue: 'kendo.toolbar'
|
|
575
591
|
}
|
|
576
|
-
], 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 }
|
|
592
|
+
], 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: `
|
|
577
593
|
<ng-container kendoToolbarLocalizedMessages
|
|
578
594
|
i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
|
|
579
595
|
moreToolsTitle="More tools"
|
|
580
596
|
>
|
|
581
597
|
</ng-container>
|
|
582
|
-
<ng-container *ngFor="let tool of allTools; let index = index"
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
></kendo-toolbar-renderer>
|
|
590
|
-
</ng-container>
|
|
598
|
+
<ng-container *ngFor="let tool of allTools; let index = index"
|
|
599
|
+
kendoToolbarRenderer
|
|
600
|
+
[tool]="tool"
|
|
601
|
+
location="toolbar"
|
|
602
|
+
[resizable]="overflow"
|
|
603
|
+
(rendererClick)="onRendererClick($event)"
|
|
604
|
+
[ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
|
|
591
605
|
<button
|
|
592
606
|
kendoButton
|
|
593
607
|
fillMode="flat"
|
|
@@ -616,20 +630,19 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
616
630
|
role="menu"
|
|
617
631
|
[id]="popupId"
|
|
618
632
|
[attr.aria-labelledby]="overflowBtnId">
|
|
619
|
-
<ng-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
</ng-container>
|
|
633
|
+
<ng-template
|
|
634
|
+
*ngFor="let tool of overflowTools; let index = index"
|
|
635
|
+
kendoToolbarRenderer
|
|
636
|
+
[tool]="tool"
|
|
637
|
+
location="overflow"
|
|
638
|
+
[resizable]="overflow"
|
|
639
|
+
(rendererClick)="onRendererClick($event)"
|
|
640
|
+
[ngTemplateOutlet]="tool.popupTemplate"></ng-template>
|
|
628
641
|
</div>
|
|
629
642
|
</ng-template>
|
|
630
643
|
<ng-container #container></ng-container>
|
|
631
644
|
<kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
|
|
632
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "
|
|
645
|
+
`, 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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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"] }] });
|
|
633
646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
|
|
634
647
|
type: Component,
|
|
635
648
|
args: [{
|
|
@@ -638,6 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
638
651
|
RefreshService,
|
|
639
652
|
NavigationService,
|
|
640
653
|
LocalizationService,
|
|
654
|
+
ToolbarToolsService,
|
|
641
655
|
{
|
|
642
656
|
provide: L10N_PREFIX,
|
|
643
657
|
useValue: 'kendo.toolbar'
|
|
@@ -650,15 +664,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
650
664
|
moreToolsTitle="More tools"
|
|
651
665
|
>
|
|
652
666
|
</ng-container>
|
|
653
|
-
<ng-container *ngFor="let tool of allTools; let index = index"
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
></kendo-toolbar-renderer>
|
|
661
|
-
</ng-container>
|
|
667
|
+
<ng-container *ngFor="let tool of allTools; let index = index"
|
|
668
|
+
kendoToolbarRenderer
|
|
669
|
+
[tool]="tool"
|
|
670
|
+
location="toolbar"
|
|
671
|
+
[resizable]="overflow"
|
|
672
|
+
(rendererClick)="onRendererClick($event)"
|
|
673
|
+
[ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
|
|
662
674
|
<button
|
|
663
675
|
kendoButton
|
|
664
676
|
fillMode="flat"
|
|
@@ -687,24 +699,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
687
699
|
role="menu"
|
|
688
700
|
[id]="popupId"
|
|
689
701
|
[attr.aria-labelledby]="overflowBtnId">
|
|
690
|
-
<ng-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
</ng-container>
|
|
702
|
+
<ng-template
|
|
703
|
+
*ngFor="let tool of overflowTools; let index = index"
|
|
704
|
+
kendoToolbarRenderer
|
|
705
|
+
[tool]="tool"
|
|
706
|
+
location="overflow"
|
|
707
|
+
[resizable]="overflow"
|
|
708
|
+
(rendererClick)="onRendererClick($event)"
|
|
709
|
+
[ngTemplateOutlet]="tool.popupTemplate"></ng-template>
|
|
699
710
|
</div>
|
|
700
711
|
</ng-template>
|
|
701
712
|
<ng-container #container></ng-container>
|
|
702
713
|
<kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
|
|
703
714
|
`,
|
|
704
715
|
standalone: true,
|
|
705
|
-
imports: [LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
|
|
716
|
+
imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
|
|
706
717
|
}]
|
|
707
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
|
|
718
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }]; }, propDecorators: { overflow: [{
|
|
708
719
|
type: Input
|
|
709
720
|
}], resizable: [{
|
|
710
721
|
type: Input
|
|
@@ -736,12 +747,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
736
747
|
}], container: [{
|
|
737
748
|
type: ViewChild,
|
|
738
749
|
args: ['container', { read: ViewContainerRef, static: true }]
|
|
739
|
-
}], renderedTools: [{
|
|
740
|
-
type: ViewChildren,
|
|
741
|
-
args: ['toolbarRenderer']
|
|
742
|
-
}], overflowRenderedTools: [{
|
|
743
|
-
type: ViewChildren,
|
|
744
|
-
args: ['overflowRenderer']
|
|
745
750
|
}], hostClass: [{
|
|
746
751
|
type: HostBinding,
|
|
747
752
|
args: ['class.k-toolbar']
|
|
@@ -34,7 +34,7 @@ export class ToolBarModule {
|
|
|
34
34
|
}
|
|
35
35
|
ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
36
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: [
|
|
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
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
|
|
39
39
|
type: NgModule,
|
|
40
40
|
args: [{
|
|
@@ -181,8 +181,9 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
181
181
|
</kendo-buttongroup>
|
|
182
182
|
</ng-template>
|
|
183
183
|
<ng-template #popupTemplate>
|
|
184
|
-
|
|
185
|
-
|
|
184
|
+
<div
|
|
185
|
+
*ngFor="let button of buttonComponents"
|
|
186
|
+
#listItem
|
|
186
187
|
tabindex="-1"
|
|
187
188
|
role="menuitem"
|
|
188
189
|
class="k-item k-menu-item"
|
|
@@ -203,7 +204,6 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
203
204
|
<span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
|
|
204
205
|
</span>
|
|
205
206
|
</div>
|
|
206
|
-
</ng-container>
|
|
207
207
|
</ng-template>
|
|
208
208
|
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
209
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
|
|
@@ -250,8 +250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
250
250
|
</kendo-buttongroup>
|
|
251
251
|
</ng-template>
|
|
252
252
|
<ng-template #popupTemplate>
|
|
253
|
-
|
|
254
|
-
|
|
253
|
+
<div
|
|
254
|
+
*ngFor="let button of buttonComponents"
|
|
255
|
+
#listItem
|
|
255
256
|
tabindex="-1"
|
|
256
257
|
role="menuitem"
|
|
257
258
|
class="k-item k-menu-item"
|
|
@@ -272,7 +273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
272
273
|
<span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
|
|
273
274
|
</span>
|
|
274
275
|
</div>
|
|
275
|
-
</ng-container>
|
|
276
276
|
</ng-template>
|
|
277
277
|
`,
|
|
278
278
|
standalone: true,
|