@progress/kendo-angular-toolbar 19.0.0-develop.31 → 19.0.0-develop.32
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.
|
@@ -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: 1748002104,
|
|
14
|
+
version: '19.0.0-develop.32',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -42,14 +42,8 @@ export class ToolBarRendererComponent {
|
|
|
42
42
|
this.viewContainer = viewContainer;
|
|
43
43
|
}
|
|
44
44
|
ngOnInit() {
|
|
45
|
-
const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
|
|
46
|
-
if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
45
|
this.tool.location = this.location;
|
|
50
|
-
this.internalComponentRef = viewContainerRootNodes[0];
|
|
51
46
|
this.element = this.tool.element;
|
|
52
|
-
this.internalComponentRef.addEventListener('click', this.onClick);
|
|
53
47
|
this.rendererService.element = this.element;
|
|
54
48
|
this.rendererService.renderer = this;
|
|
55
49
|
this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
|
|
@@ -57,6 +51,18 @@ export class ToolBarRendererComponent {
|
|
|
57
51
|
this.refresh();
|
|
58
52
|
}
|
|
59
53
|
});
|
|
54
|
+
}
|
|
55
|
+
ngOnDestroy() {
|
|
56
|
+
this.refreshSubscription?.unsubscribe();
|
|
57
|
+
this.internalComponentRef?.removeEventListener('click', this.onClick);
|
|
58
|
+
}
|
|
59
|
+
ngAfterViewInit() {
|
|
60
|
+
const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
|
|
61
|
+
if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
this.internalComponentRef = viewContainerRootNodes[0];
|
|
65
|
+
this.internalComponentRef.addEventListener('click', this.onClick);
|
|
60
66
|
if (this.resizable) {
|
|
61
67
|
if (this.location === 'toolbar') {
|
|
62
68
|
this.template = this.tool.toolbarTemplate;
|
|
@@ -93,12 +99,6 @@ export class ToolBarRendererComponent {
|
|
|
93
99
|
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
|
|
94
100
|
}
|
|
95
101
|
}
|
|
96
|
-
}
|
|
97
|
-
ngOnDestroy() {
|
|
98
|
-
this.refreshSubscription && this.refreshSubscription.unsubscribe();
|
|
99
|
-
this.internalComponentRef && this.internalComponentRef.removeEventListener('click', this.onClick);
|
|
100
|
-
}
|
|
101
|
-
ngAfterViewInit() {
|
|
102
102
|
if (this.resizable) {
|
|
103
103
|
this.refresh();
|
|
104
104
|
}
|
|
@@ -111,6 +111,9 @@ export class ToolBarRendererComponent {
|
|
|
111
111
|
if (this.isSpacer) {
|
|
112
112
|
return MIN_SPACER_WIDTH;
|
|
113
113
|
}
|
|
114
|
+
if (!this.internalComponentRef) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
114
117
|
return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
|
|
115
118
|
}
|
|
116
119
|
isDisplayed() {
|
|
@@ -8,7 +8,7 @@ import { getValueForLocation } from '../util';
|
|
|
8
8
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
9
9
|
import { take } from 'rxjs/operators';
|
|
10
10
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
11
|
-
import { BadgeComponent } from '@progress/kendo-angular-indicators';
|
|
11
|
+
import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
|
|
12
12
|
import { NgStyle, NgClass, NgIf } from '@angular/common';
|
|
13
13
|
import { ToolBarComponent } from '../toolbar.component';
|
|
14
14
|
import * as i0 from "@angular/core";
|
|
@@ -200,6 +200,10 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
200
200
|
svgIcon: null,
|
|
201
201
|
imageUrl: ''
|
|
202
202
|
};
|
|
203
|
+
/**
|
|
204
|
+
* @hidden
|
|
205
|
+
*/
|
|
206
|
+
hasBadgeContainer = false;
|
|
203
207
|
/**
|
|
204
208
|
* @hidden
|
|
205
209
|
*/
|
|
@@ -291,7 +295,38 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
291
295
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
292
296
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
|
|
293
297
|
<ng-template #toolbarTemplate>
|
|
294
|
-
<
|
|
298
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
299
|
+
<button
|
|
300
|
+
#toolbarButton
|
|
301
|
+
[class.k-toolbar-button]="!toggleable"
|
|
302
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
303
|
+
[tabindex]="tabIndex"
|
|
304
|
+
type="button"
|
|
305
|
+
kendoButton
|
|
306
|
+
[size]="size"
|
|
307
|
+
[ngStyle]="style"
|
|
308
|
+
[ngClass]="className"
|
|
309
|
+
[attr.title]="title"
|
|
310
|
+
[disabled]="disabled"
|
|
311
|
+
[toggleable]="toggleable"
|
|
312
|
+
[fillMode]="fillMode"
|
|
313
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
314
|
+
[selected]="selected"
|
|
315
|
+
[icon]="toolbarOptions.icon"
|
|
316
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
317
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
318
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
319
|
+
(click)="click.emit($event)"
|
|
320
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
321
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
322
|
+
(blur)="onBlur()"
|
|
323
|
+
>
|
|
324
|
+
{{ toolbarOptions.text }}
|
|
325
|
+
</button>
|
|
326
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
327
|
+
</kendo-badge-container>
|
|
328
|
+
|
|
329
|
+
<button *ngIf="!hasBadgeContainer"
|
|
295
330
|
#toolbarButton
|
|
296
331
|
[class.k-toolbar-button]="!toggleable"
|
|
297
332
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -317,7 +352,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
317
352
|
(blur)="onBlur()"
|
|
318
353
|
>
|
|
319
354
|
{{ toolbarOptions.text }}
|
|
320
|
-
<kendo-badge *ngIf="showBadge"></kendo-badge>
|
|
321
355
|
</button>
|
|
322
356
|
</ng-template>
|
|
323
357
|
<ng-template #popupTemplate>
|
|
@@ -345,7 +379,38 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
345
379
|
</div>
|
|
346
380
|
</ng-template>
|
|
347
381
|
<ng-template #sectionTemplate>
|
|
382
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
383
|
+
<button
|
|
384
|
+
#sectionButton
|
|
385
|
+
[class.k-toolbar-button]="!toggleable"
|
|
386
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
387
|
+
[tabindex]="tabIndex"
|
|
388
|
+
type="button"
|
|
389
|
+
kendoButton
|
|
390
|
+
[size]="size"
|
|
391
|
+
[ngStyle]="style"
|
|
392
|
+
[ngClass]="className"
|
|
393
|
+
[attr.title]="title"
|
|
394
|
+
[disabled]="disabled"
|
|
395
|
+
[toggleable]="toggleable"
|
|
396
|
+
[fillMode]="fillMode"
|
|
397
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
398
|
+
[selected]="selected"
|
|
399
|
+
[icon]="toolbarOptions.icon"
|
|
400
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
401
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
402
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
403
|
+
(click)="click.emit($event)"
|
|
404
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
405
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
406
|
+
(blur)="onBlur()"
|
|
407
|
+
>
|
|
408
|
+
{{ toolbarOptions.text }}
|
|
409
|
+
</button>
|
|
410
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
411
|
+
</kendo-badge-container>
|
|
348
412
|
<button
|
|
413
|
+
*ngIf="!hasBadgeContainer"
|
|
349
414
|
#sectionButton
|
|
350
415
|
[class.k-toolbar-button]="!toggleable"
|
|
351
416
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -373,7 +438,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
373
438
|
{{ toolbarOptions.text }}
|
|
374
439
|
</button>
|
|
375
440
|
</ng-template>
|
|
376
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }] });
|
|
441
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
|
|
377
442
|
}
|
|
378
443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
|
|
379
444
|
type: Component,
|
|
@@ -383,7 +448,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
383
448
|
selector: 'kendo-toolbar-button',
|
|
384
449
|
template: `
|
|
385
450
|
<ng-template #toolbarTemplate>
|
|
386
|
-
<
|
|
451
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
452
|
+
<button
|
|
453
|
+
#toolbarButton
|
|
454
|
+
[class.k-toolbar-button]="!toggleable"
|
|
455
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
456
|
+
[tabindex]="tabIndex"
|
|
457
|
+
type="button"
|
|
458
|
+
kendoButton
|
|
459
|
+
[size]="size"
|
|
460
|
+
[ngStyle]="style"
|
|
461
|
+
[ngClass]="className"
|
|
462
|
+
[attr.title]="title"
|
|
463
|
+
[disabled]="disabled"
|
|
464
|
+
[toggleable]="toggleable"
|
|
465
|
+
[fillMode]="fillMode"
|
|
466
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
467
|
+
[selected]="selected"
|
|
468
|
+
[icon]="toolbarOptions.icon"
|
|
469
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
470
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
471
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
472
|
+
(click)="click.emit($event)"
|
|
473
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
474
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
475
|
+
(blur)="onBlur()"
|
|
476
|
+
>
|
|
477
|
+
{{ toolbarOptions.text }}
|
|
478
|
+
</button>
|
|
479
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
480
|
+
</kendo-badge-container>
|
|
481
|
+
|
|
482
|
+
<button *ngIf="!hasBadgeContainer"
|
|
387
483
|
#toolbarButton
|
|
388
484
|
[class.k-toolbar-button]="!toggleable"
|
|
389
485
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -409,7 +505,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
409
505
|
(blur)="onBlur()"
|
|
410
506
|
>
|
|
411
507
|
{{ toolbarOptions.text }}
|
|
412
|
-
<kendo-badge *ngIf="showBadge"></kendo-badge>
|
|
413
508
|
</button>
|
|
414
509
|
</ng-template>
|
|
415
510
|
<ng-template #popupTemplate>
|
|
@@ -437,7 +532,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
437
532
|
</div>
|
|
438
533
|
</ng-template>
|
|
439
534
|
<ng-template #sectionTemplate>
|
|
535
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
536
|
+
<button
|
|
537
|
+
#sectionButton
|
|
538
|
+
[class.k-toolbar-button]="!toggleable"
|
|
539
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
540
|
+
[tabindex]="tabIndex"
|
|
541
|
+
type="button"
|
|
542
|
+
kendoButton
|
|
543
|
+
[size]="size"
|
|
544
|
+
[ngStyle]="style"
|
|
545
|
+
[ngClass]="className"
|
|
546
|
+
[attr.title]="title"
|
|
547
|
+
[disabled]="disabled"
|
|
548
|
+
[toggleable]="toggleable"
|
|
549
|
+
[fillMode]="fillMode"
|
|
550
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
551
|
+
[selected]="selected"
|
|
552
|
+
[icon]="toolbarOptions.icon"
|
|
553
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
554
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
555
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
556
|
+
(click)="click.emit($event)"
|
|
557
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
558
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
559
|
+
(blur)="onBlur()"
|
|
560
|
+
>
|
|
561
|
+
{{ toolbarOptions.text }}
|
|
562
|
+
</button>
|
|
563
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
564
|
+
</kendo-badge-container>
|
|
440
565
|
<button
|
|
566
|
+
*ngIf="!hasBadgeContainer"
|
|
441
567
|
#sectionButton
|
|
442
568
|
[class.k-toolbar-button]="!toggleable"
|
|
443
569
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -467,7 +593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
467
593
|
</ng-template>
|
|
468
594
|
`,
|
|
469
595
|
standalone: true,
|
|
470
|
-
imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent],
|
|
596
|
+
imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
|
|
471
597
|
}]
|
|
472
598
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ToolBarComponent }]; }, propDecorators: { showText: [{
|
|
473
599
|
type: Input
|
|
@@ -16,7 +16,7 @@ import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIc
|
|
|
16
16
|
import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
|
|
17
17
|
import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
|
|
18
18
|
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
19
|
-
import { BadgeComponent } from '@progress/kendo-angular-indicators';
|
|
19
|
+
import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* @hidden
|
|
@@ -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: 1748002104,
|
|
30
|
+
version: '19.0.0-develop.32',
|
|
31
31
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -634,14 +634,8 @@ class ToolBarRendererComponent {
|
|
|
634
634
|
this.viewContainer = viewContainer;
|
|
635
635
|
}
|
|
636
636
|
ngOnInit() {
|
|
637
|
-
const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
|
|
638
|
-
if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
|
|
639
|
-
return;
|
|
640
|
-
}
|
|
641
637
|
this.tool.location = this.location;
|
|
642
|
-
this.internalComponentRef = viewContainerRootNodes[0];
|
|
643
638
|
this.element = this.tool.element;
|
|
644
|
-
this.internalComponentRef.addEventListener('click', this.onClick);
|
|
645
639
|
this.rendererService.element = this.element;
|
|
646
640
|
this.rendererService.renderer = this;
|
|
647
641
|
this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
|
|
@@ -649,6 +643,18 @@ class ToolBarRendererComponent {
|
|
|
649
643
|
this.refresh();
|
|
650
644
|
}
|
|
651
645
|
});
|
|
646
|
+
}
|
|
647
|
+
ngOnDestroy() {
|
|
648
|
+
this.refreshSubscription?.unsubscribe();
|
|
649
|
+
this.internalComponentRef?.removeEventListener('click', this.onClick);
|
|
650
|
+
}
|
|
651
|
+
ngAfterViewInit() {
|
|
652
|
+
const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
|
|
653
|
+
if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
|
|
654
|
+
return;
|
|
655
|
+
}
|
|
656
|
+
this.internalComponentRef = viewContainerRootNodes[0];
|
|
657
|
+
this.internalComponentRef.addEventListener('click', this.onClick);
|
|
652
658
|
if (this.resizable) {
|
|
653
659
|
if (this.location === 'toolbar') {
|
|
654
660
|
this.template = this.tool.toolbarTemplate;
|
|
@@ -685,12 +691,6 @@ class ToolBarRendererComponent {
|
|
|
685
691
|
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
|
|
686
692
|
}
|
|
687
693
|
}
|
|
688
|
-
}
|
|
689
|
-
ngOnDestroy() {
|
|
690
|
-
this.refreshSubscription && this.refreshSubscription.unsubscribe();
|
|
691
|
-
this.internalComponentRef && this.internalComponentRef.removeEventListener('click', this.onClick);
|
|
692
|
-
}
|
|
693
|
-
ngAfterViewInit() {
|
|
694
694
|
if (this.resizable) {
|
|
695
695
|
this.refresh();
|
|
696
696
|
}
|
|
@@ -703,6 +703,9 @@ class ToolBarRendererComponent {
|
|
|
703
703
|
if (this.isSpacer) {
|
|
704
704
|
return MIN_SPACER_WIDTH;
|
|
705
705
|
}
|
|
706
|
+
if (!this.internalComponentRef) {
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
706
709
|
return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
|
|
707
710
|
}
|
|
708
711
|
isDisplayed() {
|
|
@@ -2749,6 +2752,10 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2749
2752
|
svgIcon: null,
|
|
2750
2753
|
imageUrl: ''
|
|
2751
2754
|
};
|
|
2755
|
+
/**
|
|
2756
|
+
* @hidden
|
|
2757
|
+
*/
|
|
2758
|
+
hasBadgeContainer = false;
|
|
2752
2759
|
/**
|
|
2753
2760
|
* @hidden
|
|
2754
2761
|
*/
|
|
@@ -2840,7 +2847,38 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2840
2847
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
2841
2848
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
|
|
2842
2849
|
<ng-template #toolbarTemplate>
|
|
2843
|
-
<
|
|
2850
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
2851
|
+
<button
|
|
2852
|
+
#toolbarButton
|
|
2853
|
+
[class.k-toolbar-button]="!toggleable"
|
|
2854
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
2855
|
+
[tabindex]="tabIndex"
|
|
2856
|
+
type="button"
|
|
2857
|
+
kendoButton
|
|
2858
|
+
[size]="size"
|
|
2859
|
+
[ngStyle]="style"
|
|
2860
|
+
[ngClass]="className"
|
|
2861
|
+
[attr.title]="title"
|
|
2862
|
+
[disabled]="disabled"
|
|
2863
|
+
[toggleable]="toggleable"
|
|
2864
|
+
[fillMode]="fillMode"
|
|
2865
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
2866
|
+
[selected]="selected"
|
|
2867
|
+
[icon]="toolbarOptions.icon"
|
|
2868
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
2869
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
2870
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
2871
|
+
(click)="click.emit($event)"
|
|
2872
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
2873
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
2874
|
+
(blur)="onBlur()"
|
|
2875
|
+
>
|
|
2876
|
+
{{ toolbarOptions.text }}
|
|
2877
|
+
</button>
|
|
2878
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
2879
|
+
</kendo-badge-container>
|
|
2880
|
+
|
|
2881
|
+
<button *ngIf="!hasBadgeContainer"
|
|
2844
2882
|
#toolbarButton
|
|
2845
2883
|
[class.k-toolbar-button]="!toggleable"
|
|
2846
2884
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -2866,7 +2904,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2866
2904
|
(blur)="onBlur()"
|
|
2867
2905
|
>
|
|
2868
2906
|
{{ toolbarOptions.text }}
|
|
2869
|
-
<kendo-badge *ngIf="showBadge"></kendo-badge>
|
|
2870
2907
|
</button>
|
|
2871
2908
|
</ng-template>
|
|
2872
2909
|
<ng-template #popupTemplate>
|
|
@@ -2894,7 +2931,38 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2894
2931
|
</div>
|
|
2895
2932
|
</ng-template>
|
|
2896
2933
|
<ng-template #sectionTemplate>
|
|
2934
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
2935
|
+
<button
|
|
2936
|
+
#sectionButton
|
|
2937
|
+
[class.k-toolbar-button]="!toggleable"
|
|
2938
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
2939
|
+
[tabindex]="tabIndex"
|
|
2940
|
+
type="button"
|
|
2941
|
+
kendoButton
|
|
2942
|
+
[size]="size"
|
|
2943
|
+
[ngStyle]="style"
|
|
2944
|
+
[ngClass]="className"
|
|
2945
|
+
[attr.title]="title"
|
|
2946
|
+
[disabled]="disabled"
|
|
2947
|
+
[toggleable]="toggleable"
|
|
2948
|
+
[fillMode]="fillMode"
|
|
2949
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
2950
|
+
[selected]="selected"
|
|
2951
|
+
[icon]="toolbarOptions.icon"
|
|
2952
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
2953
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
2954
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
2955
|
+
(click)="click.emit($event)"
|
|
2956
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
2957
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
2958
|
+
(blur)="onBlur()"
|
|
2959
|
+
>
|
|
2960
|
+
{{ toolbarOptions.text }}
|
|
2961
|
+
</button>
|
|
2962
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
2963
|
+
</kendo-badge-container>
|
|
2897
2964
|
<button
|
|
2965
|
+
*ngIf="!hasBadgeContainer"
|
|
2898
2966
|
#sectionButton
|
|
2899
2967
|
[class.k-toolbar-button]="!toggleable"
|
|
2900
2968
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -2922,7 +2990,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
2922
2990
|
{{ toolbarOptions.text }}
|
|
2923
2991
|
</button>
|
|
2924
2992
|
</ng-template>
|
|
2925
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }] });
|
|
2993
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
|
|
2926
2994
|
}
|
|
2927
2995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
|
|
2928
2996
|
type: Component,
|
|
@@ -2932,7 +3000,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2932
3000
|
selector: 'kendo-toolbar-button',
|
|
2933
3001
|
template: `
|
|
2934
3002
|
<ng-template #toolbarTemplate>
|
|
2935
|
-
<
|
|
3003
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
3004
|
+
<button
|
|
3005
|
+
#toolbarButton
|
|
3006
|
+
[class.k-toolbar-button]="!toggleable"
|
|
3007
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
3008
|
+
[tabindex]="tabIndex"
|
|
3009
|
+
type="button"
|
|
3010
|
+
kendoButton
|
|
3011
|
+
[size]="size"
|
|
3012
|
+
[ngStyle]="style"
|
|
3013
|
+
[ngClass]="className"
|
|
3014
|
+
[attr.title]="title"
|
|
3015
|
+
[disabled]="disabled"
|
|
3016
|
+
[toggleable]="toggleable"
|
|
3017
|
+
[fillMode]="fillMode"
|
|
3018
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
3019
|
+
[selected]="selected"
|
|
3020
|
+
[icon]="toolbarOptions.icon"
|
|
3021
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
3022
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
3023
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
3024
|
+
(click)="click.emit($event)"
|
|
3025
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
3026
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
3027
|
+
(blur)="onBlur()"
|
|
3028
|
+
>
|
|
3029
|
+
{{ toolbarOptions.text }}
|
|
3030
|
+
</button>
|
|
3031
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
3032
|
+
</kendo-badge-container>
|
|
3033
|
+
|
|
3034
|
+
<button *ngIf="!hasBadgeContainer"
|
|
2936
3035
|
#toolbarButton
|
|
2937
3036
|
[class.k-toolbar-button]="!toggleable"
|
|
2938
3037
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -2958,7 +3057,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2958
3057
|
(blur)="onBlur()"
|
|
2959
3058
|
>
|
|
2960
3059
|
{{ toolbarOptions.text }}
|
|
2961
|
-
<kendo-badge *ngIf="showBadge"></kendo-badge>
|
|
2962
3060
|
</button>
|
|
2963
3061
|
</ng-template>
|
|
2964
3062
|
<ng-template #popupTemplate>
|
|
@@ -2986,7 +3084,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2986
3084
|
</div>
|
|
2987
3085
|
</ng-template>
|
|
2988
3086
|
<ng-template #sectionTemplate>
|
|
3087
|
+
<kendo-badge-container *ngIf="hasBadgeContainer">
|
|
3088
|
+
<button
|
|
3089
|
+
#sectionButton
|
|
3090
|
+
[class.k-toolbar-button]="!toggleable"
|
|
3091
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
3092
|
+
[tabindex]="tabIndex"
|
|
3093
|
+
type="button"
|
|
3094
|
+
kendoButton
|
|
3095
|
+
[size]="size"
|
|
3096
|
+
[ngStyle]="style"
|
|
3097
|
+
[ngClass]="className"
|
|
3098
|
+
[attr.title]="title"
|
|
3099
|
+
[disabled]="disabled"
|
|
3100
|
+
[toggleable]="toggleable"
|
|
3101
|
+
[fillMode]="fillMode"
|
|
3102
|
+
[themeColor]="fillMode ? themeColor : null"
|
|
3103
|
+
[selected]="selected"
|
|
3104
|
+
[icon]="toolbarOptions.icon"
|
|
3105
|
+
[iconClass]="toolbarOptions.iconClass"
|
|
3106
|
+
[svgIcon]="toolbarOptions.svgIcon"
|
|
3107
|
+
[imageUrl]="toolbarOptions.imageUrl"
|
|
3108
|
+
(click)="click.emit($event)"
|
|
3109
|
+
(pointerdown)="pointerdown.emit($event)"
|
|
3110
|
+
(selectedChange)="selectedChangeHandler($event)"
|
|
3111
|
+
(blur)="onBlur()"
|
|
3112
|
+
>
|
|
3113
|
+
{{ toolbarOptions.text }}
|
|
3114
|
+
</button>
|
|
3115
|
+
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
|
|
3116
|
+
</kendo-badge-container>
|
|
2989
3117
|
<button
|
|
3118
|
+
*ngIf="!hasBadgeContainer"
|
|
2990
3119
|
#sectionButton
|
|
2991
3120
|
[class.k-toolbar-button]="!toggleable"
|
|
2992
3121
|
[class.k-toolbar-toggle-button]="toggleable"
|
|
@@ -3016,7 +3145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3016
3145
|
</ng-template>
|
|
3017
3146
|
`,
|
|
3018
3147
|
standalone: true,
|
|
3019
|
-
imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent],
|
|
3148
|
+
imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
|
|
3020
3149
|
}]
|
|
3021
3150
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToolBarComponent }]; }, propDecorators: { showText: [{
|
|
3022
3151
|
type: Input
|
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.32",
|
|
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": 1748002104,
|
|
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.32",
|
|
59
|
+
"@progress/kendo-angular-common": "19.0.0-develop.32",
|
|
60
|
+
"@progress/kendo-angular-l10n": "19.0.0-develop.32",
|
|
61
|
+
"@progress/kendo-angular-icons": "19.0.0-develop.32",
|
|
62
|
+
"@progress/kendo-angular-indicators": "19.0.0-develop.32",
|
|
63
|
+
"@progress/kendo-angular-popup": "19.0.0-develop.32",
|
|
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.32"
|
|
69
69
|
},
|
|
70
70
|
"schematics": "./schematics/collection.json",
|
|
71
71
|
"module": "fesm2022/progress-kendo-angular-toolbar.mjs",
|
|
@@ -143,6 +143,10 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
143
143
|
selectedChange: EventEmitter<any>;
|
|
144
144
|
toolbarOptions: ToolOptions;
|
|
145
145
|
overflowOptions: ToolOptions;
|
|
146
|
+
/**
|
|
147
|
+
* @hidden
|
|
148
|
+
*/
|
|
149
|
+
hasBadgeContainer: boolean;
|
|
146
150
|
/**
|
|
147
151
|
* @hidden
|
|
148
152
|
*/
|