@progress/kendo-angular-toolbar 17.0.0-develop.2 → 17.0.0-develop.20
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/README.md +28 -20
- package/common/fillmode.d.ts +8 -0
- package/esm2020/common/fillmode.mjs +5 -0
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/toolbar.component.mjs +24 -3
- package/esm2020/tools/toolbar-button.component.mjs +5 -9
- package/esm2020/tools/toolbar-buttongroup.component.mjs +12 -4
- package/esm2020/tools/toolbar-dropdownbutton.component.mjs +8 -6
- package/esm2020/util.mjs +5 -0
- package/fesm2015/progress-kendo-angular-toolbar.mjs +55 -23
- package/fesm2020/progress-kendo-angular-toolbar.mjs +55 -23
- package/index.d.ts +1 -0
- package/package.json +7 -7
- package/toolbar.component.d.ts +11 -1
- package/tools/toolbar-button.component.d.ts +0 -4
- package/tools/toolbar-buttongroup.component.d.ts +7 -1
- package/tools/toolbar-dropdownbutton.component.d.ts +4 -2
package/README.md
CHANGED
|
@@ -1,34 +1,42 @@
|
|
|
1
|
-
<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
|
|
1
|
+
<a href="https://www.telerik.com/kendo-angular-ui/components/toolbar" target="_blank">
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
5
|
## Kendo UI for Angular ToolBar Component
|
|
6
6
|
|
|
7
|
-
>
|
|
8
|
-
> *
|
|
9
|
-
> *
|
|
10
|
-
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar).
|
|
11
|
-
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
|
|
12
|
-
>
|
|
13
|
-
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar) and speed up your development process!
|
|
7
|
+
> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
|
|
8
|
+
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
|
|
9
|
+
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
|
|
14
10
|
|
|
15
|
-
The Kendo UI for Angular
|
|
11
|
+
The Kendo UI for Angular ToolBar provides a graphical container for holding button elements and allows users to effortlessly structure and access them. The ToolBar is built from the ground up and specifically for Angular, so that you get a high-performance control which integrates tightly with your application and with the rest of the Kendo UI for Angular components.
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
## Key Features
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
Among the many features which the Kendo UI for Angular ToolBar delivers are:
|
|
16
|
+
|
|
17
|
+
* Control Types—The ToolBar features built-in control types, which enable you to display specific tools and controls to the ToolBar container. [Read more about the built-in ToolBar control types...](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types)
|
|
18
|
+
* Custom Control Types—The ToolBar allows you to create custom tools that can be added to the ToolBar and Overflow Popup. [Read more about the custom control types of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types)
|
|
19
|
+
* Responsive ToolBar—The ToolBar provides options to hide the tools that do not fit its width in an overflow popup. [Read more about the responsive behavior of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/responsive-toolbar)
|
|
20
|
+
* Appearance—The ToolBar provides built-in options that allow you to customize its appearance. [Read more about customizing the appearance of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/appearance)
|
|
21
|
+
* Globalization—The Kendo UI for Angular ToolBar supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the ToolBar supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/globalization)
|
|
22
|
+
* Accessibility—The ToolBar is accessible for screen readers and supports WAI-ARIA attributes. [Read more about the accessibility of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/accessibility)
|
|
23
|
+
* Keyboard Navigation—The ToolBar supports a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/keyboard-navigation)
|
|
24
|
+
|
|
25
|
+
## Support Options
|
|
20
26
|
|
|
21
|
-
|
|
22
|
-
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
|
|
23
|
-
* [Blogs](http://www.telerik.com/blogs/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
|
|
24
|
-
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
|
|
27
|
+
For any issues you might encounter while working with the Kendo UI for Angular ToolBar, you have the following support channels available:
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
|
|
30
|
+
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
|
|
31
|
+
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
|
|
32
|
+
|
|
33
|
+
## Resources
|
|
27
34
|
|
|
28
|
-
* [
|
|
29
|
-
* [
|
|
30
|
-
* [
|
|
31
|
-
* [
|
|
35
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
36
|
+
* [Getting Started with the Kendo UI for Angular ToolBar](https://www.telerik.com/kendo-angular-ui/components/toolbar/installation/getting-started)
|
|
37
|
+
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
38
|
+
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
39
|
+
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
32
40
|
|
|
33
41
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
34
42
|
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Represents the possible fillMode options of the Toolbar.
|
|
7
|
+
*/
|
|
8
|
+
export declare type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
export {};
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-toolbar',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0-develop.
|
|
12
|
+
publishDate: 1729854957,
|
|
13
|
+
version: '17.0.0-develop.20',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -32,6 +32,7 @@ import * as i3 from "./refresh.service";
|
|
|
32
32
|
import * as i4 from "./navigation.service";
|
|
33
33
|
import * as i5 from "./tools/tools.service";
|
|
34
34
|
const DEFAULT_SIZE = 'medium';
|
|
35
|
+
const DEFAULT_FILL_MODE = 'solid';
|
|
35
36
|
const immediateResizeThreshold = 300;
|
|
36
37
|
const getInitialPopupSettings = (isRtl) => ({
|
|
37
38
|
animate: true,
|
|
@@ -73,6 +74,7 @@ export class ToolBarComponent {
|
|
|
73
74
|
this.hostClass = true;
|
|
74
75
|
this.cancelRenderedToolsSubscription$ = new Subject();
|
|
75
76
|
this._size = DEFAULT_SIZE;
|
|
77
|
+
this._fillMode = DEFAULT_FILL_MODE;
|
|
76
78
|
this.overflowButtonClickedTime = null;
|
|
77
79
|
this.subscriptions = new Subscription();
|
|
78
80
|
this.popupSubs = new Subscription();
|
|
@@ -114,6 +116,20 @@ export class ToolBarComponent {
|
|
|
114
116
|
get popupSettings() {
|
|
115
117
|
return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
|
|
116
118
|
}
|
|
119
|
+
/**
|
|
120
|
+
* The fillMode property specifies the background and border styles of the Toolbar
|
|
121
|
+
* ([see example](slug:appearance_toolbar#toc-fill-mode)).
|
|
122
|
+
*
|
|
123
|
+
* @default 'solid'
|
|
124
|
+
*/
|
|
125
|
+
set fillMode(fillMode) {
|
|
126
|
+
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
127
|
+
this.handleClasses(newFillMode, 'fillMode');
|
|
128
|
+
this._fillMode = newFillMode;
|
|
129
|
+
}
|
|
130
|
+
get fillMode() {
|
|
131
|
+
return this._fillMode;
|
|
132
|
+
}
|
|
117
133
|
/**
|
|
118
134
|
* Specifies the padding of all Toolbar elements.
|
|
119
135
|
*
|
|
@@ -266,7 +282,10 @@ export class ToolBarComponent {
|
|
|
266
282
|
});
|
|
267
283
|
}
|
|
268
284
|
this.navigationService.setRenderedTools(this.toolsService.renderedTools);
|
|
269
|
-
|
|
285
|
+
const stylingOptions = ['size', 'fillMode'];
|
|
286
|
+
stylingOptions.forEach(option => {
|
|
287
|
+
this.handleClasses(this[option], option);
|
|
288
|
+
});
|
|
270
289
|
}
|
|
271
290
|
ngOnInit() {
|
|
272
291
|
this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
|
|
@@ -580,7 +599,7 @@ export class ToolBarComponent {
|
|
|
580
599
|
}
|
|
581
600
|
}
|
|
582
601
|
ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
583
|
-
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
602
|
+
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
584
603
|
RefreshService,
|
|
585
604
|
NavigationService,
|
|
586
605
|
LocalizationService,
|
|
@@ -655,7 +674,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
655
674
|
</ng-template>
|
|
656
675
|
<ng-container #container></ng-container>
|
|
657
676
|
<kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
|
|
658
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
677
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
659
678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
|
|
660
679
|
type: Component,
|
|
661
680
|
args: [{
|
|
@@ -747,6 +766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
747
766
|
type: Input
|
|
748
767
|
}], popupSettings: [{
|
|
749
768
|
type: Input
|
|
769
|
+
}], fillMode: [{
|
|
770
|
+
type: Input
|
|
750
771
|
}], tabindex: [{
|
|
751
772
|
type: Input
|
|
752
773
|
}], size: [{
|
|
@@ -204,12 +204,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
204
204
|
this.getButton().tabIndex = -1;
|
|
205
205
|
return false;
|
|
206
206
|
}
|
|
207
|
-
/**
|
|
208
|
-
* @hidden
|
|
209
|
-
*/
|
|
210
|
-
get toolbarButtonClass() {
|
|
211
|
-
return this.toggleable ? 'k-toolbar-toggle-button' : 'k-toolbar-button';
|
|
212
|
-
}
|
|
213
207
|
/**
|
|
214
208
|
* @hidden
|
|
215
209
|
*/
|
|
@@ -242,7 +236,8 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
242
236
|
<ng-template #toolbarTemplate>
|
|
243
237
|
<button
|
|
244
238
|
#toolbarButton
|
|
245
|
-
[class]="
|
|
239
|
+
[class.k-toolbar-button]="!toggleable"
|
|
240
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
246
241
|
[tabindex]="tabIndex"
|
|
247
242
|
type="button"
|
|
248
243
|
kendoButton
|
|
@@ -290,7 +285,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
290
285
|
</span>
|
|
291
286
|
</div>
|
|
292
287
|
</ng-template>
|
|
293
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
288
|
+
`, 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"] }] });
|
|
294
289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
|
|
295
290
|
type: Component,
|
|
296
291
|
args: [{
|
|
@@ -301,7 +296,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
301
296
|
<ng-template #toolbarTemplate>
|
|
302
297
|
<button
|
|
303
298
|
#toolbarButton
|
|
304
|
-
[class]="
|
|
299
|
+
[class.k-toolbar-button]="!toggleable"
|
|
300
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
305
301
|
[tabindex]="tabIndex"
|
|
306
302
|
type="button"
|
|
307
303
|
kendoButton
|
|
@@ -19,6 +19,12 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
19
19
|
constructor(localization) {
|
|
20
20
|
super();
|
|
21
21
|
this.localization = localization;
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*
|
|
25
|
+
* Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
|
|
26
|
+
*/
|
|
27
|
+
this.fillMode = 'solid';
|
|
22
28
|
/**
|
|
23
29
|
* By default, the selection mode of the ButtonGroup is set to `multiple`.
|
|
24
30
|
*/
|
|
@@ -144,10 +150,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
144
150
|
}
|
|
145
151
|
}
|
|
146
152
|
ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
147
|
-
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
153
|
+
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
148
154
|
<ng-template #toolbarTemplate>
|
|
149
155
|
<kendo-buttongroup
|
|
150
|
-
class="k-toolbar-button-group"
|
|
156
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
151
157
|
#toolbarButtonGroup
|
|
152
158
|
[tabIndex]="-1"
|
|
153
159
|
[selection]="selection"
|
|
@@ -206,7 +212,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
206
212
|
</span>
|
|
207
213
|
</div>
|
|
208
214
|
</ng-template>
|
|
209
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
215
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", 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"] }] });
|
|
210
216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
|
|
211
217
|
type: Component,
|
|
212
218
|
args: [{
|
|
@@ -216,7 +222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
216
222
|
template: `
|
|
217
223
|
<ng-template #toolbarTemplate>
|
|
218
224
|
<kendo-buttongroup
|
|
219
|
-
class="k-toolbar-button-group"
|
|
225
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
220
226
|
#toolbarButtonGroup
|
|
221
227
|
[tabIndex]="-1"
|
|
222
228
|
[selection]="selection"
|
|
@@ -281,6 +287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
281
287
|
}]
|
|
282
288
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
|
|
283
289
|
type: Input
|
|
290
|
+
}], fillMode: [{
|
|
291
|
+
type: Input
|
|
284
292
|
}], selection: [{
|
|
285
293
|
type: Input
|
|
286
294
|
}], width: [{
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode } from '@angular/core';
|
|
5
|
+
import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2 } from '@angular/core';
|
|
6
6
|
import { ToolBarToolComponent } from './toolbar-tool.component';
|
|
7
7
|
import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
|
|
8
8
|
import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
|
|
@@ -13,8 +13,9 @@ import * as i0 from "@angular/core";
|
|
|
13
13
|
* Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
|
|
14
14
|
*/
|
|
15
15
|
export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
16
|
-
constructor() {
|
|
16
|
+
constructor(renderer) {
|
|
17
17
|
super();
|
|
18
|
+
this.renderer = renderer;
|
|
18
19
|
/**
|
|
19
20
|
* Allows showing the default arrow icon or providing alternative one instead.
|
|
20
21
|
* @default false
|
|
@@ -200,6 +201,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
200
201
|
ngOnInit() {
|
|
201
202
|
this.setTextDisplayMode();
|
|
202
203
|
}
|
|
204
|
+
ngAfterViewInit() {
|
|
205
|
+
this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
|
|
206
|
+
}
|
|
203
207
|
get overflowButtons() {
|
|
204
208
|
return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
|
|
205
209
|
}
|
|
@@ -276,12 +280,11 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
276
280
|
this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
|
|
277
281
|
}
|
|
278
282
|
}
|
|
279
|
-
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
+
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
280
284
|
ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
|
|
281
285
|
<ng-template #toolbarTemplate>
|
|
282
286
|
<kendo-dropdownbutton
|
|
283
287
|
#toolbarDropDownButton
|
|
284
|
-
class="k-toolbar-menu-button"
|
|
285
288
|
[icon]="toolbarOptions.icon"
|
|
286
289
|
[iconClass]="toolbarOptions.iconClass"
|
|
287
290
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -354,7 +357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
354
357
|
<ng-template #toolbarTemplate>
|
|
355
358
|
<kendo-dropdownbutton
|
|
356
359
|
#toolbarDropDownButton
|
|
357
|
-
class="k-toolbar-menu-button"
|
|
358
360
|
[icon]="toolbarOptions.icon"
|
|
359
361
|
[iconClass]="toolbarOptions.iconClass"
|
|
360
362
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -420,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
420
422
|
standalone: true,
|
|
421
423
|
imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
|
|
422
424
|
}]
|
|
423
|
-
}], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
|
|
425
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
|
|
424
426
|
type: Input
|
|
425
427
|
}], title: [{
|
|
426
428
|
type: Input
|
package/esm2020/util.mjs
CHANGED
|
@@ -205,6 +205,11 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
|
|
|
205
205
|
toRemove: `k-${componentType}-${SIZES[previousValue]}`,
|
|
206
206
|
toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
|
|
207
207
|
};
|
|
208
|
+
case 'fillMode':
|
|
209
|
+
return {
|
|
210
|
+
toRemove: `k-${componentType}-${previousValue}`,
|
|
211
|
+
toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
|
|
212
|
+
};
|
|
208
213
|
default:
|
|
209
214
|
break;
|
|
210
215
|
}
|
|
@@ -24,8 +24,8 @@ const packageMetadata = {
|
|
|
24
24
|
name: '@progress/kendo-angular-toolbar',
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '17.0.0-develop.
|
|
27
|
+
publishDate: 1729854957,
|
|
28
|
+
version: '17.0.0-develop.20',
|
|
29
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -248,6 +248,11 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
|
|
|
248
248
|
toRemove: `k-${componentType}-${SIZES[previousValue]}`,
|
|
249
249
|
toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
|
|
250
250
|
};
|
|
251
|
+
case 'fillMode':
|
|
252
|
+
return {
|
|
253
|
+
toRemove: `k-${componentType}-${previousValue}`,
|
|
254
|
+
toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
|
|
255
|
+
};
|
|
251
256
|
default:
|
|
252
257
|
break;
|
|
253
258
|
}
|
|
@@ -731,6 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
731
736
|
|
|
732
737
|
/* eslint-disable no-case-declarations */
|
|
733
738
|
const DEFAULT_SIZE = 'medium';
|
|
739
|
+
const DEFAULT_FILL_MODE = 'solid';
|
|
734
740
|
const immediateResizeThreshold = 300;
|
|
735
741
|
const getInitialPopupSettings = (isRtl) => ({
|
|
736
742
|
animate: true,
|
|
@@ -772,6 +778,7 @@ class ToolBarComponent {
|
|
|
772
778
|
this.hostClass = true;
|
|
773
779
|
this.cancelRenderedToolsSubscription$ = new Subject();
|
|
774
780
|
this._size = DEFAULT_SIZE;
|
|
781
|
+
this._fillMode = DEFAULT_FILL_MODE;
|
|
775
782
|
this.overflowButtonClickedTime = null;
|
|
776
783
|
this.subscriptions = new Subscription();
|
|
777
784
|
this.popupSubs = new Subscription();
|
|
@@ -813,6 +820,20 @@ class ToolBarComponent {
|
|
|
813
820
|
get popupSettings() {
|
|
814
821
|
return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
|
|
815
822
|
}
|
|
823
|
+
/**
|
|
824
|
+
* The fillMode property specifies the background and border styles of the Toolbar
|
|
825
|
+
* ([see example](slug:appearance_toolbar#toc-fill-mode)).
|
|
826
|
+
*
|
|
827
|
+
* @default 'solid'
|
|
828
|
+
*/
|
|
829
|
+
set fillMode(fillMode) {
|
|
830
|
+
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
831
|
+
this.handleClasses(newFillMode, 'fillMode');
|
|
832
|
+
this._fillMode = newFillMode;
|
|
833
|
+
}
|
|
834
|
+
get fillMode() {
|
|
835
|
+
return this._fillMode;
|
|
836
|
+
}
|
|
816
837
|
/**
|
|
817
838
|
* Specifies the padding of all Toolbar elements.
|
|
818
839
|
*
|
|
@@ -965,7 +986,10 @@ class ToolBarComponent {
|
|
|
965
986
|
});
|
|
966
987
|
}
|
|
967
988
|
this.navigationService.setRenderedTools(this.toolsService.renderedTools);
|
|
968
|
-
|
|
989
|
+
const stylingOptions = ['size', 'fillMode'];
|
|
990
|
+
stylingOptions.forEach(option => {
|
|
991
|
+
this.handleClasses(this[option], option);
|
|
992
|
+
});
|
|
969
993
|
}
|
|
970
994
|
ngOnInit() {
|
|
971
995
|
this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
|
|
@@ -1280,7 +1304,7 @@ class ToolBarComponent {
|
|
|
1280
1304
|
}
|
|
1281
1305
|
}
|
|
1282
1306
|
ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1283
|
-
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
1307
|
+
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
1284
1308
|
RefreshService,
|
|
1285
1309
|
NavigationService,
|
|
1286
1310
|
LocalizationService,
|
|
@@ -1355,7 +1379,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
1355
1379
|
</ng-template>
|
|
1356
1380
|
<ng-container #container></ng-container>
|
|
1357
1381
|
<kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
|
|
1358
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
1382
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
1359
1383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
|
|
1360
1384
|
type: Component,
|
|
1361
1385
|
args: [{
|
|
@@ -1447,6 +1471,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1447
1471
|
type: Input
|
|
1448
1472
|
}], popupSettings: [{
|
|
1449
1473
|
type: Input
|
|
1474
|
+
}], fillMode: [{
|
|
1475
|
+
type: Input
|
|
1450
1476
|
}], tabindex: [{
|
|
1451
1477
|
type: Input
|
|
1452
1478
|
}], size: [{
|
|
@@ -1687,12 +1713,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
1687
1713
|
this.getButton().tabIndex = -1;
|
|
1688
1714
|
return false;
|
|
1689
1715
|
}
|
|
1690
|
-
/**
|
|
1691
|
-
* @hidden
|
|
1692
|
-
*/
|
|
1693
|
-
get toolbarButtonClass() {
|
|
1694
|
-
return this.toggleable ? 'k-toolbar-toggle-button' : 'k-toolbar-button';
|
|
1695
|
-
}
|
|
1696
1716
|
/**
|
|
1697
1717
|
* @hidden
|
|
1698
1718
|
*/
|
|
@@ -1725,7 +1745,8 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1725
1745
|
<ng-template #toolbarTemplate>
|
|
1726
1746
|
<button
|
|
1727
1747
|
#toolbarButton
|
|
1728
|
-
[class]="
|
|
1748
|
+
[class.k-toolbar-button]="!toggleable"
|
|
1749
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
1729
1750
|
[tabindex]="tabIndex"
|
|
1730
1751
|
type="button"
|
|
1731
1752
|
kendoButton
|
|
@@ -1773,7 +1794,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1773
1794
|
</span>
|
|
1774
1795
|
</div>
|
|
1775
1796
|
</ng-template>
|
|
1776
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
1797
|
+
`, 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"] }] });
|
|
1777
1798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
|
|
1778
1799
|
type: Component,
|
|
1779
1800
|
args: [{
|
|
@@ -1784,7 +1805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1784
1805
|
<ng-template #toolbarTemplate>
|
|
1785
1806
|
<button
|
|
1786
1807
|
#toolbarButton
|
|
1787
|
-
[class]="
|
|
1808
|
+
[class.k-toolbar-button]="!toggleable"
|
|
1809
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
1788
1810
|
[tabindex]="tabIndex"
|
|
1789
1811
|
type="button"
|
|
1790
1812
|
kendoButton
|
|
@@ -1897,6 +1919,12 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
1897
1919
|
constructor(localization) {
|
|
1898
1920
|
super();
|
|
1899
1921
|
this.localization = localization;
|
|
1922
|
+
/**
|
|
1923
|
+
* @hidden
|
|
1924
|
+
*
|
|
1925
|
+
* Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
|
|
1926
|
+
*/
|
|
1927
|
+
this.fillMode = 'solid';
|
|
1900
1928
|
/**
|
|
1901
1929
|
* By default, the selection mode of the ButtonGroup is set to `multiple`.
|
|
1902
1930
|
*/
|
|
@@ -2023,10 +2051,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
2023
2051
|
}
|
|
2024
2052
|
}
|
|
2025
2053
|
ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2026
|
-
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
2054
|
+
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
2027
2055
|
<ng-template #toolbarTemplate>
|
|
2028
2056
|
<kendo-buttongroup
|
|
2029
|
-
class="k-toolbar-button-group"
|
|
2057
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
2030
2058
|
#toolbarButtonGroup
|
|
2031
2059
|
[tabIndex]="-1"
|
|
2032
2060
|
[selection]="selection"
|
|
@@ -2085,7 +2113,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
2085
2113
|
</span>
|
|
2086
2114
|
</div>
|
|
2087
2115
|
</ng-template>
|
|
2088
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
2116
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", 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"] }] });
|
|
2089
2117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
|
|
2090
2118
|
type: Component,
|
|
2091
2119
|
args: [{
|
|
@@ -2095,7 +2123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2095
2123
|
template: `
|
|
2096
2124
|
<ng-template #toolbarTemplate>
|
|
2097
2125
|
<kendo-buttongroup
|
|
2098
|
-
class="k-toolbar-button-group"
|
|
2126
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
2099
2127
|
#toolbarButtonGroup
|
|
2100
2128
|
[tabIndex]="-1"
|
|
2101
2129
|
[selection]="selection"
|
|
@@ -2160,6 +2188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2160
2188
|
}]
|
|
2161
2189
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
|
|
2162
2190
|
type: Input
|
|
2191
|
+
}], fillMode: [{
|
|
2192
|
+
type: Input
|
|
2163
2193
|
}], selection: [{
|
|
2164
2194
|
type: Input
|
|
2165
2195
|
}], width: [{
|
|
@@ -2187,8 +2217,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2187
2217
|
* Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
|
|
2188
2218
|
*/
|
|
2189
2219
|
class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
2190
|
-
constructor() {
|
|
2220
|
+
constructor(renderer) {
|
|
2191
2221
|
super();
|
|
2222
|
+
this.renderer = renderer;
|
|
2192
2223
|
/**
|
|
2193
2224
|
* Allows showing the default arrow icon or providing alternative one instead.
|
|
2194
2225
|
* @default false
|
|
@@ -2374,6 +2405,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
2374
2405
|
ngOnInit() {
|
|
2375
2406
|
this.setTextDisplayMode();
|
|
2376
2407
|
}
|
|
2408
|
+
ngAfterViewInit() {
|
|
2409
|
+
this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
|
|
2410
|
+
}
|
|
2377
2411
|
get overflowButtons() {
|
|
2378
2412
|
return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
|
|
2379
2413
|
}
|
|
@@ -2450,12 +2484,11 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
2450
2484
|
this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
|
|
2451
2485
|
}
|
|
2452
2486
|
}
|
|
2453
|
-
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2487
|
+
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2454
2488
|
ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
|
|
2455
2489
|
<ng-template #toolbarTemplate>
|
|
2456
2490
|
<kendo-dropdownbutton
|
|
2457
2491
|
#toolbarDropDownButton
|
|
2458
|
-
class="k-toolbar-menu-button"
|
|
2459
2492
|
[icon]="toolbarOptions.icon"
|
|
2460
2493
|
[iconClass]="toolbarOptions.iconClass"
|
|
2461
2494
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -2528,7 +2561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2528
2561
|
<ng-template #toolbarTemplate>
|
|
2529
2562
|
<kendo-dropdownbutton
|
|
2530
2563
|
#toolbarDropDownButton
|
|
2531
|
-
class="k-toolbar-menu-button"
|
|
2532
2564
|
[icon]="toolbarOptions.icon"
|
|
2533
2565
|
[iconClass]="toolbarOptions.iconClass"
|
|
2534
2566
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -2594,7 +2626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2594
2626
|
standalone: true,
|
|
2595
2627
|
imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
|
|
2596
2628
|
}]
|
|
2597
|
-
}], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
|
|
2629
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
|
|
2598
2630
|
type: Input
|
|
2599
2631
|
}], title: [{
|
|
2600
2632
|
type: Input
|
|
@@ -24,8 +24,8 @@ const packageMetadata = {
|
|
|
24
24
|
name: '@progress/kendo-angular-toolbar',
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '17.0.0-develop.
|
|
27
|
+
publishDate: 1729854957,
|
|
28
|
+
version: '17.0.0-develop.20',
|
|
29
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -248,6 +248,11 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
|
|
|
248
248
|
toRemove: `k-${componentType}-${SIZES[previousValue]}`,
|
|
249
249
|
toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
|
|
250
250
|
};
|
|
251
|
+
case 'fillMode':
|
|
252
|
+
return {
|
|
253
|
+
toRemove: `k-${componentType}-${previousValue}`,
|
|
254
|
+
toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
|
|
255
|
+
};
|
|
251
256
|
default:
|
|
252
257
|
break;
|
|
253
258
|
}
|
|
@@ -729,6 +734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
729
734
|
|
|
730
735
|
/* eslint-disable no-case-declarations */
|
|
731
736
|
const DEFAULT_SIZE = 'medium';
|
|
737
|
+
const DEFAULT_FILL_MODE = 'solid';
|
|
732
738
|
const immediateResizeThreshold = 300;
|
|
733
739
|
const getInitialPopupSettings = (isRtl) => ({
|
|
734
740
|
animate: true,
|
|
@@ -770,6 +776,7 @@ class ToolBarComponent {
|
|
|
770
776
|
this.hostClass = true;
|
|
771
777
|
this.cancelRenderedToolsSubscription$ = new Subject();
|
|
772
778
|
this._size = DEFAULT_SIZE;
|
|
779
|
+
this._fillMode = DEFAULT_FILL_MODE;
|
|
773
780
|
this.overflowButtonClickedTime = null;
|
|
774
781
|
this.subscriptions = new Subscription();
|
|
775
782
|
this.popupSubs = new Subscription();
|
|
@@ -811,6 +818,20 @@ class ToolBarComponent {
|
|
|
811
818
|
get popupSettings() {
|
|
812
819
|
return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
|
|
813
820
|
}
|
|
821
|
+
/**
|
|
822
|
+
* The fillMode property specifies the background and border styles of the Toolbar
|
|
823
|
+
* ([see example](slug:appearance_toolbar#toc-fill-mode)).
|
|
824
|
+
*
|
|
825
|
+
* @default 'solid'
|
|
826
|
+
*/
|
|
827
|
+
set fillMode(fillMode) {
|
|
828
|
+
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
829
|
+
this.handleClasses(newFillMode, 'fillMode');
|
|
830
|
+
this._fillMode = newFillMode;
|
|
831
|
+
}
|
|
832
|
+
get fillMode() {
|
|
833
|
+
return this._fillMode;
|
|
834
|
+
}
|
|
814
835
|
/**
|
|
815
836
|
* Specifies the padding of all Toolbar elements.
|
|
816
837
|
*
|
|
@@ -963,7 +984,10 @@ class ToolBarComponent {
|
|
|
963
984
|
});
|
|
964
985
|
}
|
|
965
986
|
this.navigationService.setRenderedTools(this.toolsService.renderedTools);
|
|
966
|
-
|
|
987
|
+
const stylingOptions = ['size', 'fillMode'];
|
|
988
|
+
stylingOptions.forEach(option => {
|
|
989
|
+
this.handleClasses(this[option], option);
|
|
990
|
+
});
|
|
967
991
|
}
|
|
968
992
|
ngOnInit() {
|
|
969
993
|
this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
|
|
@@ -1277,7 +1301,7 @@ class ToolBarComponent {
|
|
|
1277
1301
|
}
|
|
1278
1302
|
}
|
|
1279
1303
|
ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1280
|
-
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
1304
|
+
ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
|
|
1281
1305
|
RefreshService,
|
|
1282
1306
|
NavigationService,
|
|
1283
1307
|
LocalizationService,
|
|
@@ -1352,7 +1376,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
1352
1376
|
</ng-template>
|
|
1353
1377
|
<ng-container #container></ng-container>
|
|
1354
1378
|
<kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
|
|
1355
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
1379
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
1356
1380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
|
|
1357
1381
|
type: Component,
|
|
1358
1382
|
args: [{
|
|
@@ -1444,6 +1468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1444
1468
|
type: Input
|
|
1445
1469
|
}], popupSettings: [{
|
|
1446
1470
|
type: Input
|
|
1471
|
+
}], fillMode: [{
|
|
1472
|
+
type: Input
|
|
1447
1473
|
}], tabindex: [{
|
|
1448
1474
|
type: Input
|
|
1449
1475
|
}], size: [{
|
|
@@ -1684,12 +1710,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
|
|
|
1684
1710
|
this.getButton().tabIndex = -1;
|
|
1685
1711
|
return false;
|
|
1686
1712
|
}
|
|
1687
|
-
/**
|
|
1688
|
-
* @hidden
|
|
1689
|
-
*/
|
|
1690
|
-
get toolbarButtonClass() {
|
|
1691
|
-
return this.toggleable ? 'k-toolbar-toggle-button' : 'k-toolbar-button';
|
|
1692
|
-
}
|
|
1693
1713
|
/**
|
|
1694
1714
|
* @hidden
|
|
1695
1715
|
*/
|
|
@@ -1722,7 +1742,8 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1722
1742
|
<ng-template #toolbarTemplate>
|
|
1723
1743
|
<button
|
|
1724
1744
|
#toolbarButton
|
|
1725
|
-
[class]="
|
|
1745
|
+
[class.k-toolbar-button]="!toggleable"
|
|
1746
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
1726
1747
|
[tabindex]="tabIndex"
|
|
1727
1748
|
type="button"
|
|
1728
1749
|
kendoButton
|
|
@@ -1770,7 +1791,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1770
1791
|
</span>
|
|
1771
1792
|
</div>
|
|
1772
1793
|
</ng-template>
|
|
1773
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
1794
|
+
`, 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"] }] });
|
|
1774
1795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
|
|
1775
1796
|
type: Component,
|
|
1776
1797
|
args: [{
|
|
@@ -1781,7 +1802,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1781
1802
|
<ng-template #toolbarTemplate>
|
|
1782
1803
|
<button
|
|
1783
1804
|
#toolbarButton
|
|
1784
|
-
[class]="
|
|
1805
|
+
[class.k-toolbar-button]="!toggleable"
|
|
1806
|
+
[class.k-toolbar-toggle-button]="toggleable"
|
|
1785
1807
|
[tabindex]="tabIndex"
|
|
1786
1808
|
type="button"
|
|
1787
1809
|
kendoButton
|
|
@@ -1894,6 +1916,12 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
1894
1916
|
constructor(localization) {
|
|
1895
1917
|
super();
|
|
1896
1918
|
this.localization = localization;
|
|
1919
|
+
/**
|
|
1920
|
+
* @hidden
|
|
1921
|
+
*
|
|
1922
|
+
* Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
|
|
1923
|
+
*/
|
|
1924
|
+
this.fillMode = 'solid';
|
|
1897
1925
|
/**
|
|
1898
1926
|
* By default, the selection mode of the ButtonGroup is set to `multiple`.
|
|
1899
1927
|
*/
|
|
@@ -2019,10 +2047,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
2019
2047
|
}
|
|
2020
2048
|
}
|
|
2021
2049
|
ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2022
|
-
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
2050
|
+
ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
|
|
2023
2051
|
<ng-template #toolbarTemplate>
|
|
2024
2052
|
<kendo-buttongroup
|
|
2025
|
-
class="k-toolbar-button-group"
|
|
2053
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
2026
2054
|
#toolbarButtonGroup
|
|
2027
2055
|
[tabIndex]="-1"
|
|
2028
2056
|
[selection]="selection"
|
|
@@ -2081,7 +2109,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
2081
2109
|
</span>
|
|
2082
2110
|
</div>
|
|
2083
2111
|
</ng-template>
|
|
2084
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
2112
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", 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"] }] });
|
|
2085
2113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
|
|
2086
2114
|
type: Component,
|
|
2087
2115
|
args: [{
|
|
@@ -2091,7 +2119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2091
2119
|
template: `
|
|
2092
2120
|
<ng-template #toolbarTemplate>
|
|
2093
2121
|
<kendo-buttongroup
|
|
2094
|
-
class="k-toolbar-button-group"
|
|
2122
|
+
class="k-toolbar-button-group k-button-group-{{fillMode}}"
|
|
2095
2123
|
#toolbarButtonGroup
|
|
2096
2124
|
[tabIndex]="-1"
|
|
2097
2125
|
[selection]="selection"
|
|
@@ -2156,6 +2184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2156
2184
|
}]
|
|
2157
2185
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
|
|
2158
2186
|
type: Input
|
|
2187
|
+
}], fillMode: [{
|
|
2188
|
+
type: Input
|
|
2159
2189
|
}], selection: [{
|
|
2160
2190
|
type: Input
|
|
2161
2191
|
}], width: [{
|
|
@@ -2183,8 +2213,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2183
2213
|
* Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
|
|
2184
2214
|
*/
|
|
2185
2215
|
class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
2186
|
-
constructor() {
|
|
2216
|
+
constructor(renderer) {
|
|
2187
2217
|
super();
|
|
2218
|
+
this.renderer = renderer;
|
|
2188
2219
|
/**
|
|
2189
2220
|
* Allows showing the default arrow icon or providing alternative one instead.
|
|
2190
2221
|
* @default false
|
|
@@ -2370,6 +2401,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
2370
2401
|
ngOnInit() {
|
|
2371
2402
|
this.setTextDisplayMode();
|
|
2372
2403
|
}
|
|
2404
|
+
ngAfterViewInit() {
|
|
2405
|
+
this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
|
|
2406
|
+
}
|
|
2373
2407
|
get overflowButtons() {
|
|
2374
2408
|
return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
|
|
2375
2409
|
}
|
|
@@ -2446,12 +2480,11 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
|
|
|
2446
2480
|
this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
|
|
2447
2481
|
}
|
|
2448
2482
|
}
|
|
2449
|
-
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2483
|
+
ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2450
2484
|
ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
|
|
2451
2485
|
<ng-template #toolbarTemplate>
|
|
2452
2486
|
<kendo-dropdownbutton
|
|
2453
2487
|
#toolbarDropDownButton
|
|
2454
|
-
class="k-toolbar-menu-button"
|
|
2455
2488
|
[icon]="toolbarOptions.icon"
|
|
2456
2489
|
[iconClass]="toolbarOptions.iconClass"
|
|
2457
2490
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -2524,7 +2557,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2524
2557
|
<ng-template #toolbarTemplate>
|
|
2525
2558
|
<kendo-dropdownbutton
|
|
2526
2559
|
#toolbarDropDownButton
|
|
2527
|
-
class="k-toolbar-menu-button"
|
|
2528
2560
|
[icon]="toolbarOptions.icon"
|
|
2529
2561
|
[iconClass]="toolbarOptions.iconClass"
|
|
2530
2562
|
[svgIcon]="toolbarOptions.svgIcon"
|
|
@@ -2590,7 +2622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2590
2622
|
standalone: true,
|
|
2591
2623
|
imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
|
|
2592
2624
|
}]
|
|
2593
|
-
}], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
|
|
2625
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
|
|
2594
2626
|
type: Input
|
|
2595
2627
|
}], title: [{
|
|
2596
2628
|
type: Input
|
package/index.d.ts
CHANGED
|
@@ -18,4 +18,5 @@ export { LocalizedToolbarMessagesDirective } from './localization/localized-tool
|
|
|
18
18
|
export { ToolbarCustomMessagesComponent } from './localization/custom-messages.component';
|
|
19
19
|
export { RefreshService } from './refresh.service';
|
|
20
20
|
export { ToolbarSize } from './common/size';
|
|
21
|
+
export { ToolbarFillMode } from './common/fillmode';
|
|
21
22
|
export * from './directives';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-toolbar",
|
|
3
|
-
"version": "17.0.0-develop.
|
|
3
|
+
"version": "17.0.0-develop.20",
|
|
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",
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
"@angular/core": "15 - 18",
|
|
30
30
|
"@angular/platform-browser": "15 - 18",
|
|
31
31
|
"@progress/kendo-licensing": "^1.0.2",
|
|
32
|
-
"@progress/kendo-angular-buttons": "17.0.0-develop.
|
|
33
|
-
"@progress/kendo-angular-common": "17.0.0-develop.
|
|
34
|
-
"@progress/kendo-angular-l10n": "17.0.0-develop.
|
|
35
|
-
"@progress/kendo-angular-icons": "17.0.0-develop.
|
|
36
|
-
"@progress/kendo-angular-popup": "17.0.0-develop.
|
|
32
|
+
"@progress/kendo-angular-buttons": "17.0.0-develop.20",
|
|
33
|
+
"@progress/kendo-angular-common": "17.0.0-develop.20",
|
|
34
|
+
"@progress/kendo-angular-l10n": "17.0.0-develop.20",
|
|
35
|
+
"@progress/kendo-angular-icons": "17.0.0-develop.20",
|
|
36
|
+
"@progress/kendo-angular-popup": "17.0.0-develop.20",
|
|
37
37
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"tslib": "^2.3.1",
|
|
41
|
-
"@progress/kendo-angular-schematics": "17.0.0-develop.
|
|
41
|
+
"@progress/kendo-angular-schematics": "17.0.0-develop.20"
|
|
42
42
|
},
|
|
43
43
|
"schematics": "./schematics/collection.json",
|
|
44
44
|
"module": "fesm2015/progress-kendo-angular-toolbar.mjs",
|
package/toolbar.component.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ import { Direction } from './direction';
|
|
|
16
16
|
import { RendererClickPayload } from './common/renderer-click';
|
|
17
17
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
18
18
|
import { ToolbarToolsService } from './tools/tools.service';
|
|
19
|
+
import { ToolbarFillMode } from './common/fillmode';
|
|
19
20
|
import * as i0 from "@angular/core";
|
|
20
21
|
/**
|
|
21
22
|
* Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
|
|
@@ -49,6 +50,14 @@ export declare class ToolBarComponent {
|
|
|
49
50
|
*/
|
|
50
51
|
set popupSettings(settings: PopupSettings);
|
|
51
52
|
get popupSettings(): PopupSettings;
|
|
53
|
+
/**
|
|
54
|
+
* The fillMode property specifies the background and border styles of the Toolbar
|
|
55
|
+
* ([see example](slug:appearance_toolbar#toc-fill-mode)).
|
|
56
|
+
*
|
|
57
|
+
* @default 'solid'
|
|
58
|
+
*/
|
|
59
|
+
set fillMode(fillMode: ToolbarFillMode);
|
|
60
|
+
get fillMode(): ToolbarFillMode;
|
|
52
61
|
/**
|
|
53
62
|
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
|
|
54
63
|
*/
|
|
@@ -96,6 +105,7 @@ export declare class ToolBarComponent {
|
|
|
96
105
|
private cancelRenderedToolsSubscription$;
|
|
97
106
|
private cachedGap;
|
|
98
107
|
private _size;
|
|
108
|
+
private _fillMode;
|
|
99
109
|
private overflowButtonClickedTime;
|
|
100
110
|
private subscriptions;
|
|
101
111
|
private popupSubs;
|
|
@@ -174,5 +184,5 @@ export declare class ToolBarComponent {
|
|
|
174
184
|
private handleClasses;
|
|
175
185
|
private normalizePopupClasses;
|
|
176
186
|
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
|
|
177
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": "overflow"; "resizable": "resizable"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "size": "size"; "tabIndex": "tabIndex"; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
|
|
187
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": "overflow"; "resizable": "resizable"; "popupSettings": "popupSettings"; "fillMode": "fillMode"; "tabindex": "tabindex"; "size": "size"; "tabIndex": "tabIndex"; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
|
|
178
188
|
}
|
|
@@ -22,6 +22,12 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
22
22
|
* buttons and they will be ignored.
|
|
23
23
|
*/
|
|
24
24
|
disabled: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* @hidden
|
|
27
|
+
*
|
|
28
|
+
* Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
|
|
29
|
+
*/
|
|
30
|
+
fillMode: 'solid' | 'flat';
|
|
25
31
|
/**
|
|
26
32
|
* By default, the selection mode of the ButtonGroup is set to `multiple`.
|
|
27
33
|
*/
|
|
@@ -90,5 +96,5 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
|
|
|
90
96
|
getIconClasses(button: any): any;
|
|
91
97
|
private focusButton;
|
|
92
98
|
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarButtonGroupComponent, never>;
|
|
93
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonGroupComponent, "kendo-toolbar-buttongroup", ["kendoToolBarButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "look": "look"; }, {}, ["buttonComponents"], never, true, never>;
|
|
99
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonGroupComponent, "kendo-toolbar-buttongroup", ["kendoToolBarButtonGroup"], { "disabled": "disabled"; "fillMode": "fillMode"; "selection": "selection"; "width": "width"; "look": "look"; }, {}, ["buttonComponents"], never, true, never>;
|
|
94
100
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ElementRef, TemplateRef, EventEmitter, OnInit, QueryList } from '@angular/core';
|
|
5
|
+
import { ElementRef, TemplateRef, EventEmitter, OnInit, QueryList, Renderer2 } from '@angular/core';
|
|
6
6
|
import { ToolBarToolComponent } from './toolbar-tool.component';
|
|
7
7
|
import { PopupSettings } from '../popup-settings';
|
|
8
8
|
import { ArrowIconSettings, ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
|
|
@@ -15,6 +15,7 @@ import * as i0 from "@angular/core";
|
|
|
15
15
|
* Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
|
|
16
16
|
*/
|
|
17
17
|
export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
|
|
18
|
+
private renderer;
|
|
18
19
|
/**
|
|
19
20
|
* Allows showing the default arrow icon or providing alternative one instead.
|
|
20
21
|
* @default false
|
|
@@ -150,6 +151,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
|
|
|
150
151
|
toolbarOptions: ToolOptions;
|
|
151
152
|
overflowOptions: ToolOptions;
|
|
152
153
|
ngOnInit(): void;
|
|
154
|
+
ngAfterViewInit(): void;
|
|
153
155
|
private get overflowButtons();
|
|
154
156
|
private toolbarDropDownButton;
|
|
155
157
|
private _data;
|
|
@@ -159,7 +161,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
|
|
|
159
161
|
private _text;
|
|
160
162
|
private getNextKey;
|
|
161
163
|
private getPrevKey;
|
|
162
|
-
constructor();
|
|
164
|
+
constructor(renderer: Renderer2);
|
|
163
165
|
/**
|
|
164
166
|
* @hidden
|
|
165
167
|
*/
|