@progress/kendo-angular-buttons 16.12.0-develop.1 → 17.0.0-develop.10

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 (11) hide show
  1. package/button/button.component.d.ts +3 -9
  2. package/buttongroup/buttongroup.component.d.ts +2 -2
  3. package/dropdownbutton/dropdownbutton.component.d.ts +0 -1
  4. package/esm2020/button/button.component.mjs +18 -60
  5. package/esm2020/buttongroup/buttongroup.component.mjs +5 -7
  6. package/esm2020/dropdownbutton/dropdownbutton.component.mjs +8 -8
  7. package/esm2020/package-metadata.mjs +2 -2
  8. package/esm2020/splitbutton/splitbutton.component.mjs +1 -1
  9. package/fesm2015/progress-kendo-angular-buttons.mjs +34 -78
  10. package/fesm2020/progress-kendo-angular-buttons.mjs +34 -78
  11. package/package.json +6 -6
package/button/button.component.d.ts CHANGED
@@ -12,9 +12,8 @@ import * as i0 from "@angular/core";
12
12
  /**
13
13
  * Represents the Kendo UI Button component for Angular.
14
14
  *
15
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
16
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
17
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
15
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
16
+ * Please use the `button[kendoButton]` selector only.
18
17
  */
19
18
  export declare class ButtonComponent implements OnDestroy, AfterViewInit {
20
19
  renderer: Renderer2;
@@ -115,10 +114,6 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
115
114
  */
116
115
  set svgIcon(icon: SVGIcon);
117
116
  get svgIcon(): SVGIcon;
118
- /**
119
- * @hidden
120
- */
121
- role: string;
122
117
  /**
123
118
  * Fires each time the selected state of a toggleable button is changed.
124
119
  *
@@ -148,7 +143,6 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
148
143
  get classButton(): boolean;
149
144
  get isToggleable(): boolean;
150
145
  get iconButtonClass(): boolean;
151
- get roleSetter(): string;
152
146
  get classDisabled(): boolean;
153
147
  get classActive(): boolean;
154
148
  get getDirection(): string;
@@ -212,5 +206,5 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
212
206
  private handleClasses;
213
207
  private handleThemeColor;
214
208
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
215
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton], span[kendoButton], kendo-button", ["kendoButton"], { "arrowIcon": "arrowIcon"; "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "imageUrl": "imageUrl"; "iconClass": "iconClass"; "icon": "icon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "svgIcon": "svgIcon"; "role": "role"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
209
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": "arrowIcon"; "toggleable": "toggleable"; "togglable": "togglable"; "selected": "selected"; "tabIndex": "tabIndex"; "imageUrl": "imageUrl"; "iconClass": "iconClass"; "icon": "icon"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "svgIcon": "svgIcon"; "primary": "primary"; "look": "look"; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
216
210
  }
package/buttongroup/buttongroup.component.d.ts CHANGED
@@ -65,7 +65,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
65
65
  private lastFocusedIndex;
66
66
  private direction;
67
67
  private subs;
68
- get wrapperClass(): boolean;
68
+ wrapperClasses: boolean;
69
69
  get disabledClass(): boolean;
70
70
  get stretchedClass(): boolean;
71
71
  role: string;
@@ -90,5 +90,5 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
90
90
  private handleSubs;
91
91
  private focusHandler;
92
92
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
93
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; "navigable": "navigable"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton], kendo-button"], true, never>;
93
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; "navigable": "navigable"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton]"], true, never>;
94
94
  }
package/dropdownbutton/dropdownbutton.component.d.ts CHANGED
@@ -157,7 +157,6 @@ export declare class DropDownButtonComponent extends ListButton implements After
157
157
  */
158
158
  onBlur: EventEmitter<any>;
159
159
  get focused(): boolean;
160
- get widgetClasses(): boolean;
161
160
  get dir(): Direction;
162
161
  /**
163
162
  * @hidden
package/esm2020/button/button.component.mjs CHANGED
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2, Output, Optional, NgZone, isDevMode } from '@angular/core';
6
6
  import { KendoButtonService } from './button.service';
7
- import { isDocumentAvailable, isChanged, hasObservers, Keys, isSafari, isFirefox } from '@progress/kendo-angular-common';
7
+ import { isDocumentAvailable, isChanged, hasObservers, isSafari, isFirefox } from '@progress/kendo-angular-common';
8
8
  import { caretAltDownIcon } from '@progress/kendo-svg-icons';
9
9
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
10
10
  import { Subscription } from 'rxjs';
@@ -16,9 +16,6 @@ import { NgIf, NgClass } from '@angular/common';
16
16
  import * as i0 from "@angular/core";
17
17
  import * as i1 from "./button.service";
18
18
  import * as i2 from "@progress/kendo-angular-l10n";
19
- const SPAN_TAG_NAME = 'SPAN';
20
- const BUTTON_TAG_NAME = 'BUTTON';
21
- const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
22
19
  const DEFAULT_ROUNDED = 'medium';
23
20
  const DEFAULT_SIZE = 'medium';
24
21
  const DEFAULT_THEME_COLOR = 'base';
@@ -26,9 +23,8 @@ const DEFAULT_FILL_MODE = 'solid';
26
23
  /**
27
24
  * Represents the Kendo UI Button component for Angular.
28
25
  *
29
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
30
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
31
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
26
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
27
+ * Please use the `button[kendoButton]` selector only.
32
28
  */
33
29
  export class ButtonComponent {
34
30
  constructor(element, renderer, service, localization, ngZone) {
@@ -47,10 +43,6 @@ export class ButtonComponent {
47
43
  * @default false
48
44
  */
49
45
  this.toggleable = false;
50
- /**
51
- * @hidden
52
- */
53
- this.role = 'button';
54
46
  /**
55
47
  * Fires each time the selected state of a toggleable button is changed.
56
48
  *
@@ -235,10 +227,6 @@ export class ButtonComponent {
235
227
  const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
236
228
  return hasIcon && !this.hasText;
237
229
  }
238
- get roleSetter() {
239
- const isButtonElementAndRole = this.element.tagName === BUTTON_TAG_NAME && this.role === 'button';
240
- return isButtonElementAndRole ? undefined : this.role;
241
- }
242
230
  get classDisabled() {
243
231
  return this.isDisabled;
244
232
  }
@@ -289,41 +277,14 @@ export class ButtonComponent {
289
277
  return this.element;
290
278
  }
291
279
  ngOnInit() {
292
- const elementTagName = this.element.tagName;
293
- const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
294
280
  if (!this.element.hasAttribute('role') && this.togglable) {
295
281
  this.toggleAriaPressed(this.toggleable);
296
282
  }
297
- if (this.role) {
298
- const isButtonElementAndRole = elementTagName === BUTTON_TAG_NAME && this.role === 'button';
299
- if (!isButtonElementAndRole) {
300
- this.setAttribute('role', this.role);
301
- }
302
- }
303
- if (isSpanOrKendoButton && !this.isDisabled) {
304
- this.tabIndex = 0;
305
- }
306
- if (isDevMode() && isSpanOrKendoButton) {
307
- console.warn(`As of package v16, the "span[kendoButton]" and "kendo-button" selectors are deprecated and can
308
- be removed in a future major version. We recommend using the "button[kendoButton]" selector
309
- to avoid discrepancies between the behavior of the "ButtonComponent" and the native HTML Button element.`);
310
- }
311
283
  this.ngZone.runOutsideAngular(() => {
312
284
  this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
313
- this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
314
- const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
315
- if (isSpanOrKendoButton && isSpaceOrEnter) {
316
- this.ngZone.run(() => {
317
- this.click.emit(event);
318
- });
319
- this._onButtonClick();
320
- }
321
- }));
322
285
  this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
323
- const elementTagName = this.element.tagName;
324
- const isButton = elementTagName === BUTTON_TAG_NAME;
325
286
  const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
326
- if (!this.isDisabled && isButton && isBrowserSafari) {
287
+ if (!this.isDisabled && isBrowserSafari) {
327
288
  event.preventDefault();
328
289
  this.element.focus();
329
290
  }
@@ -452,7 +413,7 @@ export class ButtonComponent {
452
413
  }
453
414
  }
454
415
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
455
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
416
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
456
417
  LocalizationService,
457
418
  {
458
419
  provide: L10N_PREFIX,
@@ -470,11 +431,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
470
431
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
471
432
  <span class="k-button-text"><ng-content></ng-content></span>
472
433
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
473
- <kendo-icon-wrapper
474
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
475
- innerCssClass="k-button-icon"
476
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
477
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
434
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
435
+ <kendo-icon-wrapper
436
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
437
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
438
+ </span>
439
+
478
440
  `, 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"] }] });
479
441
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
480
442
  type: Component,
@@ -487,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
487
449
  useValue: 'kendo.button'
488
450
  }
489
451
  ],
490
- selector: 'button[kendoButton], span[kendoButton], kendo-button',
452
+ selector: 'button[kendoButton]',
491
453
  template: `
492
454
  <kendo-icon-wrapper
493
455
  *ngIf="icon || svgIcon"
@@ -500,11 +462,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
500
462
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
501
463
  <span class="k-button-text"><ng-content></ng-content></span>
502
464
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
503
- <kendo-icon-wrapper
504
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
505
- innerCssClass="k-button-icon"
506
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
507
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
465
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
466
+ <kendo-icon-wrapper
467
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
468
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
469
+ </span>
470
+
508
471
  `,
509
472
  standalone: true,
510
473
  imports: [NgIf, IconWrapperComponent, NgClass]
@@ -539,8 +502,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
539
502
  type: Input
540
503
  }], svgIcon: [{
541
504
  type: Input
542
- }], role: [{
543
- type: Input
544
505
  }], selectedChange: [{
545
506
  type: Output
546
507
  }], click: [{
@@ -554,9 +515,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
554
515
  }], iconButtonClass: [{
555
516
  type: HostBinding,
556
517
  args: ['class.k-icon-button']
557
- }], roleSetter: [{
558
- type: HostBinding,
559
- args: ['attr.role']
560
518
  }], classDisabled: [{
561
519
  type: HostBinding,
562
520
  args: ['attr.aria-disabled']
package/esm2020/buttongroup/buttongroup.component.mjs CHANGED
@@ -50,6 +50,7 @@ export class ButtonGroupComponent {
50
50
  this.currentTabIndex = 0;
51
51
  this.lastFocusedIndex = -1;
52
52
  this.subs = new Subscription();
53
+ this.wrapperClasses = true;
53
54
  this.role = 'group';
54
55
  this.focusHandler = () => {
55
56
  this.currentTabIndex = -1;
@@ -73,9 +74,6 @@ export class ButtonGroupComponent {
73
74
  get tabIndex() {
74
75
  return this._tabIndex;
75
76
  }
76
- get wrapperClass() {
77
- return true;
78
- }
79
77
  get disabledClass() {
80
78
  return this.disabled;
81
79
  }
@@ -236,7 +234,7 @@ export class ButtonGroupComponent {
236
234
  }
237
235
  }
238
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 });
239
- 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.wrapperClass", "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: [
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: [
240
238
  KendoButtonService,
241
239
  LocalizationService,
242
240
  {
@@ -244,7 +242,7 @@ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
244
242
  useValue: 'kendo.buttongroup'
245
243
  }
246
244
  ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
247
- <ng-content select="[kendoButton], kendo-button"></ng-content>
245
+ <ng-content select="[kendoButton]"></ng-content>
248
246
  `, isInline: true });
249
247
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
250
248
  type: Component,
@@ -260,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
260
258
  ],
261
259
  selector: 'kendo-buttongroup',
262
260
  template: `
263
- <ng-content select="[kendoButton], kendo-button"></ng-content>
261
+ <ng-content select="[kendoButton]"></ng-content>
264
262
  `,
265
263
  standalone: true
266
264
  }]
@@ -282,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
282
280
  }], buttons: [{
283
281
  type: ContentChildren,
284
282
  args: [ButtonComponent]
285
- }], wrapperClass: [{
283
+ }], wrapperClasses: [{
286
284
  type: HostBinding,
287
285
  args: ['class.k-button-group']
288
286
  }], disabledClass: [{
package/esm2020/dropdownbutton/dropdownbutton.component.mjs CHANGED
@@ -184,9 +184,6 @@ export class DropDownButtonComponent extends ListButton {
184
184
  get focused() {
185
185
  return this._isFocused && !this._disabled;
186
186
  }
187
- get widgetClasses() {
188
- return true;
189
- }
190
187
  get dir() {
191
188
  return this.direction;
192
189
  }
@@ -269,6 +266,10 @@ export class DropDownButtonComponent extends ListButton {
269
266
  this.containerService.container = this.container;
270
267
  this.containerService.template = this.popupTemplate;
271
268
  this.handleButtonAttributes(this.buttonAttributes);
269
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
270
+ if (arrowWrapper) {
271
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
272
+ }
272
273
  }
273
274
  /**
274
275
  * @hidden
@@ -308,7 +309,7 @@ export class DropDownButtonComponent extends ListButton {
308
309
  }
309
310
  }
310
311
  DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
311
- DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
312
+ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
312
313
  FocusService,
313
314
  NavigationService,
314
315
  NAVIGATION_SETTINGS_PROVIDER,
@@ -323,6 +324,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
323
324
  type="button"
324
325
  [id]="buttonId"
325
326
  [tabindex]="componentTabIndex"
327
+ class="k-menu-button"
326
328
  [class.k-active]="active"
327
329
  [disabled]="disabled"
328
330
  [icon]="icon"
@@ -361,7 +363,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
361
363
  </kendo-button-list>
362
364
  </ng-template>
363
365
  <ng-container #container></ng-container>
364
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
366
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
365
367
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
366
368
  type: Component,
367
369
  args: [{
@@ -383,6 +385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
383
385
  type="button"
384
386
  [id]="buttonId"
385
387
  [tabindex]="componentTabIndex"
388
+ class="k-menu-button"
386
389
  [class.k-active]="active"
387
390
  [disabled]="disabled"
388
391
  [icon]="icon"
@@ -460,9 +463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
460
463
  }], focused: [{
461
464
  type: HostBinding,
462
465
  args: ['class.k-focus']
463
- }], widgetClasses: [{
464
- type: HostBinding,
465
- args: ['class.k-dropdown-button']
466
466
  }], dir: [{
467
467
  type: HostBinding,
468
468
  args: ['attr.dir']
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-buttons',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1728572587,
13
- version: '16.12.0-develop.1',
12
+ publishDate: 1729175901,
13
+ version: '17.0.0-develop.10',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/splitbutton/splitbutton.component.mjs CHANGED
@@ -642,7 +642,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
642
642
  </kendo-button-list>
643
643
  </ng-template>
644
644
  <ng-container #container></ng-container>
645
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
645
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
646
646
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
647
647
  type: Component,
648
648
  args: [{
package/fesm2015/progress-kendo-angular-buttons.mjs CHANGED
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
6
  import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ContentChild, ViewChild, forwardRef, NgModule } from '@angular/core';
7
- import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
7
+ import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
8
8
  export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
9
9
  import { caretAltDownIcon, xCircleIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
10
10
  import * as i1 from '@progress/kendo-angular-l10n';
@@ -26,8 +26,8 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-buttons',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1728572587,
30
- version: '16.12.0-develop.1',
29
+ publishDate: 1729175901,
30
+ version: '17.0.0-develop.10',
31
31
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
32
32
  };
33
33
 
@@ -141,9 +141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
141
141
  type: Injectable
142
142
  }] });
143
143
 
144
- const SPAN_TAG_NAME = 'SPAN';
145
- const BUTTON_TAG_NAME = 'BUTTON';
146
- const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
147
144
  const DEFAULT_ROUNDED$3 = 'medium';
148
145
  const DEFAULT_SIZE$2 = 'medium';
149
146
  const DEFAULT_THEME_COLOR$2 = 'base';
@@ -151,9 +148,8 @@ const DEFAULT_FILL_MODE$3 = 'solid';
151
148
  /**
152
149
  * Represents the Kendo UI Button component for Angular.
153
150
  *
154
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
155
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
156
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
151
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
152
+ * Please use the `button[kendoButton]` selector only.
157
153
  */
158
154
  class ButtonComponent {
159
155
  constructor(element, renderer, service, localization, ngZone) {
@@ -172,10 +168,6 @@ class ButtonComponent {
172
168
  * @default false
173
169
  */
174
170
  this.toggleable = false;
175
- /**
176
- * @hidden
177
- */
178
- this.role = 'button';
179
171
  /**
180
172
  * Fires each time the selected state of a toggleable button is changed.
181
173
  *
@@ -360,10 +352,6 @@ class ButtonComponent {
360
352
  const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
361
353
  return hasIcon && !this.hasText;
362
354
  }
363
- get roleSetter() {
364
- const isButtonElementAndRole = this.element.tagName === BUTTON_TAG_NAME && this.role === 'button';
365
- return isButtonElementAndRole ? undefined : this.role;
366
- }
367
355
  get classDisabled() {
368
356
  return this.isDisabled;
369
357
  }
@@ -414,41 +402,14 @@ class ButtonComponent {
414
402
  return this.element;
415
403
  }
416
404
  ngOnInit() {
417
- const elementTagName = this.element.tagName;
418
- const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
419
405
  if (!this.element.hasAttribute('role') && this.togglable) {
420
406
  this.toggleAriaPressed(this.toggleable);
421
407
  }
422
- if (this.role) {
423
- const isButtonElementAndRole = elementTagName === BUTTON_TAG_NAME && this.role === 'button';
424
- if (!isButtonElementAndRole) {
425
- this.setAttribute('role', this.role);
426
- }
427
- }
428
- if (isSpanOrKendoButton && !this.isDisabled) {
429
- this.tabIndex = 0;
430
- }
431
- if (isDevMode() && isSpanOrKendoButton) {
432
- console.warn(`As of package v16, the "span[kendoButton]" and "kendo-button" selectors are deprecated and can
433
- be removed in a future major version. We recommend using the "button[kendoButton]" selector
434
- to avoid discrepancies between the behavior of the "ButtonComponent" and the native HTML Button element.`);
435
- }
436
408
  this.ngZone.runOutsideAngular(() => {
437
409
  this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
438
- this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
439
- const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
440
- if (isSpanOrKendoButton && isSpaceOrEnter) {
441
- this.ngZone.run(() => {
442
- this.click.emit(event);
443
- });
444
- this._onButtonClick();
445
- }
446
- }));
447
410
  this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
448
- const elementTagName = this.element.tagName;
449
- const isButton = elementTagName === BUTTON_TAG_NAME;
450
411
  const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
451
- if (!this.isDisabled && isButton && isBrowserSafari) {
412
+ if (!this.isDisabled && isBrowserSafari) {
452
413
  event.preventDefault();
453
414
  this.element.focus();
454
415
  }
@@ -577,7 +538,7 @@ class ButtonComponent {
577
538
  }
578
539
  }
579
540
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
580
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
541
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
581
542
  LocalizationService,
582
543
  {
583
544
  provide: L10N_PREFIX,
@@ -595,11 +556,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
595
556
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
596
557
  <span class="k-button-text"><ng-content></ng-content></span>
597
558
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
598
- <kendo-icon-wrapper
599
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
600
- innerCssClass="k-button-icon"
601
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
602
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
559
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
560
+ <kendo-icon-wrapper
561
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
562
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
563
+ </span>
564
+
603
565
  `, 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"] }] });
604
566
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
605
567
  type: Component,
@@ -612,7 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
612
574
  useValue: 'kendo.button'
613
575
  }
614
576
  ],
615
- selector: 'button[kendoButton], span[kendoButton], kendo-button',
577
+ selector: 'button[kendoButton]',
616
578
  template: `
617
579
  <kendo-icon-wrapper
618
580
  *ngIf="icon || svgIcon"
@@ -625,11 +587,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
625
587
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
626
588
  <span class="k-button-text"><ng-content></ng-content></span>
627
589
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
628
- <kendo-icon-wrapper
629
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
630
- innerCssClass="k-button-icon"
631
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
632
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
590
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
591
+ <kendo-icon-wrapper
592
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
593
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
594
+ </span>
595
+
633
596
  `,
634
597
  standalone: true,
635
598
  imports: [NgIf, IconWrapperComponent, NgClass]
@@ -666,8 +629,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
666
629
  type: Input
667
630
  }], svgIcon: [{
668
631
  type: Input
669
- }], role: [{
670
- type: Input
671
632
  }], selectedChange: [{
672
633
  type: Output
673
634
  }], click: [{
@@ -681,9 +642,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
681
642
  }], iconButtonClass: [{
682
643
  type: HostBinding,
683
644
  args: ['class.k-icon-button']
684
- }], roleSetter: [{
685
- type: HostBinding,
686
- args: ['attr.role']
687
645
  }], classDisabled: [{
688
646
  type: HostBinding,
689
647
  args: ['attr.aria-disabled']
@@ -766,6 +724,7 @@ class ButtonGroupComponent {
766
724
  this.currentTabIndex = 0;
767
725
  this.lastFocusedIndex = -1;
768
726
  this.subs = new Subscription();
727
+ this.wrapperClasses = true;
769
728
  this.role = 'group';
770
729
  this.focusHandler = () => {
771
730
  this.currentTabIndex = -1;
@@ -789,9 +748,6 @@ class ButtonGroupComponent {
789
748
  get tabIndex() {
790
749
  return this._tabIndex;
791
750
  }
792
- get wrapperClass() {
793
- return true;
794
- }
795
751
  get disabledClass() {
796
752
  return this.disabled;
797
753
  }
@@ -952,7 +908,7 @@ class ButtonGroupComponent {
952
908
  }
953
909
  }
954
910
  ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
955
- 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.wrapperClass", "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: [
911
+ 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: [
956
912
  KendoButtonService,
957
913
  LocalizationService,
958
914
  {
@@ -960,7 +916,7 @@ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
960
916
  useValue: 'kendo.buttongroup'
961
917
  }
962
918
  ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
963
- <ng-content select="[kendoButton], kendo-button"></ng-content>
919
+ <ng-content select="[kendoButton]"></ng-content>
964
920
  `, isInline: true });
965
921
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
966
922
  type: Component,
@@ -976,7 +932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
976
932
  ],
977
933
  selector: 'kendo-buttongroup',
978
934
  template: `
979
- <ng-content select="[kendoButton], kendo-button"></ng-content>
935
+ <ng-content select="[kendoButton]"></ng-content>
980
936
  `,
981
937
  standalone: true
982
938
  }]
@@ -998,7 +954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
998
954
  }], buttons: [{
999
955
  type: ContentChildren,
1000
956
  args: [ButtonComponent]
1001
- }], wrapperClass: [{
957
+ }], wrapperClasses: [{
1002
958
  type: HostBinding,
1003
959
  args: ['class.k-button-group']
1004
960
  }], disabledClass: [{
@@ -2830,9 +2786,6 @@ class DropDownButtonComponent extends ListButton {
2830
2786
  get focused() {
2831
2787
  return this._isFocused && !this._disabled;
2832
2788
  }
2833
- get widgetClasses() {
2834
- return true;
2835
- }
2836
2789
  get dir() {
2837
2790
  return this.direction;
2838
2791
  }
@@ -2915,6 +2868,10 @@ class DropDownButtonComponent extends ListButton {
2915
2868
  this.containerService.container = this.container;
2916
2869
  this.containerService.template = this.popupTemplate;
2917
2870
  this.handleButtonAttributes(this.buttonAttributes);
2871
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
2872
+ if (arrowWrapper) {
2873
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
2874
+ }
2918
2875
  }
2919
2876
  /**
2920
2877
  * @hidden
@@ -2955,7 +2912,7 @@ class DropDownButtonComponent extends ListButton {
2955
2912
  }
2956
2913
  }
2957
2914
  DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
2958
- DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
2915
+ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
2959
2916
  FocusService,
2960
2917
  NavigationService,
2961
2918
  NAVIGATION_SETTINGS_PROVIDER$2,
@@ -2970,6 +2927,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2970
2927
  type="button"
2971
2928
  [id]="buttonId"
2972
2929
  [tabindex]="componentTabIndex"
2930
+ class="k-menu-button"
2973
2931
  [class.k-active]="active"
2974
2932
  [disabled]="disabled"
2975
2933
  [icon]="icon"
@@ -3008,7 +2966,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
3008
2966
  </kendo-button-list>
3009
2967
  </ng-template>
3010
2968
  <ng-container #container></ng-container>
3011
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
2969
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
3012
2970
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
3013
2971
  type: Component,
3014
2972
  args: [{
@@ -3030,6 +2988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3030
2988
  type="button"
3031
2989
  [id]="buttonId"
3032
2990
  [tabindex]="componentTabIndex"
2991
+ class="k-menu-button"
3033
2992
  [class.k-active]="active"
3034
2993
  [disabled]="disabled"
3035
2994
  [icon]="icon"
@@ -3107,9 +3066,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3107
3066
  }], focused: [{
3108
3067
  type: HostBinding,
3109
3068
  args: ['class.k-focus']
3110
- }], widgetClasses: [{
3111
- type: HostBinding,
3112
- args: ['class.k-dropdown-button']
3113
3069
  }], dir: [{
3114
3070
  type: HostBinding,
3115
3071
  args: ['attr.dir']
@@ -5068,7 +5024,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
5068
5024
  </kendo-button-list>
5069
5025
  </ng-template>
5070
5026
  <ng-container #container></ng-container>
5071
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5027
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5072
5028
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
5073
5029
  type: Component,
5074
5030
  args: [{
package/fesm2020/progress-kendo-angular-buttons.mjs CHANGED
@@ -5,7 +5,7 @@
5
5
  import * as i0 from '@angular/core';
6
6
  import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ContentChild, ViewChild, forwardRef, NgModule } from '@angular/core';
7
7
  import { Subject, Subscription, fromEvent, merge } from 'rxjs';
8
- import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
8
+ import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
9
9
  export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
10
10
  import { caretAltDownIcon, xCircleIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
11
11
  import * as i1 from '@progress/kendo-angular-l10n';
@@ -44,8 +44,8 @@ const packageMetadata = {
44
44
  name: '@progress/kendo-angular-buttons',
45
45
  productName: 'Kendo UI for Angular',
46
46
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
47
- publishDate: 1728572587,
48
- version: '16.12.0-develop.1',
47
+ publishDate: 1729175901,
48
+ version: '17.0.0-develop.10',
49
49
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
50
50
  };
51
51
 
@@ -141,9 +141,6 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
141
141
  };
142
142
  };
143
143
 
144
- const SPAN_TAG_NAME = 'SPAN';
145
- const BUTTON_TAG_NAME = 'BUTTON';
146
- const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
147
144
  const DEFAULT_ROUNDED$3 = 'medium';
148
145
  const DEFAULT_SIZE$2 = 'medium';
149
146
  const DEFAULT_THEME_COLOR$2 = 'base';
@@ -151,9 +148,8 @@ const DEFAULT_FILL_MODE$3 = 'solid';
151
148
  /**
152
149
  * Represents the Kendo UI Button component for Angular.
153
150
  *
154
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
155
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
156
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
151
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
152
+ * Please use the `button[kendoButton]` selector only.
157
153
  */
158
154
  class ButtonComponent {
159
155
  constructor(element, renderer, service, localization, ngZone) {
@@ -172,10 +168,6 @@ class ButtonComponent {
172
168
  * @default false
173
169
  */
174
170
  this.toggleable = false;
175
- /**
176
- * @hidden
177
- */
178
- this.role = 'button';
179
171
  /**
180
172
  * Fires each time the selected state of a toggleable button is changed.
181
173
  *
@@ -360,10 +352,6 @@ class ButtonComponent {
360
352
  const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
361
353
  return hasIcon && !this.hasText;
362
354
  }
363
- get roleSetter() {
364
- const isButtonElementAndRole = this.element.tagName === BUTTON_TAG_NAME && this.role === 'button';
365
- return isButtonElementAndRole ? undefined : this.role;
366
- }
367
355
  get classDisabled() {
368
356
  return this.isDisabled;
369
357
  }
@@ -414,41 +402,14 @@ class ButtonComponent {
414
402
  return this.element;
415
403
  }
416
404
  ngOnInit() {
417
- const elementTagName = this.element.tagName;
418
- const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
419
405
  if (!this.element.hasAttribute('role') && this.togglable) {
420
406
  this.toggleAriaPressed(this.toggleable);
421
407
  }
422
- if (this.role) {
423
- const isButtonElementAndRole = elementTagName === BUTTON_TAG_NAME && this.role === 'button';
424
- if (!isButtonElementAndRole) {
425
- this.setAttribute('role', this.role);
426
- }
427
- }
428
- if (isSpanOrKendoButton && !this.isDisabled) {
429
- this.tabIndex = 0;
430
- }
431
- if (isDevMode() && isSpanOrKendoButton) {
432
- console.warn(`As of package v16, the "span[kendoButton]" and "kendo-button" selectors are deprecated and can
433
- be removed in a future major version. We recommend using the "button[kendoButton]" selector
434
- to avoid discrepancies between the behavior of the "ButtonComponent" and the native HTML Button element.`);
435
- }
436
408
  this.ngZone.runOutsideAngular(() => {
437
409
  this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
438
- this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
439
- const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
440
- if (isSpanOrKendoButton && isSpaceOrEnter) {
441
- this.ngZone.run(() => {
442
- this.click.emit(event);
443
- });
444
- this._onButtonClick();
445
- }
446
- }));
447
410
  this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
448
- const elementTagName = this.element.tagName;
449
- const isButton = elementTagName === BUTTON_TAG_NAME;
450
411
  const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
451
- if (!this.isDisabled && isButton && isBrowserSafari) {
412
+ if (!this.isDisabled && isBrowserSafari) {
452
413
  event.preventDefault();
453
414
  this.element.focus();
454
415
  }
@@ -577,7 +538,7 @@ class ButtonComponent {
577
538
  }
578
539
  }
579
540
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
580
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
541
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
581
542
  LocalizationService,
582
543
  {
583
544
  provide: L10N_PREFIX,
@@ -595,11 +556,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
595
556
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
596
557
  <span class="k-button-text"><ng-content></ng-content></span>
597
558
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
598
- <kendo-icon-wrapper
599
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
600
- innerCssClass="k-button-icon"
601
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
602
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
559
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
560
+ <kendo-icon-wrapper
561
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
562
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
563
+ </span>
564
+
603
565
  `, 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"] }] });
604
566
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
605
567
  type: Component,
@@ -612,7 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
612
574
  useValue: 'kendo.button'
613
575
  }
614
576
  ],
615
- selector: 'button[kendoButton], span[kendoButton], kendo-button',
577
+ selector: 'button[kendoButton]',
616
578
  template: `
617
579
  <kendo-icon-wrapper
618
580
  *ngIf="icon || svgIcon"
@@ -625,11 +587,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
625
587
  <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
626
588
  <span class="k-button-text"><ng-content></ng-content></span>
627
589
  <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
628
- <kendo-icon-wrapper
629
- *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
630
- innerCssClass="k-button-icon"
631
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
632
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
590
+ <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
591
+ <kendo-icon-wrapper
592
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
593
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
594
+ </span>
595
+
633
596
  `,
634
597
  standalone: true,
635
598
  imports: [NgIf, IconWrapperComponent, NgClass]
@@ -664,8 +627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
664
627
  type: Input
665
628
  }], svgIcon: [{
666
629
  type: Input
667
- }], role: [{
668
- type: Input
669
630
  }], selectedChange: [{
670
631
  type: Output
671
632
  }], click: [{
@@ -679,9 +640,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
679
640
  }], iconButtonClass: [{
680
641
  type: HostBinding,
681
642
  args: ['class.k-icon-button']
682
- }], roleSetter: [{
683
- type: HostBinding,
684
- args: ['attr.role']
685
643
  }], classDisabled: [{
686
644
  type: HostBinding,
687
645
  args: ['attr.aria-disabled']
@@ -764,6 +722,7 @@ class ButtonGroupComponent {
764
722
  this.currentTabIndex = 0;
765
723
  this.lastFocusedIndex = -1;
766
724
  this.subs = new Subscription();
725
+ this.wrapperClasses = true;
767
726
  this.role = 'group';
768
727
  this.focusHandler = () => {
769
728
  this.currentTabIndex = -1;
@@ -787,9 +746,6 @@ class ButtonGroupComponent {
787
746
  get tabIndex() {
788
747
  return this._tabIndex;
789
748
  }
790
- get wrapperClass() {
791
- return true;
792
- }
793
749
  get disabledClass() {
794
750
  return this.disabled;
795
751
  }
@@ -950,7 +906,7 @@ class ButtonGroupComponent {
950
906
  }
951
907
  }
952
908
  ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
953
- 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.wrapperClass", "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: [
909
+ 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: [
954
910
  KendoButtonService,
955
911
  LocalizationService,
956
912
  {
@@ -958,7 +914,7 @@ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
958
914
  useValue: 'kendo.buttongroup'
959
915
  }
960
916
  ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
961
- <ng-content select="[kendoButton], kendo-button"></ng-content>
917
+ <ng-content select="[kendoButton]"></ng-content>
962
918
  `, isInline: true });
963
919
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
964
920
  type: Component,
@@ -974,7 +930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
974
930
  ],
975
931
  selector: 'kendo-buttongroup',
976
932
  template: `
977
- <ng-content select="[kendoButton], kendo-button"></ng-content>
933
+ <ng-content select="[kendoButton]"></ng-content>
978
934
  `,
979
935
  standalone: true
980
936
  }]
@@ -996,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
996
952
  }], buttons: [{
997
953
  type: ContentChildren,
998
954
  args: [ButtonComponent]
999
- }], wrapperClass: [{
955
+ }], wrapperClasses: [{
1000
956
  type: HostBinding,
1001
957
  args: ['class.k-button-group']
1002
958
  }], disabledClass: [{
@@ -2824,9 +2780,6 @@ class DropDownButtonComponent extends ListButton {
2824
2780
  get focused() {
2825
2781
  return this._isFocused && !this._disabled;
2826
2782
  }
2827
- get widgetClasses() {
2828
- return true;
2829
- }
2830
2783
  get dir() {
2831
2784
  return this.direction;
2832
2785
  }
@@ -2909,6 +2862,10 @@ class DropDownButtonComponent extends ListButton {
2909
2862
  this.containerService.container = this.container;
2910
2863
  this.containerService.template = this.popupTemplate;
2911
2864
  this.handleButtonAttributes(this.buttonAttributes);
2865
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
2866
+ if (arrowWrapper) {
2867
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
2868
+ }
2912
2869
  }
2913
2870
  /**
2914
2871
  * @hidden
@@ -2948,7 +2905,7 @@ class DropDownButtonComponent extends ListButton {
2948
2905
  }
2949
2906
  }
2950
2907
  DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
2951
- DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
2908
+ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
2952
2909
  FocusService,
2953
2910
  NavigationService,
2954
2911
  NAVIGATION_SETTINGS_PROVIDER$2,
@@ -2963,6 +2920,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2963
2920
  type="button"
2964
2921
  [id]="buttonId"
2965
2922
  [tabindex]="componentTabIndex"
2923
+ class="k-menu-button"
2966
2924
  [class.k-active]="active"
2967
2925
  [disabled]="disabled"
2968
2926
  [icon]="icon"
@@ -3001,7 +2959,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
3001
2959
  </kendo-button-list>
3002
2960
  </ng-template>
3003
2961
  <ng-container #container></ng-container>
3004
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
2962
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
3005
2963
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
3006
2964
  type: Component,
3007
2965
  args: [{
@@ -3023,6 +2981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3023
2981
  type="button"
3024
2982
  [id]="buttonId"
3025
2983
  [tabindex]="componentTabIndex"
2984
+ class="k-menu-button"
3026
2985
  [class.k-active]="active"
3027
2986
  [disabled]="disabled"
3028
2987
  [icon]="icon"
@@ -3100,9 +3059,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3100
3059
  }], focused: [{
3101
3060
  type: HostBinding,
3102
3061
  args: ['class.k-focus']
3103
- }], widgetClasses: [{
3104
- type: HostBinding,
3105
- args: ['class.k-dropdown-button']
3106
3062
  }], dir: [{
3107
3063
  type: HostBinding,
3108
3064
  args: ['attr.dir']
@@ -5055,7 +5011,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
5055
5011
  </kendo-button-list>
5056
5012
  </ng-template>
5057
5013
  <ng-container #container></ng-container>
5058
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5014
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5059
5015
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
5060
5016
  type: Component,
5061
5017
  args: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-buttons",
3
- "version": "16.12.0-develop.1",
3
+ "version": "17.0.0-develop.10",
4
4
  "description": "Buttons Package for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -25,15 +25,15 @@
25
25
  "@angular/core": "15 - 18",
26
26
  "@angular/platform-browser": "15 - 18",
27
27
  "@progress/kendo-licensing": "^1.0.2",
28
- "@progress/kendo-angular-common": "16.12.0-develop.1",
29
- "@progress/kendo-angular-l10n": "16.12.0-develop.1",
30
- "@progress/kendo-angular-popup": "16.12.0-develop.1",
31
- "@progress/kendo-angular-icons": "16.12.0-develop.1",
28
+ "@progress/kendo-angular-common": "17.0.0-develop.10",
29
+ "@progress/kendo-angular-l10n": "17.0.0-develop.10",
30
+ "@progress/kendo-angular-popup": "17.0.0-develop.10",
31
+ "@progress/kendo-angular-icons": "17.0.0-develop.10",
32
32
  "rxjs": "^6.5.3 || ^7.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "tslib": "^2.3.1",
36
- "@progress/kendo-angular-schematics": "16.12.0-develop.1",
36
+ "@progress/kendo-angular-schematics": "17.0.0-develop.10",
37
37
  "@progress/kendo-common": "^0.2.1"
38
38
  },
39
39
  "schematics": "./schematics/collection.json",