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

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

@@ -5,7 +5,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 * 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 { Subject, Subscription, fromEvent, merge } from 'rxjs';
@@ -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';
 
@@ -28,8 +28,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,13 +614,21 @@ 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: [{
+    }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], toggleable: [{
                 type: Input
             }], togglable: [{
                 type: Input
@@ -1228,14 +1249,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"
@@ -1273,14 +1300,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"
@@ -2181,6 +2214,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;
     }
@@ -2262,6 +2296,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
      */
@@ -2375,6 +2420,7 @@ class SplitButtonComponent extends ListButton {
         this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -2492,9 +2538,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,
@@ -2572,7 +2631,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: [{
@@ -2697,6 +2756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], arrowButtonSvgIcon: [{
                 type: Input
+            }], buttonAttributes: [{
+                type: Input
             }], buttonClick: [{
                 type: Output
             }], itemClick: [{
@@ -2835,9 +2896,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.
          */
@@ -2908,6 +2975,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;
     }
@@ -2939,6 +3007,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;
     }
@@ -3026,6 +3105,7 @@ class DropDownButtonComponent extends ListButton {
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
+        this.handleButtonAttributes(this.buttonAttributes);
     }
     /**
      * @hidden
@@ -3050,9 +3130,23 @@ class DropDownButtonComponent extends ListButton {
             || this.wrapper.contains(element)
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
+    handleButtonAttributes(newButtonAttributes) {
+        var _a;
+        const mainButton = (_a = this.button) === null || _a === void 0 ? void 0 : _a.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,
@@ -3071,6 +3165,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [disabled]="disabled"
             [icon]="icon"
             [svgIcon]="svgIcon"
+            [arrowIcon]="arrowIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -3105,7 +3200,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: [{
@@ -3131,6 +3226,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"
@@ -3167,7 +3263,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
@@ -3187,6 +3285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
+            }], buttonAttributes: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }], onFocus: [{