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

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

@@ -185,7 +185,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         imageUrl: ''
     };
     toolbarButtonElement;
-    sectionButtonElement;
     overflowButtonElement;
     _showText = 'both';
     _text;
@@ -245,7 +244,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return this[`${this.location}ButtonElement`]?.nativeElement;
+        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -254,7 +253,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: "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: `
+    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: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -307,34 +306,6 @@ 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: [{
@@ -396,34 +367,6 @@ 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]
@@ -471,9 +414,6 @@ 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,18 +52,12 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     toolbarButtonGroup;
-    sectionButtonGroup;
     overflowListItems;
     buttonComponents;
     get buttonElements() {
-        if (this.overflows && this.location === 'overflow') {
+        if (this.overflows) {
             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)
@@ -131,8 +125,8 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
-        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
         this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
         this.focusButton(this.focusedIndex, ev);
     }
@@ -140,8 +134,8 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(ev) {
-        const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
-        const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
         const peekAtIndex = makePeeker(this.buttonElements);
         const isUnmodified = areEqual(this.focusedIndex);
         this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
@@ -177,7 +171,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: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], 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: "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}}"
@@ -239,42 +233,6 @@ 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: [{
@@ -345,42 +303,6 @@ 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]
@@ -398,9 +320,6 @@ 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,8 +192,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      */
     close = new EventEmitter();
     dropdownButton;
-    toolbarDropDownButton;
-    sectionDropDownButton;
+    dropDownButtonComponent;
     overflowListItems;
     toolbarOptions = {
         text: '',
@@ -231,9 +230,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.renderer.addClass(this[`${this.location}DropDownButton`].button.nativeElement, 'k-toolbar-menu-button');
-        });
+        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
     }
     /**
      * @hidden
@@ -253,9 +250,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows || this.location === 'section') {
-            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}DropDownButton`]?.focus();
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.dropDownButtonComponent?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -270,7 +267,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 && this.location !== 'section') {
+        if (this.overflows) {
             const peekAtIndex = makePeeker(this.overflowButtons);
             const isUnmodified = areEqual(this.focusedIndex);
             this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
@@ -308,9 +305,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: "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: `
+    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: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
+            <kendo-dropdownbutton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -332,7 +329,6 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
-
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -373,30 +369,6 @@ 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: [{
@@ -407,7 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar-dropdownbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
+            <kendo-dropdownbutton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -429,7 +401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 {{ toolbarOptions.text }}
             </kendo-dropdownbutton>
         </ng-template>
-
         <ng-template #popupTemplate>
             <div
                 tabindex="-1"
@@ -470,30 +441,6 @@ 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]
@@ -543,12 +490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], toolbarDropDownButton: [{
-                type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
-            }], sectionDropDownButton: [{
+            }], dropDownButtonComponent: [{
                 type: ViewChild,
-                args: ['sectionDropDownButton', { static: false }]
+                args: [DropDownButtonComponent, { static: false }]
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']

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

@@ -45,10 +45,6 @@ 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>
@@ -67,10 +63,6 @@ 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,7 +220,6 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
-    sectionSplitButton;
     overflowMainButton;
     overflowListItems;
     constructor() {
@@ -252,9 +251,9 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus(ev = {}) {
-        if (!this.overflows || this.location === 'section') {
-            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}SplitButton`].focus();
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.toolbarSplitButton.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -298,7 +297,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') && this.location !== 'section') {
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
@@ -307,7 +306,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: "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: `
+    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: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -377,32 +376,6 @@ 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: [{
@@ -481,32 +454,6 @@ 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]
@@ -558,9 +505,6 @@ 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,17 +10,12 @@ 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);
     }
@@ -62,7 +57,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: "sectionTemplate", first: true, predicate: ["sectionTemplate"], 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: "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,
@@ -72,9 +67,6 @@ 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,9 +14,6 @@ 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,20 +221,3 @@ 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;
-};