@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.
Files changed (92) hide show
  1. package/README.md +27 -106
  2. package/button/button.component.d.ts +3 -9
  3. package/button/selection-settings.d.ts +1 -1
  4. package/buttongroup/buttongroup.component.d.ts +2 -2
  5. package/chip/chip-list.component.d.ts +4 -4
  6. package/chip/chip.component.d.ts +4 -7
  7. package/chip/models/avatar-settings.interface.d.ts +33 -0
  8. package/chip/models/selection.d.ts +1 -1
  9. package/common/models/fillmode.d.ts +2 -2
  10. package/common/models/rounded.d.ts +2 -2
  11. package/common/models/size.d.ts +3 -3
  12. package/common/models/theme-color.d.ts +2 -2
  13. package/direction.d.ts +1 -1
  14. package/dropdownbutton/dropdownbutton.component.d.ts +7 -10
  15. package/{esm2020 → esm2022}/button/button.component.mjs +80 -108
  16. package/{esm2020 → esm2022}/button/button.module.mjs +4 -4
  17. package/{esm2020 → esm2022}/button/button.service.mjs +5 -7
  18. package/{esm2020 → esm2022}/buttongroup/buttongroup.component.mjs +79 -56
  19. package/{esm2020 → esm2022}/buttongroup/buttongroup.module.mjs +4 -4
  20. package/{esm2020 → esm2022}/buttons.module.mjs +4 -4
  21. package/{esm2020 → esm2022}/chip/chip-list.component.mjs +58 -48
  22. package/{esm2020 → esm2022}/chip/chip.component.mjs +155 -93
  23. package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
  24. package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +130 -118
  25. package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.module.mjs +4 -4
  26. package/{esm2020 → esm2022}/floatingactionbutton/dial-item.component.mjs +21 -11
  27. package/{esm2020 → esm2022}/floatingactionbutton/dial-list.component.mjs +16 -11
  28. package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.component.mjs +145 -102
  29. package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.module.mjs +4 -4
  30. package/{esm2020 → esm2022}/floatingactionbutton/templates/dial-item-template.directive.mjs +4 -3
  31. package/{esm2020 → esm2022}/floatingactionbutton/templates/fab-template.directive.mjs +4 -3
  32. package/{esm2020 → esm2022}/focusable/focus.service.mjs +5 -6
  33. package/{esm2020 → esm2022}/focusable/focusable.directive.mjs +8 -4
  34. package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs +4 -3
  35. package/{esm2020 → esm2022}/listbutton/container.service.mjs +5 -3
  36. package/{esm2020 → esm2022}/listbutton/list-button.mjs +88 -51
  37. package/{esm2020 → esm2022}/listbutton/list.component.mjs +13 -10
  38. package/{esm2020 → esm2022}/listbutton/list.module.mjs +8 -8
  39. package/esm2022/listbutton/popup-settings.mjs +5 -0
  40. package/{esm2020 → esm2022}/navigation/navigation.service.mjs +12 -11
  41. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  42. package/{esm2020 → esm2022}/preventable-event.mjs +1 -3
  43. package/{esm2020 → esm2022}/splitbutton/localization/custom-messages.component.mjs +7 -6
  44. package/{esm2020 → esm2022}/splitbutton/localization/localized-messages.directive.mjs +9 -8
  45. package/esm2022/splitbutton/localization/messages.mjs +45 -0
  46. package/{esm2020 → esm2022}/splitbutton/splitbutton.component.mjs +213 -189
  47. package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
  48. package/{esm2020 → esm2022}/util.mjs +6 -0
  49. package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1324 -1089
  50. package/floatingactionbutton/dial-item.component.d.ts +1 -1
  51. package/floatingactionbutton/dial-list.component.d.ts +1 -1
  52. package/floatingactionbutton/floatingactionbutton.component.d.ts +1 -1
  53. package/floatingactionbutton/models/position-mode.d.ts +1 -1
  54. package/focusable/focusable.directive.d.ts +1 -1
  55. package/index.d.ts +1 -0
  56. package/listbutton/list-button.d.ts +9 -4
  57. package/listbutton/list.component.d.ts +1 -1
  58. package/package.json +15 -21
  59. package/splitbutton/localization/messages.d.ts +1 -1
  60. package/splitbutton/splitbutton.component.d.ts +8 -16
  61. package/util.d.ts +6 -0
  62. package/esm2020/splitbutton/localization/messages.mjs +0 -23
  63. package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5589
  64. /package/{esm2020 → esm2022}/button/selection-settings.mjs +0 -0
  65. /package/{esm2020 → esm2022}/chip/chip-content-click-event-args.interface.mjs +0 -0
  66. /package/{esm2020 → esm2022}/chip/chip-list-remove-event-args.interface.mjs +0 -0
  67. /package/{esm2020 → esm2022}/chip/chip-remove-event-args.interface.mjs +0 -0
  68. /package/{esm2020/chip/models/selection.mjs → esm2022/chip/models/avatar-settings.interface.mjs} +0 -0
  69. /package/{esm2020/common/models/arrow-settings.mjs → esm2022/chip/models/selection.mjs} +0 -0
  70. /package/{esm2020/common/models/fillmode.mjs → esm2022/common/models/arrow-settings.mjs} +0 -0
  71. /package/{esm2020/common/models/rounded.mjs → esm2022/common/models/fillmode.mjs} +0 -0
  72. /package/{esm2020/common/models/size.mjs → esm2022/common/models/rounded.mjs} +0 -0
  73. /package/{esm2020/common/models/styling-classes.mjs → esm2022/common/models/size.mjs} +0 -0
  74. /package/{esm2020/common/models/theme-color.mjs → esm2022/common/models/styling-classes.mjs} +0 -0
  75. /package/{esm2020/direction.mjs → esm2022/common/models/theme-color.mjs} +0 -0
  76. /package/{esm2020 → esm2022}/common/models.mjs +0 -0
  77. /package/{esm2020/floatingactionbutton/models/align.mjs → esm2022/direction.mjs} +0 -0
  78. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  79. /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
  80. /package/{esm2020/floatingactionbutton/models/item-animation.interface.mjs → esm2022/floatingactionbutton/models/align.mjs} +0 -0
  81. /package/{esm2020/floatingactionbutton/models/item-click.event.mjs → esm2022/floatingactionbutton/models/item-animation.interface.mjs} +0 -0
  82. /package/{esm2020/floatingactionbutton/models/item.interface.mjs → esm2022/floatingactionbutton/models/item-click.event.mjs} +0 -0
  83. /package/{esm2020/floatingactionbutton/models/offset.mjs → esm2022/floatingactionbutton/models/item.interface.mjs} +0 -0
  84. /package/{esm2020/floatingactionbutton/models/position-mode.mjs → esm2022/floatingactionbutton/models/offset.mjs} +0 -0
  85. /package/{esm2020/listbutton/list-item-model.mjs → esm2022/floatingactionbutton/models/position-mode.mjs} +0 -0
  86. /package/{esm2020 → esm2022}/floatingactionbutton/utils.mjs +0 -0
  87. /package/{esm2020 → esm2022}/index.mjs +0 -0
  88. /package/{esm2020/listbutton/popup-settings.mjs → esm2022/listbutton/list-item-model.mjs} +0 -0
  89. /package/{esm2020 → esm2022}/navigation/key-events.mjs +0 -0
  90. /package/{esm2020 → esm2022}/navigation/navigation-action.mjs +0 -0
  91. /package/{esm2020 → esm2022}/navigation/navigation-config.mjs +0 -0
  92. /package/{esm2020 → esm2022}/progress-kendo-angular-buttons.mjs +0 -0
@@ -13,41 +13,25 @@ import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
13
13
  import * as i0 from "@angular/core";
14
14
  import * as i1 from "@progress/kendo-angular-l10n";
15
15
  export class ChipListComponent {
16
- constructor(localizationService, renderer, element, ngZone) {
17
- this.localizationService = localizationService;
18
- this.renderer = renderer;
19
- this.element = element;
20
- this.ngZone = ngZone;
21
- this.hostClass = true;
22
- this.orientation = 'horizontal';
23
- /**
24
- * Sets the selection mode of the ChipList.
25
- *
26
- * The available values are:
27
- * * `none` (default)
28
- * * `single`
29
- * * `multiple`
30
- */
31
- this.selection = 'none';
32
- /**
33
- * Fires each time when the ChipList selection is changed.
34
- */
35
- this.selectedChange = new EventEmitter();
36
- /**
37
- * Fires each time the user clicks on the remove icon of the Chip.
38
- */
39
- this.remove = new EventEmitter();
40
- /**
41
- * @hidden
42
- */
43
- this.role = 'listbox';
44
- this._size = 'medium';
45
- this.subs = new Subscription();
46
- this._navigable = false;
47
- this.currentActiveIndex = 0;
48
- validatePackage(packageMetadata);
49
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
50
- }
16
+ localizationService;
17
+ renderer;
18
+ element;
19
+ ngZone;
20
+ hostClass = true;
21
+ orientation = 'horizontal';
22
+ /**
23
+ * @hidden
24
+ */
25
+ direction;
26
+ /**
27
+ * Sets the selection mode of the ChipList.
28
+ *
29
+ * The available values are:
30
+ * * `none` (default)
31
+ * * `single`
32
+ * * `multiple`
33
+ */
34
+ selection = 'none';
51
35
  /**
52
36
  * The size property specifies the gap between the Chips in the ChipList
53
37
  * ([see example]({% slug appearance_chiplist %}#toc-size)).
@@ -66,12 +50,29 @@ export class ChipListComponent {
66
50
  get size() {
67
51
  return this._size;
68
52
  }
53
+ /**
54
+ * Fires each time when the ChipList selection is changed.
55
+ */
56
+ selectedChange = new EventEmitter();
57
+ /**
58
+ * Fires each time the user clicks on the remove icon of the Chip.
59
+ */
60
+ remove = new EventEmitter();
61
+ chips;
69
62
  get single() {
70
63
  return this.selection === 'single';
71
64
  }
72
65
  get multiple() {
73
66
  return this.selection === 'multiple';
74
67
  }
68
+ /**
69
+ * @hidden
70
+ */
71
+ role = 'listbox';
72
+ dynamicRTLSubscription;
73
+ _size = 'medium';
74
+ subs = new Subscription();
75
+ _navigable = true;
75
76
  /**
76
77
  * @hidden
77
78
  */
@@ -97,10 +98,10 @@ export class ChipListComponent {
97
98
  }
98
99
  }
99
100
  /**
100
- * When set to `true`, keyboard navigation is available through arrow keys and roving tabindex. Otherwise, all chips
101
- * are part of the default tabbing sequence of the page.
101
+ * By default, keyboard navigation is available through arrow keys and roving tabindex.
102
+ * When set to `false`, all chips are part of the default tabbing sequence of the page.
102
103
  *
103
- * @default false
104
+ * @default true
104
105
  */
105
106
  set navigable(value) {
106
107
  this._navigable = value;
@@ -110,6 +111,15 @@ export class ChipListComponent {
110
111
  get navigable() {
111
112
  return this._navigable;
112
113
  }
114
+ currentActiveIndex = 0;
115
+ constructor(localizationService, renderer, element, ngZone) {
116
+ this.localizationService = localizationService;
117
+ this.renderer = renderer;
118
+ this.element = element;
119
+ this.ngZone = ngZone;
120
+ validatePackage(packageMetadata);
121
+ this.direction = localizationService.rtl ? 'rtl' : 'ltr';
122
+ }
113
123
  ngOnInit() {
114
124
  this.dynamicRTLSubscription = this.localizationService.changes
115
125
  .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
@@ -251,18 +261,18 @@ export class ChipListComponent {
251
261
  this.currentActiveIndex = Math.max(this.chips.length - 1, 0);
252
262
  }
253
263
  }
254
- }
255
- ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
256
- ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
257
- LocalizationService,
258
- {
259
- provide: L10N_PREFIX,
260
- useValue: 'kendo.chiplist'
261
- }
262
- ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
264
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
265
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
266
+ LocalizationService,
267
+ {
268
+ provide: L10N_PREFIX,
269
+ useValue: 'kendo.chiplist'
270
+ }
271
+ ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
263
272
  <ng-content></ng-content>
264
273
  `, isInline: true });
265
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipListComponent, decorators: [{
274
+ }
275
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, decorators: [{
266
276
  type: Component,
267
277
  args: [{
268
278
  selector: 'kendo-chiplist, kendo-chip-list',
@@ -8,10 +8,10 @@ import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
8
8
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
10
10
  import { packageMetadata } from '../package-metadata';
11
- import { closest, getStylingClasses, getThemeColorClasses } from '../util';
11
+ import { closest, getStylingClasses, getThemeColorClasses, isObjectEmpty } from '../util';
12
12
  import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
13
13
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
14
- import { NgIf, NgClass } from '@angular/common';
14
+ import { NgIf, NgClass, NgStyle } from '@angular/common';
15
15
  import * as i0 from "@angular/core";
16
16
  import * as i1 from "@progress/kendo-angular-l10n";
17
17
  const DEFAULT_SIZE = 'medium';
@@ -22,66 +22,77 @@ const DEFAULT_FILL_MODE = 'solid';
22
22
  * Displays a Chip that represents an input, attribute or an action.
23
23
  */
24
24
  export class ChipComponent {
25
- constructor(element, renderer, ngZone, localizationService) {
26
- this.element = element;
27
- this.renderer = renderer;
28
- this.ngZone = ngZone;
29
- this.localizationService = localizationService;
30
- /**
31
- * Specifies the selected state of the Chip.
32
- * @default false
33
- */
34
- this.selected = false;
35
- /**
36
- * Specifies if the Chip will be removable or not.
37
- * If the property is set to `true`, the Chip renders a remove icon.
38
- * @default false
39
- */
40
- this.removable = false;
41
- /**
42
- * @hidden
43
- *
44
- * Determines whether the Chip has a menu.
45
- */
46
- this.hasMenu = false;
47
- /**
48
- * If set to `true`, the Chip will be disabled.
49
- * @default false
50
- */
51
- this.disabled = false;
52
- /**
53
- * Fires each time the user clicks the remove icon of the Chip.
54
- */
55
- this.remove = new EventEmitter();
56
- /**
57
- * @hidden
58
- *
59
- * Fires each time the user clicks the menu icon of the Chip.
60
- */
61
- this.menuToggle = new EventEmitter();
62
- /**
63
- * Fires each time the user clicks the content of the Chip.
64
- */
65
- this.contentClick = new EventEmitter();
66
- this.tabIndex = 0;
67
- this.hostClass = true;
68
- /**
69
- * @hidden
70
- */
71
- this.defaultRemoveIcon = xCircleIcon;
72
- /**
73
- * @hidden
74
- */
75
- this.defaultMenuIcon = moreVerticalIcon;
76
- this._size = 'medium';
77
- this._rounded = 'medium';
78
- this._fillMode = 'solid';
79
- this._themeColor = 'base';
80
- this.focused = false;
81
- this.subs = new Subscription();
82
- validatePackage(packageMetadata);
83
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
84
- }
25
+ element;
26
+ renderer;
27
+ ngZone;
28
+ localizationService;
29
+ /**
30
+ * Sets the label text of the Chip.
31
+ */
32
+ label;
33
+ /**
34
+ * Defines the name for an existing icon in a Kendo UI theme.
35
+ * The icon is rendered inside the Chip by a `span.k-icon` element.
36
+ */
37
+ icon;
38
+ /**
39
+ * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
40
+ * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
41
+ */
42
+ svgIcon;
43
+ /**
44
+ * Defines a CSS class or multiple classes separated by spaces —
45
+ * which are applied to a span element.
46
+ * Allows the usage of custom icons.
47
+ */
48
+ iconClass;
49
+ /**
50
+ * Use these settings to render an avatar within the Chip.
51
+ */
52
+ avatarSettings;
53
+ /**
54
+ * Specifies the selected state of the Chip.
55
+ * @default false
56
+ */
57
+ selected = false;
58
+ /**
59
+ * Specifies if the Chip will be removable or not.
60
+ * If the property is set to `true`, the Chip renders a remove icon.
61
+ * @default false
62
+ */
63
+ removable = false;
64
+ /**
65
+ * Specifies a custom remove font icon class that will be rendered when the Chip is removable.
66
+ * [see example]({% slug icons %})
67
+ */
68
+ removeIcon;
69
+ /**
70
+ * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
71
+ */
72
+ removeSvgIcon;
73
+ /**
74
+ * @hidden
75
+ *
76
+ * Determines whether the Chip has a menu.
77
+ */
78
+ hasMenu = false;
79
+ /**
80
+ * @hidden
81
+ *
82
+ * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
83
+ */
84
+ menuIcon;
85
+ /**
86
+ * @hidden
87
+ *
88
+ * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
89
+ */
90
+ menuSvgIcon;
91
+ /**
92
+ * If set to `true`, the Chip will be disabled.
93
+ * @default false
94
+ */
95
+ disabled = false;
85
96
  /**
86
97
  * The size property specifies the padding of the Chip
87
98
  * ([see example]({% slug appearance_chip %}#toc-size)).
@@ -157,8 +168,24 @@ export class ChipComponent {
157
168
  get themeColor() {
158
169
  return this._themeColor;
159
170
  }
171
+ /**
172
+ * Fires each time the user clicks the remove icon of the Chip.
173
+ */
174
+ remove = new EventEmitter();
175
+ /**
176
+ * @hidden
177
+ *
178
+ * Fires each time the user clicks the menu icon of the Chip.
179
+ */
180
+ menuToggle = new EventEmitter();
181
+ /**
182
+ * Fires each time the user clicks the content of the Chip.
183
+ */
184
+ contentClick = new EventEmitter();
185
+ tabIndex = 0;
186
+ hostClass = true;
160
187
  get hasIconClass() {
161
- return Boolean(this.icon || this.iconClass || this.avatarClass);
188
+ return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
162
189
  }
163
190
  get disabledClass() {
164
191
  return this.disabled;
@@ -169,6 +196,32 @@ export class ChipComponent {
169
196
  get focusedClass() {
170
197
  return this.focused;
171
198
  }
199
+ /**
200
+ * @hidden
201
+ */
202
+ direction;
203
+ /**
204
+ * @hidden
205
+ */
206
+ defaultRemoveIcon = xCircleIcon;
207
+ /**
208
+ * @hidden
209
+ */
210
+ defaultMenuIcon = moreVerticalIcon;
211
+ _size = 'medium';
212
+ _rounded = 'medium';
213
+ _fillMode = 'solid';
214
+ _themeColor = 'base';
215
+ focused = false;
216
+ subs = new Subscription();
217
+ constructor(element, renderer, ngZone, localizationService) {
218
+ this.element = element;
219
+ this.renderer = renderer;
220
+ this.ngZone = ngZone;
221
+ this.localizationService = localizationService;
222
+ validatePackage(packageMetadata);
223
+ this.direction = localizationService.rtl ? 'rtl' : 'ltr';
224
+ }
172
225
  ngOnInit() {
173
226
  this.subs.add(this.localizationService.changes
174
227
  .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -197,23 +250,16 @@ export class ChipComponent {
197
250
  * @hidden
198
251
  */
199
252
  get kendoIconClass() {
200
- this.verifyIconSettings([this.iconClass, this.avatarClass]);
253
+ this.verifyIconSettings([this.iconClass]);
201
254
  return `k-i-${this.icon}`;
202
255
  }
203
256
  /**
204
257
  * @hidden
205
258
  */
206
259
  get customIconClass() {
207
- this.verifyIconSettings([this.icon, this.avatarClass]);
260
+ this.verifyIconSettings([this.icon]);
208
261
  return this.iconClass;
209
262
  }
210
- /**
211
- * @hidden
212
- */
213
- get chipAvatarClass() {
214
- this.verifyIconSettings([this.icon, this.iconClass]);
215
- return this.avatarClass;
216
- }
217
263
  /**
218
264
  * @hidden
219
265
  */
@@ -324,15 +370,14 @@ export class ChipComponent {
324
370
  });
325
371
  }
326
372
  }
327
- }
328
- ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
329
- ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", 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: [
330
- LocalizationService,
331
- {
332
- provide: L10N_PREFIX,
333
- useValue: 'kendo.chip'
334
- }
335
- ], usesOnChanges: true, ngImport: i0, template: `
373
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
374
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
375
+ LocalizationService,
376
+ {
377
+ provide: L10N_PREFIX,
378
+ useValue: 'kendo.chip'
379
+ }
380
+ ], usesOnChanges: true, ngImport: i0, template: `
336
381
  <kendo-icon-wrapper
337
382
  *ngIf="icon || svgIcon"
338
383
  size="small"
@@ -345,11 +390,19 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
345
390
  size="small"
346
391
  innerCssClass="k-chip-icon"
347
392
  [customFontClass]="customIconClass"></kendo-icon-wrapper>
348
-
349
393
  <span
350
- *ngIf="avatarClass"
351
- class="k-chip-avatar k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full">
352
- <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
394
+ *ngIf="avatarSettings"
395
+ class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
396
+ [ngStyle]="avatarSettings.cssStyle">
397
+ <ng-container *ngIf="avatarSettings?.imageSrc">
398
+ <span class="k-avatar-image">
399
+ <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
400
+ </span>
401
+ </ng-container>
402
+
403
+ <ng-container *ngIf="avatarSettings?.initials">
404
+ <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
405
+ </ng-container>
353
406
  </span>
354
407
 
355
408
  <span class="k-chip-content">
@@ -379,8 +432,9 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
379
432
  [customFontClass]="removeIcon"></kendo-icon-wrapper>
380
433
  </span>
381
434
  </span>
382
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
383
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, decorators: [{
435
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
436
+ }
437
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, decorators: [{
384
438
  type: Component,
385
439
  args: [{
386
440
  selector: 'kendo-chip',
@@ -397,11 +451,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
397
451
  size="small"
398
452
  innerCssClass="k-chip-icon"
399
453
  [customFontClass]="customIconClass"></kendo-icon-wrapper>
400
-
401
454
  <span
402
- *ngIf="avatarClass"
403
- class="k-chip-avatar k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full">
404
- <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
455
+ *ngIf="avatarSettings"
456
+ class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
457
+ [ngStyle]="avatarSettings.cssStyle">
458
+ <ng-container *ngIf="avatarSettings?.imageSrc">
459
+ <span class="k-avatar-image">
460
+ <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
461
+ </span>
462
+ </ng-container>
463
+
464
+ <ng-container *ngIf="avatarSettings?.initials">
465
+ <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
466
+ </ng-container>
405
467
  </span>
406
468
 
407
469
  <span class="k-chip-content">
@@ -440,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
440
502
  }
441
503
  ],
442
504
  standalone: true,
443
- imports: [NgIf, IconWrapperComponent, NgClass]
505
+ imports: [NgIf, NgStyle, IconWrapperComponent, NgClass]
444
506
  }]
445
507
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { label: [{
446
508
  type: Input
@@ -450,7 +512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
450
512
  type: Input
451
513
  }], iconClass: [{
452
514
  type: Input
453
- }], avatarClass: [{
515
+ }], avatarSettings: [{
454
516
  type: Input
455
517
  }], selected: [{
456
518
  type: Input
@@ -38,11 +38,11 @@ import * as i2 from "./chip-list.component";
38
38
  * ```
39
39
  */
40
40
  export class ChipModule {
41
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
42
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
43
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [i1.ChipComponent] });
41
44
  }
42
- ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
43
- ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
44
- ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [KENDO_CHIPLIST] });
45
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, decorators: [{
45
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, decorators: [{
46
46
  type: NgModule,
47
47
  args: [{
48
48
  exports: [...KENDO_CHIPLIST],