@progress/kendo-angular-buttons 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/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';
@@ -22,66 +22,77 @@ const DEFAULT_FILL_MODE = 'solid';
  * Displays a Chip that represents an input, attribute or an action.
  */
 export class ChipComponent {
-    constructor(element, renderer, ngZone, localizationService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localizationService = localizationService;
-        /**
-         * Specifies the selected state of the Chip.
-         * @default false
-         */
-        this.selected = false;
-        /**
-         * Specifies if the Chip will be removable or not.
-         * If the property is set to `true`, the Chip renders a remove icon.
-         * @default false
-         */
-        this.removable = false;
-        /**
-         * @hidden
-         *
-         * Determines whether the Chip has a menu.
-         */
-        this.hasMenu = false;
-        /**
-         * If set to `true`, the Chip will be disabled.
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Fires each time the user clicks the remove icon of the Chip.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * @hidden
-         *
-         * Fires each time the user clicks the menu icon of the Chip.
-         */
-        this.menuToggle = new EventEmitter();
-        /**
-         * Fires each time the user clicks the content of the Chip.
-         */
-        this.contentClick = new EventEmitter();
-        this.tabIndex = 0;
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.defaultRemoveIcon = xCircleIcon;
-        /**
-         * @hidden
-         */
-        this.defaultMenuIcon = moreVerticalIcon;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this._themeColor = 'base';
-        this.focused = false;
-        this.subs = new Subscription();
-        validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
-    }
+    element;
+    renderer;
+    ngZone;
+    localizationService;
+    /**
+     * Sets the label text of the Chip.
+     */
+    label;
+    /**
+     * Defines the name for an existing icon in a Kendo UI theme.
+     * The icon is rendered inside the Chip by a `span.k-icon` element.
+     */
+    icon;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
+     * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     */
+    svgIcon;
+    /**
+     * Defines a CSS class — or multiple classes separated by spaces —
+     * which are applied to a span element.
+     * Allows the usage of custom icons.
+     */
+    iconClass;
+    /**
+     * Use these settings to render an avatar within the Chip.
+     */
+    avatarSettings;
+    /**
+     * Specifies the selected state of the Chip.
+     * @default false
+     */
+    selected = false;
+    /**
+     * Specifies if the Chip will be removable or not.
+     * If the property is set to `true`, the Chip renders a remove icon.
+     * @default false
+     */
+    removable = false;
+    /**
+     * Specifies a custom remove font icon class that will be rendered when the Chip is removable.
+     * [see example]({% slug icons %})
+     */
+    removeIcon;
+    /**
+     * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
+     */
+    removeSvgIcon;
+    /**
+     * @hidden
+     *
+     * Determines whether the Chip has a menu.
+     */
+    hasMenu = false;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
+     */
+    menuIcon;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
+     */
+    menuSvgIcon;
+    /**
+     * If set to `true`, the Chip will be disabled.
+     * @default false
+     */
+    disabled = false;
     /**
      * The size property specifies the padding of the Chip
      * ([see example]({% slug appearance_chip %}#toc-size)).
@@ -94,6 +105,7 @@ export class ChipComponent {
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
+        !this.sizeIsSet && (this.sizeIsSet = true);
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -157,8 +169,24 @@ export class ChipComponent {
     get themeColor() {
         return this._themeColor;
     }
+    /**
+     * Fires each time the user clicks the remove icon of the Chip.
+     */
+    remove = new EventEmitter();
+    /**
+     * @hidden
+     *
+     * Fires each time the user clicks the menu icon of the Chip.
+     */
+    menuToggle = new EventEmitter();
+    /**
+     * Fires each time the user clicks the content of the Chip.
+     */
+    contentClick = new EventEmitter();
+    tabIndex = 0;
+    hostClass = true;
     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;
@@ -169,6 +197,36 @@ export class ChipComponent {
     get focusedClass() {
         return this.focused;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    defaultRemoveIcon = xCircleIcon;
+    /**
+     * @hidden
+     */
+    defaultMenuIcon = moreVerticalIcon;
+    /**
+     * @hidden
+     */
+    sizeIsSet = false;
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    _themeColor = 'base';
+    focused = false;
+    subs = new Subscription();
+    constructor(element, renderer, ngZone, localizationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localizationService = localizationService;
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.subs.add(this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -197,23 +255,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
      */
@@ -324,15 +375,14 @@ 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: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.chip'
-        }
-    ], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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,
+                useValue: 'kendo.chip'
+            }
+        ], usesOnChanges: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             size="small"
@@ -345,11 +395,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,8 +437,9 @@ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, decorators: [{
+    `, 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: "16.2.12", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
@@ -397,11 +456,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 +507,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 +517,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 → esm2022}/chip/chip.module.mjs

@@ -38,11 +38,11 @@ import * as i2 from "./chip-list.component";
  * ```
  */
 export class ChipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [i1.ChipComponent] });
 }
-ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
-ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [KENDO_CHIPLIST] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CHIPLIST],