@progress/kendo-angular-buttons 17.0.0-develop.16 → 17.0.0-develop.18

package/chip/chip.component.d.ts

@@ -8,6 +8,7 @@ import { ChipRemoveEvent } from './chip-remove-event-args.interface';
 import { ChipContentClickEvent } from './chip-content-click-event-args.interface';
 import { ChipFillMode, ChipRounded, ChipSize, ChipThemeColor } from '../common/models';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ChipAvatarSettings } from './models/avatar-settings.interface';
 import * as i0 from "@angular/core";
 /**
  * Displays a Chip that represents an input, attribute or an action.
@@ -38,9 +39,9 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      */
     iconClass: string;
     /**
-     * The avatarClass allows the usage of avatar icons rendered in the Chip.
+     * Use these settings to render an avatar within the Chip.
      */
-    avatarClass: string;
+    avatarSettings: ChipAvatarSettings;
     /**
      * Specifies the selected state of the Chip.
      * @default false
@@ -186,10 +187,6 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      * @hidden
      */
     get customIconClass(): string;
-    /**
-     * @hidden
-     */
-    get chipAvatarClass(): string;
     /**
      * @hidden
      */
@@ -219,5 +216,5 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
     private handleThemeColor;
     private keyDownHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "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"; }, { "remove": "remove"; "menuToggle": "menuToggle"; "contentClick": "contentClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "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"; }, { "remove": "remove"; "menuToggle": "menuToggle"; "contentClick": "contentClick"; }, never, ["*"], true, never>;
 }

package/chip/models/avatar-settings.interface.d.ts

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export interface ChipAvatarSettings {
+    /**
+     * The CSS styles that will be rendered on the wrapper element of the avatar.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     */
+    cssStyle?: any;
+    /**
+     * Sets `initials` to the Chip avatar.
+     */
+    initials?: string;
+    /**
+     * The CSS styles that will be rendered on the wrapper element of the avatar initials.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     */
+    initialsCssStyle?: any;
+    /**
+     * Sets the `image` source of the Chip avatar.
+     */
+    imageSrc?: string;
+    /**
+     * Allows setting the `alt` attribute of a Chip avatar image.
+     */
+    imageAltText?: string;
+    /**
+     * The CSS styles that will be rendered on the avatar image element.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     */
+    imageCssStyle?: any;
+}

package/esm2020/chip/chip.component.mjs

@@ -8,10 +8,10 @@ import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { closest, getStylingClasses, getThemeColorClasses } from '../util';
+import { closest, getStylingClasses, getThemeColorClasses, isObjectEmpty } from '../util';
 import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgClass } from '@angular/common';
+import { NgIf, NgClass, NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 const DEFAULT_SIZE = 'medium';
@@ -158,7 +158,7 @@ export 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;
@@ -197,23 +197,16 @@ export 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
      */
@@ -326,7 +319,7 @@ export 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,
@@ -345,11 +338,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">
@@ -379,7 +380,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: [{
@@ -397,11 +398,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">
@@ -440,7 +449,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
@@ -450,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
-            }], avatarClass: [{
+            }], avatarSettings: [{
                 type: Input
             }], selected: [{
                 type: Input

package/esm2020/chip/models/avatar-settings.interface.mjs

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

package/esm2020/package-metadata.mjs

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

package/esm2020/util.mjs

@@ -93,3 +93,9 @@ export const getThemeColorClasses = (componentType, prevFillMode, fillMode, prev
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
+/**
+ * @hidden
+ *
+ * Checks for an empty object - {}
+ */
+export const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;

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

@@ -12,7 +12,7 @@ import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/k
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 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';
@@ -26,8 +26,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729497523,
-    version: '17.0.0-develop.16',
+    publishDate: 1729598773,
+    version: '17.0.0-develop.18',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -122,6 +122,12 @@ 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;
 
 /**
  * @hidden
@@ -1124,7 +1130,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;
@@ -1163,23 +1169,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
      */
@@ -1292,7 +1291,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,
@@ -1311,11 +1310,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">
@@ -1345,7 +1352,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: [{
@@ -1363,11 +1370,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">
@@ -1406,7 +1421,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
@@ -1416,7 +1431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
-            }], avatarClass: [{
+            }], avatarSettings: [{
                 type: Input
             }], selected: [{
                 type: Input

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

@@ -12,7 +12,7 @@ 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: 1729497523,
-    version: '17.0.0-develop.16',
+    publishDate: 1729598773,
+    version: '17.0.0-develop.18',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -140,6 +140,12 @@ 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 DEFAULT_ROUNDED$3 = 'medium';
 const DEFAULT_SIZE$2 = 'medium';
@@ -1122,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;
@@ -1161,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
      */
@@ -1290,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,
@@ -1309,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">
@@ -1343,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: [{
@@ -1361,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">
@@ -1404,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
@@ -1414,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

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.16",
+  "version": "17.0.0-develop.18",
   "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.16",
-    "@progress/kendo-angular-l10n": "17.0.0-develop.16",
-    "@progress/kendo-angular-popup": "17.0.0-develop.16",
-    "@progress/kendo-angular-icons": "17.0.0-develop.16",
+    "@progress/kendo-angular-common": "17.0.0-develop.18",
+    "@progress/kendo-angular-l10n": "17.0.0-develop.18",
+    "@progress/kendo-angular-popup": "17.0.0-develop.18",
+    "@progress/kendo-angular-icons": "17.0.0-develop.18",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.0-develop.16",
+    "@progress/kendo-angular-schematics": "17.0.0-develop.18",
     "@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;