@progress/kendo-angular-buttons 14.1.0-develop.9 → 14.1.1-develop.1

package/chip/chip.component.d.ts

@@ -61,6 +61,24 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
      */
     removeSvgIcon: SVGIcon;
+    /**
+     * @hidden
+     *
+     * Determines whether the Chip has a menu.
+     */
+    hasMenu: boolean;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
+     */
+    menuIcon: string;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
+     */
+    menuSvgIcon: SVGIcon;
     /**
      * If set to `true`, the Chip will be disabled.
      * @default false
@@ -121,6 +139,12 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      * Fires each time the user clicks the remove icon of the Chip.
      */
     remove: EventEmitter<ChipRemoveEvent>;
+    /**
+     * @hidden
+     *
+     * Fires each time the user clicks the menu icon of the Chip.
+     */
+    menuToggle: EventEmitter<ChipRemoveEvent>;
     /**
      * Fires each time the user clicks the content of the Chip.
      */
@@ -139,6 +163,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      * @hidden
      */
     defaultRemoveIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    defaultMenuIcon: SVGIcon;
     private _size;
     private _rounded;
     private _fillMode;
@@ -178,6 +206,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      * @hidden
      */
     onRemoveClick(e: any): void;
+    /**
+     * @hidden
+     */
+    onMenuClick(e: any): void;
     private attachElementEventHandlers;
     /**
      * @hidden
@@ -187,5 +219,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"; "disabled": "disabled"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "remove": "remove"; "contentClick": "contentClick"; }, 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, ["*"]>;
 }

package/esm2020/chip/chip.component.mjs

@@ -9,7 +9,7 @@ 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 { xCircleIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-icons";
@@ -38,6 +38,12 @@ export class ChipComponent {
          * @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
@@ -47,6 +53,12 @@ export class ChipComponent {
          * 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.
          */
@@ -57,6 +69,10 @@ export class ChipComponent {
          * @hidden
          */
         this.defaultRemoveIcon = xCircleIcon;
+        /**
+         * @hidden
+         */
+        this.defaultMenuIcon = moreVerticalIcon;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -228,6 +244,14 @@ export class ChipComponent {
             this.remove.emit({ sender: this, originalEvent: e });
         }
     }
+    /**
+     * @hidden
+     */
+    onMenuClick(e) {
+        if (this.hasMenu) {
+            this.menuToggle.emit({ sender: this, originalEvent: e });
+        }
+    }
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(chip, 'focus', () => {
@@ -237,8 +261,8 @@ export class ChipComponent {
                 this.renderer.removeClass(chip, 'k-focus');
             }));
             this.subs.add(this.renderer.listen(chip, 'click', (e) => {
-                const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
-                if (!isRemoveClicked) {
+                const isActionClicked = closest(e.target, '.k-chip-action');
+                if (!isActionClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
                     });
@@ -302,7 +326,7 @@ export class ChipComponent {
     }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", 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: "12.0.0", version: "13.3.12", type: ChipComponent, 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,
@@ -336,6 +360,15 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -344,7 +377,6 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `, 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"] }] });
@@ -380,6 +412,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -388,7 +429,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `,
@@ -418,6 +458,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], removeSvgIcon: [{
                 type: Input
+            }], hasMenu: [{
+                type: Input
+            }], menuIcon: [{
+                type: Input
+            }], menuSvgIcon: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], size: [{
@@ -430,6 +476,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], remove: [{
                 type: Output
+            }], menuToggle: [{
+                type: Output
             }], contentClick: [{
                 type: Output
             }], tabIndex: [{

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: 1699435919,
-    version: '14.1.0-develop.9',
+    publishDate: 1699864765,
+    version: '14.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -6,7 +6,7 @@ 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, isPresent as isPresent$1, EventsModule } from '@progress/kendo-angular-common';
-import { caretAltDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
+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 { Subject, Subscription, fromEvent, merge } from 'rxjs';
@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1699435919,
-    version: '14.1.0-develop.9',
+    publishDate: 1699864765,
+    version: '14.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3371,6 +3371,12 @@ class ChipComponent {
          * @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
@@ -3380,6 +3386,12 @@ class ChipComponent {
          * 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.
          */
@@ -3390,6 +3402,10 @@ class ChipComponent {
          * @hidden
          */
         this.defaultRemoveIcon = xCircleIcon;
+        /**
+         * @hidden
+         */
+        this.defaultMenuIcon = moreVerticalIcon;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -3561,6 +3577,14 @@ class ChipComponent {
             this.remove.emit({ sender: this, originalEvent: e });
         }
     }
+    /**
+     * @hidden
+     */
+    onMenuClick(e) {
+        if (this.hasMenu) {
+            this.menuToggle.emit({ sender: this, originalEvent: e });
+        }
+    }
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(chip, 'focus', () => {
@@ -3570,8 +3594,8 @@ class ChipComponent {
                 this.renderer.removeClass(chip, 'k-focus');
             }));
             this.subs.add(this.renderer.listen(chip, 'click', (e) => {
-                const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
-                if (!isRemoveClicked) {
+                const isActionClicked = closest(e.target, '.k-chip-action');
+                if (!isActionClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
                     });
@@ -3635,7 +3659,7 @@ class ChipComponent {
     }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", 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: "12.0.0", version: "13.3.12", type: ChipComponent, 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,
@@ -3669,6 +3693,15 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -3677,7 +3710,6 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `, 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"] }] });
@@ -3713,6 +3745,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -3721,7 +3762,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `,
@@ -3751,6 +3791,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], removeSvgIcon: [{
                 type: Input
+            }], hasMenu: [{
+                type: Input
+            }], menuIcon: [{
+                type: Input
+            }], menuSvgIcon: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], size: [{
@@ -3763,6 +3809,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], remove: [{
                 type: Output
+            }], menuToggle: [{
+                type: Output
             }], contentClick: [{
                 type: Output
             }], tabIndex: [{

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

@@ -7,7 +7,7 @@ import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import * as i9 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 { 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';
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1699435919,
-    version: '14.1.0-develop.9',
+    publishDate: 1699864765,
+    version: '14.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3364,6 +3364,12 @@ class ChipComponent {
          * @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
@@ -3373,6 +3379,12 @@ class ChipComponent {
          * 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.
          */
@@ -3383,6 +3395,10 @@ class ChipComponent {
          * @hidden
          */
         this.defaultRemoveIcon = xCircleIcon;
+        /**
+         * @hidden
+         */
+        this.defaultMenuIcon = moreVerticalIcon;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -3554,6 +3570,14 @@ class ChipComponent {
             this.remove.emit({ sender: this, originalEvent: e });
         }
     }
+    /**
+     * @hidden
+     */
+    onMenuClick(e) {
+        if (this.hasMenu) {
+            this.menuToggle.emit({ sender: this, originalEvent: e });
+        }
+    }
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(chip, 'focus', () => {
@@ -3563,8 +3587,8 @@ class ChipComponent {
                 this.renderer.removeClass(chip, 'k-focus');
             }));
             this.subs.add(this.renderer.listen(chip, 'click', (e) => {
-                const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
-                if (!isRemoveClicked) {
+                const isActionClicked = closest(e.target, '.k-chip-action');
+                if (!isActionClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
                     });
@@ -3628,7 +3652,7 @@ class ChipComponent {
     }
 }
 ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "12.0.0", version: "13.3.12", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", 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: "12.0.0", version: "13.3.12", type: ChipComponent, 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,
@@ -3662,6 +3686,15 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -3670,7 +3703,6 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `, 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"] }] });
@@ -3706,6 +3738,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
 
         <span class="k-chip-actions">
+            <span class="k-chip-action"
+                *ngIf="hasMenu"
+                (click)="onMenuClick($event)">
+                <kendo-icon-wrapper
+                    name="more-vertical"
+                    size="small"
+                    [svgIcon]="defaultMenuIcon || menuSvgIcon"
+                    [customFontClass]="menuIcon"></kendo-icon-wrapper>
+            </span>
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
                 (click)="onRemoveClick($event)">
@@ -3714,7 +3755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     size="small"
                     [svgIcon]="removeSvgIcon || defaultRemoveIcon"
                     [customFontClass]="removeIcon"></kendo-icon-wrapper>
-
             </span>
         </span>
     `,
@@ -3744,6 +3784,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], removeSvgIcon: [{
                 type: Input
+            }], hasMenu: [{
+                type: Input
+            }], menuIcon: [{
+                type: Input
+            }], menuSvgIcon: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], size: [{
@@ -3756,6 +3802,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], remove: [{
                 type: Output
+            }], menuToggle: [{
+                type: Output
             }], contentClick: [{
                 type: Output
             }], tabIndex: [{

package/package.json

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