@progress/kendo-angular-toolbar 18.1.0-develop.4 → 18.1.0-develop.5

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

@@ -185,6 +185,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         imageUrl: ''
     };
     toolbarButtonElement;
+    sectionButtonElement;
     overflowButtonElement;
     _showText = 'both';
     _text;
@@ -244,7 +245,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
+        return this[`${this.location}ButtonElement`]?.nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -253,7 +254,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -306,6 +307,34 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                 </span>
             </div>
         </ng-template>
+        <ng-template #sectionTemplate>
+            <button
+                #sectionButton
+                [class.k-toolbar-button]="!toggleable"
+                [class.k-toolbar-toggle-button]="toggleable"
+                [tabindex]="tabIndex"
+                type="button"
+                kendoButton
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                (click)="click.emit($event)"
+                (pointerdown)="pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event)"
+                (blur)="onBlur()"
+            >
+                {{ toolbarOptions.text }}
+            </button>
+        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
@@ -367,6 +396,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </span>
             </div>
         </ng-template>
+        <ng-template #sectionTemplate>
+            <button
+                #sectionButton
+                [class.k-toolbar-button]="!toggleable"
+                [class.k-toolbar-toggle-button]="toggleable"
+                [tabindex]="tabIndex"
+                type="button"
+                kendoButton
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                (click)="click.emit($event)"
+                (pointerdown)="pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event)"
+                (blur)="onBlur()"
+            >
+                {{ toolbarOptions.text }}
+            </button>
+        </ng-template>
     `,
                     standalone: true,
                     imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
@@ -414,6 +471,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarButtonElement: [{
                 type: ViewChild,
                 args: ['toolbarButton', { read: ElementRef }]
+            }], sectionButtonElement: [{
+                type: ViewChild,
+                args: ['sectionButton', { read: ElementRef }]
             }], overflowButtonElement: [{
                 type: ViewChild,
                 args: ['overflowButton', { read: ElementRef }]

package/esm2022/tools/toolbar-buttongroup.component.mjs

@@ -52,12 +52,18 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     toolbarButtonGroup;
+    sectionButtonGroup;
     overflowListItems;
     buttonComponents;
     get buttonElements() {
-        if (this.overflows) {
+        if (this.overflows && this.location === 'overflow') {
             return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
         }
+        else if (this.overflows && this.location === 'section') {
+            return this.sectionButtonGroup
+                .buttons.filter(b => !b.isDisabled)
+                .map(b => b.element);
+        }
         else {
             return this.toolbarButtonGroup
                 .buttons.filter(b => !b.isDisabled)
@@ -125,8 +131,8 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
+        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
+        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
         this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
         this.focusButton(this.focusedIndex, ev);
     }
@@ -134,8 +140,8 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(ev) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
+        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
+        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
         const peekAtIndex = makePeeker(this.buttonElements);
         const isUnmodified = areEqual(this.focusedIndex);
         this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
@@ -171,7 +177,7 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
                 class="k-toolbar-button-group k-button-group-{{fillMode}}"
@@ -233,6 +239,42 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                     </span>
                 </div>
         </ng-template>
+        <ng-template #sectionTemplate>
+        <kendo-buttongroup
+                class="k-toolbar-button-group k-button-group-{{fillMode}}"
+                #sectionButtonGroup
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+                (navigate)="onNavigate($event)"
+                (focus)="onFocus()"
+            >
+                <button
+                    kendoButton
+                    type="button"
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [attr.aria-pressed]="button.selected ? true : false"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.toolbarOptions.icon"
+                    [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
+                    [imageUrl]="button.toolbarOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (pointerdown)="button.pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.toolbarOptions.text }}
+                </button>
+            </kendo-buttongroup>
+        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
@@ -303,6 +345,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </span>
                 </div>
         </ng-template>
+        <ng-template #sectionTemplate>
+        <kendo-buttongroup
+                class="k-toolbar-button-group k-button-group-{{fillMode}}"
+                #sectionButtonGroup
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+                (navigate)="onNavigate($event)"
+                (focus)="onFocus()"
+            >
+                <button
+                    kendoButton
+                    type="button"
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [attr.aria-pressed]="button.selected ? true : false"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.toolbarOptions.icon"
+                    [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
+                    [imageUrl]="button.toolbarOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (pointerdown)="button.pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.toolbarOptions.text }}
+                </button>
+            </kendo-buttongroup>
+        </ng-template>
     `,
                     standalone: true,
                     imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
@@ -320,6 +398,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]
+            }], sectionButtonGroup: [{
+                type: ViewChild,
+                args: ['sectionButtonGroup', { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']

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

@@ -192,7 +192,8 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      */
     close = new EventEmitter();
     dropdownButton;
-    dropDownButtonComponent;
+    toolbarDropDownButton;
+    sectionDropDownButton;
     overflowListItems;
     toolbarOptions = {
         text: '',
@@ -230,7 +231,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.renderer.addClass(this[`${this.location}DropDownButton`].button.nativeElement, 'k-toolbar-menu-button');
+        });
     }
     /**
      * @hidden
@@ -250,9 +253,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.dropDownButtonComponent?.focus();
+        if (!this.overflows || this.location === 'section') {
+            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+                this[`${this.location}DropDownButton`]?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -267,7 +270,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
             return false;
         }
-        if (this.overflows) {
+        if (this.overflows && this.location !== 'section') {
             const peekAtIndex = makePeeker(this.overflowButtons);
             const isUnmodified = areEqual(this.focusedIndex);
             this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
@@ -305,9 +308,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", 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: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", 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: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
+            <kendo-dropdownbutton #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -329,6 +332,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
+
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -369,6 +373,30 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 </div>
             </ng-container>
         </ng-template>
+
+        <ng-template #sectionTemplate>
+            <kendo-dropdownbutton #sectionDropDownButton
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
+                [buttonClass]="buttonClass"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [data]="data"
+                [buttonAttributes]="{'title': title}"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            >
+                {{ toolbarOptions.text }}
+            </kendo-dropdownbutton>
+        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
@@ -379,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar-dropdownbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
+            <kendo-dropdownbutton #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -401,6 +429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
+
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -441,6 +470,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </div>
             </ng-container>
         </ng-template>
+
+        <ng-template #sectionTemplate>
+            <kendo-dropdownbutton #sectionDropDownButton
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
+                [buttonClass]="buttonClass"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [data]="data"
+                [buttonAttributes]="{'title': title}"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            >
+                {{ toolbarOptions.text }}
+            </kendo-dropdownbutton>
+        </ng-template>
     `,
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
@@ -490,9 +543,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], dropDownButtonComponent: [{
+            }], toolbarDropDownButton: [{
+                type: ViewChild,
+                args: ['toolbarDropDownButton', { static: false }]
+            }], sectionDropDownButton: [{
                 type: ViewChild,
-                args: [DropDownButtonComponent, { static: false }]
+                args: ['sectionDropDownButton', { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']

package/esm2022/tools/toolbar-separator.component.mjs

@@ -45,6 +45,10 @@ export class ToolBarSeparatorComponent extends ToolBarToolComponent {
             <div class="k-separator k-toolbar-separator"></div>
         </ng-template>
 
+        <ng-template #sectionTemplate>
+            <div class="k-separator k-toolbar-separator"></div>
+        </ng-template>
+
         <ng-template #popupTemplate>
             <div class="k-item k-menu-item">
                 <div class="k-separator k-separator-horizontal"></div>
@@ -63,6 +67,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div class="k-separator k-toolbar-separator"></div>
         </ng-template>
 
+        <ng-template #sectionTemplate>
+            <div class="k-separator k-toolbar-separator"></div>
+        </ng-template>
+
         <ng-template #popupTemplate>
             <div class="k-item k-menu-item">
                 <div class="k-separator k-separator-horizontal"></div>

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

@@ -220,6 +220,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
+    sectionSplitButton;
     overflowMainButton;
     overflowListItems;
     constructor() {
@@ -251,9 +252,9 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarSplitButton.focus();
+        if (!this.overflows || this.location === 'section') {
+            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+                this[`${this.location}SplitButton`].focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -297,7 +298,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.itemClick.emit(dataItem);
     }
     focusButton(index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
+        if ((!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') && this.location !== 'section') {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
@@ -306,7 +307,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, 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: "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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, 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: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], 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
@@ -376,6 +377,32 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             </div>
             </ng-container>
         </ng-template>
+        <ng-template #sectionTemplate>
+            <kendo-splitbutton
+                #sectionSplitButton
+                class="k-toolbar-split-button"
+                [data]="data"
+                [text]="toolbarOptions.text"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [buttonClass]="buttonClass"
+                [arrowButtonClass]="arrowButtonClass"
+                [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (buttonClick)="buttonClick.emit($event)"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            ></kendo-splitbutton>
+        </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
@@ -454,6 +481,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
             </ng-container>
         </ng-template>
+        <ng-template #sectionTemplate>
+            <kendo-splitbutton
+                #sectionSplitButton
+                class="k-toolbar-split-button"
+                [data]="data"
+                [text]="toolbarOptions.text"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [buttonClass]="buttonClass"
+                [arrowButtonClass]="arrowButtonClass"
+                [arrowButtonIcon]="arrowButtonIcon"
+                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (buttonClick)="buttonClick.emit($event)"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            ></kendo-splitbutton>
+        </ng-template>
     `,
                     standalone: true,
                     imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
@@ -505,6 +558,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]
+            }], sectionSplitButton: [{
+                type: ViewChild,
+                args: ['sectionSplitButton', { static: false }]
             }], overflowMainButton: [{
                 type: ViewChild,
                 args: ['overflowMainButton', { read: ElementRef }]

package/esm2022/tools/toolbar-tool.component.mjs

@@ -10,12 +10,17 @@ import * as i0 from "@angular/core";
  */
 export class ToolBarToolComponent {
     toolbarTemplate;
+    sectionTemplate;
     popupTemplate;
     tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
     overflows = true;
     visibility;
     element;
     isBuiltInTool = false;
+    /**
+     * @hidden
+     */
+    location;
     constructor() {
         this.element = inject(ElementRef);
     }
@@ -57,7 +62,7 @@ export class ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, decorators: [{
             type: Directive,
@@ -67,6 +72,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
                 type: ViewChild,
                 args: ['toolbarTemplate', { static: true }]
+            }], sectionTemplate: [{
+                type: ViewChild,
+                args: ['sectionTemplate', { static: true }]
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]

package/esm2022/tools/tools.service.mjs

@@ -14,6 +14,9 @@ export class ToolbarToolsService {
     renderedTools = [];
     overflowTools = [];
     allTools = [];
+    reset() {
+        this.renderedTools = this.overflowTools = this.allTools = [];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService });
 }

package/esm2022/util.mjs

@@ -221,3 +221,20 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
  * nodeType 1 is Element, nodeType 3 is Text
  */
 export const isElementOrTextNode = n => n.nodeType === 1 || n.nodeType === 3;
+/**
+ * @hidden
+ */
+export const normalizeOverflowSettings = (overflow) => {
+    const defaultOverflowSettings = { mode: 'none', scrollButtons: 'auto', scrollButtonsPosition: 'split' };
+    let normalizedSettings = {};
+    if (typeof overflow === 'object') {
+        normalizedSettings = Object.assign(defaultOverflowSettings, overflow);
+    }
+    else if (typeof overflow === 'boolean') {
+        normalizedSettings = overflow ? Object.assign(defaultOverflowSettings, { mode: 'menu' }) : defaultOverflowSettings;
+    }
+    else {
+        normalizedSettings = Object.assign(defaultOverflowSettings, { mode: overflow });
+    }
+    return normalizedSettings;
+};