@progress/kendo-angular-buttons 17.0.0-develop.3 → 17.0.0-develop.30
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 +27 -106
- package/button/button.component.d.ts +3 -9
- package/button/selection-settings.d.ts +1 -1
- package/buttongroup/buttongroup.component.d.ts +2 -2
- package/chip/chip-list.component.d.ts +4 -4
- package/chip/chip.component.d.ts +4 -7
- package/chip/models/avatar-settings.interface.d.ts +33 -0
- package/chip/models/selection.d.ts +1 -1
- package/common/models/fillmode.d.ts +2 -2
- package/common/models/rounded.d.ts +2 -2
- package/common/models/size.d.ts +3 -3
- package/common/models/theme-color.d.ts +2 -2
- package/direction.d.ts +1 -1
- package/dropdownbutton/dropdownbutton.component.d.ts +7 -10
- package/{esm2020 → esm2022}/button/button.component.mjs +80 -108
- package/{esm2020 → esm2022}/button/button.module.mjs +4 -4
- package/{esm2020 → esm2022}/button/button.service.mjs +5 -7
- package/{esm2020 → esm2022}/buttongroup/buttongroup.component.mjs +79 -56
- package/{esm2020 → esm2022}/buttongroup/buttongroup.module.mjs +4 -4
- package/{esm2020 → esm2022}/buttons.module.mjs +4 -4
- package/{esm2020 → esm2022}/chip/chip-list.component.mjs +58 -48
- package/{esm2020 → esm2022}/chip/chip.component.mjs +155 -93
- package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +130 -118
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/dial-item.component.mjs +21 -11
- package/{esm2020 → esm2022}/floatingactionbutton/dial-list.component.mjs +16 -11
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.component.mjs +145 -102
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/templates/dial-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/floatingactionbutton/templates/fab-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/focusable/focus.service.mjs +5 -6
- package/{esm2020 → esm2022}/focusable/focusable.directive.mjs +8 -4
- package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/listbutton/container.service.mjs +5 -3
- package/{esm2020 → esm2022}/listbutton/list-button.mjs +88 -51
- package/{esm2020 → esm2022}/listbutton/list.component.mjs +13 -10
- package/{esm2020 → esm2022}/listbutton/list.module.mjs +8 -8
- package/esm2022/listbutton/popup-settings.mjs +5 -0
- package/{esm2020 → esm2022}/navigation/navigation.service.mjs +12 -11
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/preventable-event.mjs +1 -3
- package/{esm2020 → esm2022}/splitbutton/localization/custom-messages.component.mjs +7 -6
- package/{esm2020 → esm2022}/splitbutton/localization/localized-messages.directive.mjs +9 -8
- package/esm2022/splitbutton/localization/messages.mjs +45 -0
- package/{esm2020 → esm2022}/splitbutton/splitbutton.component.mjs +213 -189
- package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/util.mjs +6 -0
- package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1324 -1089
- package/floatingactionbutton/dial-item.component.d.ts +1 -1
- package/floatingactionbutton/dial-list.component.d.ts +1 -1
- package/floatingactionbutton/floatingactionbutton.component.d.ts +1 -1
- package/floatingactionbutton/models/position-mode.d.ts +1 -1
- package/focusable/focusable.directive.d.ts +1 -1
- package/index.d.ts +1 -0
- package/listbutton/list-button.d.ts +9 -4
- package/listbutton/list.component.d.ts +1 -1
- package/package.json +14 -20
- package/splitbutton/localization/messages.d.ts +1 -1
- package/splitbutton/splitbutton.component.d.ts +8 -16
- package/util.d.ts +6 -0
- package/esm2020/splitbutton/localization/messages.mjs +0 -23
- package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5589
- /package/{esm2020 → esm2022}/button/selection-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-content-click-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-list-remove-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-remove-event-args.interface.mjs +0 -0
- /package/{esm2020/chip/models/selection.mjs → esm2022/chip/models/avatar-settings.interface.mjs} +0 -0
- /package/{esm2020/common/models/arrow-settings.mjs → esm2022/chip/models/selection.mjs} +0 -0
- /package/{esm2020/common/models/fillmode.mjs → esm2022/common/models/arrow-settings.mjs} +0 -0
- /package/{esm2020/common/models/rounded.mjs → esm2022/common/models/fillmode.mjs} +0 -0
- /package/{esm2020/common/models/size.mjs → esm2022/common/models/rounded.mjs} +0 -0
- /package/{esm2020/common/models/styling-classes.mjs → esm2022/common/models/size.mjs} +0 -0
- /package/{esm2020/common/models/theme-color.mjs → esm2022/common/models/styling-classes.mjs} +0 -0
- /package/{esm2020/direction.mjs → esm2022/common/models/theme-color.mjs} +0 -0
- /package/{esm2020 → esm2022}/common/models.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/align.mjs → esm2022/direction.mjs} +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/item-animation.interface.mjs → esm2022/floatingactionbutton/models/align.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item-click.event.mjs → esm2022/floatingactionbutton/models/item-animation.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item.interface.mjs → esm2022/floatingactionbutton/models/item-click.event.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/offset.mjs → esm2022/floatingactionbutton/models/item.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/position-mode.mjs → esm2022/floatingactionbutton/models/offset.mjs} +0 -0
- /package/{esm2020/listbutton/list-item-model.mjs → esm2022/floatingactionbutton/models/position-mode.mjs} +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/utils.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020/listbutton/popup-settings.mjs → esm2022/listbutton/list-item-model.mjs} +0 -0
- /package/{esm2020 → esm2022}/navigation/key-events.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-action.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-config.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-buttons.mjs +0 -0
|
@@ -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,
|
|
5
|
+
import { Component, ElementRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, NgZone, ChangeDetectorRef, Renderer2, forwardRef } from '@angular/core';
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
8
|
import { ListButton } from './../listbutton/list-button';
|
|
@@ -77,154 +77,46 @@ const DEFAULT_FILL_MODE = 'solid';
|
|
|
77
77
|
* ```
|
|
78
78
|
*/
|
|
79
79
|
export class SplitButtonComponent extends ListButton {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
* * `primary` —Applies coloring based on the `primary` theme color.
|
|
121
|
-
* * `secondary`—Applies coloring based on the `secondary` theme color.
|
|
122
|
-
* * `tertiary`— Applies coloring based on the `tertiary` theme color.
|
|
123
|
-
* * `info`—Applies coloring based on the `info` theme color.
|
|
124
|
-
* * `success`— Applies coloring based on the `success` theme color.
|
|
125
|
-
* * `warning`— Applies coloring based on the `warning` theme color.
|
|
126
|
-
* * `error`— Applies coloring based on the `error` theme color.
|
|
127
|
-
* * `dark`— Applies coloring based on the `dark` theme color.
|
|
128
|
-
* * `light`— Applies coloring based on the `light` theme color.
|
|
129
|
-
* * `inverse`— Applies coloring based on the `inverse` theme color.
|
|
130
|
-
* * `none`— Removes the built in theme color.
|
|
131
|
-
*/
|
|
132
|
-
this.themeColor = 'base';
|
|
133
|
-
/**
|
|
134
|
-
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
135
|
-
*/
|
|
136
|
-
this.tabIndex = 0;
|
|
137
|
-
/**
|
|
138
|
-
* Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
|
|
139
|
-
* be rendered for the button which opens the popup.
|
|
140
|
-
*/
|
|
141
|
-
this.arrowButtonIcon = 'caret-alt-down';
|
|
142
|
-
/**
|
|
143
|
-
* Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
|
|
144
|
-
* be rendered for the button which opens the popup.
|
|
145
|
-
*/
|
|
146
|
-
this.arrowButtonSvgIcon = caretAltDownIcon;
|
|
147
|
-
/**
|
|
148
|
-
* Fires each time the user clicks the main button.
|
|
149
|
-
*
|
|
150
|
-
* @example
|
|
151
|
-
* ```ts
|
|
152
|
-
* _@Component({
|
|
153
|
-
* selector: 'my-app',
|
|
154
|
-
* template: `
|
|
155
|
-
* <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
|
|
156
|
-
* Reply
|
|
157
|
-
* </kendo-splitbutton>
|
|
158
|
-
* `
|
|
159
|
-
* })
|
|
160
|
-
* class AppComponent {
|
|
161
|
-
* public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
|
|
162
|
-
*
|
|
163
|
-
* public onSplitButtonClick(): void {
|
|
164
|
-
* console.log('SplitButton click');
|
|
165
|
-
* }
|
|
166
|
-
* }
|
|
167
|
-
* ```
|
|
168
|
-
*
|
|
169
|
-
*/
|
|
170
|
-
this.buttonClick = new EventEmitter();
|
|
171
|
-
/**
|
|
172
|
-
* Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
|
|
173
|
-
*
|
|
174
|
-
* @example
|
|
175
|
-
* ```ts
|
|
176
|
-
* _@Component({
|
|
177
|
-
* selector: 'my-app',
|
|
178
|
-
* template: `
|
|
179
|
-
* <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
|
|
180
|
-
* Reply
|
|
181
|
-
* </kendo-splitbutton>
|
|
182
|
-
* `
|
|
183
|
-
* })
|
|
184
|
-
* class AppComponent {
|
|
185
|
-
* public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
|
|
186
|
-
*
|
|
187
|
-
* public onSplitButtonItemClick(dataItem?: string): void {
|
|
188
|
-
* if (dataItem) {
|
|
189
|
-
* console.log(dataItem);
|
|
190
|
-
* }
|
|
191
|
-
* }
|
|
192
|
-
* }
|
|
193
|
-
* ```
|
|
194
|
-
*
|
|
195
|
-
*/
|
|
196
|
-
this.itemClick = new EventEmitter();
|
|
197
|
-
/**
|
|
198
|
-
* Fires each time the SplitButton gets focused.
|
|
199
|
-
*/
|
|
200
|
-
this.onFocus = new EventEmitter();
|
|
201
|
-
/**
|
|
202
|
-
* Fires each time the SplitButton gets blurred.
|
|
203
|
-
*/
|
|
204
|
-
this.onBlur = new EventEmitter();
|
|
205
|
-
/**
|
|
206
|
-
* Fires each time the popup is about to open.
|
|
207
|
-
* This event is preventable. If you cancel the event, the popup will remain closed.
|
|
208
|
-
*/
|
|
209
|
-
this.open = new EventEmitter();
|
|
210
|
-
/**
|
|
211
|
-
* Fires each time the popup is about to close.
|
|
212
|
-
* This event is preventable. If you cancel the event, the popup will remain open.
|
|
213
|
-
*/
|
|
214
|
-
this.close = new EventEmitter();
|
|
215
|
-
/**
|
|
216
|
-
* @hidden
|
|
217
|
-
*/
|
|
218
|
-
this.activeArrow = false;
|
|
219
|
-
this.listId = guid();
|
|
220
|
-
this.buttonText = '';
|
|
221
|
-
this.arrowButtonClicked = false;
|
|
222
|
-
this._rounded = DEFAULT_ROUNDED;
|
|
223
|
-
this._fillMode = DEFAULT_FILL_MODE;
|
|
224
|
-
this._buttonAttributes = null;
|
|
225
|
-
this._itemClick = this.itemClick;
|
|
226
|
-
this._blur = this.onBlur;
|
|
227
|
-
}
|
|
80
|
+
localization;
|
|
81
|
+
renderer;
|
|
82
|
+
/**
|
|
83
|
+
* Sets the text of the SplitButton.
|
|
84
|
+
*/
|
|
85
|
+
text = '';
|
|
86
|
+
/**
|
|
87
|
+
* Defines an icon to be rendered next to the button text.
|
|
88
|
+
* ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
|
|
89
|
+
*/
|
|
90
|
+
icon = '';
|
|
91
|
+
/**
|
|
92
|
+
* Defines an SVGIcon to be rendered next to the button text.
|
|
93
|
+
*/
|
|
94
|
+
svgIcon;
|
|
95
|
+
/**
|
|
96
|
+
* Defines an icon with a custom CSS class to be rendered next to the button text
|
|
97
|
+
* ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
|
|
98
|
+
*/
|
|
99
|
+
iconClass;
|
|
100
|
+
/**
|
|
101
|
+
* Defines the type attribute of the main button
|
|
102
|
+
*/
|
|
103
|
+
type = 'button';
|
|
104
|
+
/**
|
|
105
|
+
* Defines the location of an image to be displayed next to the button text
|
|
106
|
+
* ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
|
|
107
|
+
*/
|
|
108
|
+
imageUrl = '';
|
|
109
|
+
/**
|
|
110
|
+
* The size property specifies the padding of the SplitButton
|
|
111
|
+
* ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
|
|
112
|
+
*
|
|
113
|
+
* The possible values are:
|
|
114
|
+
* * `small`
|
|
115
|
+
* * `medium` (default)
|
|
116
|
+
* * `large`
|
|
117
|
+
* * `none`
|
|
118
|
+
*/
|
|
119
|
+
size = 'medium';
|
|
228
120
|
/**
|
|
229
121
|
* The rounded property specifies the border radius of the SplitButton
|
|
230
122
|
* ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
|
|
@@ -261,6 +153,26 @@ export class SplitButtonComponent extends ListButton {
|
|
|
261
153
|
get fillMode() {
|
|
262
154
|
return this._fillMode;
|
|
263
155
|
}
|
|
156
|
+
/**
|
|
157
|
+
* The SplitButton allows you to specify predefined theme colors.
|
|
158
|
+
* The theme color will be applied as a background and border color while also amending the text color accordingly
|
|
159
|
+
* ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
|
|
160
|
+
*
|
|
161
|
+
* The possible values are:
|
|
162
|
+
* * `base` —Applies coloring based on the `base` theme color. (default)
|
|
163
|
+
* * `primary` —Applies coloring based on the `primary` theme color.
|
|
164
|
+
* * `secondary`—Applies coloring based on the `secondary` theme color.
|
|
165
|
+
* * `tertiary`— Applies coloring based on the `tertiary` theme color.
|
|
166
|
+
* * `info`—Applies coloring based on the `info` theme color.
|
|
167
|
+
* * `success`— Applies coloring based on the `success` theme color.
|
|
168
|
+
* * `warning`— Applies coloring based on the `warning` theme color.
|
|
169
|
+
* * `error`— Applies coloring based on the `error` theme color.
|
|
170
|
+
* * `dark`— Applies coloring based on the `dark` theme color.
|
|
171
|
+
* * `light`— Applies coloring based on the `light` theme color.
|
|
172
|
+
* * `inverse`— Applies coloring based on the `inverse` theme color.
|
|
173
|
+
* * `none`— Removes the built in theme color.
|
|
174
|
+
*/
|
|
175
|
+
themeColor = 'base';
|
|
264
176
|
/**
|
|
265
177
|
* When set to `true`, disables a SplitButton item
|
|
266
178
|
* ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
|
|
@@ -289,6 +201,14 @@ export class SplitButtonComponent extends ListButton {
|
|
|
289
201
|
get popupSettings() {
|
|
290
202
|
return this._popupSettings;
|
|
291
203
|
}
|
|
204
|
+
/**
|
|
205
|
+
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
|
206
|
+
*/
|
|
207
|
+
tabIndex = 0;
|
|
208
|
+
/**
|
|
209
|
+
* Configures the text field of the button-list popup.
|
|
210
|
+
*/
|
|
211
|
+
textField;
|
|
292
212
|
/**
|
|
293
213
|
* Sets the data of the SplitButton.
|
|
294
214
|
*
|
|
@@ -303,6 +223,21 @@ export class SplitButtonComponent extends ListButton {
|
|
|
303
223
|
}
|
|
304
224
|
return this._data;
|
|
305
225
|
}
|
|
226
|
+
/**
|
|
227
|
+
* The CSS classes that will be rendered on the button which opens the popup.
|
|
228
|
+
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
229
|
+
*/
|
|
230
|
+
arrowButtonClass;
|
|
231
|
+
/**
|
|
232
|
+
* Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
|
|
233
|
+
* be rendered for the button which opens the popup.
|
|
234
|
+
*/
|
|
235
|
+
arrowButtonIcon = 'caret-alt-down';
|
|
236
|
+
/**
|
|
237
|
+
* Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
|
|
238
|
+
* be rendered for the button which opens the popup.
|
|
239
|
+
*/
|
|
240
|
+
arrowButtonSvgIcon = caretAltDownIcon;
|
|
306
241
|
/**
|
|
307
242
|
* Sets attributes to the main button.
|
|
308
243
|
*/
|
|
@@ -314,6 +249,80 @@ export class SplitButtonComponent extends ListButton {
|
|
|
314
249
|
get buttonAttributes() {
|
|
315
250
|
return this._buttonAttributes;
|
|
316
251
|
}
|
|
252
|
+
/**
|
|
253
|
+
* Fires each time the user clicks the main button.
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* ```ts
|
|
257
|
+
* _@Component({
|
|
258
|
+
* selector: 'my-app',
|
|
259
|
+
* template: `
|
|
260
|
+
* <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
|
|
261
|
+
* Reply
|
|
262
|
+
* </kendo-splitbutton>
|
|
263
|
+
* `
|
|
264
|
+
* })
|
|
265
|
+
* class AppComponent {
|
|
266
|
+
* public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
|
|
267
|
+
*
|
|
268
|
+
* public onSplitButtonClick(): void {
|
|
269
|
+
* console.log('SplitButton click');
|
|
270
|
+
* }
|
|
271
|
+
* }
|
|
272
|
+
* ```
|
|
273
|
+
*
|
|
274
|
+
*/
|
|
275
|
+
buttonClick = new EventEmitter();
|
|
276
|
+
/**
|
|
277
|
+
* Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
|
|
278
|
+
*
|
|
279
|
+
* @example
|
|
280
|
+
* ```ts
|
|
281
|
+
* _@Component({
|
|
282
|
+
* selector: 'my-app',
|
|
283
|
+
* template: `
|
|
284
|
+
* <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
|
|
285
|
+
* Reply
|
|
286
|
+
* </kendo-splitbutton>
|
|
287
|
+
* `
|
|
288
|
+
* })
|
|
289
|
+
* class AppComponent {
|
|
290
|
+
* public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
|
|
291
|
+
*
|
|
292
|
+
* public onSplitButtonItemClick(dataItem?: string): void {
|
|
293
|
+
* if (dataItem) {
|
|
294
|
+
* console.log(dataItem);
|
|
295
|
+
* }
|
|
296
|
+
* }
|
|
297
|
+
* }
|
|
298
|
+
* ```
|
|
299
|
+
*
|
|
300
|
+
*/
|
|
301
|
+
itemClick = new EventEmitter();
|
|
302
|
+
/**
|
|
303
|
+
* Fires each time the SplitButton gets focused.
|
|
304
|
+
*/
|
|
305
|
+
onFocus = new EventEmitter();
|
|
306
|
+
/**
|
|
307
|
+
* Fires each time the SplitButton gets blurred.
|
|
308
|
+
*/
|
|
309
|
+
onBlur = new EventEmitter();
|
|
310
|
+
/**
|
|
311
|
+
* Fires each time the popup is about to open.
|
|
312
|
+
* This event is preventable. If you cancel the event, the popup will remain closed.
|
|
313
|
+
*/
|
|
314
|
+
open = new EventEmitter();
|
|
315
|
+
/**
|
|
316
|
+
* Fires each time the popup is about to close.
|
|
317
|
+
* This event is preventable. If you cancel the event, the popup will remain open.
|
|
318
|
+
*/
|
|
319
|
+
close = new EventEmitter();
|
|
320
|
+
/**
|
|
321
|
+
* An item template that helps to customize the item content.
|
|
322
|
+
*/
|
|
323
|
+
itemTemplate;
|
|
324
|
+
activeArrow = false;
|
|
325
|
+
listId = guid();
|
|
317
326
|
/**
|
|
318
327
|
* @hidden
|
|
319
328
|
*/
|
|
@@ -332,6 +341,12 @@ export class SplitButtonComponent extends ListButton {
|
|
|
332
341
|
get componentTabIndex() {
|
|
333
342
|
return this.disabled ? -1 : this.tabIndex;
|
|
334
343
|
}
|
|
344
|
+
buttonText = '';
|
|
345
|
+
arrowButtonClicked = false;
|
|
346
|
+
_rounded = DEFAULT_ROUNDED;
|
|
347
|
+
_fillMode = DEFAULT_FILL_MODE;
|
|
348
|
+
_buttonAttributes = null;
|
|
349
|
+
documentMouseUpSub;
|
|
335
350
|
set isFocused(value) {
|
|
336
351
|
this._isFocused = value;
|
|
337
352
|
}
|
|
@@ -425,7 +440,7 @@ export class SplitButtonComponent extends ListButton {
|
|
|
425
440
|
* @hidden
|
|
426
441
|
*/
|
|
427
442
|
ngAfterViewInit() {
|
|
428
|
-
this.containerService.container = this.
|
|
443
|
+
this.containerService.container = this.container;
|
|
429
444
|
this.containerService.template = this.popupTemplate;
|
|
430
445
|
this.updateButtonText();
|
|
431
446
|
this.handleClasses(this.rounded, 'rounded');
|
|
@@ -449,6 +464,14 @@ export class SplitButtonComponent extends ListButton {
|
|
|
449
464
|
popup.popupAlign = this.popupAlign;
|
|
450
465
|
}
|
|
451
466
|
}
|
|
467
|
+
/**
|
|
468
|
+
* @hidden
|
|
469
|
+
*/
|
|
470
|
+
ngOnDestroy() {
|
|
471
|
+
if (this.documentMouseUpSub) {
|
|
472
|
+
this.documentMouseUpSub();
|
|
473
|
+
}
|
|
474
|
+
}
|
|
452
475
|
/**
|
|
453
476
|
* @hidden
|
|
454
477
|
*/
|
|
@@ -517,6 +540,21 @@ export class SplitButtonComponent extends ListButton {
|
|
|
517
540
|
this.blurWrapper();
|
|
518
541
|
}
|
|
519
542
|
}
|
|
543
|
+
constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
|
|
544
|
+
super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
|
|
545
|
+
this.localization = localization;
|
|
546
|
+
this.renderer = renderer;
|
|
547
|
+
this._itemClick = this.itemClick;
|
|
548
|
+
this._blur = this.onBlur;
|
|
549
|
+
this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
|
|
550
|
+
if (this.active) {
|
|
551
|
+
this._active = false;
|
|
552
|
+
}
|
|
553
|
+
if (this.activeArrow) {
|
|
554
|
+
this.activeArrow = false;
|
|
555
|
+
}
|
|
556
|
+
});
|
|
557
|
+
}
|
|
520
558
|
/**
|
|
521
559
|
* Returns the current open state of the popup.
|
|
522
560
|
*/
|
|
@@ -559,26 +597,26 @@ export class SplitButtonComponent extends ListButton {
|
|
|
559
597
|
}
|
|
560
598
|
}
|
|
561
599
|
}
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
}
|
|
578
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
600
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
|
|
602
|
+
FocusService,
|
|
603
|
+
NavigationService,
|
|
604
|
+
NAVIGATION_SETTINGS_PROVIDER,
|
|
605
|
+
LocalizationService,
|
|
606
|
+
{
|
|
607
|
+
provide: L10N_PREFIX,
|
|
608
|
+
useValue: 'kendo.splitbutton'
|
|
609
|
+
},
|
|
610
|
+
PopupContainerService,
|
|
611
|
+
{
|
|
612
|
+
provide: MultiTabStop,
|
|
613
|
+
useExisting: forwardRef(() => SplitButtonComponent)
|
|
614
|
+
}
|
|
615
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
579
616
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
580
617
|
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
581
|
-
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
618
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
619
|
+
>
|
|
582
620
|
</ng-container>
|
|
583
621
|
<button
|
|
584
622
|
kendoButton
|
|
@@ -606,8 +644,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
606
644
|
[attr.aria-label]="ariaLabel"
|
|
607
645
|
>
|
|
608
646
|
<span *ngIf="text" class="k-button-text">
|
|
609
|
-
{{ text }}
|
|
610
|
-
</span><ng-content></ng-content>
|
|
647
|
+
{{ text }} </span><ng-content></ng-content>
|
|
611
648
|
</button>
|
|
612
649
|
<button kendoButton #arrowButton type="button"
|
|
613
650
|
class="k-split-button-arrow"
|
|
@@ -642,8 +679,9 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
642
679
|
</kendo-button-list>
|
|
643
680
|
</ng-template>
|
|
644
681
|
<ng-container #container></ng-container>
|
|
645
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
646
|
-
|
|
682
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
|
|
683
|
+
}
|
|
684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
647
685
|
type: Component,
|
|
648
686
|
args: [{
|
|
649
687
|
exportAs: 'kendoSplitButton',
|
|
@@ -666,7 +704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
666
704
|
template: `
|
|
667
705
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
668
706
|
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
669
|
-
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
707
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
708
|
+
>
|
|
670
709
|
</ng-container>
|
|
671
710
|
<button
|
|
672
711
|
kendoButton
|
|
@@ -694,8 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
694
733
|
[attr.aria-label]="ariaLabel"
|
|
695
734
|
>
|
|
696
735
|
<span *ngIf="text" class="k-button-text">
|
|
697
|
-
{{ text }}
|
|
698
|
-
</span><ng-content></ng-content>
|
|
736
|
+
{{ text }} </span><ng-content></ng-content>
|
|
699
737
|
</button>
|
|
700
738
|
<button kendoButton #arrowButton type="button"
|
|
701
739
|
class="k-split-button-arrow"
|
|
@@ -764,8 +802,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
764
802
|
type: Input
|
|
765
803
|
}], data: [{
|
|
766
804
|
type: Input
|
|
767
|
-
}], buttonClass: [{
|
|
768
|
-
type: Input
|
|
769
805
|
}], arrowButtonClass: [{
|
|
770
806
|
type: Input
|
|
771
807
|
}], arrowButtonIcon: [{
|
|
@@ -791,18 +827,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
791
827
|
}], itemTemplate: [{
|
|
792
828
|
type: ContentChild,
|
|
793
829
|
args: [ButtonItemTemplateDirective]
|
|
794
|
-
}], button: [{
|
|
795
|
-
type: ViewChild,
|
|
796
|
-
args: ['button', { read: ElementRef }]
|
|
797
|
-
}], arrowButton: [{
|
|
798
|
-
type: ViewChild,
|
|
799
|
-
args: ['arrowButton', { read: ElementRef }]
|
|
800
|
-
}], popupTemplate: [{
|
|
801
|
-
type: ViewChild,
|
|
802
|
-
args: ['popupTemplate']
|
|
803
|
-
}], containerRef: [{
|
|
804
|
-
type: ViewChild,
|
|
805
|
-
args: ['container', { read: ViewContainerRef }]
|
|
806
830
|
}], isFocused: [{
|
|
807
831
|
type: HostBinding,
|
|
808
832
|
args: ['class.k-focus']
|
|
@@ -20,11 +20,11 @@ import * as i2 from "./localization/custom-messages.component";
|
|
|
20
20
|
* - `SplitButtonCustomMessagesComponent`—The SplitButton custom messages component class.
|
|
21
21
|
*/
|
|
22
22
|
export class SplitButtonModule {
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
24
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, imports: [i1.SplitButtonComponent, i2.SplitButtonCustomMessagesComponent], exports: [i1.SplitButtonComponent, i2.SplitButtonCustomMessagesComponent] });
|
|
25
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.SplitButtonComponent] });
|
|
23
26
|
}
|
|
24
|
-
|
|
25
|
-
SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, imports: [i1.SplitButtonComponent, i2.SplitButtonCustomMessagesComponent], exports: [i1.SplitButtonComponent, i2.SplitButtonCustomMessagesComponent] });
|
|
26
|
-
SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [KENDO_SPLITBUTTON] });
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, decorators: [{
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, decorators: [{
|
|
28
28
|
type: NgModule,
|
|
29
29
|
args: [{
|
|
30
30
|
exports: [...KENDO_SPLITBUTTON],
|
|
@@ -93,3 +93,9 @@ export const getThemeColorClasses = (componentType, prevFillMode, fillMode, prev
|
|
|
93
93
|
toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
|
|
94
94
|
};
|
|
95
95
|
};
|
|
96
|
+
/**
|
|
97
|
+
* @hidden
|
|
98
|
+
*
|
|
99
|
+
* Checks for an empty object - {}
|
|
100
|
+
*/
|
|
101
|
+
export const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
|