@progress/kendo-angular-buttons 17.0.0-develop.2 → 17.0.0-develop.21

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

@@ -5,14 +5,14 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ContentChild, ViewChild, forwardRef, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
-import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { caretAltDownIcon, xCircleIcon, moreVerticalIcon } 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';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-import { NgIf, NgClass, NgFor, NgTemplateOutlet, NgStyle } from '@angular/common';
+import { NgIf, NgClass, NgStyle, NgFor, NgTemplateOutlet } from '@angular/common';
 import { filter, tap, take } from 'rxjs/operators';
 import * as i3 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -44,8 +44,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728914267,
-    version: '17.0.0-develop.2',
+    publishDate: 1729874032,
+    version: '17.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -140,10 +140,13 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
+/**
+ * @hidden
+ *
+ * Checks for an empty object - {}
+ */
+const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
 
-const SPAN_TAG_NAME = 'SPAN';
-const BUTTON_TAG_NAME = 'BUTTON';
-const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
 const DEFAULT_ROUNDED$3 = 'medium';
 const DEFAULT_SIZE$2 = 'medium';
 const DEFAULT_THEME_COLOR$2 = 'base';
@@ -151,9 +154,8 @@ const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  *
- * As of package v16, the `span[kendoButton]` and `kendo-button` selectors are deprecated and can
- * be removed in a future major version. We recommend using the `button[kendoButton]` selector
- * to avoid discrepancies between the behavior of the `ButtonComponent` and the native HTML Button element.
+ * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
+ * Please use the `button[kendoButton]` selector only.
  */
 class ButtonComponent {
     constructor(element, renderer, service, localization, ngZone) {
@@ -172,10 +174,6 @@ class ButtonComponent {
          * @default false
          */
         this.toggleable = false;
-        /**
-         * @hidden
-         */
-        this.role = 'button';
         /**
          * Fires each time the selected state of a toggleable button is changed.
          *
@@ -360,10 +358,6 @@ class ButtonComponent {
         const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
         return hasIcon && !this.hasText;
     }
-    get roleSetter() {
-        const isButtonElementAndRole = this.element.tagName === BUTTON_TAG_NAME && this.role === 'button';
-        return isButtonElementAndRole ? undefined : this.role;
-    }
     get classDisabled() {
         return this.isDisabled;
     }
@@ -414,41 +408,14 @@ class ButtonComponent {
         return this.element;
     }
     ngOnInit() {
-        const elementTagName = this.element.tagName;
-        const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
-        if (this.role) {
-            const isButtonElementAndRole = elementTagName === BUTTON_TAG_NAME && this.role === 'button';
-            if (!isButtonElementAndRole) {
-                this.setAttribute('role', this.role);
-            }
-        }
-        if (isSpanOrKendoButton && !this.isDisabled) {
-            this.tabIndex = 0;
-        }
-        if (isDevMode() && isSpanOrKendoButton) {
-            console.warn(`As of package v16, the "span[kendoButton]" and "kendo-button" selectors are deprecated and can
-            be removed in a future major version. We recommend using the "button[kendoButton]" selector
-            to avoid discrepancies between the behavior of the "ButtonComponent" and the native HTML Button element.`);
-        }
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
-            this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
-                const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
-                if (isSpanOrKendoButton && isSpaceOrEnter) {
-                    this.ngZone.run(() => {
-                        this.click.emit(event);
-                    });
-                    this._onButtonClick();
-                }
-            }));
             this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
-                const elementTagName = this.element.tagName;
-                const isButton = elementTagName === BUTTON_TAG_NAME;
                 const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
-                if (!this.isDisabled && isButton && isBrowserSafari) {
+                if (!this.isDisabled && isBrowserSafari) {
                     event.preventDefault();
                     this.element.focus();
                 }
@@ -577,7 +544,7 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -595,11 +562,12 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         <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>
+        <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
+            <kendo-icon-wrapper
+                [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+                [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
+        </span>
+        
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -612,7 +580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useValue: 'kendo.button'
                         }
                     ],
-                    selector: 'button[kendoButton], span[kendoButton], kendo-button',
+                    selector: 'button[kendoButton]',
                     template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
@@ -625,11 +593,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <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>
+        <span *ngIf="arrowIcon && !$any(arrowIcon).iconClass" class="k-button-arrow">
+            <kendo-icon-wrapper
+                [name]="$any(arrowIcon).icon || 'caret-alt-down'"
+                [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
+        </span>
+        
     `,
                     standalone: true,
                     imports: [NgIf, IconWrapperComponent, NgClass]
@@ -664,8 +633,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
-            }], role: [{
-                type: Input
             }], selectedChange: [{
                 type: Output
             }], click: [{
@@ -679,9 +646,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], iconButtonClass: [{
                 type: HostBinding,
                 args: ['class.k-icon-button']
-            }], roleSetter: [{
-                type: HostBinding,
-                args: ['attr.role']
             }], classDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
@@ -764,6 +728,7 @@ class ButtonGroupComponent {
         this.currentTabIndex = 0;
         this.lastFocusedIndex = -1;
         this.subs = new Subscription();
+        this.wrapperClasses = true;
         this.role = 'group';
         this.focusHandler = () => {
             this.currentTabIndex = -1;
@@ -787,9 +752,6 @@ class ButtonGroupComponent {
     get tabIndex() {
         return this._tabIndex;
     }
-    get wrapperClass() {
-        return true;
-    }
     get disabledClass() {
         return this.disabled;
     }
@@ -950,7 +912,7 @@ class ButtonGroupComponent {
     }
 }
 ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
         {
@@ -958,7 +920,7 @@ ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useValue: 'kendo.buttongroup'
         }
     ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-content select="[kendoButton], kendo-button"></ng-content>
+        <ng-content select="[kendoButton]"></ng-content>
     `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
@@ -974,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     selector: 'kendo-buttongroup',
                     template: `
-        <ng-content select="[kendoButton], kendo-button"></ng-content>
+        <ng-content select="[kendoButton]"></ng-content>
     `,
                     standalone: true
                 }]
@@ -996,7 +958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], buttons: [{
                 type: ContentChildren,
                 args: [ButtonComponent]
-            }], wrapperClass: [{
+            }], wrapperClasses: [{
                 type: HostBinding,
                 args: ['class.k-button-group']
             }], disabledClass: [{
@@ -1166,7 +1128,7 @@ class ChipComponent {
         return this._themeColor;
     }
     get hasIconClass() {
-        return Boolean(this.icon || this.iconClass || this.avatarClass);
+        return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
     }
     get disabledClass() {
         return this.disabled;
@@ -1205,23 +1167,16 @@ class ChipComponent {
      * @hidden
      */
     get kendoIconClass() {
-        this.verifyIconSettings([this.iconClass, this.avatarClass]);
+        this.verifyIconSettings([this.iconClass]);
         return `k-i-${this.icon}`;
     }
     /**
      * @hidden
      */
     get customIconClass() {
-        this.verifyIconSettings([this.icon, this.avatarClass]);
+        this.verifyIconSettings([this.icon]);
         return this.iconClass;
     }
-    /**
-     * @hidden
-     */
-    get chipAvatarClass() {
-        this.verifyIconSettings([this.icon, this.iconClass]);
-        return this.avatarClass;
-    }
     /**
      * @hidden
      */
@@ -1334,7 +1289,7 @@ class ChipComponent {
     }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1353,11 +1308,19 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             size="small"
             innerCssClass="k-chip-icon"
             [customFontClass]="customIconClass"></kendo-icon-wrapper>
-
         <span
-            *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full">
-            <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
+            *ngIf="avatarSettings"
+            class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
+            [ngStyle]="avatarSettings.cssStyle">
+            <ng-container *ngIf="avatarSettings?.imageSrc">
+                <span class="k-avatar-image">
+                    <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
+                </span>
+            </ng-container>
+    
+            <ng-container *ngIf="avatarSettings?.initials">
+                <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
+            </ng-container>
         </span>
 
         <span class="k-chip-content">
@@ -1387,7 +1350,7 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
             </span>
         </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
@@ -1405,11 +1368,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             size="small"
             innerCssClass="k-chip-icon"
             [customFontClass]="customIconClass"></kendo-icon-wrapper>
-
         <span
-            *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full">
-            <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
+            *ngIf="avatarSettings"
+            class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
+            [ngStyle]="avatarSettings.cssStyle">
+            <ng-container *ngIf="avatarSettings?.imageSrc">
+                <span class="k-avatar-image">
+                    <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
+                </span>
+            </ng-container>
+    
+            <ng-container *ngIf="avatarSettings?.initials">
+                <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
+            </ng-container>
         </span>
 
         <span class="k-chip-content">
@@ -1448,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [NgIf, NgStyle, IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { label: [{
                 type: Input
@@ -1458,7 +1429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
-            }], avatarClass: [{
+            }], avatarSettings: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -1547,7 +1518,7 @@ class ChipListComponent {
         this.role = 'listbox';
         this._size = 'medium';
         this.subs = new Subscription();
-        this._navigable = false;
+        this._navigable = true;
         this.currentActiveIndex = 0;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
@@ -1601,10 +1572,10 @@ class ChipListComponent {
         }
     }
     /**
-     * When set to `true`, keyboard navigation is available through arrow keys and roving tabindex. Otherwise, all chips
-     * are part of the default tabbing sequence of the page.
+     * By default, keyboard navigation is available through arrow keys and roving tabindex.
+     * When set to `false`, all chips are part of the default tabbing sequence of the page.
      *
-     * @default false
+     * @default true
      */
     set navigable(value) {
         this._navigable = value;
@@ -2824,9 +2795,6 @@ class DropDownButtonComponent extends ListButton {
     get focused() {
         return this._isFocused && !this._disabled;
     }
-    get widgetClasses() {
-        return true;
-    }
     get dir() {
         return this.direction;
     }
@@ -2909,6 +2877,10 @@ class DropDownButtonComponent extends ListButton {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
         this.handleButtonAttributes(this.buttonAttributes);
+        const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
+        if (arrowWrapper) {
+            this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
+        }
     }
     /**
      * @hidden
@@ -2948,7 +2920,7 @@ class DropDownButtonComponent extends ListButton {
     }
 }
 DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER$2,
@@ -2963,6 +2935,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             type="button"
             [id]="buttonId"
             [tabindex]="componentTabIndex"
+            class="k-menu-button"
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
@@ -3001,7 +2974,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3023,6 +2996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type="button"
             [id]="buttonId"
             [tabindex]="componentTabIndex"
+            class="k-menu-button"
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
@@ -3100,9 +3074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], focused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
-            }], widgetClasses: [{
-                type: HostBinding,
-                args: ['class.k-dropdown-button']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -5055,7 +5026,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{

package/index.d.ts

@@ -25,6 +25,7 @@ export { ChipModule } from './chip/chip.module';
 export { ChipListSelection } from './chip/models/selection';
 export { ChipRemoveEvent } from './chip/chip-remove-event-args.interface';
 export { ChipListRemoveEvent } from './chip/chip-list-remove-event-args.interface';
+export { ChipAvatarSettings } from './chip/models/avatar-settings.interface';
 export { FloatingActionButtonModule } from './floatingactionbutton/floatingactionbutton.module';
 export { FloatingActionButtonComponent } from './floatingactionbutton/floatingactionbutton.component';
 export { FloatingActionButtonTemplateDirective } from './floatingactionbutton/templates/fab-template.directive';

package/package.json

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

package/util.d.ts

@@ -39,3 +39,9 @@ export declare const getStylingClasses: (componentType: any, stylingOption: stri
  * Returns the themeColor classes to be added and removed
  */
 export declare const getThemeColorClasses: (componentType: any, prevFillMode: any, fillMode: any, previousValue: any, newValue: any) => ButtonStylingClasses;
+/**
+ * @hidden
+ *
+ * Checks for an empty object - {}
+ */
+export declare const isObjectEmpty: (obj: any) => boolean;