@progress/kendo-angular-buttons 17.0.0-develop.4 → 17.0.0-develop.41
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 -111
- 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 +132 -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}/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 +215 -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 +1315 -1103
- 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/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 -5589
- 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,10 +2,10 @@
|
|
|
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, ContentChild,
|
|
5
|
+
import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
|
-
import { isDocumentAvailable,
|
|
8
|
+
import { isDocumentAvailable, Keys, isPresent } from '@progress/kendo-angular-common';
|
|
9
9
|
import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
|
|
10
10
|
import { closest } from '../util';
|
|
11
11
|
import { ListButton } from '../listbutton/list-button';
|
|
@@ -59,89 +59,34 @@ const DEFAULT_FILL_MODE = 'solid';
|
|
|
59
59
|
* ```
|
|
60
60
|
*/
|
|
61
61
|
export class DropDownButtonComponent extends ListButton {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
* * `large`
|
|
91
|
-
* * `none`
|
|
92
|
-
*/
|
|
93
|
-
this.size = 'medium';
|
|
94
|
-
/**
|
|
95
|
-
* The rounded property specifies the border radius of the DropDownButton
|
|
96
|
-
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
|
|
97
|
-
*
|
|
98
|
-
* The possible values are:
|
|
99
|
-
* * `small`
|
|
100
|
-
* * `medium` (default)
|
|
101
|
-
* * `large`
|
|
102
|
-
* * `full`
|
|
103
|
-
* * `none`
|
|
104
|
-
*/
|
|
105
|
-
this.rounded = 'medium';
|
|
106
|
-
/**
|
|
107
|
-
* The DropDownButton allows you to specify predefined theme colors.
|
|
108
|
-
* The theme color will be applied as a background and border color while also amending the text color accordingly
|
|
109
|
-
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
|
|
110
|
-
*
|
|
111
|
-
* The possible values are:
|
|
112
|
-
* * `base` —Applies coloring based on the `base` theme color. (default)
|
|
113
|
-
* * `primary` —Applies coloring based on the `primary` theme color.
|
|
114
|
-
* * `secondary`—Applies coloring based on the `secondary` theme color.
|
|
115
|
-
* * `tertiary`— Applies coloring based on the `tertiary` theme color.
|
|
116
|
-
* * `info`—Applies coloring based on the `info` theme color.
|
|
117
|
-
* * `success`— Applies coloring based on the `success` theme color.
|
|
118
|
-
* * `warning`— Applies coloring based on the `warning` theme color.
|
|
119
|
-
* * `error`— Applies coloring based on the `error` theme color.
|
|
120
|
-
* * `dark`— Applies coloring based on the `dark` theme color.
|
|
121
|
-
* * `light`— Applies coloring based on the `light` theme color.
|
|
122
|
-
* * `inverse`— Applies coloring based on the `inverse` theme color.
|
|
123
|
-
* * `none` —Removes the default CSS class (no class would be rendered).
|
|
124
|
-
*/
|
|
125
|
-
this.themeColor = 'base';
|
|
126
|
-
/**
|
|
127
|
-
* Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
|
|
128
|
-
*/
|
|
129
|
-
this.itemClick = new EventEmitter();
|
|
130
|
-
/**
|
|
131
|
-
* Fires each time the DropDownButton gets focused.
|
|
132
|
-
*/
|
|
133
|
-
this.onFocus = new EventEmitter();
|
|
134
|
-
/**
|
|
135
|
-
* Fires each time the DropDownButton gets blurred.
|
|
136
|
-
*/
|
|
137
|
-
this.onBlur = new EventEmitter();
|
|
138
|
-
this.listId = guid();
|
|
139
|
-
this.buttonId = guid();
|
|
140
|
-
this._fillMode = DEFAULT_FILL_MODE;
|
|
141
|
-
this._buttonAttributes = null;
|
|
142
|
-
this._itemClick = this.itemClick;
|
|
143
|
-
this._blur = this.onBlur;
|
|
144
|
-
}
|
|
62
|
+
containerService;
|
|
63
|
+
renderer;
|
|
64
|
+
/**
|
|
65
|
+
* Allows showing the default arrow icon or providing alternative one instead.
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
arrowIcon = false;
|
|
69
|
+
/**
|
|
70
|
+
* Defines the name of an existing icon in the Kendo UI theme.
|
|
71
|
+
*/
|
|
72
|
+
icon = '';
|
|
73
|
+
/**
|
|
74
|
+
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button.
|
|
75
|
+
*/
|
|
76
|
+
svgIcon;
|
|
77
|
+
/**
|
|
78
|
+
* Defines the list of CSS classes which are used for styling the Button with custom icons.
|
|
79
|
+
*/
|
|
80
|
+
iconClass = '';
|
|
81
|
+
/**
|
|
82
|
+
* Defines a URL for styling the button with a custom image.
|
|
83
|
+
*/
|
|
84
|
+
imageUrl = '';
|
|
85
|
+
/**
|
|
86
|
+
* Sets the data item field that represents the item text.
|
|
87
|
+
* If the data contains only primitive values, do not define it.
|
|
88
|
+
*/
|
|
89
|
+
textField;
|
|
145
90
|
/**
|
|
146
91
|
* Sets or gets the data of the DropDownButton.
|
|
147
92
|
*
|
|
@@ -153,6 +98,29 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
153
98
|
get data() {
|
|
154
99
|
return this._data;
|
|
155
100
|
}
|
|
101
|
+
/**
|
|
102
|
+
* The size property specifies the padding of the DropDownButton
|
|
103
|
+
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
|
|
104
|
+
*
|
|
105
|
+
* The possible values are:
|
|
106
|
+
* * `small`
|
|
107
|
+
* * `medium` (default)
|
|
108
|
+
* * `large`
|
|
109
|
+
* * `none`
|
|
110
|
+
*/
|
|
111
|
+
size = 'medium';
|
|
112
|
+
/**
|
|
113
|
+
* The rounded property specifies the border radius of the DropDownButton
|
|
114
|
+
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
|
|
115
|
+
*
|
|
116
|
+
* The possible values are:
|
|
117
|
+
* * `small`
|
|
118
|
+
* * `medium` (default)
|
|
119
|
+
* * `large`
|
|
120
|
+
* * `full`
|
|
121
|
+
* * `none`
|
|
122
|
+
*/
|
|
123
|
+
rounded = 'medium';
|
|
156
124
|
/**
|
|
157
125
|
* The fillMode property specifies the background and border styles of the DropDownButton
|
|
158
126
|
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
|
|
@@ -170,6 +138,26 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
170
138
|
get fillMode() {
|
|
171
139
|
return this._fillMode;
|
|
172
140
|
}
|
|
141
|
+
/**
|
|
142
|
+
* The DropDownButton allows you to specify predefined theme colors.
|
|
143
|
+
* The theme color will be applied as a background and border color while also amending the text color accordingly
|
|
144
|
+
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
|
|
145
|
+
*
|
|
146
|
+
* The possible values are:
|
|
147
|
+
* * `base` —Applies coloring based on the `base` theme color. (default)
|
|
148
|
+
* * `primary` —Applies coloring based on the `primary` theme color.
|
|
149
|
+
* * `secondary`—Applies coloring based on the `secondary` theme color.
|
|
150
|
+
* * `tertiary`— Applies coloring based on the `tertiary` theme color.
|
|
151
|
+
* * `info`—Applies coloring based on the `info` theme color.
|
|
152
|
+
* * `success`— Applies coloring based on the `success` theme color.
|
|
153
|
+
* * `warning`— Applies coloring based on the `warning` theme color.
|
|
154
|
+
* * `error`— Applies coloring based on the `error` theme color.
|
|
155
|
+
* * `dark`— Applies coloring based on the `dark` theme color.
|
|
156
|
+
* * `light`— Applies coloring based on the `light` theme color.
|
|
157
|
+
* * `inverse`— Applies coloring based on the `inverse` theme color.
|
|
158
|
+
* * `none` —Removes the default CSS class (no class would be rendered).
|
|
159
|
+
*/
|
|
160
|
+
themeColor = 'base';
|
|
173
161
|
/**
|
|
174
162
|
* Sets attributes to the main button.
|
|
175
163
|
*/
|
|
@@ -181,12 +169,21 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
181
169
|
get buttonAttributes() {
|
|
182
170
|
return this._buttonAttributes;
|
|
183
171
|
}
|
|
172
|
+
/**
|
|
173
|
+
* Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
|
|
174
|
+
*/
|
|
175
|
+
itemClick = new EventEmitter();
|
|
176
|
+
/**
|
|
177
|
+
* Fires each time the DropDownButton gets focused.
|
|
178
|
+
*/
|
|
179
|
+
onFocus = new EventEmitter();
|
|
180
|
+
/**
|
|
181
|
+
* Fires each time the DropDownButton gets blurred.
|
|
182
|
+
*/
|
|
183
|
+
onBlur = new EventEmitter();
|
|
184
184
|
get focused() {
|
|
185
185
|
return this._isFocused && !this._disabled;
|
|
186
186
|
}
|
|
187
|
-
get widgetClasses() {
|
|
188
|
-
return true;
|
|
189
|
-
}
|
|
190
187
|
get dir() {
|
|
191
188
|
return this.direction;
|
|
192
189
|
}
|
|
@@ -196,6 +193,10 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
196
193
|
get active() {
|
|
197
194
|
return this._active;
|
|
198
195
|
}
|
|
196
|
+
itemTemplate;
|
|
197
|
+
_fillMode = DEFAULT_FILL_MODE;
|
|
198
|
+
_buttonAttributes = null;
|
|
199
|
+
documentMouseUpSub;
|
|
199
200
|
/**
|
|
200
201
|
* @hidden
|
|
201
202
|
*/
|
|
@@ -265,10 +266,28 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
265
266
|
this.blurWrapper();
|
|
266
267
|
}
|
|
267
268
|
}
|
|
269
|
+
constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
|
|
270
|
+
super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
|
|
271
|
+
this.containerService = containerService;
|
|
272
|
+
this.renderer = renderer;
|
|
273
|
+
this._itemClick = this.itemClick;
|
|
274
|
+
this._blur = this.onBlur;
|
|
275
|
+
zone.runOutsideAngular(() => {
|
|
276
|
+
this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
|
|
277
|
+
if (this.active) {
|
|
278
|
+
zone.run(() => this._active = false);
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
});
|
|
282
|
+
}
|
|
268
283
|
ngAfterViewInit() {
|
|
269
284
|
this.containerService.container = this.container;
|
|
270
285
|
this.containerService.template = this.popupTemplate;
|
|
271
286
|
this.handleButtonAttributes(this.buttonAttributes);
|
|
287
|
+
const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
|
|
288
|
+
if (arrowWrapper) {
|
|
289
|
+
this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
|
|
290
|
+
}
|
|
272
291
|
}
|
|
273
292
|
/**
|
|
274
293
|
* @hidden
|
|
@@ -306,23 +325,31 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
306
325
|
}
|
|
307
326
|
}
|
|
308
327
|
}
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
328
|
+
/**
|
|
329
|
+
* @hidden
|
|
330
|
+
*/
|
|
331
|
+
ngOnDestroy() {
|
|
332
|
+
if (this.documentMouseUpSub) {
|
|
333
|
+
this.documentMouseUpSub();
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, 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: i5.PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
337
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
|
|
338
|
+
FocusService,
|
|
339
|
+
NavigationService,
|
|
340
|
+
NAVIGATION_SETTINGS_PROVIDER,
|
|
341
|
+
LocalizationService,
|
|
342
|
+
{
|
|
343
|
+
provide: L10N_PREFIX,
|
|
344
|
+
useValue: 'kendo.dropdownbutton'
|
|
345
|
+
},
|
|
346
|
+
PopupContainerService
|
|
347
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
|
|
322
348
|
<button kendoButton #button
|
|
323
349
|
type="button"
|
|
324
350
|
[id]="buttonId"
|
|
325
351
|
[tabindex]="componentTabIndex"
|
|
352
|
+
class="k-menu-button"
|
|
326
353
|
[class.k-active]="active"
|
|
327
354
|
[disabled]="disabled"
|
|
328
355
|
[icon]="icon"
|
|
@@ -361,8 +388,9 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
361
388
|
</kendo-button-list>
|
|
362
389
|
</ng-template>
|
|
363
390
|
<ng-container #container></ng-container>
|
|
364
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
365
|
-
|
|
391
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
|
|
392
|
+
}
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
|
|
366
394
|
type: Component,
|
|
367
395
|
args: [{
|
|
368
396
|
exportAs: 'kendoDropDownButton',
|
|
@@ -383,6 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
383
411
|
type="button"
|
|
384
412
|
[id]="buttonId"
|
|
385
413
|
[tabindex]="componentTabIndex"
|
|
414
|
+
class="k-menu-button"
|
|
386
415
|
[class.k-active]="active"
|
|
387
416
|
[disabled]="disabled"
|
|
388
417
|
[icon]="icon"
|
|
@@ -460,27 +489,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
460
489
|
}], focused: [{
|
|
461
490
|
type: HostBinding,
|
|
462
491
|
args: ['class.k-focus']
|
|
463
|
-
}], widgetClasses: [{
|
|
464
|
-
type: HostBinding,
|
|
465
|
-
args: ['class.k-dropdown-button']
|
|
466
492
|
}], dir: [{
|
|
467
493
|
type: HostBinding,
|
|
468
494
|
args: ['attr.dir']
|
|
469
495
|
}], itemTemplate: [{
|
|
470
496
|
type: ContentChild,
|
|
471
497
|
args: [ButtonItemTemplateDirective]
|
|
472
|
-
}], button: [{
|
|
473
|
-
type: ViewChild,
|
|
474
|
-
args: ['button', { read: ElementRef }]
|
|
475
|
-
}], buttonList: [{
|
|
476
|
-
type: ViewChild,
|
|
477
|
-
args: ['buttonList']
|
|
478
|
-
}], popupTemplate: [{
|
|
479
|
-
type: ViewChild,
|
|
480
|
-
args: ['popupTemplate']
|
|
481
|
-
}], container: [{
|
|
482
|
-
type: ViewChild,
|
|
483
|
-
args: ['container', { read: ViewContainerRef }]
|
|
484
498
|
}], keydown: [{
|
|
485
499
|
type: HostListener,
|
|
486
500
|
args: ['keydown', ['$event']]
|
|
@@ -20,11 +20,11 @@ import * as i2 from "../listbutton/button-item-template.directive";
|
|
|
20
20
|
* - `ButtonItemTemplateDirective`—The Button item template directive.
|
|
21
21
|
*/
|
|
22
22
|
export class DropDownButtonModule {
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
24
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, imports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective], exports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective] });
|
|
25
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.DropDownButtonComponent] });
|
|
23
26
|
}
|
|
24
|
-
|
|
25
|
-
DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, imports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective], exports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective] });
|
|
26
|
-
DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.DropDownButtonComponent] });
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, decorators: [{
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, decorators: [{
|
|
28
28
|
type: NgModule,
|
|
29
29
|
args: [{
|
|
30
30
|
exports: [...KENDO_DROPDOWNBUTTON],
|
|
@@ -12,13 +12,11 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
12
12
|
* @hidden
|
|
13
13
|
*/
|
|
14
14
|
export class DialItemComponent {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
this.role = 'menuitem';
|
|
21
|
-
}
|
|
15
|
+
element;
|
|
16
|
+
renderer;
|
|
17
|
+
localisationService;
|
|
18
|
+
hostClass = true;
|
|
19
|
+
role = 'menuitem';
|
|
22
20
|
get disabledClass() {
|
|
23
21
|
return this.item.disabled;
|
|
24
22
|
}
|
|
@@ -29,6 +27,18 @@ export class DialItemComponent {
|
|
|
29
27
|
get indexAttr() {
|
|
30
28
|
return this.index;
|
|
31
29
|
}
|
|
30
|
+
cssClass;
|
|
31
|
+
cssStyle;
|
|
32
|
+
isFocused;
|
|
33
|
+
index;
|
|
34
|
+
item;
|
|
35
|
+
dialItemTemplate;
|
|
36
|
+
align;
|
|
37
|
+
constructor(element, renderer, localisationService) {
|
|
38
|
+
this.element = element;
|
|
39
|
+
this.renderer = renderer;
|
|
40
|
+
this.localisationService = localisationService;
|
|
41
|
+
}
|
|
32
42
|
get iconClasses() {
|
|
33
43
|
const classes = [];
|
|
34
44
|
if (this.item.iconClass) {
|
|
@@ -59,9 +69,8 @@ export class DialItemComponent {
|
|
|
59
69
|
};
|
|
60
70
|
return directions[dir][align];
|
|
61
71
|
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
|
|
65
74
|
<ng-template *ngIf="dialItemTemplate"
|
|
66
75
|
[ngTemplateOutlet]="dialItemTemplate"
|
|
67
76
|
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
|
|
@@ -78,7 +87,8 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
78
87
|
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
79
88
|
</ng-container>
|
|
80
89
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
81
|
-
|
|
90
|
+
}
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, decorators: [{
|
|
82
92
|
type: Component,
|
|
83
93
|
args: [{
|
|
84
94
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -14,28 +14,32 @@ import * as i1 from "../focusable/focus.service";
|
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
16
|
export class DialListComponent {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
this.hostClass = true;
|
|
21
|
-
this.subscriptions = new Subscription();
|
|
22
|
-
this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
|
|
23
|
-
}
|
|
17
|
+
focusService;
|
|
18
|
+
cdr;
|
|
19
|
+
hostClass = true;
|
|
24
20
|
get bottomClass() {
|
|
25
21
|
return this.align.vertical === 'top' || this.align.vertical === 'middle';
|
|
26
22
|
}
|
|
27
23
|
get topClass() {
|
|
28
24
|
return this.align.vertical === 'bottom';
|
|
29
25
|
}
|
|
26
|
+
dialItems;
|
|
27
|
+
dialItemTemplate;
|
|
28
|
+
align;
|
|
29
|
+
subscriptions = new Subscription();
|
|
30
|
+
constructor(focusService, cdr) {
|
|
31
|
+
this.focusService = focusService;
|
|
32
|
+
this.cdr = cdr;
|
|
33
|
+
this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
|
|
34
|
+
}
|
|
30
35
|
isFocused(index) {
|
|
31
36
|
return this.focusService.isFocused(index);
|
|
32
37
|
}
|
|
33
38
|
ngOnDestroy() {
|
|
34
39
|
this.subscriptions.unsubscribe();
|
|
35
40
|
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
|
|
39
43
|
<ng-container *ngFor='let item of dialItems; let idx = index'>
|
|
40
44
|
<li
|
|
41
45
|
kendoButtonFocusable
|
|
@@ -51,7 +55,8 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
51
55
|
</li>
|
|
52
56
|
</ng-container>
|
|
53
57
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
54
|
-
|
|
58
|
+
}
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, decorators: [{
|
|
55
60
|
type: Component,
|
|
56
61
|
args: [{
|
|
57
62
|
// eslint-disable-next-line @angular-eslint/component-selector
|