@progress/kendo-angular-buttons 17.0.0-develop.9 → 17.0.1-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.
Files changed (94) hide show
  1. package/README.md +27 -106
  2. package/button/button.component.d.ts +1 -1
  3. package/button/selection-settings.d.ts +1 -1
  4. package/buttongroup/buttongroup.component.d.ts +1 -1
  5. package/chip/chip-list.component.d.ts +8 -7
  6. package/chip/chip.component.d.ts +8 -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 +2 -6
  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 +63 -52
  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 +76 -51
  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 +65 -48
  22. package/{esm2020 → esm2022}/chip/chip.component.mjs +160 -93
  23. package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
  24. package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +125 -117
  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}/index.mjs +0 -1
  35. package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs +4 -3
  36. package/{esm2020 → esm2022}/listbutton/container.service.mjs +5 -3
  37. package/{esm2020 → esm2022}/listbutton/list-button.mjs +88 -51
  38. package/{esm2020 → esm2022}/listbutton/list.component.mjs +13 -10
  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 +214 -188
  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 +1318 -1056
  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 -1
  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/schematics/ngAdd/index.js +1 -1
  60. package/splitbutton/localization/messages.d.ts +1 -1
  61. package/splitbutton/splitbutton.component.d.ts +8 -16
  62. package/util.d.ts +6 -0
  63. package/esm2020/listbutton/list.module.mjs +0 -33
  64. package/esm2020/splitbutton/localization/messages.mjs +0 -23
  65. package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5551
  66. package/listbutton/list.module.d.ts +0 -13
  67. /package/{esm2020 → esm2022}/button/selection-settings.mjs +0 -0
  68. /package/{esm2020 → esm2022}/chip/chip-content-click-event-args.interface.mjs +0 -0
  69. /package/{esm2020 → esm2022}/chip/chip-list-remove-event-args.interface.mjs +0 -0
  70. /package/{esm2020 → esm2022}/chip/chip-remove-event-args.interface.mjs +0 -0
  71. /package/{esm2020/chip/models/selection.mjs → esm2022/chip/models/avatar-settings.interface.mjs} +0 -0
  72. /package/{esm2020/common/models/arrow-settings.mjs → esm2022/chip/models/selection.mjs} +0 -0
  73. /package/{esm2020/common/models/fillmode.mjs → esm2022/common/models/arrow-settings.mjs} +0 -0
  74. /package/{esm2020/common/models/rounded.mjs → esm2022/common/models/fillmode.mjs} +0 -0
  75. /package/{esm2020/common/models/size.mjs → esm2022/common/models/rounded.mjs} +0 -0
  76. /package/{esm2020/common/models/styling-classes.mjs → esm2022/common/models/size.mjs} +0 -0
  77. /package/{esm2020/common/models/theme-color.mjs → esm2022/common/models/styling-classes.mjs} +0 -0
  78. /package/{esm2020/direction.mjs → esm2022/common/models/theme-color.mjs} +0 -0
  79. /package/{esm2020 → esm2022}/common/models.mjs +0 -0
  80. /package/{esm2020/floatingactionbutton/models/align.mjs → esm2022/direction.mjs} +0 -0
  81. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  82. /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
  83. /package/{esm2020/floatingactionbutton/models/item-animation.interface.mjs → esm2022/floatingactionbutton/models/align.mjs} +0 -0
  84. /package/{esm2020/floatingactionbutton/models/item-click.event.mjs → esm2022/floatingactionbutton/models/item-animation.interface.mjs} +0 -0
  85. /package/{esm2020/floatingactionbutton/models/item.interface.mjs → esm2022/floatingactionbutton/models/item-click.event.mjs} +0 -0
  86. /package/{esm2020/floatingactionbutton/models/offset.mjs → esm2022/floatingactionbutton/models/item.interface.mjs} +0 -0
  87. /package/{esm2020/floatingactionbutton/models/position-mode.mjs → esm2022/floatingactionbutton/models/offset.mjs} +0 -0
  88. /package/{esm2020/listbutton/list-item-model.mjs → esm2022/floatingactionbutton/models/position-mode.mjs} +0 -0
  89. /package/{esm2020 → esm2022}/floatingactionbutton/utils.mjs +0 -0
  90. /package/{esm2020/listbutton/popup-settings.mjs → esm2022/listbutton/list-item-model.mjs} +0 -0
  91. /package/{esm2020 → esm2022}/navigation/key-events.mjs +0 -0
  92. /package/{esm2020 → esm2022}/navigation/navigation-action.mjs +0 -0
  93. /package/{esm2020 → esm2022}/navigation/navigation-config.mjs +0 -0
  94. /package/{esm2020 → esm2022}/progress-kendo-angular-buttons.mjs +0 -0
@@ -39,11 +39,11 @@ import * as i0 from "@angular/core";
39
39
  * ```
40
40
  */
41
41
  export class ButtonModule {
42
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
43
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
44
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
42
45
  }
43
- ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
44
- ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
45
- ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
46
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, decorators: [{
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, decorators: [{
47
47
  type: NgModule,
48
48
  args: [{
49
49
  imports: [ButtonComponent],
@@ -9,16 +9,14 @@ import * as i0 from "@angular/core";
9
9
  * @hidden
10
10
  */
11
11
  export class KendoButtonService {
12
- constructor() {
13
- this.buttonClicked = new Subject();
14
- this.buttonClicked$ = this.buttonClicked.asObservable();
15
- }
12
+ buttonClicked = new Subject();
13
+ buttonClicked$ = this.buttonClicked.asObservable();
16
14
  click(button) {
17
15
  this.buttonClicked.next(button);
18
16
  }
17
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
18
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService });
19
19
  }
20
- KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
21
- KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService });
22
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService, decorators: [{
20
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService, decorators: [{
23
21
  type: Injectable
24
22
  }] });
@@ -24,46 +24,34 @@ const tabindex = 'tabindex';
24
24
  * Represents the Kendo UI ButtonGroup component for Angular.
25
25
  */
26
26
  export class ButtonGroupComponent {
27
- constructor(service, localization, renderer, element) {
28
- this.service = service;
29
- this.renderer = renderer;
30
- this.element = element;
31
- /**
32
- * The selection mode of the ButtonGroup.
33
- * @default 'multiple'
34
- */
35
- this.selection = 'multiple';
36
- /**
37
- * When this option is set to `true` (default), the component is a single tab-stop,
38
- * and focus is moved through the inner buttons via the arrow keys.
39
- *
40
- * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
41
- *
42
- * @default true
43
- */
44
- this.navigable = true;
45
- /**
46
- * Fires every time keyboard navigation occurs.
47
- */
48
- this.navigate = new EventEmitter();
49
- this._tabIndex = 0;
50
- this.currentTabIndex = 0;
51
- this.lastFocusedIndex = -1;
52
- this.subs = new Subscription();
53
- this.wrapperClasses = true;
54
- this.role = 'group';
55
- this.focusHandler = () => {
56
- this.currentTabIndex = -1;
57
- this.defocus(this.buttons.toArray());
58
- const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
59
- const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
60
- this.focus(this.buttons.filter((_current, i) => {
61
- return i === index;
62
- }));
63
- };
64
- validatePackage(packageMetadata);
65
- this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
66
- }
27
+ service;
28
+ renderer;
29
+ element;
30
+ /**
31
+ * By default, the ButtonGroup is enabled.
32
+ * To disable the whole group of buttons, set its `disabled` attribute to `true`.
33
+ *
34
+ * To disable a specific button, set its own `disabled` attribute to `true`
35
+ * and leave the `disabled` attribute of the ButtonGroup undefined.
36
+ * If you define the `disabled` attribute of the ButtonGroup, it will take
37
+ * precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
38
+ *
39
+ * For more information on how to configure the Button, refer to
40
+ * its [API documentation]({% slug api_buttons_buttoncomponent %}).
41
+ */
42
+ disabled;
43
+ /**
44
+ * The selection mode of the ButtonGroup.
45
+ * @default 'multiple'
46
+ */
47
+ selection = 'multiple';
48
+ /**
49
+ * Sets the width of the ButtonGroup.
50
+ * If the width of the ButtonGroup is set:
51
+ * - The buttons resize automatically to fill the full width of the group wrapper.
52
+ * - The buttons acquire the same width.
53
+ */
54
+ width;
67
55
  /**
68
56
  * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
69
57
  */
@@ -74,12 +62,33 @@ export class ButtonGroupComponent {
74
62
  get tabIndex() {
75
63
  return this._tabIndex;
76
64
  }
65
+ /**
66
+ * When this option is set to `true` (default), the component is a single tab-stop,
67
+ * and focus is moved through the inner buttons via the arrow keys.
68
+ *
69
+ * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
70
+ *
71
+ * @default true
72
+ */
73
+ navigable = true;
74
+ /**
75
+ * Fires every time keyboard navigation occurs.
76
+ */
77
+ navigate = new EventEmitter();
78
+ buttons;
79
+ _tabIndex = 0;
80
+ currentTabIndex = 0;
81
+ lastFocusedIndex = -1;
82
+ direction;
83
+ subs = new Subscription();
84
+ wrapperClasses = true;
77
85
  get disabledClass() {
78
86
  return this.disabled;
79
87
  }
80
88
  get stretchedClass() {
81
89
  return !!this.width;
82
90
  }
91
+ role = 'group';
83
92
  get dir() {
84
93
  return this.direction;
85
94
  }
@@ -92,6 +101,13 @@ export class ButtonGroupComponent {
92
101
  get wrapperTabIndex() {
93
102
  return this.disabled ? undefined : this.navigable ? this.currentTabIndex : undefined;
94
103
  }
104
+ constructor(service, localization, renderer, element) {
105
+ this.service = service;
106
+ this.renderer = renderer;
107
+ this.element = element;
108
+ validatePackage(packageMetadata);
109
+ this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
110
+ }
95
111
  ngOnInit() {
96
112
  this.subs.add(this.service.buttonClicked$.subscribe((button) => {
97
113
  let newSelectionValue;
@@ -232,19 +248,28 @@ export class ButtonGroupComponent {
232
248
  .pipe(filter(predicate))
233
249
  .subscribe(handler));
234
250
  }
235
- }
236
- ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
237
- ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
238
- KendoButtonService,
239
- LocalizationService,
240
- {
241
- provide: L10N_PREFIX,
242
- useValue: 'kendo.buttongroup'
243
- }
244
- ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
251
+ focusHandler = () => {
252
+ this.currentTabIndex = -1;
253
+ this.defocus(this.buttons.toArray());
254
+ const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
255
+ const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
256
+ this.focus(this.buttons.filter((_current, i) => {
257
+ return i === index;
258
+ }));
259
+ };
260
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
261
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
262
+ KendoButtonService,
263
+ LocalizationService,
264
+ {
265
+ provide: L10N_PREFIX,
266
+ useValue: 'kendo.buttongroup'
267
+ }
268
+ ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
245
269
  <ng-content select="[kendoButton]"></ng-content>
246
270
  `, isInline: true });
247
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
271
+ }
272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
248
273
  type: Component,
249
274
  args: [{
250
275
  exportAs: 'kendoButtonGroup',
@@ -18,11 +18,11 @@ import * as i2 from "./buttongroup.component";
18
18
  * - `ButtonComponent`&mdash;The Button component class.
19
19
  */
20
20
  export class ButtonGroupModule {
21
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
22
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, imports: [i1.ButtonComponent, i2.ButtonGroupComponent], exports: [i1.ButtonComponent, i2.ButtonGroupComponent] });
23
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [i1.ButtonComponent] });
21
24
  }
22
- ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
23
- ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, imports: [i1.ButtonComponent, i2.ButtonGroupComponent], exports: [i1.ButtonComponent, i2.ButtonGroupComponent] });
24
- ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [KENDO_BUTTONGROUP] });
25
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, decorators: [{
25
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, decorators: [{
26
26
  type: NgModule,
27
27
  args: [{
28
28
  exports: [...KENDO_BUTTONGROUP],
@@ -52,11 +52,11 @@ import * as i11 from "./splitbutton/localization/custom-messages.component";
52
52
  * ```
53
53
  */
54
54
  export class ButtonsModule {
55
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
56
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, imports: [i1.ButtonComponent, i1.ButtonComponent, i2.ButtonGroupComponent, i3.DropDownButtonComponent, i4.ButtonItemTemplateDirective, i5.ChipComponent, i5.ChipComponent, i6.ChipListComponent, i7.FloatingActionButtonComponent, i8.DialItemTemplateDirective, i9.FloatingActionButtonTemplateDirective, i10.SplitButtonComponent, i11.SplitButtonCustomMessagesComponent], exports: [i1.ButtonComponent, i1.ButtonComponent, i2.ButtonGroupComponent, i3.DropDownButtonComponent, i4.ButtonItemTemplateDirective, i5.ChipComponent, i5.ChipComponent, i6.ChipListComponent, i7.FloatingActionButtonComponent, i8.DialItemTemplateDirective, i9.FloatingActionButtonTemplateDirective, i10.SplitButtonComponent, i11.SplitButtonCustomMessagesComponent] });
57
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ButtonComponent, i1.ButtonComponent, i3.DropDownButtonComponent, i5.ChipComponent, i5.ChipComponent, i7.FloatingActionButtonComponent, i10.SplitButtonComponent] });
55
58
  }
56
- ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
57
- ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, imports: [i1.ButtonComponent, i1.ButtonComponent, i2.ButtonGroupComponent, i3.DropDownButtonComponent, i4.ButtonItemTemplateDirective, i5.ChipComponent, i5.ChipComponent, i6.ChipListComponent, i7.FloatingActionButtonComponent, i8.DialItemTemplateDirective, i9.FloatingActionButtonTemplateDirective, i10.SplitButtonComponent, i11.SplitButtonCustomMessagesComponent], exports: [i1.ButtonComponent, i1.ButtonComponent, i2.ButtonGroupComponent, i3.DropDownButtonComponent, i4.ButtonItemTemplateDirective, i5.ChipComponent, i5.ChipComponent, i6.ChipListComponent, i7.FloatingActionButtonComponent, i8.DialItemTemplateDirective, i9.FloatingActionButtonTemplateDirective, i10.SplitButtonComponent, i11.SplitButtonCustomMessagesComponent] });
58
- ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ButtonComponent, i1.ButtonComponent, i2.ButtonGroupComponent, i3.DropDownButtonComponent, i5.ChipComponent, i5.ChipComponent, i6.ChipListComponent, i7.FloatingActionButtonComponent, i10.SplitButtonComponent, i11.SplitButtonCustomMessagesComponent] });
59
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, decorators: [{
59
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, decorators: [{
60
60
  type: NgModule,
61
61
  args: [{
62
62
  imports: [...KENDO_BUTTONS],
@@ -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)).
@@ -61,17 +45,35 @@ export class ChipListComponent {
61
45
  set size(size) {
62
46
  const sizeValue = size ? size : 'medium';
63
47
  this.handleClasses(sizeValue, 'size');
48
+ this.chips?.forEach(chip => this.setChipSize(chip, sizeValue));
64
49
  this._size = sizeValue;
65
50
  }
66
51
  get size() {
67
52
  return this._size;
68
53
  }
54
+ /**
55
+ * Fires each time when the ChipList selection is changed.
56
+ */
57
+ selectedChange = new EventEmitter();
58
+ /**
59
+ * Fires each time the user clicks on the remove icon of the Chip.
60
+ */
61
+ remove = new EventEmitter();
62
+ chips;
69
63
  get single() {
70
64
  return this.selection === 'single';
71
65
  }
72
66
  get multiple() {
73
67
  return this.selection === 'multiple';
74
68
  }
69
+ /**
70
+ * @hidden
71
+ */
72
+ role = 'listbox';
73
+ dynamicRTLSubscription;
74
+ _size = 'medium';
75
+ subs = new Subscription();
76
+ _navigable = true;
75
77
  /**
76
78
  * @hidden
77
79
  */
@@ -97,10 +99,10 @@ export class ChipListComponent {
97
99
  }
98
100
  }
99
101
  /**
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.
102
+ * By default, keyboard navigation is available through arrow keys and roving tabindex.
103
+ * When set to `false`, all chips are part of the default tabbing sequence of the page.
102
104
  *
103
- * @default false
105
+ * @default true
104
106
  */
105
107
  set navigable(value) {
106
108
  this._navigable = value;
@@ -110,6 +112,15 @@ export class ChipListComponent {
110
112
  get navigable() {
111
113
  return this._navigable;
112
114
  }
115
+ currentActiveIndex = 0;
116
+ constructor(localizationService, renderer, element, ngZone) {
117
+ this.localizationService = localizationService;
118
+ this.renderer = renderer;
119
+ this.element = element;
120
+ this.ngZone = ngZone;
121
+ validatePackage(packageMetadata);
122
+ this.direction = localizationService.rtl ? 'rtl' : 'ltr';
123
+ }
113
124
  ngOnInit() {
114
125
  this.dynamicRTLSubscription = this.localizationService.changes
115
126
  .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
@@ -244,6 +255,7 @@ export class ChipListComponent {
244
255
  if (chip.removable) {
245
256
  this.renderer.setAttribute(chipEl, 'aria-keyshortcuts', 'Enter Delete');
246
257
  }
258
+ this.setChipSize(chip, this.size);
247
259
  });
248
260
  }
249
261
  normalizeActiveIndex() {
@@ -251,18 +263,23 @@ export class ChipListComponent {
251
263
  this.currentActiveIndex = Math.max(this.chips.length - 1, 0);
252
264
  }
253
265
  }
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: `
266
+ setChipSize(chip, size) {
267
+ const hasSize = chip.sizeIsSet;
268
+ !hasSize && chip.size !== size && (chip.size = size);
269
+ !hasSize && (chip.sizeIsSet = false);
270
+ }
271
+ 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 });
272
+ 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: [
273
+ LocalizationService,
274
+ {
275
+ provide: L10N_PREFIX,
276
+ useValue: 'kendo.chiplist'
277
+ }
278
+ ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
263
279
  <ng-content></ng-content>
264
280
  `, isInline: true });
265
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipListComponent, decorators: [{
281
+ }
282
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, decorators: [{
266
283
  type: Component,
267
284
  args: [{
268
285
  selector: 'kendo-chiplist, kendo-chip-list',