@progress/kendo-angular-buttons 17.0.0-develop.8 → 17.0.0
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 +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 +8 -7
- package/chip/chip.component.d.ts +8 -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 +2 -6
- 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 +63 -52
- 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 +64 -48
- package/{esm2020 → esm2022}/chip/chip.component.mjs +160 -93
- package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +125 -117
- 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}/index.mjs +0 -1
- 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/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 +214 -188
- package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/util.mjs +6 -0
- package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1317 -1056
- 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 -1
- package/listbutton/list-button.d.ts +9 -4
- package/listbutton/list.component.d.ts +1 -1
- package/package.json +15 -21
- package/schematics/ngAdd/index.js +1 -1
- package/splitbutton/localization/messages.d.ts +1 -1
- package/splitbutton/splitbutton.component.d.ts +8 -16
- package/util.d.ts +6 -0
- package/esm2020/listbutton/list.module.mjs +0 -33
- package/esm2020/splitbutton/localization/messages.mjs +0 -23
- package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5551
- package/listbutton/list.module.d.ts +0 -13
- /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/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,23 @@ 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
|
+
zone.runOutsideAngular(() => {
|
|
550
|
+
this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
|
|
551
|
+
if (this.active) {
|
|
552
|
+
zone.run(() => this._active = false);
|
|
553
|
+
}
|
|
554
|
+
if (this.activeArrow) {
|
|
555
|
+
zone.run(() => this.activeArrow = false);
|
|
556
|
+
}
|
|
557
|
+
});
|
|
558
|
+
});
|
|
559
|
+
}
|
|
520
560
|
/**
|
|
521
561
|
* Returns the current open state of the popup.
|
|
522
562
|
*/
|
|
@@ -559,26 +599,26 @@ export class SplitButtonComponent extends ListButton {
|
|
|
559
599
|
}
|
|
560
600
|
}
|
|
561
601
|
}
|
|
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: `
|
|
602
|
+
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 });
|
|
603
|
+
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: [
|
|
604
|
+
FocusService,
|
|
605
|
+
NavigationService,
|
|
606
|
+
NAVIGATION_SETTINGS_PROVIDER,
|
|
607
|
+
LocalizationService,
|
|
608
|
+
{
|
|
609
|
+
provide: L10N_PREFIX,
|
|
610
|
+
useValue: 'kendo.splitbutton'
|
|
611
|
+
},
|
|
612
|
+
PopupContainerService,
|
|
613
|
+
{
|
|
614
|
+
provide: MultiTabStop,
|
|
615
|
+
useExisting: forwardRef(() => SplitButtonComponent)
|
|
616
|
+
}
|
|
617
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
579
618
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
580
619
|
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
581
|
-
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
620
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
621
|
+
>
|
|
582
622
|
</ng-container>
|
|
583
623
|
<button
|
|
584
624
|
kendoButton
|
|
@@ -606,8 +646,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
606
646
|
[attr.aria-label]="ariaLabel"
|
|
607
647
|
>
|
|
608
648
|
<span *ngIf="text" class="k-button-text">
|
|
609
|
-
{{ text }}
|
|
610
|
-
</span><ng-content></ng-content>
|
|
649
|
+
{{ text }} </span><ng-content></ng-content>
|
|
611
650
|
</button>
|
|
612
651
|
<button kendoButton #arrowButton type="button"
|
|
613
652
|
class="k-split-button-arrow"
|
|
@@ -643,7 +682,8 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
643
682
|
</ng-template>
|
|
644
683
|
<ng-container #container></ng-container>
|
|
645
684
|
`, 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
|
-
|
|
685
|
+
}
|
|
686
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
|
|
647
687
|
type: Component,
|
|
648
688
|
args: [{
|
|
649
689
|
exportAs: 'kendoSplitButton',
|
|
@@ -666,7 +706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
666
706
|
template: `
|
|
667
707
|
<ng-container kendoSplitButtonLocalizedMessages
|
|
668
708
|
i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
|
|
669
|
-
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
709
|
+
splitButtonLabel="{{ '{buttonText} splitbutton' }}"
|
|
710
|
+
>
|
|
670
711
|
</ng-container>
|
|
671
712
|
<button
|
|
672
713
|
kendoButton
|
|
@@ -694,8 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
694
735
|
[attr.aria-label]="ariaLabel"
|
|
695
736
|
>
|
|
696
737
|
<span *ngIf="text" class="k-button-text">
|
|
697
|
-
{{ text }}
|
|
698
|
-
</span><ng-content></ng-content>
|
|
738
|
+
{{ text }} </span><ng-content></ng-content>
|
|
699
739
|
</button>
|
|
700
740
|
<button kendoButton #arrowButton type="button"
|
|
701
741
|
class="k-split-button-arrow"
|
|
@@ -764,8 +804,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
764
804
|
type: Input
|
|
765
805
|
}], data: [{
|
|
766
806
|
type: Input
|
|
767
|
-
}], buttonClass: [{
|
|
768
|
-
type: Input
|
|
769
807
|
}], arrowButtonClass: [{
|
|
770
808
|
type: Input
|
|
771
809
|
}], arrowButtonIcon: [{
|
|
@@ -791,18 +829,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
791
829
|
}], itemTemplate: [{
|
|
792
830
|
type: ContentChild,
|
|
793
831
|
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
832
|
}], isFocused: [{
|
|
807
833
|
type: HostBinding,
|
|
808
834
|
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;
|