@progress/kendo-angular-buttons 17.0.0-develop.6 → 17.0.0-develop.8

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 (10) hide show
  1. package/button/button.component.d.ts +3 -9
  2. package/buttongroup/buttongroup.component.d.ts +2 -2
  3. package/esm2020/button/button.component.mjs +18 -60
  4. package/esm2020/buttongroup/buttongroup.component.mjs +5 -7
  5. package/esm2020/dropdownbutton/dropdownbutton.component.mjs +7 -1
  6. package/esm2020/package-metadata.mjs +2 -2
  7. package/esm2020/splitbutton/splitbutton.component.mjs +1 -1
  8. package/fesm2015/progress-kendo-angular-buttons.mjs +33 -71
  9. package/fesm2020/progress-kendo-angular-buttons.mjs +33 -71
  10. 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/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
@@ -269,6 +269,10 @@ export class DropDownButtonComponent extends ListButton {
269
269
  this.containerService.container = this.container;
270
270
  this.containerService.template = this.popupTemplate;
271
271
  this.handleButtonAttributes(this.buttonAttributes);
272
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
273
+ if (arrowWrapper) {
274
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
275
+ }
272
276
  }
273
277
  /**
274
278
  * @hidden
@@ -323,6 +327,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
323
327
  type="button"
324
328
  [id]="buttonId"
325
329
  [tabindex]="componentTabIndex"
330
+ class="k-menu-button"
326
331
  [class.k-active]="active"
327
332
  [disabled]="disabled"
328
333
  [icon]="icon"
@@ -361,7 +366,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
361
366
  </kendo-button-list>
362
367
  </ng-template>
363
368
  <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"] }] });
369
+ `, 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
370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
366
371
  type: Component,
367
372
  args: [{
@@ -383,6 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
383
388
  type="button"
384
389
  [id]="buttonId"
385
390
  [tabindex]="componentTabIndex"
391
+ class="k-menu-button"
386
392
  [class.k-active]="active"
387
393
  [disabled]="disabled"
388
394
  [icon]="icon"
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: 1729019885,
13
- version: '17.0.0-develop.6',
12
+ publishDate: 1729169934,
13
+ version: '17.0.0-develop.8',
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: 1729019885,
30
- version: '17.0.0-develop.6',
29
+ publishDate: 1729169934,
30
+ version: '17.0.0-develop.8',
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: [{
@@ -2915,6 +2871,10 @@ class DropDownButtonComponent extends ListButton {
2915
2871
  this.containerService.container = this.container;
2916
2872
  this.containerService.template = this.popupTemplate;
2917
2873
  this.handleButtonAttributes(this.buttonAttributes);
2874
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
2875
+ if (arrowWrapper) {
2876
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
2877
+ }
2918
2878
  }
2919
2879
  /**
2920
2880
  * @hidden
@@ -2970,6 +2930,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2970
2930
  type="button"
2971
2931
  [id]="buttonId"
2972
2932
  [tabindex]="componentTabIndex"
2933
+ class="k-menu-button"
2973
2934
  [class.k-active]="active"
2974
2935
  [disabled]="disabled"
2975
2936
  [icon]="icon"
@@ -3008,7 +2969,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
3008
2969
  </kendo-button-list>
3009
2970
  </ng-template>
3010
2971
  <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"] }] });
2972
+ `, 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
2973
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
3013
2974
  type: Component,
3014
2975
  args: [{
@@ -3030,6 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3030
2991
  type="button"
3031
2992
  [id]="buttonId"
3032
2993
  [tabindex]="componentTabIndex"
2994
+ class="k-menu-button"
3033
2995
  [class.k-active]="active"
3034
2996
  [disabled]="disabled"
3035
2997
  [icon]="icon"
@@ -5068,7 +5030,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
5068
5030
  </kendo-button-list>
5069
5031
  </ng-template>
5070
5032
  <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"] }] });
5033
+ `, 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
5034
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
5073
5035
  type: Component,
5074
5036
  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: 1729019885,
48
- version: '17.0.0-develop.6',
47
+ publishDate: 1729169934,
48
+ version: '17.0.0-develop.8',
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: [{
@@ -2909,6 +2865,10 @@ class DropDownButtonComponent extends ListButton {
2909
2865
  this.containerService.container = this.container;
2910
2866
  this.containerService.template = this.popupTemplate;
2911
2867
  this.handleButtonAttributes(this.buttonAttributes);
2868
+ const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
2869
+ if (arrowWrapper) {
2870
+ this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
2871
+ }
2912
2872
  }
2913
2873
  /**
2914
2874
  * @hidden
@@ -2963,6 +2923,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2963
2923
  type="button"
2964
2924
  [id]="buttonId"
2965
2925
  [tabindex]="componentTabIndex"
2926
+ class="k-menu-button"
2966
2927
  [class.k-active]="active"
2967
2928
  [disabled]="disabled"
2968
2929
  [icon]="icon"
@@ -3001,7 +2962,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
3001
2962
  </kendo-button-list>
3002
2963
  </ng-template>
3003
2964
  <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"] }] });
2965
+ `, 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
2966
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
3006
2967
  type: Component,
3007
2968
  args: [{
@@ -3023,6 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3023
2984
  type="button"
3024
2985
  [id]="buttonId"
3025
2986
  [tabindex]="componentTabIndex"
2987
+ class="k-menu-button"
3026
2988
  [class.k-active]="active"
3027
2989
  [disabled]="disabled"
3028
2990
  [icon]="icon"
@@ -5055,7 +5017,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
5055
5017
  </kendo-button-list>
5056
5018
  </ng-template>
5057
5019
  <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"] }] });
5020
+ `, 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
5021
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
5060
5022
  type: Component,
5061
5023
  args: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-buttons",
3
- "version": "17.0.0-develop.6",
3
+ "version": "17.0.0-develop.8",
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": "17.0.0-develop.6",
29
- "@progress/kendo-angular-l10n": "17.0.0-develop.6",
30
- "@progress/kendo-angular-popup": "17.0.0-develop.6",
31
- "@progress/kendo-angular-icons": "17.0.0-develop.6",
28
+ "@progress/kendo-angular-common": "17.0.0-develop.8",
29
+ "@progress/kendo-angular-l10n": "17.0.0-develop.8",
30
+ "@progress/kendo-angular-popup": "17.0.0-develop.8",
31
+ "@progress/kendo-angular-icons": "17.0.0-develop.8",
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": "17.0.0-develop.6",
36
+ "@progress/kendo-angular-schematics": "17.0.0-develop.8",
37
37
  "@progress/kendo-common": "^0.2.1"
38
38
  },
39
39
  "schematics": "./schematics/collection.json",