@progress/kendo-angular-buttons 13.6.0-develop.5 → 13.6.0-develop.6

package/button/button.component.d.ts

@@ -7,6 +7,7 @@ import { KendoButtonService } from './button.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ArrowIconSettings } from '../common/models/arrow-settings';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -15,6 +16,12 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     renderer: Renderer2;
     private service;
     private ngZone;
+    /**
+     * @hidden
+     * @default false
+     * required for DropDownButton arrow icon.
+     */
+    arrowIcon: boolean | ArrowIconSettings;
     /**
      * Provides visual styling that indicates if the Button is active.
      *
@@ -120,6 +127,7 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     click: EventEmitter<any>;
     element: HTMLElement;
     isDisabled: boolean;
+    caretAltDownIcon: SVGIcon;
     private _size;
     private _rounded;
     private _fillMode;
@@ -200,5 +208,5 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     private handleClasses;
     private handleThemeColor;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton], span[kendoButton], kendo-button", ["kendoButton"], { "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, ["*"]>;
+    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, ["*"]>;
 }

package/common/models/arrow-settings.d.ts

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-angular-icons";
+/**
+ * Used to customize the DropDownButton arrow icon.
+ */
+export interface ArrowIconSettings {
+    /**
+     * The Kendo font icon to replace the default arrow down icon.
+     */
+    icon?: string;
+    /**
+     * The custom font icon class to replace the default arrow down icon.
+     */
+    iconClass?: string;
+    /**
+     * The SVG icon to replace the default arrow down SVG icon.
+     */
+    svgIcon?: SVGIcon;
+}

package/common/models.d.ts

@@ -7,3 +7,4 @@ export * from './models/theme-color';
 export * from './models/fillmode';
 export * from './models/rounded';
 export * from './models/styling-classes';
+export * from './models/arrow-settings';

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, ViewContainerRef, ElementRef, EventEmitter, NgZone, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { TemplateRef, ViewContainerRef, ElementRef, EventEmitter, NgZone, ChangeDetectorRef, AfterViewInit, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
@@ -11,7 +11,7 @@ import { ListButton } from '../listbutton/list-button';
 import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
-import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
+import { ArrowIconSettings, ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
 import { PopupContainerService } from '../listbutton/container.service';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
@@ -45,6 +45,12 @@ import * as i0 from "@angular/core";
  */
 export declare class DropDownButtonComponent extends ListButton implements AfterViewInit {
     protected containerService: PopupContainerService;
+    private renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon: boolean | ArrowIconSettings;
     /**
      * Defines the name of an existing icon in the Kendo UI theme.
      */
@@ -129,6 +135,15 @@ export declare class DropDownButtonComponent extends ListButton implements After
      * * `none` —Removes the default CSS class (no class would be rendered).
      */
     themeColor: ButtonThemeColor;
+    /**
+     * Sets attributes to the main button.
+     */
+    set buttonAttributes(buttonAttributes: {
+        [key: string]: string;
+    });
+    get buttonAttributes(): {
+        [key: string]: string;
+    };
     /**
      * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
      */
@@ -156,6 +171,7 @@ export declare class DropDownButtonComponent extends ListButton implements After
     listId: string;
     buttonId: string;
     private _fillMode;
+    private _buttonAttributes;
     /**
      * @hidden
      */
@@ -188,7 +204,7 @@ export declare class DropDownButtonComponent extends ListButton implements After
      * Blurs the DropDownButton component.
      */
     blur(): void;
-    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, containerService: PopupContainerService);
+    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, containerService: PopupContainerService, renderer: Renderer2);
     ngAfterViewInit(): void;
     /**
      * @hidden
@@ -198,6 +214,7 @@ export declare class DropDownButtonComponent extends ListButton implements After
      * @hidden
      */
     wrapperContains(element: any): boolean;
+    private handleButtonAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "textField": "textField"; "data": "data"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "arrowIcon": "arrowIcon"; "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "textField": "textField"; "data": "data"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonAttributes": "buttonAttributes"; }, { "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
 }

package/esm2020/button/button.component.mjs

@@ -5,6 +5,7 @@
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2, Output, Optional, NgZone, isDevMode } from '@angular/core';
 import { KendoButtonService } from './button.service';
 import { isDocumentAvailable, isChanged, hasObservers, Keys, isSafari, isFirefox } from '@progress/kendo-angular-common';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -30,6 +31,12 @@ export class ButtonComponent {
         this.renderer = renderer;
         this.service = service;
         this.ngZone = ngZone;
+        /**
+         * @hidden
+         * @default false
+         * required for DropDownButton arrow icon.
+         */
+        this.arrowIcon = false;
         /**
          * Provides visual styling that indicates if the Button is active.
          *
@@ -51,6 +58,7 @@ export class ButtonComponent {
          */
         this.click = new EventEmitter();
         this.isDisabled = false;
+        this.caretAltDownIcon = caretAltDownIcon;
         this._size = DEFAULT_SIZE;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
@@ -432,7 +440,7 @@ export class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { 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: [
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonComponent, 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: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -449,6 +457,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
+        <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
+        <kendo-icon-wrapper
+            *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
+            innerCssClass="k-button-icon"
+            [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+            [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
     `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -473,11 +487,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
+        <span *ngIf="$any(arrowIcon).iconClass" class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
+        <kendo-icon-wrapper
+            *ngIf="arrowIcon && !$any(arrowIcon).iconClass"
+            innerCssClass="k-button-icon"
+            [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+            [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.KendoButtonService, decorators: [{
                     type: Optional
-                }] }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { toggleable: [{
+                }] }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], toggleable: [{
                 type: Input
             }], togglable: [{
                 type: Input

package/esm2020/common/models/arrow-settings.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/common/models.mjs

@@ -7,3 +7,4 @@ export * from './models/theme-color';
 export * from './models/fillmode';
 export * from './models/rounded';
 export * from './models/styling-classes';
+export * from './models/arrow-settings';

package/esm2020/dropdownbutton/dropdownbutton.component.mjs

@@ -2,10 +2,10 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, TemplateRef, ViewChild, ViewContainerRef, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef } from '@angular/core';
+import { Component, ContentChild, TemplateRef, ViewChild, ViewContainerRef, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { isDocumentAvailable, guid, Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, guid, Keys, isPresent } from '@progress/kendo-angular-common';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
 import { closest } from '../util';
 import { ListButton } from '../listbutton/list-button';
@@ -60,9 +60,15 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class DropDownButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService) {
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
         super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
         this.containerService = containerService;
+        this.renderer = renderer;
+        /**
+         * Allows showing the default arrow icon or providing alternative one instead.
+         * @default false
+         */
+        this.arrowIcon = false;
         /**
          * Defines the name of an existing icon in the Kendo UI theme.
          */
@@ -133,6 +139,7 @@ export class DropDownButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonId = guid();
         this._fillMode = DEFAULT_FILL_MODE;
+        this._buttonAttributes = null;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -164,6 +171,17 @@ export class DropDownButtonComponent extends ListButton {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Sets attributes to the main button.
+     */
+    set buttonAttributes(buttonAttributes) {
+        const newButtonAttributes = buttonAttributes ? buttonAttributes : null;
+        this.handleButtonAttributes(newButtonAttributes);
+        this._buttonAttributes = newButtonAttributes;
+    }
+    get buttonAttributes() {
+        return this._buttonAttributes;
+    }
     get focused() {
         return this._isFocused && !this._disabled;
     }
@@ -251,6 +269,7 @@ export class DropDownButtonComponent extends ListButton {
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -275,9 +294,22 @@ export class DropDownButtonComponent extends ListButton {
             || this.wrapper.contains(element)
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
+    handleButtonAttributes(newButtonAttributes) {
+        const mainButton = this.button?.nativeElement;
+        if (isPresent(this.buttonAttributes) && isPresent(mainButton)) {
+            for (const attr in this.buttonAttributes) {
+                this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
+            }
+        }
+        if (isPresent(newButtonAttributes) && isPresent(mainButton)) {
+            for (const attr in newButtonAttributes) {
+                this.renderer.setAttribute(mainButton, attr, newButtonAttributes[attr]);
+            }
+        }
+    }
 }
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, 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: [
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownButtonComponent, 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: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -296,6 +328,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [disabled]="disabled"
             [icon]="icon"
             [svgIcon]="svgIcon"
+            [arrowIcon]="arrowIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -330,7 +363,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i6.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i6.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"] }, { type: i7.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -356,6 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [disabled]="disabled"
             [icon]="icon"
             [svgIcon]="svgIcon"
+            [arrowIcon]="arrowIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -392,7 +426,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupContainerService }]; }, propDecorators: { icon: [{
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupContainerService }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input
@@ -412,6 +448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
+            }], buttonAttributes: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }], onFocus: [{

package/esm2020/listbutton/list.component.mjs

@@ -63,14 +63,20 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
                 <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
                         <ng-template
                             [templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
                         ></ng-template>
                     </span>
                 </ng-template>
                 <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
                         <kendo-icon-wrapper
                             *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
                             [name]="dataItem.icon"
@@ -108,14 +114,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
                 <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
                         <ng-template
                             [templateContext]="{ templateRef: itemTemplate?.templateRef, $implicit: dataItem }"
                         ></ng-template>
                     </span>
                 </ng-template>
                 <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
                         <kendo-icon-wrapper
                             *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
                             [name]="dataItem.icon"

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831879,
-    version: '13.6.0-develop.5',
+    publishDate: 1695882550,
+    version: '13.6.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/splitbutton/splitbutton.component.mjs

@@ -221,6 +221,7 @@ export class SplitButtonComponent extends ListButton {
         this.arrowButtonClicked = false;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
+        this._buttonAttributes = null;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -302,6 +303,17 @@ export class SplitButtonComponent extends ListButton {
         }
         return this._data;
     }
+    /**
+     * Sets attributes to the main button.
+     */
+    set buttonAttributes(buttonAttributes) {
+        const newButtonAttributes = buttonAttributes ? buttonAttributes : null;
+        this.handleButtonAttributes(newButtonAttributes);
+        this._buttonAttributes = newButtonAttributes;
+    }
+    get buttonAttributes() {
+        return this._buttonAttributes;
+    }
     /**
      * @hidden
      */
@@ -414,6 +426,7 @@ export class SplitButtonComponent extends ListButton {
         this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -530,9 +543,22 @@ export class SplitButtonComponent extends ListButton {
     toggleButtonIconClass() {
         this.button.nativeElement.classList[this.isIconButton ? 'add' : 'remove']('k-button-icon');
     }
+    handleButtonAttributes(newButtonAttributes) {
+        const mainButton = this.button.nativeElement;
+        if (isPresent(this.buttonAttributes) && isPresent(mainButton)) {
+            for (const attr in this.buttonAttributes) {
+                this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
+            }
+        }
+        if (isPresent(newButtonAttributes) && isPresent(mainButton)) {
+            for (const attr in newButtonAttributes) {
+                this.renderer.setAttribute(mainButton, attr, newButtonAttributes[attr]);
+            }
+        }
+    }
 }
 SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitButtonComponent, 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: i0.Renderer2 }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -610,7 +636,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i6.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i8.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i6.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"] }, { type: i7.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i8.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -735,6 +761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], arrowButtonSvgIcon: [{
                 type: Input
+            }], buttonAttributes: [{
+                type: Input
             }], buttonClick: [{
                 type: Output
             }], itemClick: [{