@progress/kendo-angular-buttons 17.0.0-develop.3 → 17.0.0-develop.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -106
- package/button/button.component.d.ts +3 -9
- package/button/selection-settings.d.ts +1 -1
- package/buttongroup/buttongroup.component.d.ts +2 -2
- package/chip/chip-list.component.d.ts +4 -4
- package/chip/chip.component.d.ts +4 -7
- package/chip/models/avatar-settings.interface.d.ts +33 -0
- package/chip/models/selection.d.ts +1 -1
- package/common/models/fillmode.d.ts +2 -2
- package/common/models/rounded.d.ts +2 -2
- package/common/models/size.d.ts +3 -3
- package/common/models/theme-color.d.ts +2 -2
- package/direction.d.ts +1 -1
- package/dropdownbutton/dropdownbutton.component.d.ts +7 -10
- package/{esm2020 → esm2022}/button/button.component.mjs +80 -108
- package/{esm2020 → esm2022}/button/button.module.mjs +4 -4
- package/{esm2020 → esm2022}/button/button.service.mjs +5 -7
- package/{esm2020 → esm2022}/buttongroup/buttongroup.component.mjs +79 -56
- package/{esm2020 → esm2022}/buttongroup/buttongroup.module.mjs +4 -4
- package/{esm2020 → esm2022}/buttons.module.mjs +4 -4
- package/{esm2020 → esm2022}/chip/chip-list.component.mjs +58 -48
- package/{esm2020 → esm2022}/chip/chip.component.mjs +155 -93
- package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +130 -118
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/dial-item.component.mjs +21 -11
- package/{esm2020 → esm2022}/floatingactionbutton/dial-list.component.mjs +16 -11
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.component.mjs +145 -102
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/templates/dial-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/floatingactionbutton/templates/fab-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/focusable/focus.service.mjs +5 -6
- package/{esm2020 → esm2022}/focusable/focusable.directive.mjs +8 -4
- package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/listbutton/container.service.mjs +5 -3
- package/{esm2020 → esm2022}/listbutton/list-button.mjs +88 -51
- package/{esm2020 → esm2022}/listbutton/list.component.mjs +13 -10
- package/{esm2020 → esm2022}/listbutton/list.module.mjs +8 -8
- package/esm2022/listbutton/popup-settings.mjs +5 -0
- package/{esm2020 → esm2022}/navigation/navigation.service.mjs +12 -11
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/preventable-event.mjs +1 -3
- package/{esm2020 → esm2022}/splitbutton/localization/custom-messages.component.mjs +7 -6
- package/{esm2020 → esm2022}/splitbutton/localization/localized-messages.directive.mjs +9 -8
- package/esm2022/splitbutton/localization/messages.mjs +45 -0
- package/{esm2020 → esm2022}/splitbutton/splitbutton.component.mjs +213 -189
- package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/util.mjs +6 -0
- package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1324 -1089
- package/floatingactionbutton/dial-item.component.d.ts +1 -1
- package/floatingactionbutton/dial-list.component.d.ts +1 -1
- package/floatingactionbutton/floatingactionbutton.component.d.ts +1 -1
- package/floatingactionbutton/models/position-mode.d.ts +1 -1
- package/focusable/focusable.directive.d.ts +1 -1
- package/index.d.ts +1 -0
- package/listbutton/list-button.d.ts +9 -4
- package/listbutton/list.component.d.ts +1 -1
- package/package.json +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/splitbutton/localization/messages.mjs +0 -23
- package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5589
- /package/{esm2020 → esm2022}/button/selection-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-content-click-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-list-remove-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-remove-event-args.interface.mjs +0 -0
- /package/{esm2020/chip/models/selection.mjs → esm2022/chip/models/avatar-settings.interface.mjs} +0 -0
- /package/{esm2020/common/models/arrow-settings.mjs → esm2022/chip/models/selection.mjs} +0 -0
- /package/{esm2020/common/models/fillmode.mjs → esm2022/common/models/arrow-settings.mjs} +0 -0
- /package/{esm2020/common/models/rounded.mjs → esm2022/common/models/fillmode.mjs} +0 -0
- /package/{esm2020/common/models/size.mjs → esm2022/common/models/rounded.mjs} +0 -0
- /package/{esm2020/common/models/styling-classes.mjs → esm2022/common/models/size.mjs} +0 -0
- /package/{esm2020/common/models/theme-color.mjs → esm2022/common/models/styling-classes.mjs} +0 -0
- /package/{esm2020/direction.mjs → esm2022/common/models/theme-color.mjs} +0 -0
- /package/{esm2020 → esm2022}/common/models.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/align.mjs → esm2022/direction.mjs} +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/item-animation.interface.mjs → esm2022/floatingactionbutton/models/align.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item-click.event.mjs → esm2022/floatingactionbutton/models/item-animation.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item.interface.mjs → esm2022/floatingactionbutton/models/item-click.event.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/offset.mjs → esm2022/floatingactionbutton/models/item.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/position-mode.mjs → esm2022/floatingactionbutton/models/offset.mjs} +0 -0
- /package/{esm2020/listbutton/list-item-model.mjs → esm2022/floatingactionbutton/models/position-mode.mjs} +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/utils.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020/listbutton/popup-settings.mjs → esm2022/listbutton/list-item-model.mjs} +0 -0
- /package/{esm2020 → esm2022}/navigation/key-events.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-action.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-config.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-buttons.mjs +0 -0
|
@@ -2,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,26 @@ 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
|
+
this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
|
|
276
|
+
if (this.active) {
|
|
277
|
+
this._active = false;
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
}
|
|
268
281
|
ngAfterViewInit() {
|
|
269
282
|
this.containerService.container = this.container;
|
|
270
283
|
this.containerService.template = this.popupTemplate;
|
|
271
284
|
this.handleButtonAttributes(this.buttonAttributes);
|
|
285
|
+
const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
|
|
286
|
+
if (arrowWrapper) {
|
|
287
|
+
this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
|
|
288
|
+
}
|
|
272
289
|
}
|
|
273
290
|
/**
|
|
274
291
|
* @hidden
|
|
@@ -306,23 +323,31 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
306
323
|
}
|
|
307
324
|
}
|
|
308
325
|
}
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
326
|
+
/**
|
|
327
|
+
* @hidden
|
|
328
|
+
*/
|
|
329
|
+
ngOnDestroy() {
|
|
330
|
+
if (this.documentMouseUpSub) {
|
|
331
|
+
this.documentMouseUpSub();
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
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 });
|
|
335
|
+
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: [
|
|
336
|
+
FocusService,
|
|
337
|
+
NavigationService,
|
|
338
|
+
NAVIGATION_SETTINGS_PROVIDER,
|
|
339
|
+
LocalizationService,
|
|
340
|
+
{
|
|
341
|
+
provide: L10N_PREFIX,
|
|
342
|
+
useValue: 'kendo.dropdownbutton'
|
|
343
|
+
},
|
|
344
|
+
PopupContainerService
|
|
345
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
|
|
322
346
|
<button kendoButton #button
|
|
323
347
|
type="button"
|
|
324
348
|
[id]="buttonId"
|
|
325
349
|
[tabindex]="componentTabIndex"
|
|
350
|
+
class="k-menu-button"
|
|
326
351
|
[class.k-active]="active"
|
|
327
352
|
[disabled]="disabled"
|
|
328
353
|
[icon]="icon"
|
|
@@ -361,8 +386,9 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
361
386
|
</kendo-button-list>
|
|
362
387
|
</ng-template>
|
|
363
388
|
<ng-container #container></ng-container>
|
|
364
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
365
|
-
|
|
389
|
+
`, 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"] }] });
|
|
390
|
+
}
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
|
|
366
392
|
type: Component,
|
|
367
393
|
args: [{
|
|
368
394
|
exportAs: 'kendoDropDownButton',
|
|
@@ -383,6 +409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
383
409
|
type="button"
|
|
384
410
|
[id]="buttonId"
|
|
385
411
|
[tabindex]="componentTabIndex"
|
|
412
|
+
class="k-menu-button"
|
|
386
413
|
[class.k-active]="active"
|
|
387
414
|
[disabled]="disabled"
|
|
388
415
|
[icon]="icon"
|
|
@@ -460,27 +487,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
460
487
|
}], focused: [{
|
|
461
488
|
type: HostBinding,
|
|
462
489
|
args: ['class.k-focus']
|
|
463
|
-
}], widgetClasses: [{
|
|
464
|
-
type: HostBinding,
|
|
465
|
-
args: ['class.k-dropdown-button']
|
|
466
490
|
}], dir: [{
|
|
467
491
|
type: HostBinding,
|
|
468
492
|
args: ['attr.dir']
|
|
469
493
|
}], itemTemplate: [{
|
|
470
494
|
type: ContentChild,
|
|
471
495
|
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
496
|
}], keydown: [{
|
|
485
497
|
type: HostListener,
|
|
486
498
|
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
|