@progress/kendo-angular-buttons 17.0.0-develop.20 → 17.0.0-develop.22
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/button/button.component.d.ts +1 -1
- package/button/selection-settings.d.ts +1 -1
- package/buttongroup/buttongroup.component.d.ts +1 -1
- package/chip/chip-list.component.d.ts +1 -1
- package/chip/chip.component.d.ts +1 -1
- 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 +2 -9
- package/{esm2020 → esm2022}/button/button.component.mjs +63 -49
- 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 +76 -51
- 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 +55 -45
- package/{esm2020 → esm2022}/chip/chip.component.mjs +123 -70
- package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +109 -111
- 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/{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 +189 -182
- package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
- package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1246 -1013
- 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/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 +3 -16
- package/esm2020/splitbutton/localization/messages.mjs +0 -23
- package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5560
- /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 → esm2022}/chip/models/avatar-settings.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/models/selection.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/arrow-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/fillmode.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/rounded.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/size.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/styling-classes.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models.mjs +0 -0
- /package/{esm2020 → esm2022}/direction.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/models/align.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/models/item-animation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/models/item-click.event.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/models/item.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/models/offset.mjs +0 -0
- /package/{esm2020 → 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 → esm2022}/listbutton/list-item-model.mjs +0 -0
- /package/{esm2020 → esm2022}/listbutton/popup-settings.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
- /package/{esm2020 → esm2022}/util.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,11 @@ 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;
|
|
335
349
|
set isFocused(value) {
|
|
336
350
|
this._isFocused = value;
|
|
337
351
|
}
|
|
@@ -425,7 +439,7 @@ export class SplitButtonComponent extends ListButton {
|
|
|
425
439
|
* @hidden
|
|
426
440
|
*/
|
|
427
441
|
ngAfterViewInit() {
|
|
428
|
-
this.containerService.container = this.
|
|
442
|
+
this.containerService.container = this.container;
|
|
429
443
|
this.containerService.template = this.popupTemplate;
|
|
430
444
|
this.updateButtonText();
|
|
431
445
|
this.handleClasses(this.rounded, 'rounded');
|
|
@@ -517,6 +531,13 @@ export class SplitButtonComponent extends ListButton {
|
|
|
517
531
|
this.blurWrapper();
|
|
518
532
|
}
|
|
519
533
|
}
|
|
534
|
+
constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
|
|
535
|
+
super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
|
|
536
|
+
this.localization = localization;
|
|
537
|
+
this.renderer = renderer;
|
|
538
|
+
this._itemClick = this.itemClick;
|
|
539
|
+
this._blur = this.onBlur;
|
|
540
|
+
}
|
|
520
541
|
/**
|
|
521
542
|
* Returns the current open state of the popup.
|
|
522
543
|
*/
|
|
@@ -559,23 +580,22 @@ export class SplitButtonComponent extends ListButton {
|
|
|
559
580
|
}
|
|
560
581
|
}
|
|
561
582
|
}
|
|
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: `
|
|
583
|
+
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 });
|
|
584
|
+
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: [
|
|
585
|
+
FocusService,
|
|
586
|
+
NavigationService,
|
|
587
|
+
NAVIGATION_SETTINGS_PROVIDER,
|
|
588
|
+
LocalizationService,
|
|
589
|
+
{
|
|
590
|
+
provide: L10N_PREFIX,
|
|
591
|
+
useValue: 'kendo.splitbutton'
|
|
592
|
+
},
|
|
593
|
+
PopupContainerService,
|
|
594
|
+
{
|
|
595
|
+
provide: MultiTabStop,
|
|
596
|
+
useExisting: forwardRef(() => SplitButtonComponent)
|
|
597
|
+
}
|
|
598
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
579
599
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
580
600
|
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
581
601
|
splitButtonLabel="{{ '{buttonText} splitbutton' }}">
|
|
@@ -643,7 +663,8 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
643
663
|
</ng-template>
|
|
644
664
|
<ng-container #container></ng-container>
|
|
645
665
|
`, 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"] }] });
|
|
646
|
-
|
|
666
|
+
}
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
647
668
|
type: Component,
|
|
648
669
|
args: [{
|
|
649
670
|
exportAs: 'kendoSplitButton',
|
|
@@ -764,8 +785,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
764
785
|
type: Input
|
|
765
786
|
}], data: [{
|
|
766
787
|
type: Input
|
|
767
|
-
}], buttonClass: [{
|
|
768
|
-
type: Input
|
|
769
788
|
}], arrowButtonClass: [{
|
|
770
789
|
type: Input
|
|
771
790
|
}], arrowButtonIcon: [{
|
|
@@ -791,18 +810,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
791
810
|
}], itemTemplate: [{
|
|
792
811
|
type: ContentChild,
|
|
793
812
|
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
813
|
}], isFocused: [{
|
|
807
814
|
type: HostBinding,
|
|
808
815
|
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],
|