@progress/kendo-angular-toolbar 19.0.0-develop.30 → 19.0.0-develop.31
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/esm2022/package-metadata.mjs +2 -2
- package/esm2022/toolbar.component.mjs +32 -18
- package/esm2022/tools/toolbar-button.component.mjs +22 -2
- package/esm2022/tools/toolbar-buttongroup.component.mjs +17 -3
- package/esm2022/tools/toolbar-dropdownbutton.component.mjs +24 -2
- package/esm2022/tools/toolbar-splitbutton.component.mjs +26 -15
- package/fesm2022/progress-kendo-angular-toolbar.mjs +120 -40
- package/package.json +9 -9
- package/toolbar.component.d.ts +12 -10
- package/tools/toolbar-button.component.d.ts +6 -0
- package/tools/toolbar-buttongroup.component.d.ts +7 -1
- package/tools/toolbar-dropdownbutton.component.d.ts +6 -0
- package/tools/toolbar-splitbutton.component.d.ts +6 -0
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.0.0-develop.
|
|
13
|
+
publishDate: 1747923818,
|
|
14
|
+
version: '19.0.0-develop.31',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -21,7 +21,7 @@ import { take, takeUntil } from 'rxjs/operators';
|
|
|
21
21
|
import { filter } from 'rxjs/operators';
|
|
22
22
|
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
23
23
|
import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
|
|
24
|
-
import { ButtonComponent
|
|
24
|
+
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
25
25
|
import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
26
26
|
import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
|
|
27
27
|
import { ToolbarToolsService } from './tools/tools.service';
|
|
@@ -182,29 +182,31 @@ export class ToolBarComponent {
|
|
|
182
182
|
* Specifies the icons visibility for all tools in the ToolBar.
|
|
183
183
|
* This can be overridden by the `showIcon` property of each tool.
|
|
184
184
|
*/
|
|
185
|
-
showIcon
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
*/
|
|
189
|
-
get normalizedShowIcon() {
|
|
190
|
-
if (typeof this.showIcon === 'boolean') {
|
|
191
|
-
return this.showIcon ? 'always' : 'never';
|
|
185
|
+
set showIcon(value) {
|
|
186
|
+
if (this._showIcon === value) {
|
|
187
|
+
return;
|
|
192
188
|
}
|
|
193
|
-
|
|
189
|
+
const normalizedValue = this.normalizeDisplayValue(value);
|
|
190
|
+
this._showIcon = value;
|
|
191
|
+
this.propertyChange.emit({
|
|
192
|
+
property: 'showIcon',
|
|
193
|
+
value: normalizedValue
|
|
194
|
+
});
|
|
194
195
|
}
|
|
195
196
|
/**
|
|
196
197
|
* Specifies the text visibility for all tools in the ToolBar.
|
|
197
198
|
* This can be overridden by the `showText` property of each tool.
|
|
198
199
|
*/
|
|
199
|
-
showText
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
*/
|
|
203
|
-
get normalizedShowText() {
|
|
204
|
-
if (typeof this.showText === 'boolean') {
|
|
205
|
-
return this.showText ? 'always' : 'never';
|
|
200
|
+
set showText(value) {
|
|
201
|
+
if (this._showText === value) {
|
|
202
|
+
return;
|
|
206
203
|
}
|
|
207
|
-
|
|
204
|
+
const normalizedValue = this.normalizeDisplayValue(value);
|
|
205
|
+
this._showText = value;
|
|
206
|
+
this.propertyChange.emit({
|
|
207
|
+
property: 'showText',
|
|
208
|
+
value: normalizedValue
|
|
209
|
+
});
|
|
208
210
|
}
|
|
209
211
|
/**
|
|
210
212
|
* Fires when the overflow popup of the ToolBar is opened.
|
|
@@ -262,6 +264,10 @@ export class ToolBarComponent {
|
|
|
262
264
|
* @hidden
|
|
263
265
|
*/
|
|
264
266
|
nextButtonIcon = caretAltRightIcon;
|
|
267
|
+
/**
|
|
268
|
+
* @hidden
|
|
269
|
+
*/
|
|
270
|
+
propertyChange = new EventEmitter();
|
|
265
271
|
hostClass = true;
|
|
266
272
|
get scrollableClass() {
|
|
267
273
|
return this.isScrollMode;
|
|
@@ -280,6 +286,8 @@ export class ToolBarComponent {
|
|
|
280
286
|
cachedGap;
|
|
281
287
|
_size = DEFAULT_SIZE;
|
|
282
288
|
_fillMode = DEFAULT_FILL_MODE;
|
|
289
|
+
_showText = 'always';
|
|
290
|
+
_showIcon = 'always';
|
|
283
291
|
overflowButtonClickedTime = null;
|
|
284
292
|
showAutoButtons = false;
|
|
285
293
|
scrollButtonStateChangeSub;
|
|
@@ -981,6 +989,12 @@ export class ToolBarComponent {
|
|
|
981
989
|
}
|
|
982
990
|
});
|
|
983
991
|
}
|
|
992
|
+
normalizeDisplayValue(value) {
|
|
993
|
+
if (typeof value === 'boolean') {
|
|
994
|
+
return value ? 'always' : 'never';
|
|
995
|
+
}
|
|
996
|
+
return value;
|
|
997
|
+
}
|
|
984
998
|
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 }, { token: i6.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
|
|
985
999
|
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", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
986
1000
|
RefreshService,
|
|
@@ -1408,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1408
1422
|
<kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
|
|
1409
1423
|
`,
|
|
1410
1424
|
standalone: true,
|
|
1411
|
-
imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent,
|
|
1425
|
+
imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
|
|
1412
1426
|
}]
|
|
1413
1427
|
}], 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 }, { type: i6.ScrollService }]; }, propDecorators: { overflow: [{
|
|
1414
1428
|
type: Input
|
|
@@ -29,7 +29,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
29
29
|
this.setTextDisplayMode();
|
|
30
30
|
}
|
|
31
31
|
get showText() {
|
|
32
|
-
return this._showText
|
|
32
|
+
return this._showText;
|
|
33
33
|
}
|
|
34
34
|
/**
|
|
35
35
|
* Specifies the button icon visibility.
|
|
@@ -39,7 +39,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
39
39
|
this.setTextDisplayMode();
|
|
40
40
|
}
|
|
41
41
|
get showIcon() {
|
|
42
|
-
return this._showIcon
|
|
42
|
+
return this._showIcon;
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
45
|
* Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
|
|
@@ -51,6 +51,12 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
51
51
|
get text() {
|
|
52
52
|
return this._text;
|
|
53
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* @hidden
|
|
56
|
+
*/
|
|
57
|
+
get size() {
|
|
58
|
+
return this.host.size;
|
|
59
|
+
}
|
|
54
60
|
/**
|
|
55
61
|
* Specifies custom inline CSS styles of the Button.
|
|
56
62
|
*/
|
|
@@ -204,16 +210,26 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
204
210
|
_showText;
|
|
205
211
|
_showIcon;
|
|
206
212
|
_text;
|
|
213
|
+
propertyChangeSub;
|
|
207
214
|
constructor(element, zone, host) {
|
|
208
215
|
super();
|
|
209
216
|
this.element = element;
|
|
210
217
|
this.zone = zone;
|
|
211
218
|
this.host = host;
|
|
212
219
|
this.isBuiltInTool = true;
|
|
220
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
221
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
222
|
+
this[change.property] = change.value;
|
|
223
|
+
}
|
|
224
|
+
});
|
|
213
225
|
}
|
|
214
226
|
ngOnInit() {
|
|
215
227
|
this.setTextDisplayMode();
|
|
216
228
|
}
|
|
229
|
+
ngOnDestroy() {
|
|
230
|
+
this.propertyChangeSub.unsubscribe();
|
|
231
|
+
this.propertyChangeSub = null;
|
|
232
|
+
}
|
|
217
233
|
/**
|
|
218
234
|
* @hidden
|
|
219
235
|
*/
|
|
@@ -282,6 +298,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
282
298
|
[tabindex]="tabIndex"
|
|
283
299
|
type="button"
|
|
284
300
|
kendoButton
|
|
301
|
+
[size]="size"
|
|
285
302
|
[ngStyle]="style"
|
|
286
303
|
[ngClass]="className"
|
|
287
304
|
[attr.title]="title"
|
|
@@ -335,6 +352,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
335
352
|
[tabindex]="tabIndex"
|
|
336
353
|
type="button"
|
|
337
354
|
kendoButton
|
|
355
|
+
[size]="size"
|
|
338
356
|
[ngStyle]="style"
|
|
339
357
|
[ngClass]="className"
|
|
340
358
|
[attr.title]="title"
|
|
@@ -372,6 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
372
390
|
[tabindex]="tabIndex"
|
|
373
391
|
type="button"
|
|
374
392
|
kendoButton
|
|
393
|
+
[size]="size"
|
|
375
394
|
[ngStyle]="style"
|
|
376
395
|
[ngClass]="className"
|
|
377
396
|
[attr.title]="title"
|
|
@@ -425,6 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
425
444
|
[tabindex]="tabIndex"
|
|
426
445
|
type="button"
|
|
427
446
|
kendoButton
|
|
447
|
+
[size]="size"
|
|
428
448
|
[ngStyle]="style"
|
|
429
449
|
[ngClass]="className"
|
|
430
450
|
[attr.title]="title"
|
|
@@ -10,13 +10,16 @@ import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey
|
|
|
10
10
|
import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
11
11
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
12
12
|
import { NgFor, NgStyle, NgClass, NgIf } from '@angular/common';
|
|
13
|
+
import { ToolBarComponent } from '../toolbar.component';
|
|
13
14
|
import * as i0 from "@angular/core";
|
|
14
15
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
16
|
+
import * as i2 from "../toolbar.component";
|
|
15
17
|
/**
|
|
16
18
|
* Represents the Kendo UI Toolbar ButtonGroup for Angular.
|
|
17
19
|
*/
|
|
18
20
|
export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
19
21
|
localization;
|
|
22
|
+
host;
|
|
20
23
|
/**
|
|
21
24
|
* By default, the ButtonGroup is enabled. To disable the whole group of buttons, set its `disabled`
|
|
22
25
|
* attribute to `true`. To disable a specific button, set the `disabled` attribute of the button to
|
|
@@ -73,9 +76,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
73
76
|
focusedIndex = -1;
|
|
74
77
|
getNextKey;
|
|
75
78
|
getPrevKey;
|
|
76
|
-
constructor(localization) {
|
|
79
|
+
constructor(localization, host) {
|
|
77
80
|
super();
|
|
78
81
|
this.localization = localization;
|
|
82
|
+
this.host = host;
|
|
79
83
|
this.getNextKey = getNextKey(this.localization.rtl);
|
|
80
84
|
this.getPrevKey = getPrevKey(this.localization.rtl);
|
|
81
85
|
this.isBuiltInTool = true;
|
|
@@ -170,13 +174,19 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
170
174
|
return button.overflowOptions.svgIcon;
|
|
171
175
|
}
|
|
172
176
|
}
|
|
177
|
+
/**
|
|
178
|
+
* @hidden
|
|
179
|
+
*/
|
|
180
|
+
get size() {
|
|
181
|
+
return this.host.size;
|
|
182
|
+
}
|
|
173
183
|
focusButton(index, ev) {
|
|
174
184
|
// Guard against focusing twice on mousedown.
|
|
175
185
|
if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
|
|
176
186
|
this.buttonElements[index]?.focus();
|
|
177
187
|
}
|
|
178
188
|
}
|
|
179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
180
190
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
181
191
|
<ng-template #toolbarTemplate>
|
|
182
192
|
<kendo-buttongroup
|
|
@@ -197,6 +207,7 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
197
207
|
[ngClass]="button.className"
|
|
198
208
|
[attr.title]="button.title"
|
|
199
209
|
[disabled]="button.disabled"
|
|
210
|
+
[size]="size"
|
|
200
211
|
[togglable]="button.togglable"
|
|
201
212
|
[selected]="button.selected"
|
|
202
213
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -258,6 +269,7 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
258
269
|
[ngClass]="button.className"
|
|
259
270
|
[attr.title]="button.title"
|
|
260
271
|
[disabled]="button.disabled"
|
|
272
|
+
[size]="size"
|
|
261
273
|
[togglable]="button.togglable"
|
|
262
274
|
[selected]="button.selected"
|
|
263
275
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -303,6 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
303
315
|
[ngClass]="button.className"
|
|
304
316
|
[attr.title]="button.title"
|
|
305
317
|
[disabled]="button.disabled"
|
|
318
|
+
[size]="size"
|
|
306
319
|
[togglable]="button.togglable"
|
|
307
320
|
[selected]="button.selected"
|
|
308
321
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -364,6 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
364
377
|
[ngClass]="button.className"
|
|
365
378
|
[attr.title]="button.title"
|
|
366
379
|
[disabled]="button.disabled"
|
|
380
|
+
[size]="size"
|
|
367
381
|
[togglable]="button.togglable"
|
|
368
382
|
[selected]="button.selected"
|
|
369
383
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -385,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
385
399
|
standalone: true,
|
|
386
400
|
imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
|
|
387
401
|
}]
|
|
388
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
|
|
402
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ToolBarComponent }]; }, propDecorators: { disabled: [{
|
|
389
403
|
type: Input
|
|
390
404
|
}], fillMode: [{
|
|
391
405
|
type: Input
|
|
@@ -38,7 +38,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
38
38
|
this.setTextDisplayMode();
|
|
39
39
|
}
|
|
40
40
|
get showText() {
|
|
41
|
-
return this._showText
|
|
41
|
+
return this._showText;
|
|
42
42
|
}
|
|
43
43
|
/**
|
|
44
44
|
* Specifies the button icon visibility.
|
|
@@ -47,7 +47,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
47
47
|
this._showIcon = value;
|
|
48
48
|
}
|
|
49
49
|
get showIcon() {
|
|
50
|
-
return this._showIcon
|
|
50
|
+
return this._showIcon;
|
|
51
51
|
}
|
|
52
52
|
/**
|
|
53
53
|
* Sets the text of the DropDownButton
|
|
@@ -226,6 +226,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
226
226
|
_showText;
|
|
227
227
|
_showIcon;
|
|
228
228
|
_text;
|
|
229
|
+
propertyChangeSub;
|
|
229
230
|
getNextKey;
|
|
230
231
|
getPrevKey;
|
|
231
232
|
constructor(zone, renderer, host) {
|
|
@@ -236,10 +237,21 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
236
237
|
this.getNextKey = getNextKey();
|
|
237
238
|
this.getPrevKey = getPrevKey();
|
|
238
239
|
this.isBuiltInTool = true;
|
|
240
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
241
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
242
|
+
this[change.property] = change.value;
|
|
243
|
+
}
|
|
244
|
+
});
|
|
239
245
|
}
|
|
240
246
|
ngOnInit() {
|
|
241
247
|
this.setTextDisplayMode();
|
|
242
248
|
}
|
|
249
|
+
ngOnDestroy() {
|
|
250
|
+
if (this.propertyChangeSub) {
|
|
251
|
+
this.propertyChangeSub.unsubscribe();
|
|
252
|
+
this.propertyChangeSub = null;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
243
255
|
ngAfterViewInit() {
|
|
244
256
|
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
245
257
|
const dropdownButton = this[`${this.location}DropDownButton`];
|
|
@@ -256,6 +268,12 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
256
268
|
.toArray()
|
|
257
269
|
.findIndex(b => b.nativeElement.contains(ev.target));
|
|
258
270
|
}
|
|
271
|
+
/**
|
|
272
|
+
* @hidden
|
|
273
|
+
*/
|
|
274
|
+
get size() {
|
|
275
|
+
return this.host.size;
|
|
276
|
+
}
|
|
259
277
|
/**
|
|
260
278
|
* @hidden
|
|
261
279
|
*/
|
|
@@ -330,6 +348,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
330
348
|
[arrowIcon]="arrowIcon"
|
|
331
349
|
[buttonClass]="buttonClass"
|
|
332
350
|
[disabled]="disabled"
|
|
351
|
+
[size]="size"
|
|
333
352
|
[tabIndex]="-1"
|
|
334
353
|
[data]="data"
|
|
335
354
|
[buttonAttributes]="{'title': title}"
|
|
@@ -395,6 +414,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
395
414
|
[arrowIcon]="arrowIcon"
|
|
396
415
|
[buttonClass]="buttonClass"
|
|
397
416
|
[disabled]="disabled"
|
|
417
|
+
[size]="size"
|
|
398
418
|
[tabIndex]="-1"
|
|
399
419
|
[data]="data"
|
|
400
420
|
[buttonAttributes]="{'title': title}"
|
|
@@ -427,6 +447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
427
447
|
[arrowIcon]="arrowIcon"
|
|
428
448
|
[buttonClass]="buttonClass"
|
|
429
449
|
[disabled]="disabled"
|
|
450
|
+
[size]="size"
|
|
430
451
|
[tabIndex]="-1"
|
|
431
452
|
[data]="data"
|
|
432
453
|
[buttonAttributes]="{'title': title}"
|
|
@@ -492,6 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
492
513
|
[arrowIcon]="arrowIcon"
|
|
493
514
|
[buttonClass]="buttonClass"
|
|
494
515
|
[disabled]="disabled"
|
|
516
|
+
[size]="size"
|
|
495
517
|
[tabIndex]="-1"
|
|
496
518
|
[data]="data"
|
|
497
519
|
[buttonAttributes]="{'title': title}"
|
|
@@ -9,7 +9,6 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
|
|
|
9
9
|
import { caretAltDownIcon } from '@progress/kendo-svg-icons';
|
|
10
10
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
11
11
|
import { NgClass, NgIf, NgFor } from '@angular/common';
|
|
12
|
-
import { isPresent } from '@progress/kendo-angular-common';
|
|
13
12
|
import { ToolBarComponent } from '../toolbar.component';
|
|
14
13
|
import * as i0 from "@angular/core";
|
|
15
14
|
import * as i1 from "../toolbar.component";
|
|
@@ -23,31 +22,21 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
23
22
|
* Specifies the button text visibility.
|
|
24
23
|
*/
|
|
25
24
|
set showText(value) {
|
|
26
|
-
|
|
27
|
-
this._showText = this.host.normalizedShowText;
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
this._showText = value;
|
|
31
|
-
}
|
|
25
|
+
this._showText = value;
|
|
32
26
|
this.setTextDisplayMode();
|
|
33
27
|
}
|
|
34
28
|
get showText() {
|
|
35
|
-
return this._showText
|
|
29
|
+
return this._showText;
|
|
36
30
|
}
|
|
37
31
|
/**
|
|
38
32
|
* Specifies the button icon visibility.
|
|
39
33
|
*/
|
|
40
34
|
set showIcon(value) {
|
|
41
|
-
|
|
42
|
-
this._showIcon = this.host.normalizedShowIcon;
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
this._showIcon = value;
|
|
46
|
-
}
|
|
35
|
+
this._showIcon = value;
|
|
47
36
|
this.setTextDisplayMode();
|
|
48
37
|
}
|
|
49
38
|
get showIcon() {
|
|
50
|
-
return this._showIcon
|
|
39
|
+
return this._showIcon;
|
|
51
40
|
}
|
|
52
41
|
/**
|
|
53
42
|
* Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
|
|
@@ -229,6 +218,12 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
229
218
|
ngOnInit() {
|
|
230
219
|
this.setTextDisplayMode();
|
|
231
220
|
}
|
|
221
|
+
ngOnDestroy() {
|
|
222
|
+
if (this.propertyChangeSub) {
|
|
223
|
+
this.propertyChangeSub.unsubscribe();
|
|
224
|
+
this.propertyChangeSub = null;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
232
227
|
get overflowButtons() {
|
|
233
228
|
return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
|
|
234
229
|
}
|
|
@@ -238,6 +233,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
238
233
|
_showText;
|
|
239
234
|
_showIcon;
|
|
240
235
|
_text;
|
|
236
|
+
propertyChangeSub;
|
|
241
237
|
getNextKey;
|
|
242
238
|
getPrevKey;
|
|
243
239
|
toolbarSplitButton;
|
|
@@ -250,6 +246,11 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
250
246
|
this.getNextKey = getNextKey();
|
|
251
247
|
this.getPrevKey = getPrevKey();
|
|
252
248
|
this.isBuiltInTool = true;
|
|
249
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
250
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
251
|
+
this[change.property] = change.value;
|
|
252
|
+
}
|
|
253
|
+
});
|
|
253
254
|
}
|
|
254
255
|
/**
|
|
255
256
|
* @hidden
|
|
@@ -270,6 +271,12 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
270
271
|
canFocus() {
|
|
271
272
|
return !this.disabled;
|
|
272
273
|
}
|
|
274
|
+
/**
|
|
275
|
+
* @hidden
|
|
276
|
+
*/
|
|
277
|
+
get size() {
|
|
278
|
+
return this.host.size;
|
|
279
|
+
}
|
|
273
280
|
/**
|
|
274
281
|
* @hidden
|
|
275
282
|
*/
|
|
@@ -344,6 +351,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
344
351
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
345
352
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
346
353
|
[disabled]="disabled"
|
|
354
|
+
[size]="size"
|
|
347
355
|
[tabIndex]="-1"
|
|
348
356
|
[textField]="textField"
|
|
349
357
|
[popupSettings]="popupSettings"
|
|
@@ -413,6 +421,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
413
421
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
414
422
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
415
423
|
[disabled]="disabled"
|
|
424
|
+
[size]="size"
|
|
416
425
|
[tabIndex]="-1"
|
|
417
426
|
[textField]="textField"
|
|
418
427
|
[popupSettings]="popupSettings"
|
|
@@ -448,6 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
448
457
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
449
458
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
450
459
|
[disabled]="disabled"
|
|
460
|
+
[size]="size"
|
|
451
461
|
[tabIndex]="-1"
|
|
452
462
|
[textField]="textField"
|
|
453
463
|
[popupSettings]="popupSettings"
|
|
@@ -517,6 +527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
517
527
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
518
528
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
519
529
|
[disabled]="disabled"
|
|
530
|
+
[size]="size"
|
|
520
531
|
[tabIndex]="-1"
|
|
521
532
|
[textField]="textField"
|
|
522
533
|
[popupSettings]="popupSettings"
|
|
@@ -26,8 +26,8 @@ const packageMetadata = {
|
|
|
26
26
|
productName: 'Kendo UI for Angular',
|
|
27
27
|
productCode: 'KENDOUIANGULAR',
|
|
28
28
|
productCodes: ['KENDOUIANGULAR'],
|
|
29
|
-
publishDate:
|
|
30
|
-
version: '19.0.0-develop.
|
|
29
|
+
publishDate: 1747923818,
|
|
30
|
+
version: '19.0.0-develop.31',
|
|
31
31
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -1235,29 +1235,31 @@ class ToolBarComponent {
|
|
|
1235
1235
|
* Specifies the icons visibility for all tools in the ToolBar.
|
|
1236
1236
|
* This can be overridden by the `showIcon` property of each tool.
|
|
1237
1237
|
*/
|
|
1238
|
-
showIcon
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
*/
|
|
1242
|
-
get normalizedShowIcon() {
|
|
1243
|
-
if (typeof this.showIcon === 'boolean') {
|
|
1244
|
-
return this.showIcon ? 'always' : 'never';
|
|
1238
|
+
set showIcon(value) {
|
|
1239
|
+
if (this._showIcon === value) {
|
|
1240
|
+
return;
|
|
1245
1241
|
}
|
|
1246
|
-
|
|
1242
|
+
const normalizedValue = this.normalizeDisplayValue(value);
|
|
1243
|
+
this._showIcon = value;
|
|
1244
|
+
this.propertyChange.emit({
|
|
1245
|
+
property: 'showIcon',
|
|
1246
|
+
value: normalizedValue
|
|
1247
|
+
});
|
|
1247
1248
|
}
|
|
1248
1249
|
/**
|
|
1249
1250
|
* Specifies the text visibility for all tools in the ToolBar.
|
|
1250
1251
|
* This can be overridden by the `showText` property of each tool.
|
|
1251
1252
|
*/
|
|
1252
|
-
showText
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
*/
|
|
1256
|
-
get normalizedShowText() {
|
|
1257
|
-
if (typeof this.showText === 'boolean') {
|
|
1258
|
-
return this.showText ? 'always' : 'never';
|
|
1253
|
+
set showText(value) {
|
|
1254
|
+
if (this._showText === value) {
|
|
1255
|
+
return;
|
|
1259
1256
|
}
|
|
1260
|
-
|
|
1257
|
+
const normalizedValue = this.normalizeDisplayValue(value);
|
|
1258
|
+
this._showText = value;
|
|
1259
|
+
this.propertyChange.emit({
|
|
1260
|
+
property: 'showText',
|
|
1261
|
+
value: normalizedValue
|
|
1262
|
+
});
|
|
1261
1263
|
}
|
|
1262
1264
|
/**
|
|
1263
1265
|
* Fires when the overflow popup of the ToolBar is opened.
|
|
@@ -1315,6 +1317,10 @@ class ToolBarComponent {
|
|
|
1315
1317
|
* @hidden
|
|
1316
1318
|
*/
|
|
1317
1319
|
nextButtonIcon = caretAltRightIcon;
|
|
1320
|
+
/**
|
|
1321
|
+
* @hidden
|
|
1322
|
+
*/
|
|
1323
|
+
propertyChange = new EventEmitter();
|
|
1318
1324
|
hostClass = true;
|
|
1319
1325
|
get scrollableClass() {
|
|
1320
1326
|
return this.isScrollMode;
|
|
@@ -1333,6 +1339,8 @@ class ToolBarComponent {
|
|
|
1333
1339
|
cachedGap;
|
|
1334
1340
|
_size = DEFAULT_SIZE;
|
|
1335
1341
|
_fillMode = DEFAULT_FILL_MODE;
|
|
1342
|
+
_showText = 'always';
|
|
1343
|
+
_showIcon = 'always';
|
|
1336
1344
|
overflowButtonClickedTime = null;
|
|
1337
1345
|
showAutoButtons = false;
|
|
1338
1346
|
scrollButtonStateChangeSub;
|
|
@@ -2034,6 +2042,12 @@ class ToolBarComponent {
|
|
|
2034
2042
|
}
|
|
2035
2043
|
});
|
|
2036
2044
|
}
|
|
2045
|
+
normalizeDisplayValue(value) {
|
|
2046
|
+
if (typeof value === 'boolean') {
|
|
2047
|
+
return value ? 'always' : 'never';
|
|
2048
|
+
}
|
|
2049
|
+
return value;
|
|
2050
|
+
}
|
|
2037
2051
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2038
2052
|
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", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
2039
2053
|
RefreshService,
|
|
@@ -2461,7 +2475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2461
2475
|
<kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
|
|
2462
2476
|
`,
|
|
2463
2477
|
standalone: true,
|
|
2464
|
-
imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent,
|
|
2478
|
+
imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
|
|
2465
2479
|
}]
|
|
2466
2480
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }]; }, propDecorators: { overflow: [{
|
|
2467
2481
|
type: Input
|
|
@@ -2564,7 +2578,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2564
2578
|
this.setTextDisplayMode();
|
|
2565
2579
|
}
|
|
2566
2580
|
get showText() {
|
|
2567
|
-
return this._showText
|
|
2581
|
+
return this._showText;
|
|
2568
2582
|
}
|
|
2569
2583
|
/**
|
|
2570
2584
|
* Specifies the button icon visibility.
|
|
@@ -2574,7 +2588,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2574
2588
|
this.setTextDisplayMode();
|
|
2575
2589
|
}
|
|
2576
2590
|
get showIcon() {
|
|
2577
|
-
return this._showIcon
|
|
2591
|
+
return this._showIcon;
|
|
2578
2592
|
}
|
|
2579
2593
|
/**
|
|
2580
2594
|
* Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
|
|
@@ -2586,6 +2600,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2586
2600
|
get text() {
|
|
2587
2601
|
return this._text;
|
|
2588
2602
|
}
|
|
2603
|
+
/**
|
|
2604
|
+
* @hidden
|
|
2605
|
+
*/
|
|
2606
|
+
get size() {
|
|
2607
|
+
return this.host.size;
|
|
2608
|
+
}
|
|
2589
2609
|
/**
|
|
2590
2610
|
* Specifies custom inline CSS styles of the Button.
|
|
2591
2611
|
*/
|
|
@@ -2739,16 +2759,26 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2739
2759
|
_showText;
|
|
2740
2760
|
_showIcon;
|
|
2741
2761
|
_text;
|
|
2762
|
+
propertyChangeSub;
|
|
2742
2763
|
constructor(element, zone, host) {
|
|
2743
2764
|
super();
|
|
2744
2765
|
this.element = element;
|
|
2745
2766
|
this.zone = zone;
|
|
2746
2767
|
this.host = host;
|
|
2747
2768
|
this.isBuiltInTool = true;
|
|
2769
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
2770
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
2771
|
+
this[change.property] = change.value;
|
|
2772
|
+
}
|
|
2773
|
+
});
|
|
2748
2774
|
}
|
|
2749
2775
|
ngOnInit() {
|
|
2750
2776
|
this.setTextDisplayMode();
|
|
2751
2777
|
}
|
|
2778
|
+
ngOnDestroy() {
|
|
2779
|
+
this.propertyChangeSub.unsubscribe();
|
|
2780
|
+
this.propertyChangeSub = null;
|
|
2781
|
+
}
|
|
2752
2782
|
/**
|
|
2753
2783
|
* @hidden
|
|
2754
2784
|
*/
|
|
@@ -2817,6 +2847,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2817
2847
|
[tabindex]="tabIndex"
|
|
2818
2848
|
type="button"
|
|
2819
2849
|
kendoButton
|
|
2850
|
+
[size]="size"
|
|
2820
2851
|
[ngStyle]="style"
|
|
2821
2852
|
[ngClass]="className"
|
|
2822
2853
|
[attr.title]="title"
|
|
@@ -2870,6 +2901,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2870
2901
|
[tabindex]="tabIndex"
|
|
2871
2902
|
type="button"
|
|
2872
2903
|
kendoButton
|
|
2904
|
+
[size]="size"
|
|
2873
2905
|
[ngStyle]="style"
|
|
2874
2906
|
[ngClass]="className"
|
|
2875
2907
|
[attr.title]="title"
|
|
@@ -2907,6 +2939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2907
2939
|
[tabindex]="tabIndex"
|
|
2908
2940
|
type="button"
|
|
2909
2941
|
kendoButton
|
|
2942
|
+
[size]="size"
|
|
2910
2943
|
[ngStyle]="style"
|
|
2911
2944
|
[ngClass]="className"
|
|
2912
2945
|
[attr.title]="title"
|
|
@@ -2960,6 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2960
2993
|
[tabindex]="tabIndex"
|
|
2961
2994
|
type="button"
|
|
2962
2995
|
kendoButton
|
|
2996
|
+
[size]="size"
|
|
2963
2997
|
[ngStyle]="style"
|
|
2964
2998
|
[ngClass]="className"
|
|
2965
2999
|
[attr.title]="title"
|
|
@@ -3040,6 +3074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3040
3074
|
*/
|
|
3041
3075
|
class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
3042
3076
|
localization;
|
|
3077
|
+
host;
|
|
3043
3078
|
/**
|
|
3044
3079
|
* By default, the ButtonGroup is enabled. To disable the whole group of buttons, set its `disabled`
|
|
3045
3080
|
* attribute to `true`. To disable a specific button, set the `disabled` attribute of the button to
|
|
@@ -3096,9 +3131,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
3096
3131
|
focusedIndex = -1;
|
|
3097
3132
|
getNextKey;
|
|
3098
3133
|
getPrevKey;
|
|
3099
|
-
constructor(localization) {
|
|
3134
|
+
constructor(localization, host) {
|
|
3100
3135
|
super();
|
|
3101
3136
|
this.localization = localization;
|
|
3137
|
+
this.host = host;
|
|
3102
3138
|
this.getNextKey = getNextKey(this.localization.rtl);
|
|
3103
3139
|
this.getPrevKey = getPrevKey(this.localization.rtl);
|
|
3104
3140
|
this.isBuiltInTool = true;
|
|
@@ -3193,13 +3229,19 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
3193
3229
|
return button.overflowOptions.svgIcon;
|
|
3194
3230
|
}
|
|
3195
3231
|
}
|
|
3232
|
+
/**
|
|
3233
|
+
* @hidden
|
|
3234
|
+
*/
|
|
3235
|
+
get size() {
|
|
3236
|
+
return this.host.size;
|
|
3237
|
+
}
|
|
3196
3238
|
focusButton(index, ev) {
|
|
3197
3239
|
// Guard against focusing twice on mousedown.
|
|
3198
3240
|
if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
|
|
3199
3241
|
this.buttonElements[index]?.focus();
|
|
3200
3242
|
}
|
|
3201
3243
|
}
|
|
3202
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3244
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
3203
3245
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
3204
3246
|
<ng-template #toolbarTemplate>
|
|
3205
3247
|
<kendo-buttongroup
|
|
@@ -3220,6 +3262,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
3220
3262
|
[ngClass]="button.className"
|
|
3221
3263
|
[attr.title]="button.title"
|
|
3222
3264
|
[disabled]="button.disabled"
|
|
3265
|
+
[size]="size"
|
|
3223
3266
|
[togglable]="button.togglable"
|
|
3224
3267
|
[selected]="button.selected"
|
|
3225
3268
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -3281,6 +3324,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
3281
3324
|
[ngClass]="button.className"
|
|
3282
3325
|
[attr.title]="button.title"
|
|
3283
3326
|
[disabled]="button.disabled"
|
|
3327
|
+
[size]="size"
|
|
3284
3328
|
[togglable]="button.togglable"
|
|
3285
3329
|
[selected]="button.selected"
|
|
3286
3330
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -3326,6 +3370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3326
3370
|
[ngClass]="button.className"
|
|
3327
3371
|
[attr.title]="button.title"
|
|
3328
3372
|
[disabled]="button.disabled"
|
|
3373
|
+
[size]="size"
|
|
3329
3374
|
[togglable]="button.togglable"
|
|
3330
3375
|
[selected]="button.selected"
|
|
3331
3376
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -3387,6 +3432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3387
3432
|
[ngClass]="button.className"
|
|
3388
3433
|
[attr.title]="button.title"
|
|
3389
3434
|
[disabled]="button.disabled"
|
|
3435
|
+
[size]="size"
|
|
3390
3436
|
[togglable]="button.togglable"
|
|
3391
3437
|
[selected]="button.selected"
|
|
3392
3438
|
[attr.aria-pressed]="button.selected ? true : false"
|
|
@@ -3408,7 +3454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3408
3454
|
standalone: true,
|
|
3409
3455
|
imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
|
|
3410
3456
|
}]
|
|
3411
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
|
|
3457
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ToolBarComponent }]; }, propDecorators: { disabled: [{
|
|
3412
3458
|
type: Input
|
|
3413
3459
|
}], fillMode: [{
|
|
3414
3460
|
type: Input
|
|
@@ -3458,7 +3504,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3458
3504
|
this.setTextDisplayMode();
|
|
3459
3505
|
}
|
|
3460
3506
|
get showText() {
|
|
3461
|
-
return this._showText
|
|
3507
|
+
return this._showText;
|
|
3462
3508
|
}
|
|
3463
3509
|
/**
|
|
3464
3510
|
* Specifies the button icon visibility.
|
|
@@ -3467,7 +3513,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3467
3513
|
this._showIcon = value;
|
|
3468
3514
|
}
|
|
3469
3515
|
get showIcon() {
|
|
3470
|
-
return this._showIcon
|
|
3516
|
+
return this._showIcon;
|
|
3471
3517
|
}
|
|
3472
3518
|
/**
|
|
3473
3519
|
* Sets the text of the DropDownButton
|
|
@@ -3646,6 +3692,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3646
3692
|
_showText;
|
|
3647
3693
|
_showIcon;
|
|
3648
3694
|
_text;
|
|
3695
|
+
propertyChangeSub;
|
|
3649
3696
|
getNextKey;
|
|
3650
3697
|
getPrevKey;
|
|
3651
3698
|
constructor(zone, renderer, host) {
|
|
@@ -3656,10 +3703,21 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3656
3703
|
this.getNextKey = getNextKey();
|
|
3657
3704
|
this.getPrevKey = getPrevKey();
|
|
3658
3705
|
this.isBuiltInTool = true;
|
|
3706
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
3707
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
3708
|
+
this[change.property] = change.value;
|
|
3709
|
+
}
|
|
3710
|
+
});
|
|
3659
3711
|
}
|
|
3660
3712
|
ngOnInit() {
|
|
3661
3713
|
this.setTextDisplayMode();
|
|
3662
3714
|
}
|
|
3715
|
+
ngOnDestroy() {
|
|
3716
|
+
if (this.propertyChangeSub) {
|
|
3717
|
+
this.propertyChangeSub.unsubscribe();
|
|
3718
|
+
this.propertyChangeSub = null;
|
|
3719
|
+
}
|
|
3720
|
+
}
|
|
3663
3721
|
ngAfterViewInit() {
|
|
3664
3722
|
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
3665
3723
|
const dropdownButton = this[`${this.location}DropDownButton`];
|
|
@@ -3676,6 +3734,12 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3676
3734
|
.toArray()
|
|
3677
3735
|
.findIndex(b => b.nativeElement.contains(ev.target));
|
|
3678
3736
|
}
|
|
3737
|
+
/**
|
|
3738
|
+
* @hidden
|
|
3739
|
+
*/
|
|
3740
|
+
get size() {
|
|
3741
|
+
return this.host.size;
|
|
3742
|
+
}
|
|
3679
3743
|
/**
|
|
3680
3744
|
* @hidden
|
|
3681
3745
|
*/
|
|
@@ -3750,6 +3814,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3750
3814
|
[arrowIcon]="arrowIcon"
|
|
3751
3815
|
[buttonClass]="buttonClass"
|
|
3752
3816
|
[disabled]="disabled"
|
|
3817
|
+
[size]="size"
|
|
3753
3818
|
[tabIndex]="-1"
|
|
3754
3819
|
[data]="data"
|
|
3755
3820
|
[buttonAttributes]="{'title': title}"
|
|
@@ -3815,6 +3880,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
3815
3880
|
[arrowIcon]="arrowIcon"
|
|
3816
3881
|
[buttonClass]="buttonClass"
|
|
3817
3882
|
[disabled]="disabled"
|
|
3883
|
+
[size]="size"
|
|
3818
3884
|
[tabIndex]="-1"
|
|
3819
3885
|
[data]="data"
|
|
3820
3886
|
[buttonAttributes]="{'title': title}"
|
|
@@ -3847,6 +3913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3847
3913
|
[arrowIcon]="arrowIcon"
|
|
3848
3914
|
[buttonClass]="buttonClass"
|
|
3849
3915
|
[disabled]="disabled"
|
|
3916
|
+
[size]="size"
|
|
3850
3917
|
[tabIndex]="-1"
|
|
3851
3918
|
[data]="data"
|
|
3852
3919
|
[buttonAttributes]="{'title': title}"
|
|
@@ -3912,6 +3979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3912
3979
|
[arrowIcon]="arrowIcon"
|
|
3913
3980
|
[buttonClass]="buttonClass"
|
|
3914
3981
|
[disabled]="disabled"
|
|
3982
|
+
[size]="size"
|
|
3915
3983
|
[tabIndex]="-1"
|
|
3916
3984
|
[data]="data"
|
|
3917
3985
|
[buttonAttributes]="{'title': title}"
|
|
@@ -3996,31 +4064,21 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
3996
4064
|
* Specifies the button text visibility.
|
|
3997
4065
|
*/
|
|
3998
4066
|
set showText(value) {
|
|
3999
|
-
|
|
4000
|
-
this._showText = this.host.normalizedShowText;
|
|
4001
|
-
}
|
|
4002
|
-
else {
|
|
4003
|
-
this._showText = value;
|
|
4004
|
-
}
|
|
4067
|
+
this._showText = value;
|
|
4005
4068
|
this.setTextDisplayMode();
|
|
4006
4069
|
}
|
|
4007
4070
|
get showText() {
|
|
4008
|
-
return this._showText
|
|
4071
|
+
return this._showText;
|
|
4009
4072
|
}
|
|
4010
4073
|
/**
|
|
4011
4074
|
* Specifies the button icon visibility.
|
|
4012
4075
|
*/
|
|
4013
4076
|
set showIcon(value) {
|
|
4014
|
-
|
|
4015
|
-
this._showIcon = this.host.normalizedShowIcon;
|
|
4016
|
-
}
|
|
4017
|
-
else {
|
|
4018
|
-
this._showIcon = value;
|
|
4019
|
-
}
|
|
4077
|
+
this._showIcon = value;
|
|
4020
4078
|
this.setTextDisplayMode();
|
|
4021
4079
|
}
|
|
4022
4080
|
get showIcon() {
|
|
4023
|
-
return this._showIcon
|
|
4081
|
+
return this._showIcon;
|
|
4024
4082
|
}
|
|
4025
4083
|
/**
|
|
4026
4084
|
* Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
|
|
@@ -4202,6 +4260,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4202
4260
|
ngOnInit() {
|
|
4203
4261
|
this.setTextDisplayMode();
|
|
4204
4262
|
}
|
|
4263
|
+
ngOnDestroy() {
|
|
4264
|
+
if (this.propertyChangeSub) {
|
|
4265
|
+
this.propertyChangeSub.unsubscribe();
|
|
4266
|
+
this.propertyChangeSub = null;
|
|
4267
|
+
}
|
|
4268
|
+
}
|
|
4205
4269
|
get overflowButtons() {
|
|
4206
4270
|
return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
|
|
4207
4271
|
}
|
|
@@ -4211,6 +4275,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4211
4275
|
_showText;
|
|
4212
4276
|
_showIcon;
|
|
4213
4277
|
_text;
|
|
4278
|
+
propertyChangeSub;
|
|
4214
4279
|
getNextKey;
|
|
4215
4280
|
getPrevKey;
|
|
4216
4281
|
toolbarSplitButton;
|
|
@@ -4223,6 +4288,11 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4223
4288
|
this.getNextKey = getNextKey();
|
|
4224
4289
|
this.getPrevKey = getPrevKey();
|
|
4225
4290
|
this.isBuiltInTool = true;
|
|
4291
|
+
this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
|
|
4292
|
+
if (change.property === 'showText' || change.property === 'showIcon') {
|
|
4293
|
+
this[change.property] = change.value;
|
|
4294
|
+
}
|
|
4295
|
+
});
|
|
4226
4296
|
}
|
|
4227
4297
|
/**
|
|
4228
4298
|
* @hidden
|
|
@@ -4243,6 +4313,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4243
4313
|
canFocus() {
|
|
4244
4314
|
return !this.disabled;
|
|
4245
4315
|
}
|
|
4316
|
+
/**
|
|
4317
|
+
* @hidden
|
|
4318
|
+
*/
|
|
4319
|
+
get size() {
|
|
4320
|
+
return this.host.size;
|
|
4321
|
+
}
|
|
4246
4322
|
/**
|
|
4247
4323
|
* @hidden
|
|
4248
4324
|
*/
|
|
@@ -4317,6 +4393,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4317
4393
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
4318
4394
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
4319
4395
|
[disabled]="disabled"
|
|
4396
|
+
[size]="size"
|
|
4320
4397
|
[tabIndex]="-1"
|
|
4321
4398
|
[textField]="textField"
|
|
4322
4399
|
[popupSettings]="popupSettings"
|
|
@@ -4386,6 +4463,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
|
|
|
4386
4463
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
4387
4464
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
4388
4465
|
[disabled]="disabled"
|
|
4466
|
+
[size]="size"
|
|
4389
4467
|
[tabIndex]="-1"
|
|
4390
4468
|
[textField]="textField"
|
|
4391
4469
|
[popupSettings]="popupSettings"
|
|
@@ -4421,6 +4499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4421
4499
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
4422
4500
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
4423
4501
|
[disabled]="disabled"
|
|
4502
|
+
[size]="size"
|
|
4424
4503
|
[tabIndex]="-1"
|
|
4425
4504
|
[textField]="textField"
|
|
4426
4505
|
[popupSettings]="popupSettings"
|
|
@@ -4490,6 +4569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4490
4569
|
[arrowButtonIcon]="arrowButtonIcon"
|
|
4491
4570
|
[arrowButtonSvgIcon]="arrowButtonSvgIcon"
|
|
4492
4571
|
[disabled]="disabled"
|
|
4572
|
+
[size]="size"
|
|
4493
4573
|
[tabIndex]="-1"
|
|
4494
4574
|
[textField]="textField"
|
|
4495
4575
|
[popupSettings]="popupSettings"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-toolbar",
|
|
3
|
-
"version": "19.0.0-develop.
|
|
3
|
+
"version": "19.0.0-develop.31",
|
|
4
4
|
"description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"package": {
|
|
46
46
|
"productName": "Kendo UI for Angular",
|
|
47
47
|
"productCode": "KENDOUIANGULAR",
|
|
48
|
-
"publishDate":
|
|
48
|
+
"publishDate": 1747923818,
|
|
49
49
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
50
50
|
}
|
|
51
51
|
},
|
|
@@ -55,17 +55,17 @@
|
|
|
55
55
|
"@angular/core": "16 - 19",
|
|
56
56
|
"@angular/platform-browser": "16 - 19",
|
|
57
57
|
"@progress/kendo-licensing": "^1.5.0",
|
|
58
|
-
"@progress/kendo-angular-buttons": "19.0.0-develop.
|
|
59
|
-
"@progress/kendo-angular-common": "19.0.0-develop.
|
|
60
|
-
"@progress/kendo-angular-l10n": "19.0.0-develop.
|
|
61
|
-
"@progress/kendo-angular-icons": "19.0.0-develop.
|
|
62
|
-
"@progress/kendo-angular-indicators": "19.0.0-develop.
|
|
63
|
-
"@progress/kendo-angular-popup": "19.0.0-develop.
|
|
58
|
+
"@progress/kendo-angular-buttons": "19.0.0-develop.31",
|
|
59
|
+
"@progress/kendo-angular-common": "19.0.0-develop.31",
|
|
60
|
+
"@progress/kendo-angular-l10n": "19.0.0-develop.31",
|
|
61
|
+
"@progress/kendo-angular-icons": "19.0.0-develop.31",
|
|
62
|
+
"@progress/kendo-angular-indicators": "19.0.0-develop.31",
|
|
63
|
+
"@progress/kendo-angular-popup": "19.0.0-develop.31",
|
|
64
64
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"tslib": "^2.3.1",
|
|
68
|
-
"@progress/kendo-angular-schematics": "19.0.0-develop.
|
|
68
|
+
"@progress/kendo-angular-schematics": "19.0.0-develop.31"
|
|
69
69
|
},
|
|
70
70
|
"schematics": "./schematics/collection.json",
|
|
71
71
|
"module": "fesm2022/progress-kendo-angular-toolbar.mjs",
|
package/toolbar.component.d.ts
CHANGED
|
@@ -110,20 +110,12 @@ export declare class ToolBarComponent {
|
|
|
110
110
|
* Specifies the icons visibility for all tools in the ToolBar.
|
|
111
111
|
* This can be overridden by the `showIcon` property of each tool.
|
|
112
112
|
*/
|
|
113
|
-
showIcon: DisplayMode | boolean;
|
|
114
|
-
/**
|
|
115
|
-
* @hidden
|
|
116
|
-
*/
|
|
117
|
-
get normalizedShowIcon(): DisplayMode;
|
|
113
|
+
set showIcon(value: DisplayMode | boolean);
|
|
118
114
|
/**
|
|
119
115
|
* Specifies the text visibility for all tools in the ToolBar.
|
|
120
116
|
* This can be overridden by the `showText` property of each tool.
|
|
121
117
|
*/
|
|
122
|
-
showText: DisplayMode | boolean;
|
|
123
|
-
/**
|
|
124
|
-
* @hidden
|
|
125
|
-
*/
|
|
126
|
-
get normalizedShowText(): DisplayMode;
|
|
118
|
+
set showText(value: DisplayMode | boolean);
|
|
127
119
|
/**
|
|
128
120
|
* Fires when the overflow popup of the ToolBar is opened.
|
|
129
121
|
*/
|
|
@@ -157,6 +149,13 @@ export declare class ToolBarComponent {
|
|
|
157
149
|
* @hidden
|
|
158
150
|
*/
|
|
159
151
|
nextButtonIcon: SVGIcon;
|
|
152
|
+
/**
|
|
153
|
+
* @hidden
|
|
154
|
+
*/
|
|
155
|
+
propertyChange: EventEmitter<{
|
|
156
|
+
property: string;
|
|
157
|
+
value: any;
|
|
158
|
+
}>;
|
|
160
159
|
hostClass: boolean;
|
|
161
160
|
get scrollableClass(): boolean;
|
|
162
161
|
get sectionClass(): boolean;
|
|
@@ -171,6 +170,8 @@ export declare class ToolBarComponent {
|
|
|
171
170
|
private cachedGap;
|
|
172
171
|
private _size;
|
|
173
172
|
private _fillMode;
|
|
173
|
+
private _showText;
|
|
174
|
+
private _showIcon;
|
|
174
175
|
private overflowButtonClickedTime;
|
|
175
176
|
private showAutoButtons;
|
|
176
177
|
private scrollButtonStateChangeSub;
|
|
@@ -278,6 +279,7 @@ export declare class ToolBarComponent {
|
|
|
278
279
|
private setScrollableOverlayClasses;
|
|
279
280
|
private handleScrollModeUpdates;
|
|
280
281
|
private removeSubscriptions;
|
|
282
|
+
private normalizeDisplayValue;
|
|
281
283
|
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
|
|
282
284
|
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": { "alias": "overflow"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
|
|
283
285
|
}
|
|
@@ -32,6 +32,10 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
32
32
|
*/
|
|
33
33
|
set text(text: string);
|
|
34
34
|
get text(): string;
|
|
35
|
+
/**
|
|
36
|
+
* @hidden
|
|
37
|
+
*/
|
|
38
|
+
get size(): any;
|
|
35
39
|
/**
|
|
36
40
|
* Specifies custom inline CSS styles of the Button.
|
|
37
41
|
*/
|
|
@@ -149,8 +153,10 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
149
153
|
private _showText;
|
|
150
154
|
private _showIcon;
|
|
151
155
|
private _text;
|
|
156
|
+
private propertyChangeSub;
|
|
152
157
|
constructor(element: ElementRef, zone: NgZone, host: ToolBarComponent);
|
|
153
158
|
ngOnInit(): void;
|
|
159
|
+
ngOnDestroy(): void;
|
|
154
160
|
/**
|
|
155
161
|
* @hidden
|
|
156
162
|
*/
|
|
@@ -8,12 +8,14 @@ import { ToolBarToolComponent } from './toolbar-tool.component';
|
|
|
8
8
|
import { ToolBarButtonComponent } from './toolbar-button.component';
|
|
9
9
|
import { ButtonGroupSelection } from '../group-selection-settings';
|
|
10
10
|
import { PreventableEvent } from '@progress/kendo-angular-buttons';
|
|
11
|
+
import { ToolBarComponent } from '../toolbar.component';
|
|
11
12
|
import * as i0 from "@angular/core";
|
|
12
13
|
/**
|
|
13
14
|
* Represents the Kendo UI Toolbar ButtonGroup for Angular.
|
|
14
15
|
*/
|
|
15
16
|
export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
16
17
|
private localization;
|
|
18
|
+
private host;
|
|
17
19
|
/**
|
|
18
20
|
* By default, the ButtonGroup is enabled. To disable the whole group of buttons, set its `disabled`
|
|
19
21
|
* attribute to `true`. To disable a specific button, set the `disabled` attribute of the button to
|
|
@@ -52,7 +54,7 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
52
54
|
private focusedIndex;
|
|
53
55
|
private getNextKey;
|
|
54
56
|
private getPrevKey;
|
|
55
|
-
constructor(localization: LocalizationService);
|
|
57
|
+
constructor(localization: LocalizationService, host: ToolBarComponent);
|
|
56
58
|
/**
|
|
57
59
|
* @hidden
|
|
58
60
|
*/
|
|
@@ -93,6 +95,10 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
93
95
|
* @hidden
|
|
94
96
|
*/
|
|
95
97
|
getIconClasses(button: any): any;
|
|
98
|
+
/**
|
|
99
|
+
* @hidden
|
|
100
|
+
*/
|
|
101
|
+
get size(): any;
|
|
96
102
|
private focusButton;
|
|
97
103
|
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarButtonGroupComponent, never>;
|
|
98
104
|
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonGroupComponent, "kendo-toolbar-buttongroup", ["kendoToolBarButtonGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "width": { "alias": "width"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, {}, ["buttonComponents"], never, true, never>;
|
|
@@ -160,15 +160,21 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
|
|
|
160
160
|
private _showText;
|
|
161
161
|
private _showIcon;
|
|
162
162
|
private _text;
|
|
163
|
+
private propertyChangeSub;
|
|
163
164
|
private getNextKey;
|
|
164
165
|
private getPrevKey;
|
|
165
166
|
constructor(zone: NgZone, renderer: Renderer2, host: ToolBarComponent);
|
|
166
167
|
ngOnInit(): void;
|
|
168
|
+
ngOnDestroy(): void;
|
|
167
169
|
ngAfterViewInit(): void;
|
|
168
170
|
/**
|
|
169
171
|
* @hidden
|
|
170
172
|
*/
|
|
171
173
|
onButtonListClick(ev: MouseEvent): void;
|
|
174
|
+
/**
|
|
175
|
+
* @hidden
|
|
176
|
+
*/
|
|
177
|
+
get size(): any;
|
|
172
178
|
/**
|
|
173
179
|
* @hidden
|
|
174
180
|
*/
|
|
@@ -150,6 +150,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
|
|
|
150
150
|
toolbarOptions: ToolOptions;
|
|
151
151
|
overflowOptions: ToolOptions;
|
|
152
152
|
ngOnInit(): void;
|
|
153
|
+
ngOnDestroy(): void;
|
|
153
154
|
private get overflowButtons();
|
|
154
155
|
private _data;
|
|
155
156
|
private _popupSettings;
|
|
@@ -157,6 +158,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
|
|
|
157
158
|
private _showText;
|
|
158
159
|
private _showIcon;
|
|
159
160
|
private _text;
|
|
161
|
+
private propertyChangeSub;
|
|
160
162
|
private getNextKey;
|
|
161
163
|
private getPrevKey;
|
|
162
164
|
private toolbarSplitButton;
|
|
@@ -176,6 +178,10 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
|
|
|
176
178
|
* @hidden
|
|
177
179
|
*/
|
|
178
180
|
canFocus(): boolean;
|
|
181
|
+
/**
|
|
182
|
+
* @hidden
|
|
183
|
+
*/
|
|
184
|
+
get size(): any;
|
|
179
185
|
/**
|
|
180
186
|
* @hidden
|
|
181
187
|
*/
|