@progress/kendo-angular-buttons 21.4.1-develop.1 → 22.0.0-develop.1
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/fesm2022/progress-kendo-angular-buttons.mjs +105 -105
- package/listbutton/list-button.d.ts +1 -1
- package/package.json +11 -19
- package/splitbutton/localization/messages.d.ts +1 -1
- package/esm2022/button/button-settings.mjs +0 -5
- package/esm2022/button/button.component.mjs +0 -558
- package/esm2022/button/button.module.mjs +0 -43
- package/esm2022/button/button.service.mjs +0 -22
- package/esm2022/button/selection-settings.mjs +0 -5
- package/esm2022/buttongroup/buttongroup.component.mjs +0 -340
- package/esm2022/buttongroup/buttongroup.module.mjs +0 -49
- package/esm2022/buttons.module.mjs +0 -58
- package/esm2022/chip/chip-content-click-event-args.interface.mjs +0 -5
- package/esm2022/chip/chip-list-remove-event-args.interface.mjs +0 -5
- package/esm2022/chip/chip-list.component.mjs +0 -360
- package/esm2022/chip/chip-remove-event-args.interface.mjs +0 -5
- package/esm2022/chip/chip.component.mjs +0 -585
- package/esm2022/chip/chip.module.mjs +0 -45
- package/esm2022/chip/models/avatar-settings.interface.mjs +0 -5
- package/esm2022/chip/models/selection.mjs +0 -5
- package/esm2022/common/models/arrow-settings.mjs +0 -5
- package/esm2022/common/models/fillmode.mjs +0 -5
- package/esm2022/common/models/rounded.mjs +0 -5
- package/esm2022/common/models/size.mjs +0 -5
- package/esm2022/common/models/styling-classes.mjs +0 -5
- package/esm2022/common/models/theme-color.mjs +0 -5
- package/esm2022/common/models.mjs +0 -10
- package/esm2022/direction.mjs +0 -5
- package/esm2022/directives.mjs +0 -176
- package/esm2022/dropdownbutton/dropdownbutton.component.mjs +0 -482
- package/esm2022/dropdownbutton/dropdownbutton.module.mjs +0 -50
- package/esm2022/floatingactionbutton/animations/animations.mjs +0 -33
- package/esm2022/floatingactionbutton/dial-item.component.mjs +0 -161
- package/esm2022/floatingactionbutton/dial-list.component.mjs +0 -98
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +0 -954
- package/esm2022/floatingactionbutton/floatingactionbutton.module.mjs +0 -47
- package/esm2022/floatingactionbutton/models/align.mjs +0 -5
- package/esm2022/floatingactionbutton/models/item-animation.interface.mjs +0 -5
- package/esm2022/floatingactionbutton/models/item-click.event.mjs +0 -5
- package/esm2022/floatingactionbutton/models/item.interface.mjs +0 -5
- package/esm2022/floatingactionbutton/models/offset.mjs +0 -5
- package/esm2022/floatingactionbutton/models/position-mode.mjs +0 -5
- package/esm2022/floatingactionbutton/templates/dial-item-template.directive.mjs +0 -37
- package/esm2022/floatingactionbutton/templates/fab-template.directive.mjs +0 -38
- package/esm2022/floatingactionbutton/utils.mjs +0 -38
- package/esm2022/focusable/focus.service.mjs +0 -38
- package/esm2022/focusable/focusable.directive.mjs +0 -67
- package/esm2022/index.mjs +0 -33
- package/esm2022/listbutton/button-item-template.directive.mjs +0 -47
- package/esm2022/listbutton/container.service.mjs +0 -18
- package/esm2022/listbutton/list-button.mjs +0 -461
- package/esm2022/listbutton/list-item-model.mjs +0 -5
- package/esm2022/listbutton/list.component.mjs +0 -177
- package/esm2022/listbutton/popup-settings.mjs +0 -5
- package/esm2022/navigation/key-events.mjs +0 -13
- package/esm2022/navigation/navigation-action.mjs +0 -20
- package/esm2022/navigation/navigation-config.mjs +0 -9
- package/esm2022/navigation/navigation.service.mjs +0 -111
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/preventable-event.mjs +0 -25
- package/esm2022/progress-kendo-angular-buttons.mjs +0 -8
- package/esm2022/speechtotextbutton/models/error-event.mjs +0 -5
- package/esm2022/speechtotextbutton/models/integration-mode.mjs +0 -5
- package/esm2022/speechtotextbutton/models/result-event.mjs +0 -5
- package/esm2022/speechtotextbutton/models/speechtotextbutton-settings.mjs +0 -5
- package/esm2022/speechtotextbutton/speechtotextbutton.component.mjs +0 -532
- package/esm2022/speechtotextbutton/speechtotextbutton.module.mjs +0 -31
- package/esm2022/splitbutton/localization/custom-messages.component.mjs +0 -40
- package/esm2022/splitbutton/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/splitbutton/localization/messages.mjs +0 -50
- package/esm2022/splitbutton/splitbutton.component.mjs +0 -761
- package/esm2022/splitbutton/splitbutton.module.mjs +0 -37
- package/esm2022/util.mjs +0 -108
|
@@ -1,585 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
|
|
6
|
-
import { Subscription } from 'rxjs';
|
|
7
|
-
import { isDocumentAvailable, Keys, normalizeKeys } from '@progress/kendo-angular-common';
|
|
8
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
|
-
import { packageMetadata } from '../package-metadata';
|
|
11
|
-
import { closest, getStylingClasses, getThemeColorClasses, isObjectEmpty } from '../util';
|
|
12
|
-
import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
13
|
-
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
14
|
-
import { NgStyle } from '@angular/common';
|
|
15
|
-
import * as i0 from "@angular/core";
|
|
16
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
17
|
-
const DEFAULT_SIZE = 'medium';
|
|
18
|
-
const DEFAULT_ROUNDED = 'medium';
|
|
19
|
-
const DEFAULT_THEME_COLOR = 'base';
|
|
20
|
-
const DEFAULT_FILL_MODE = 'solid';
|
|
21
|
-
/**
|
|
22
|
-
* Displays a Chip that represents an input, attribute, or action.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```html
|
|
26
|
-
* <kendo-chip label="Chip Label"></kendo-chip>
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
export class ChipComponent {
|
|
30
|
-
element;
|
|
31
|
-
renderer;
|
|
32
|
-
ngZone;
|
|
33
|
-
localizationService;
|
|
34
|
-
/**
|
|
35
|
-
* Sets the label text of the Chip.
|
|
36
|
-
*/
|
|
37
|
-
label;
|
|
38
|
-
/**
|
|
39
|
-
* Defines the name for an existing icon in a Kendo UI theme.
|
|
40
|
-
* The icon is rendered inside the Chip by a `span.k-icon` element.
|
|
41
|
-
*/
|
|
42
|
-
icon;
|
|
43
|
-
/**
|
|
44
|
-
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
|
|
45
|
-
* a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
|
|
46
|
-
*/
|
|
47
|
-
svgIcon;
|
|
48
|
-
/**
|
|
49
|
-
* Defines a CSS class, or multiple classes separated by spaces,
|
|
50
|
-
* applied to a `span` element. Use the `iconClass` to add custom icons.
|
|
51
|
-
*/
|
|
52
|
-
iconClass;
|
|
53
|
-
/**
|
|
54
|
-
* Use these settings to render an avatar within the Chip.
|
|
55
|
-
*/
|
|
56
|
-
avatarSettings;
|
|
57
|
-
/**
|
|
58
|
-
* Specifies the selected state of the Chip.
|
|
59
|
-
* @default false
|
|
60
|
-
*/
|
|
61
|
-
selected = false;
|
|
62
|
-
/**
|
|
63
|
-
* Specifies if the Chip is removable.
|
|
64
|
-
* If set to `true`, the Chip renders a remove icon.
|
|
65
|
-
* @default false
|
|
66
|
-
*/
|
|
67
|
-
removable = false;
|
|
68
|
-
/**
|
|
69
|
-
* Specifies a custom remove font icon class to render when the Chip is removable.
|
|
70
|
-
* [see example]({% slug icons %})
|
|
71
|
-
*/
|
|
72
|
-
removeIcon;
|
|
73
|
-
/**
|
|
74
|
-
* Specifies a custom remove SVG icon to render when the Chip is removable.
|
|
75
|
-
*/
|
|
76
|
-
removeSvgIcon;
|
|
77
|
-
/**
|
|
78
|
-
* @hidden
|
|
79
|
-
*
|
|
80
|
-
* Determines whether the Chip has a menu.
|
|
81
|
-
*/
|
|
82
|
-
hasMenu = false;
|
|
83
|
-
/**
|
|
84
|
-
* @hidden
|
|
85
|
-
*
|
|
86
|
-
* Specifies a custom menu font icon class to render when the Chip has a menu.
|
|
87
|
-
*/
|
|
88
|
-
menuIcon;
|
|
89
|
-
/**
|
|
90
|
-
* @hidden
|
|
91
|
-
*
|
|
92
|
-
* Specifies a custom menu SVG icon to render when the Chip has a menu.
|
|
93
|
-
*/
|
|
94
|
-
menuSvgIcon;
|
|
95
|
-
/**
|
|
96
|
-
* If set to `true`, the Chip is disabled.
|
|
97
|
-
* @default false
|
|
98
|
-
*/
|
|
99
|
-
disabled = false;
|
|
100
|
-
/**
|
|
101
|
-
* Sets the padding of the Chip.
|
|
102
|
-
* See [Chip Appearance]({% slug appearance_chip %}#size).
|
|
103
|
-
*
|
|
104
|
-
* @default 'medium'
|
|
105
|
-
*/
|
|
106
|
-
set size(size) {
|
|
107
|
-
const newSize = size || DEFAULT_SIZE;
|
|
108
|
-
if (!this.sizeIsSet) {
|
|
109
|
-
this.sizeIsSet = true;
|
|
110
|
-
}
|
|
111
|
-
this.handleClasses(newSize, 'size');
|
|
112
|
-
this._size = newSize;
|
|
113
|
-
}
|
|
114
|
-
get size() {
|
|
115
|
-
return this._size;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* Sets the border radius of the Chip.
|
|
119
|
-
* See [Chip Appearance](slug:appearance_chip#roundness).
|
|
120
|
-
*
|
|
121
|
-
* @default 'medium'
|
|
122
|
-
*/
|
|
123
|
-
set rounded(rounded) {
|
|
124
|
-
const newRounded = rounded || DEFAULT_ROUNDED;
|
|
125
|
-
this.handleClasses(newRounded, 'rounded');
|
|
126
|
-
this._rounded = newRounded;
|
|
127
|
-
}
|
|
128
|
-
get rounded() {
|
|
129
|
-
return this._rounded;
|
|
130
|
-
}
|
|
131
|
-
/**
|
|
132
|
-
* Sets the background and border styles of the Chip.
|
|
133
|
-
* See [Chip Appearance](slug:appearance_chip#fill-mode).
|
|
134
|
-
*
|
|
135
|
-
* @default 'solid'
|
|
136
|
-
*/
|
|
137
|
-
set fillMode(fillMode) {
|
|
138
|
-
const newFillMode = fillMode || DEFAULT_FILL_MODE;
|
|
139
|
-
this.handleClasses(newFillMode, 'fillMode');
|
|
140
|
-
this._fillMode = newFillMode;
|
|
141
|
-
}
|
|
142
|
-
get fillMode() {
|
|
143
|
-
return this._fillMode;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* Sets a predefined theme color for the Chip.
|
|
147
|
-
* The theme color applies as a background and border color and adjusts the text color.
|
|
148
|
-
* See [Chip Appearance](slug:appearance_chip#theme-colors).
|
|
149
|
-
*
|
|
150
|
-
* @default 'base'
|
|
151
|
-
*/
|
|
152
|
-
set themeColor(themeColor) {
|
|
153
|
-
const newThemeColor = themeColor || DEFAULT_THEME_COLOR;
|
|
154
|
-
this.handleThemeColor(newThemeColor);
|
|
155
|
-
this._themeColor = newThemeColor;
|
|
156
|
-
}
|
|
157
|
-
get themeColor() {
|
|
158
|
-
return this._themeColor;
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Fires when the user clicks the remove icon of the Chip.
|
|
162
|
-
*/
|
|
163
|
-
remove = new EventEmitter();
|
|
164
|
-
/**
|
|
165
|
-
* @hidden
|
|
166
|
-
*
|
|
167
|
-
* Fires when the user clicks the menu icon of the Chip.
|
|
168
|
-
*/
|
|
169
|
-
menuToggle = new EventEmitter();
|
|
170
|
-
/**
|
|
171
|
-
* Fires when the user clicks the content of the Chip.
|
|
172
|
-
*/
|
|
173
|
-
contentClick = new EventEmitter();
|
|
174
|
-
tabIndex = 0;
|
|
175
|
-
hostClass = true;
|
|
176
|
-
get hasIconClass() {
|
|
177
|
-
return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
|
|
178
|
-
}
|
|
179
|
-
get disabledClass() {
|
|
180
|
-
return this.disabled;
|
|
181
|
-
}
|
|
182
|
-
get selectedClass() {
|
|
183
|
-
return this.selected;
|
|
184
|
-
}
|
|
185
|
-
get focusedClass() {
|
|
186
|
-
return this.focused;
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* @hidden
|
|
190
|
-
*/
|
|
191
|
-
direction;
|
|
192
|
-
/**
|
|
193
|
-
* @hidden
|
|
194
|
-
*/
|
|
195
|
-
defaultRemoveIcon = xCircleIcon;
|
|
196
|
-
/**
|
|
197
|
-
* @hidden
|
|
198
|
-
*/
|
|
199
|
-
defaultMenuIcon = moreVerticalIcon;
|
|
200
|
-
/**
|
|
201
|
-
* @hidden
|
|
202
|
-
*/
|
|
203
|
-
sizeIsSet = false;
|
|
204
|
-
_size = 'medium';
|
|
205
|
-
_rounded = 'medium';
|
|
206
|
-
_fillMode = 'solid';
|
|
207
|
-
_themeColor = 'base';
|
|
208
|
-
focused = false;
|
|
209
|
-
subs = new Subscription();
|
|
210
|
-
constructor(element, renderer, ngZone, localizationService) {
|
|
211
|
-
this.element = element;
|
|
212
|
-
this.renderer = renderer;
|
|
213
|
-
this.ngZone = ngZone;
|
|
214
|
-
this.localizationService = localizationService;
|
|
215
|
-
validatePackage(packageMetadata);
|
|
216
|
-
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
217
|
-
}
|
|
218
|
-
ngOnInit() {
|
|
219
|
-
this.subs.add(this.localizationService.changes
|
|
220
|
-
.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
|
|
221
|
-
this.renderer.setAttribute(this.element.nativeElement, 'role', 'button');
|
|
222
|
-
}
|
|
223
|
-
ngOnDestroy() {
|
|
224
|
-
this.subs.unsubscribe();
|
|
225
|
-
}
|
|
226
|
-
ngOnChanges(changes) {
|
|
227
|
-
if (changes?.['selected']) {
|
|
228
|
-
const hasAriaSelected = this.element.nativeElement.hasAttribute('aria-selected');
|
|
229
|
-
if (!hasAriaSelected) {
|
|
230
|
-
this.renderer.setAttribute(this.element.nativeElement, 'aria-pressed', `${this.selected}`);
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
ngAfterViewInit() {
|
|
235
|
-
const chip = this.element.nativeElement;
|
|
236
|
-
const stylingOptions = ['size', 'rounded', 'fillMode'];
|
|
237
|
-
stylingOptions.forEach(input => {
|
|
238
|
-
this.handleClasses(this[input], input);
|
|
239
|
-
});
|
|
240
|
-
this.attachElementEventHandlers(chip);
|
|
241
|
-
}
|
|
242
|
-
/**
|
|
243
|
-
* @hidden
|
|
244
|
-
*/
|
|
245
|
-
get kendoIconClass() {
|
|
246
|
-
this.verifyIconSettings([this.iconClass]);
|
|
247
|
-
return `k-i-${this.icon}`;
|
|
248
|
-
}
|
|
249
|
-
/**
|
|
250
|
-
* @hidden
|
|
251
|
-
*/
|
|
252
|
-
get customIconClass() {
|
|
253
|
-
this.verifyIconSettings([this.icon]);
|
|
254
|
-
return this.iconClass;
|
|
255
|
-
}
|
|
256
|
-
/**
|
|
257
|
-
* @hidden
|
|
258
|
-
*/
|
|
259
|
-
get removeIconClass() {
|
|
260
|
-
return this.removeIcon ? this.removeIcon : 'k-i-x-circle';
|
|
261
|
-
}
|
|
262
|
-
/**
|
|
263
|
-
* Focuses the Chip component.
|
|
264
|
-
*/
|
|
265
|
-
focus() {
|
|
266
|
-
if (isDocumentAvailable()) {
|
|
267
|
-
this.element.nativeElement.focus();
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
/**
|
|
271
|
-
* Blurs the Chip component.
|
|
272
|
-
*/
|
|
273
|
-
blur() {
|
|
274
|
-
if (isDocumentAvailable()) {
|
|
275
|
-
this.element.nativeElement.blur();
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
/**
|
|
279
|
-
* @hidden
|
|
280
|
-
*/
|
|
281
|
-
onRemoveClick(e) {
|
|
282
|
-
if (this.removable) {
|
|
283
|
-
this.remove.emit({ sender: this, originalEvent: e });
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
/**
|
|
287
|
-
* @hidden
|
|
288
|
-
*/
|
|
289
|
-
onMenuClick(e) {
|
|
290
|
-
if (this.hasMenu) {
|
|
291
|
-
this.menuToggle.emit({ sender: this, originalEvent: e });
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
attachElementEventHandlers(chip) {
|
|
295
|
-
this.ngZone.runOutsideAngular(() => {
|
|
296
|
-
this.subs.add(this.renderer.listen(chip, 'focus', () => {
|
|
297
|
-
this.renderer.addClass(chip, 'k-focus');
|
|
298
|
-
}));
|
|
299
|
-
this.subs.add(this.renderer.listen(chip, 'blur', () => {
|
|
300
|
-
this.renderer.removeClass(chip, 'k-focus');
|
|
301
|
-
}));
|
|
302
|
-
this.subs.add(this.renderer.listen(chip, 'click', (e) => {
|
|
303
|
-
const isActionClicked = closest(e.target, '.k-chip-action');
|
|
304
|
-
if (!isActionClicked) {
|
|
305
|
-
this.ngZone.run(() => {
|
|
306
|
-
this.contentClick.emit({ sender: this, originalEvent: e });
|
|
307
|
-
});
|
|
308
|
-
}
|
|
309
|
-
}));
|
|
310
|
-
this.subs.add(this.renderer.listen(chip, 'keydown', this.keyDownHandler.bind(this)));
|
|
311
|
-
});
|
|
312
|
-
}
|
|
313
|
-
/**
|
|
314
|
-
* @hidden
|
|
315
|
-
*/
|
|
316
|
-
verifyIconSettings(iconsToCheck) {
|
|
317
|
-
if (isDevMode()) {
|
|
318
|
-
if (iconsToCheck.filter(icon => icon !== null && icon !== undefined).length > 0) {
|
|
319
|
-
this.renderer.removeClass(this.element.nativeElement, 'k-chip-has-icon');
|
|
320
|
-
throw new Error('Invalid configuration: Having multiple icons is not supported. Only a single icon on a chip can be displayed.');
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
handleClasses(value, input) {
|
|
325
|
-
const elem = this.element.nativeElement;
|
|
326
|
-
const classes = getStylingClasses('chip', input, this[input], value);
|
|
327
|
-
if (input === 'fillMode') {
|
|
328
|
-
this.handleThemeColor(this.themeColor, this[input], value);
|
|
329
|
-
}
|
|
330
|
-
if (classes.toRemove) {
|
|
331
|
-
this.renderer.removeClass(elem, classes.toRemove);
|
|
332
|
-
}
|
|
333
|
-
if (classes.toAdd) {
|
|
334
|
-
this.renderer.addClass(elem, classes.toAdd);
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
handleThemeColor(value, prevFillMode, fillMode) {
|
|
338
|
-
const elem = this.element.nativeElement;
|
|
339
|
-
const removeFillMode = prevFillMode || this.fillMode;
|
|
340
|
-
const addFillMode = fillMode || this.fillMode;
|
|
341
|
-
const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
|
|
342
|
-
this.renderer.removeClass(elem, themeColorClass.toRemove);
|
|
343
|
-
if (addFillMode !== 'none' && fillMode !== 'none') {
|
|
344
|
-
if (themeColorClass.toAdd) {
|
|
345
|
-
this.renderer.addClass(elem, themeColorClass.toAdd);
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
keyDownHandler(e) {
|
|
350
|
-
const code = normalizeKeys(e);
|
|
351
|
-
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
352
|
-
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
353
|
-
if (this.disabled) {
|
|
354
|
-
return;
|
|
355
|
-
}
|
|
356
|
-
if (isEnterOrSpace) {
|
|
357
|
-
this.ngZone.run(() => {
|
|
358
|
-
this.contentClick.emit({ sender: this, originalEvent: e });
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
else if (isDeleteOrBackspace && this.removable) {
|
|
362
|
-
this.ngZone.run(() => {
|
|
363
|
-
this.remove.emit({ sender: this, originalEvent: e });
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
|
|
369
|
-
LocalizationService,
|
|
370
|
-
{
|
|
371
|
-
provide: L10N_PREFIX,
|
|
372
|
-
useValue: 'kendo.chip'
|
|
373
|
-
}
|
|
374
|
-
], usesOnChanges: true, ngImport: i0, template: `
|
|
375
|
-
@if (icon || svgIcon) {
|
|
376
|
-
<kendo-icon-wrapper
|
|
377
|
-
size="small"
|
|
378
|
-
innerCssClass="k-chip-icon"
|
|
379
|
-
[name]="icon"
|
|
380
|
-
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
@if (iconClass) {
|
|
384
|
-
<kendo-icon-wrapper
|
|
385
|
-
size="small"
|
|
386
|
-
innerCssClass="k-chip-icon"
|
|
387
|
-
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
388
|
-
}
|
|
389
|
-
@if (avatarSettings) {
|
|
390
|
-
<span
|
|
391
|
-
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
392
|
-
[ngStyle]="avatarSettings.cssStyle">
|
|
393
|
-
@if (avatarSettings?.imageSrc) {
|
|
394
|
-
<span class="k-avatar-image">
|
|
395
|
-
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
396
|
-
</span>
|
|
397
|
-
}
|
|
398
|
-
@if (avatarSettings?.initials) {
|
|
399
|
-
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
400
|
-
}
|
|
401
|
-
</span>
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
<span class="k-chip-content">
|
|
405
|
-
@if (label) {
|
|
406
|
-
<span class="k-chip-label">
|
|
407
|
-
{{ label }}
|
|
408
|
-
</span>
|
|
409
|
-
}
|
|
410
|
-
@if (!label) {
|
|
411
|
-
<ng-content></ng-content>
|
|
412
|
-
}
|
|
413
|
-
</span>
|
|
414
|
-
|
|
415
|
-
@if (hasMenu || removable) {
|
|
416
|
-
<span class="k-chip-actions">
|
|
417
|
-
@if (hasMenu) {
|
|
418
|
-
<span class="k-chip-action k-chip-more-action"
|
|
419
|
-
(click)="onMenuClick($event)">
|
|
420
|
-
<kendo-icon-wrapper
|
|
421
|
-
name="more-vertical"
|
|
422
|
-
size="small"
|
|
423
|
-
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
424
|
-
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
425
|
-
</span>
|
|
426
|
-
}
|
|
427
|
-
@if (removable) {
|
|
428
|
-
<span class="k-chip-action k-chip-remove-action"
|
|
429
|
-
(click)="onRemoveClick($event)">
|
|
430
|
-
<kendo-icon-wrapper
|
|
431
|
-
name="x-circle"
|
|
432
|
-
size="small"
|
|
433
|
-
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
434
|
-
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
435
|
-
</span>
|
|
436
|
-
}
|
|
437
|
-
</span>
|
|
438
|
-
}
|
|
439
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
440
|
-
}
|
|
441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, decorators: [{
|
|
442
|
-
type: Component,
|
|
443
|
-
args: [{
|
|
444
|
-
selector: 'kendo-chip',
|
|
445
|
-
template: `
|
|
446
|
-
@if (icon || svgIcon) {
|
|
447
|
-
<kendo-icon-wrapper
|
|
448
|
-
size="small"
|
|
449
|
-
innerCssClass="k-chip-icon"
|
|
450
|
-
[name]="icon"
|
|
451
|
-
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
@if (iconClass) {
|
|
455
|
-
<kendo-icon-wrapper
|
|
456
|
-
size="small"
|
|
457
|
-
innerCssClass="k-chip-icon"
|
|
458
|
-
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
459
|
-
}
|
|
460
|
-
@if (avatarSettings) {
|
|
461
|
-
<span
|
|
462
|
-
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
463
|
-
[ngStyle]="avatarSettings.cssStyle">
|
|
464
|
-
@if (avatarSettings?.imageSrc) {
|
|
465
|
-
<span class="k-avatar-image">
|
|
466
|
-
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
467
|
-
</span>
|
|
468
|
-
}
|
|
469
|
-
@if (avatarSettings?.initials) {
|
|
470
|
-
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
471
|
-
}
|
|
472
|
-
</span>
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
<span class="k-chip-content">
|
|
476
|
-
@if (label) {
|
|
477
|
-
<span class="k-chip-label">
|
|
478
|
-
{{ label }}
|
|
479
|
-
</span>
|
|
480
|
-
}
|
|
481
|
-
@if (!label) {
|
|
482
|
-
<ng-content></ng-content>
|
|
483
|
-
}
|
|
484
|
-
</span>
|
|
485
|
-
|
|
486
|
-
@if (hasMenu || removable) {
|
|
487
|
-
<span class="k-chip-actions">
|
|
488
|
-
@if (hasMenu) {
|
|
489
|
-
<span class="k-chip-action k-chip-more-action"
|
|
490
|
-
(click)="onMenuClick($event)">
|
|
491
|
-
<kendo-icon-wrapper
|
|
492
|
-
name="more-vertical"
|
|
493
|
-
size="small"
|
|
494
|
-
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
495
|
-
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
496
|
-
</span>
|
|
497
|
-
}
|
|
498
|
-
@if (removable) {
|
|
499
|
-
<span class="k-chip-action k-chip-remove-action"
|
|
500
|
-
(click)="onRemoveClick($event)">
|
|
501
|
-
<kendo-icon-wrapper
|
|
502
|
-
name="x-circle"
|
|
503
|
-
size="small"
|
|
504
|
-
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
505
|
-
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
506
|
-
</span>
|
|
507
|
-
}
|
|
508
|
-
</span>
|
|
509
|
-
}
|
|
510
|
-
`,
|
|
511
|
-
providers: [
|
|
512
|
-
LocalizationService,
|
|
513
|
-
{
|
|
514
|
-
provide: L10N_PREFIX,
|
|
515
|
-
useValue: 'kendo.chip'
|
|
516
|
-
}
|
|
517
|
-
],
|
|
518
|
-
standalone: true,
|
|
519
|
-
imports: [NgStyle, IconWrapperComponent]
|
|
520
|
-
}]
|
|
521
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { label: [{
|
|
522
|
-
type: Input
|
|
523
|
-
}], icon: [{
|
|
524
|
-
type: Input
|
|
525
|
-
}], svgIcon: [{
|
|
526
|
-
type: Input
|
|
527
|
-
}], iconClass: [{
|
|
528
|
-
type: Input
|
|
529
|
-
}], avatarSettings: [{
|
|
530
|
-
type: Input
|
|
531
|
-
}], selected: [{
|
|
532
|
-
type: Input
|
|
533
|
-
}], removable: [{
|
|
534
|
-
type: Input
|
|
535
|
-
}], removeIcon: [{
|
|
536
|
-
type: Input
|
|
537
|
-
}], removeSvgIcon: [{
|
|
538
|
-
type: Input
|
|
539
|
-
}], hasMenu: [{
|
|
540
|
-
type: Input
|
|
541
|
-
}], menuIcon: [{
|
|
542
|
-
type: Input
|
|
543
|
-
}], menuSvgIcon: [{
|
|
544
|
-
type: Input
|
|
545
|
-
}], disabled: [{
|
|
546
|
-
type: Input
|
|
547
|
-
}], size: [{
|
|
548
|
-
type: Input
|
|
549
|
-
}], rounded: [{
|
|
550
|
-
type: Input
|
|
551
|
-
}], fillMode: [{
|
|
552
|
-
type: Input
|
|
553
|
-
}], themeColor: [{
|
|
554
|
-
type: Input
|
|
555
|
-
}], remove: [{
|
|
556
|
-
type: Output
|
|
557
|
-
}], menuToggle: [{
|
|
558
|
-
type: Output
|
|
559
|
-
}], contentClick: [{
|
|
560
|
-
type: Output
|
|
561
|
-
}], tabIndex: [{
|
|
562
|
-
type: HostBinding,
|
|
563
|
-
args: ['attr.tabindex']
|
|
564
|
-
}], hostClass: [{
|
|
565
|
-
type: HostBinding,
|
|
566
|
-
args: ['class.k-chip']
|
|
567
|
-
}], hasIconClass: [{
|
|
568
|
-
type: HostBinding,
|
|
569
|
-
args: ['class.k-chip-has-icon']
|
|
570
|
-
}], disabledClass: [{
|
|
571
|
-
type: HostBinding,
|
|
572
|
-
args: ['attr.aria-disabled']
|
|
573
|
-
}, {
|
|
574
|
-
type: HostBinding,
|
|
575
|
-
args: ['class.k-disabled']
|
|
576
|
-
}], selectedClass: [{
|
|
577
|
-
type: HostBinding,
|
|
578
|
-
args: ['class.k-selected']
|
|
579
|
-
}], focusedClass: [{
|
|
580
|
-
type: HostBinding,
|
|
581
|
-
args: ['class.k-focus']
|
|
582
|
-
}], direction: [{
|
|
583
|
-
type: HostBinding,
|
|
584
|
-
args: ['attr.dir']
|
|
585
|
-
}] } });
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_CHIPLIST } from '../directives';
|
|
7
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
import * as i1 from "./chip.component";
|
|
10
|
-
import * as i2 from "./chip-list.component";
|
|
11
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
12
|
-
/**
|
|
13
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
14
|
-
* definition for the Chip and ChipList components.
|
|
15
|
-
*
|
|
16
|
-
* Required for adding Chip and ChipList features in NgModule-based Angular applications.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```typescript
|
|
20
|
-
* import { ChipModule } from '@progress/kendo-angular-buttons';
|
|
21
|
-
* import { NgModule } from '@angular/core';
|
|
22
|
-
* import { BrowserModule } from '@angular/platform-browser';
|
|
23
|
-
* import { AppComponent } from './app.component';
|
|
24
|
-
*
|
|
25
|
-
* @NgModule({
|
|
26
|
-
* declarations: [AppComponent],
|
|
27
|
-
* imports: [BrowserModule, ChipModule],
|
|
28
|
-
* bootstrap: [AppComponent]
|
|
29
|
-
* })
|
|
30
|
-
* export class AppModule {}
|
|
31
|
-
* ```
|
|
32
|
-
*/
|
|
33
|
-
export class ChipModule {
|
|
34
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
35
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
|
|
36
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [i1.ChipComponent] });
|
|
37
|
-
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipModule, decorators: [{
|
|
39
|
-
type: NgModule,
|
|
40
|
-
args: [{
|
|
41
|
-
exports: [...KENDO_CHIPLIST],
|
|
42
|
-
imports: [...KENDO_CHIPLIST],
|
|
43
|
-
providers: [IconsService]
|
|
44
|
-
}]
|
|
45
|
-
}] });
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|