@progress/kendo-angular-toolbar 11.0.1-develop.5 → 11.1.0-develop.10

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1674214362,
-    version: '11.0.1-develop.5',
+    publishDate: 1675171605,
+    version: '11.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/toolbar.component.mjs

@@ -30,6 +30,7 @@ import * as i7 from "@progress/kendo-angular-common";
 import * as i8 from "./localization/localized-toolbar-messages.directive";
 import * as i9 from "@angular/common";
 const DEFAULT_SIZE = 'medium';
+const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -69,6 +70,7 @@ export class ToolBarComponent {
         this.hostClass = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
         this._size = DEFAULT_SIZE;
+        this.overflowButtonClickedTime = null;
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
         this.role = 'toolbar';
@@ -300,6 +302,7 @@ export class ToolBarComponent {
     showPopup() {
         this.popupOpen = !this.popupOpen;
         this.navigationService.click({ context: undefined, event: undefined });
+        this.overflowButtonClickedTime = Date.now();
     }
     /**
      * Toggles the visibility of the overflow popup.
@@ -336,7 +339,8 @@ export class ToolBarComponent {
             this.stretch(containerWidth, this.childrenWidth);
             this.displayAnchor();
             this.resizeSensor?.acceptSize();
-            if (this.popupOpen) {
+            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+            if (this.popupOpen && !isImmediateResize) {
                 this.toggle();
             }
         }

package/esm2020/tools/toolbar-button.component.mjs

@@ -143,10 +143,12 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
         if (isDevMode() &&
             icon &&
-            (this.toolbarOptions.icon || this.overflowOptions.icon) &&
-            (this.toolbarOptions.iconClass || this.overflowOptions.iconClass)) {
+            isIconSet &&
+            isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
         this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);

package/esm2020/tools/toolbar-dropdownbutton.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren } from '@angular/core';
+import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
@@ -105,6 +105,22 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -241,7 +257,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -384,6 +400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{

package/esm2020/tools/toolbar-splitbutton.component.mjs

@@ -2,10 +2,11 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter, ViewChildren, QueryList, isDevMode } from '@angular/core';
 import { SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 import * as i2 from "@progress/kendo-angular-icons";
@@ -54,7 +55,12 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
          * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
          * be rendered for the button which opens the popup.
          */
-        this.arrowButtonIcon = 'arrow-s';
+        this.arrowButtonIcon = 'caret-alt-down';
+        /**
+         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+         * be rendered for the button which opens the popup.
+         */
+        this.arrowButtonSvgIcon = caretAltDownIcon;
         /**
          * Configures the text field of the button-list popup.
          */
@@ -118,6 +124,22 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the main button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -255,7 +277,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -269,6 +291,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -279,8 +302,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -346,6 +368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -356,8 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -412,6 +434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -432,6 +456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], arrowButtonIcon: [{
                 type: Input
+            }], arrowButtonSvgIcon: [{
+                type: Input
             }], textField: [{
                 type: Input
             }], data: [{

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

@@ -11,7 +11,7 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i3 from '@angular/common';
@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1674214362,
-    version: '11.0.1-develop.5',
+    publishDate: 1675171605,
+    version: '11.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -715,6 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const DEFAULT_SIZE = 'medium';
+const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -754,6 +755,7 @@ class ToolBarComponent {
         this.hostClass = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
         this._size = DEFAULT_SIZE;
+        this.overflowButtonClickedTime = null;
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
         this.role = 'toolbar';
@@ -985,6 +987,7 @@ class ToolBarComponent {
     showPopup() {
         this.popupOpen = !this.popupOpen;
         this.navigationService.click({ context: undefined, event: undefined });
+        this.overflowButtonClickedTime = Date.now();
     }
     /**
      * Toggles the visibility of the overflow popup.
@@ -1022,7 +1025,8 @@ class ToolBarComponent {
             this.stretch(containerWidth, this.childrenWidth);
             this.displayAnchor();
             (_a = this.resizeSensor) === null || _a === void 0 ? void 0 : _a.acceptSize();
-            if (this.popupOpen) {
+            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+            if (this.popupOpen && !isImmediateResize) {
                 this.toggle();
             }
         }
@@ -1566,10 +1570,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
         if (isDevMode() &&
             icon &&
-            (this.toolbarOptions.icon || this.overflowOptions.icon) &&
-            (this.toolbarOptions.iconClass || this.overflowOptions.iconClass)) {
+            isIconSet &&
+            isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
         this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
@@ -2197,6 +2203,22 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -2333,7 +2355,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -2476,6 +2498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -2568,7 +2592,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
          * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
          * be rendered for the button which opens the popup.
          */
-        this.arrowButtonIcon = 'arrow-s';
+        this.arrowButtonIcon = 'caret-alt-down';
+        /**
+         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+         * be rendered for the button which opens the popup.
+         */
+        this.arrowButtonSvgIcon = caretAltDownIcon;
         /**
          * Configures the text field of the button-list popup.
          */
@@ -2632,6 +2661,22 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the main button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -2769,7 +2814,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -2783,6 +2828,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -2793,8 +2839,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -2860,6 +2905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -2870,8 +2916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -2926,6 +2971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -2946,6 +2993,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], arrowButtonIcon: [{
                 type: Input
+            }], arrowButtonSvgIcon: [{
+                type: Input
             }], textField: [{
                 type: Input
             }], data: [{

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

@@ -13,7 +13,7 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@progress/kendo-angular-buttons';
@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1674214362,
-    version: '11.0.1-develop.5',
+    publishDate: 1675171605,
+    version: '11.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -715,6 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const DEFAULT_SIZE = 'medium';
+const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -754,6 +755,7 @@ class ToolBarComponent {
         this.hostClass = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
         this._size = DEFAULT_SIZE;
+        this.overflowButtonClickedTime = null;
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
         this.role = 'toolbar';
@@ -985,6 +987,7 @@ class ToolBarComponent {
     showPopup() {
         this.popupOpen = !this.popupOpen;
         this.navigationService.click({ context: undefined, event: undefined });
+        this.overflowButtonClickedTime = Date.now();
     }
     /**
      * Toggles the visibility of the overflow popup.
@@ -1021,7 +1024,8 @@ class ToolBarComponent {
             this.stretch(containerWidth, this.childrenWidth);
             this.displayAnchor();
             this.resizeSensor?.acceptSize();
-            if (this.popupOpen) {
+            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+            if (this.popupOpen && !isImmediateResize) {
                 this.toggle();
             }
         }
@@ -1565,10 +1569,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
         if (isDevMode() &&
             icon &&
-            (this.toolbarOptions.icon || this.overflowOptions.icon) &&
-            (this.toolbarOptions.iconClass || this.overflowOptions.iconClass)) {
+            isIconSet &&
+            isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
         this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
@@ -2195,6 +2201,22 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -2331,7 +2353,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -2474,6 +2496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -2566,7 +2590,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
          * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
          * be rendered for the button which opens the popup.
          */
-        this.arrowButtonIcon = 'arrow-s';
+        this.arrowButtonIcon = 'caret-alt-down';
+        /**
+         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+         * be rendered for the button which opens the popup.
+         */
+        this.arrowButtonSvgIcon = caretAltDownIcon;
         /**
          * Configures the text field of the button-list popup.
          */
@@ -2630,6 +2659,22 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the main button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
+        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        if (isDevMode() &&
+            icon &&
+            isIconSet &&
+            isIconClassSet) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -2767,7 +2812,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -2781,6 +2826,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -2791,8 +2837,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -2858,6 +2903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
                 [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [textField]="textField"
@@ -2868,8 +2914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"
-            >
-            </kendo-splitbutton>
+            ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
             <div #overflowMainButton
@@ -2924,6 +2969,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
@@ -2944,6 +2991,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], arrowButtonIcon: [{
                 type: Input
+            }], arrowButtonSvgIcon: [{
+                type: Input
             }], textField: [{
                 type: Input
             }], data: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "11.0.1-develop.5",
+  "version": "11.1.0-develop.10",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -29,16 +29,16 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.0.1-develop.5",
-    "@progress/kendo-angular-common": "11.0.1-develop.5",
-    "@progress/kendo-angular-l10n": "11.0.1-develop.5",
-    "@progress/kendo-angular-icons": "11.0.1-develop.5",
-    "@progress/kendo-angular-popup": "11.0.1-develop.5",
+    "@progress/kendo-angular-buttons": "11.1.0-develop.10",
+    "@progress/kendo-angular-common": "11.1.0-develop.10",
+    "@progress/kendo-angular-l10n": "11.1.0-develop.10",
+    "@progress/kendo-angular-icons": "11.1.0-develop.10",
+    "@progress/kendo-angular-popup": "11.1.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.0.1-develop.5"
+    "@progress/kendo-angular-schematics": "11.1.0-develop.10"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-toolbar.mjs",

package/toolbar.component.d.ts

@@ -97,6 +97,7 @@ export declare class ToolBarComponent {
     private cancelRenderedToolsSubscription$;
     private cachedGap;
     private _size;
+    private overflowButtonClickedTime;
     private subscriptions;
     private popupSubs;
     /**

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -9,6 +9,7 @@ import { ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@prog
 import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '@progress/kendo-angular-buttons';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
@@ -32,6 +33,11 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      * Defines an icon that will be rendered next to the button text.
      */
     set icon(icon: string);
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon: SVGIcon);
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -169,5 +175,5 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     private focusButton;
     private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarDropDownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "look": "look"; "primary": "primary"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "textField": "textField"; "disabled": "disabled"; "data": "data"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "look": "look"; "primary": "primary"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "textField": "textField"; "disabled": "disabled"; "data": "data"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
 }

package/tools/toolbar-splitbutton.component.d.ts

@@ -9,6 +9,7 @@ import { PopupSettings } from '../popup-settings';
 import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '@progress/kendo-angular-buttons';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
@@ -32,6 +33,11 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
      * ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
      */
     set icon(icon: string);
+    /**
+     * Defines an SVGIcon to be rendered within the main button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon: SVGIcon);
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the button text.
      */
@@ -102,6 +108,11 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
      * be rendered for the button which opens the popup.
      */
     arrowButtonIcon: string;
+    /**
+     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonSvgIcon: SVGIcon;
     /**
      * Configures the text field of the button-list popup.
      */
@@ -179,5 +190,5 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     private focusButton;
     private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarSplitButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarSplitButtonComponent, "kendo-toolbar-splitbutton", ["kendoToolBarSplitButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "disabled": "disabled"; "popupSettings": "popupSettings"; "fillMode": "fillMode"; "themeColor": "themeColor"; "look": "look"; "buttonClass": "buttonClass"; "arrowButtonClass": "arrowButtonClass"; "arrowButtonIcon": "arrowButtonIcon"; "textField": "textField"; "data": "data"; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarSplitButtonComponent, "kendo-toolbar-splitbutton", ["kendoToolBarSplitButton"], { "showText": "showText"; "showIcon": "showIcon"; "text": "text"; "icon": "icon"; "svgIcon": "svgIcon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "disabled": "disabled"; "popupSettings": "popupSettings"; "fillMode": "fillMode"; "themeColor": "themeColor"; "look": "look"; "buttonClass": "buttonClass"; "arrowButtonClass": "arrowButtonClass"; "arrowButtonIcon": "arrowButtonIcon"; "arrowButtonSvgIcon": "arrowButtonSvgIcon"; "textField": "textField"; "data": "data"; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
 }