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

package/fesm2020/progress-kendo-angular-buttons.mjs

@@ -6,7 +6,8 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, NgModule, Directive, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import * as i9 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, guid, anyChanged, isPresent as isPresent$1, EventsModule } from '@progress/kendo-angular-common';
+import { caretAltDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -17,7 +18,6 @@ import { CommonModule } from '@angular/common';
 import { filter, tap, take } from 'rxjs/operators';
 import * as i3$1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import { caretAltDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i4 from '@angular/animations';
 import { sequence, query, style, stagger, animate } from '@angular/animations';
 
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695732064,
-    version: '13.6.0-develop.4',
+    publishDate: 1695882550,
+    version: '13.6.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -158,6 +158,12 @@ 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.
          *
@@ -179,6 +185,7 @@ class ButtonComponent {
          */
         this.click = new EventEmitter();
         this.isDisabled = false;
+        this.caretAltDownIcon = caretAltDownIcon;
         this._size = DEFAULT_SIZE$2;
         this._rounded = DEFAULT_ROUNDED$3;
         this._fillMode = DEFAULT_FILL_MODE$3;
@@ -560,7 +567,7 @@ 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: KendoButtonService, optional: true }, { token: i1.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,
@@ -577,6 +584,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: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -601,11 +614,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: KendoButtonService, decorators: [{
                     type: Optional
-                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { toggleable: [{
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], toggleable: [{
                 type: Input
             }], togglable: [{
                 type: Input
@@ -1288,14 +1309,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"
@@ -1333,14 +1360,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"
@@ -2177,6 +2210,7 @@ class SplitButtonComponent extends ListButton {
         this.arrowButtonClicked = false;
         this._rounded = DEFAULT_ROUNDED$2;
         this._fillMode = DEFAULT_FILL_MODE$2;
+        this._buttonAttributes = null;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2258,6 +2292,17 @@ 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
      */
@@ -2370,6 +2415,7 @@ class SplitButtonComponent extends ListButton {
         this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -2486,9 +2532,22 @@ 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: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: 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$2,
@@ -2566,7 +2625,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: 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: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ 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"] }, { type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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: [{
@@ -2691,6 +2750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], arrowButtonSvgIcon: [{
                 type: Input
+            }], buttonAttributes: [{
+                type: Input
             }], buttonClick: [{
                 type: Output
             }], itemClick: [{
@@ -2829,9 +2890,15 @@ const DEFAULT_FILL_MODE$1 = 'solid';
  * ```
  */
 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.
          */
@@ -2902,6 +2969,7 @@ class DropDownButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonId = guid();
         this._fillMode = DEFAULT_FILL_MODE$1;
+        this._buttonAttributes = null;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2933,6 +3001,17 @@ 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;
     }
@@ -3020,6 +3099,7 @@ class DropDownButtonComponent extends ListButton {
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -3044,9 +3124,22 @@ class DropDownButtonComponent extends ListButton {
             || this.wrapper.contains(element)
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
+    handleButtonAttributes(newButtonAttributes) {
+        const mainButton = this.button?.nativeElement;
+        if (isPresent$1(this.buttonAttributes) && isPresent$1(mainButton)) {
+            for (const attr in this.buttonAttributes) {
+                this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
+            }
+        }
+        if (isPresent$1(newButtonAttributes) && isPresent$1(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: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: 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: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: 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$1,
@@ -3065,6 +3158,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [disabled]="disabled"
             [icon]="icon"
             [svgIcon]="svgIcon"
+            [arrowIcon]="arrowIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -3099,7 +3193,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: 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: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ 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"] }, { type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3125,6 +3219,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"
@@ -3161,7 +3256,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { icon: [{
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input
@@ -3181,6 +3278,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/index.d.ts

@@ -36,9 +36,6 @@ export { DialItemAnimation } from './floatingactionbutton/models/item-animation.
 export { FabAlign } from './floatingactionbutton/models/align';
 export { FabPositionMode } from './floatingactionbutton/models/position-mode';
 export { FabOffset } from './floatingactionbutton/models/offset';
-export { ButtonSize, ChipSize } from './common/models/size';
-export { ButtonRounded, ChipRounded } from './common/models/rounded';
-export { ButtonFillMode, ChipFillMode } from './common/models/fillmode';
-export { ButtonThemeColor, ChipThemeColor } from './common/models/theme-color';
+export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings } from './common/models';
 export { FocusableDirective } from './focusable/focusable.directive';
 export { PreventableEvent } from './preventable-event';

package/listbutton/list-item-model.d.ts

@@ -69,6 +69,10 @@ export interface ListItemModel {
      * When set to `true`, disables a button list item.
      */
     disabled?: boolean;
+    /**
+     * The CSS classes that will be rendered on the item element. Supports the type of values that are supported by ngClass.
+     */
+    cssClass?: any;
     /**
      * An event handler that is emitted when an item is clicked.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "13.6.0-develop.4",
+  "version": "13.6.0-develop.6",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,15 +25,15 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.6.0-develop.4",
-    "@progress/kendo-angular-l10n": "13.6.0-develop.4",
-    "@progress/kendo-angular-popup": "13.6.0-develop.4",
-    "@progress/kendo-angular-icons": "13.6.0-develop.4",
+    "@progress/kendo-angular-common": "13.6.0-develop.6",
+    "@progress/kendo-angular-l10n": "13.6.0-develop.6",
+    "@progress/kendo-angular-popup": "13.6.0-develop.6",
+    "@progress/kendo-angular-icons": "13.6.0-develop.6",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.6.0-develop.4",
+    "@progress/kendo-angular-schematics": "13.6.0-develop.6",
     "@progress/kendo-common": "^0.2.1"
   },
   "schematics": "./schematics/collection.json",

package/splitbutton/splitbutton.component.d.ts

@@ -194,6 +194,15 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * be rendered for the button which opens the popup.
      */
     arrowButtonSvgIcon: SVGIcon;
+    /**
+     * Sets attributes to the main button.
+     */
+    set buttonAttributes(buttonAttributes: {
+        [key: string]: string;
+    });
+    get buttonAttributes(): {
+        [key: string]: string;
+    };
     /**
      * Fires each time the user clicks the main button.
      *
@@ -292,6 +301,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private arrowButtonClicked;
     private _rounded;
     private _fillMode;
+    private _buttonAttributes;
     set isFocused(value: boolean);
     get isFocused(): boolean;
     get widgetClasses(): boolean;
@@ -380,6 +390,7 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private updateButtonText;
     private handleClasses;
     private toggleButtonIconClass;
+    private handleButtonAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "kendo-splitbutton", ["kendoSplitButton"], { "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"; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["itemTemplate"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitButtonComponent, "kendo-splitbutton", ["kendoSplitButton"], { "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"; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["itemTemplate"], ["*"]>;
 }