@progress/kendo-angular-toolbar 16.11.0-develop.2 → 16.11.0-develop.3

package/esm2020/navigation.service.mjs

@@ -18,7 +18,7 @@ export class NavigationService {
         this.isOverflowButtonFocused = false;
     }
     setRenderedTools(rts) {
-        this.renderedTools = [...rts];
+        this.renderedTools = rts;
     }
     click({ context, event: ev }) {
         if (this.focused.renderedTool !== context && ev) {
@@ -31,7 +31,7 @@ export class NavigationService {
     }
     moveFocusToPopup() {
         this.isPopupFocused = true;
-        this.blurOverflowButton();
+        this.resetNavigation();
         this.focus();
     }
     focusNext(ev) {
@@ -108,7 +108,7 @@ export class NavigationService {
         }
     }
     getFocusableTools() {
-        return this.renderedTools.filter(rt => rt.tool.overflows === this.isPopupFocused && rt.tool.canFocus());
+        return this.renderedTools.filter(rt => (rt.tool.overflows === this.isPopupFocused) && rt.tool.canFocus());
     }
     focus(renderedTool, ev) {
         // running the code below in onStable fixes issue #2939

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: 1727422886,
-    version: '16.11.0-develop.2',
+    publishDate: 1727428119,
+    version: '16.11.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/renderer.component.mjs

@@ -2,134 +2,144 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, Input, Renderer2 as Renderer, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
-import { outerWidth } from './util';
+import { Input, Renderer2 as Renderer, Output, EventEmitter, Directive, ViewContainerRef } from '@angular/core';
+import { isElement, outerWidth } from './util';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
 import { RefreshService } from './refresh.service';
 import { RendererService } from './renderer.service';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { ToolbarToolsService } from './tools/tools.service';
+import { NavigationService } from './navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./renderer.service";
 import * as i2 from "./refresh.service";
+import * as i3 from "./tools/tools.service";
+import * as i4 from "./navigation.service";
 const MIN_SPACER_WIDTH = 18;
 /**
  * @hidden
  */
 export class ToolBarRendererComponent {
-    constructor(element, renderer, rendererService, refreshService) {
-        this.element = element;
+    constructor(renderer, rendererService, refreshService, toolsService, viewContainer, navigationService) {
         this.renderer = renderer;
         this.rendererService = rendererService;
         this.refreshService = refreshService;
+        this.toolsService = toolsService;
+        this.viewContainer = viewContainer;
+        this.navigationService = navigationService;
         this.rendererClick = new EventEmitter();
-        this.hostClass = true;
-        this.rendererService.element = element;
+        this.onClick = (ev) => {
+            this.rendererClick.emit({ context: this, event: ev });
+        };
+    }
+    get isSpacer() {
+        return this.tool && this.tool.__isSpacer;
+    }
+    ngOnInit() {
+        this.internalComponentRef = this.viewContainer.get(0).rootNodes[0];
+        this.element = this.tool.element;
+        this.internalComponentRef.addEventListener('click', this.onClick);
+        this.rendererService.element = this.element;
         this.rendererService.renderer = this;
         this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
             if (this.tool === tool) {
                 this.refresh();
             }
         });
-    }
-    get spacerClass() {
-        return this.location === 'toolbar' && this.isSpacer;
-    }
-    get isSpacer() {
-        return this.tool && this.tool.__isSpacer;
-    }
-    onClick(ev) {
-        this.rendererClick.emit({ context: this, event: ev });
-    }
-    ngOnInit() {
         if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.element.nativeElement, 'visibility', 'hidden');
-                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
+                if (isElement(this.internalComponentRef)) {
+                    this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                }
             }
             else {
                 this.template = this.tool.popupTemplate;
-                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
+                if (isElement(this.internalComponentRef)) {
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                }
             }
         }
         else {
             this.tool.overflows = false;
             this.template = this.tool.toolbarTemplate;
-            this.renderer.setStyle(this.element.nativeElement, 'visibility', 'visible');
-            this.renderer.setStyle(this.element.nativeElement, 'display', 'inline-block');
+            if (isElement(this.internalComponentRef)) {
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            }
         }
     }
     ngOnDestroy() {
         this.refreshSubscription.unsubscribe();
+        this.internalComponentRef.removeEventListener('click', this.onClick);
     }
     ngAfterViewInit() {
         if (this.resizable) {
             this.refresh();
         }
+        this.updateTools();
     }
     /**
      * @hidden
      */
     get width() {
+        if (!isElement(this.internalComponentRef)) {
+            return 0;
+        }
         if (this.isSpacer) {
             return MIN_SPACER_WIDTH;
         }
-        return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
+        return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
     }
-    /**
-     * @hidden
-     */
     isDisplayed() {
-        return this.element.nativeElement.style.display !== 'none';
+        return this.internalComponentRef.style.display !== 'none';
     }
-    /**
-     * @hidden
-     */
     refresh() {
         if (this.resizable) {
+            if (!isElement(this.internalComponentRef)) {
+                return;
+            }
             if (this.location === 'toolbar') {
-                this.renderer.setStyle(this.element.nativeElement, 'visibility', this.tool.visibility);
-                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.toolbarDisplay);
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
+                this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
             }
             else {
-                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.overflowDisplay);
+                this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
             }
+            this.updateTools();
         }
     }
-    /**
-     * @hidden
-     */
     setAttribute(element, attr, value) {
         this.renderer.setAttribute(element, attr, value);
     }
+    updateTools() {
+        const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
+        const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
+        if (this.location === 'toolbar') {
+            isInPopup && (this.toolsService.overflowTools = this.toolsService.overflowTools.filter(t => t.tool !== this.tool));
+            !isInToolbar && this.toolsService.renderedTools.push(this);
+        }
+        else {
+            if (!isInPopup) {
+                this.toolsService.overflowTools.push(this);
+                this.toolsService.overflowTools.sort((t1, t2) => {
+                    // ensures correct navigation order in Popup
+                    return this.toolsService.allTools.indexOf(t1.tool) - this.toolsService.allTools.indexOf(t2.tool);
+                });
+            }
+        }
+    }
 }
-ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarRendererComponent, isStandalone: true, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass", "class.k-toolbar-renderer": "this.hostClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
-        <ng-container *ngIf="location === 'toolbar'">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-        <ng-container *ngIf="location === 'overflow' && tool.responsive">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+ToolBarRendererComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
-                    exportAs: 'kendoToolBarRenderer',
                     providers: [RendererService],
-                    selector: 'kendo-toolbar-renderer',
-                    template: `
-        <ng-container *ngIf="location === 'toolbar'">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-        <ng-container *ngIf="location === 'overflow' && tool.responsive">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-    `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    selector: '[kendoToolbarRenderer]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.RendererService }, { type: i2.RefreshService }]; }, propDecorators: { tool: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.RendererService }, { type: i2.RefreshService }, { type: i3.ToolbarToolsService }, { type: i0.ViewContainerRef }, { type: i4.NavigationService }]; }, propDecorators: { tool: [{
                 type: Input
             }], location: [{
                 type: Input
@@ -137,13 +147,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], rendererClick: [{
                 type: Output
-            }], spacerClass: [{
-                type: HostBinding,
-                args: ['class.k-spacer']
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-renderer']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });

package/esm2020/toolbar.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable no-case-declarations */
-import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { guid, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -22,13 +22,15 @@ import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { NgFor, NgIf, NgClass } from '@angular/common';
+import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
+import { ToolbarToolsService } from './tools/tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "./refresh.service";
 import * as i4 from "./navigation.service";
+import * as i5 from "./tools/tools.service";
 const DEFAULT_SIZE = 'medium';
 const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
@@ -42,7 +44,7 @@ const getInitialPopupSettings = (isRtl) => ({
 export class ToolBarComponent {
     constructor(localization, popupService, refreshService, navigationService, 
     // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr) {
+    element, zone, renderer, _cdr, toolsService) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -51,6 +53,7 @@ export class ToolBarComponent {
         this.zone = zone;
         this.renderer = renderer;
         this._cdr = _cdr;
+        this.toolsService = toolsService;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -189,7 +192,16 @@ export class ToolBarComponent {
     get resizableClass() {
         return this.overflow;
     }
+    ngAfterContentInit() {
+        this.toolsService.allTools = this.allTools.toArray();
+        this.subscriptions.add(this.allTools.changes.subscribe(changes => {
+            this.toolsService.allTools = this.allTools.toArray();
+            this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+        }));
+    }
     ngAfterViewInit() {
+        this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools);
+        this.toolsService.overflowToolsChange.next(this.toolsService.overflowTools);
         const element = this.element.nativeElement;
         if (!element.getAttribute('tabindex')) {
             this.element.nativeElement.setAttribute('tabindex', '0');
@@ -241,7 +253,7 @@ export class ToolBarComponent {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(() => this.onResize()));
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
             this.navigationService.overflowButton = this.overflowButton;
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // button icons are not rendered until onResize() is called
@@ -253,8 +265,7 @@ export class ToolBarComponent {
                 });
             });
         }
-        this.navigationService.setRenderedTools(this.renderedTools.toArray());
-        this.subscriptions.add(this.renderedTools.changes.subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray())));
+        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
         this.handleClasses(this.size, 'size');
     }
     ngOnInit() {
@@ -358,7 +369,6 @@ export class ToolBarComponent {
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
             this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                const currentTool = this.overflowRenderedTools.toArray().find(tool => closest(ev.target, (el) => el === tool.element.nativeElement));
                 switch (ev.keyCode) {
                     case Keys.ArrowUp:
                         this.zone.run(() => {
@@ -386,7 +396,7 @@ export class ToolBarComponent {
                     case Keys.Enter:
                     case Keys.Space:
                         this.zone.run(() => {
-                            if (currentTool) {
+                            if (ev.target.closest('.k-menu-item')) {
                                 ev.preventDefault();
                                 ev.target.click();
                                 ev.target.focus();
@@ -399,11 +409,11 @@ export class ToolBarComponent {
             });
         });
         this.cancelRenderedToolsSubscription$.next();
+        this.navigationService.setRenderedTools(this.toolsService.overflowTools);
         this.navigationService.moveFocusToPopup();
-        this.navigationService.setRenderedTools(this.overflowRenderedTools.toArray());
-        this.overflowRenderedTools.changes
+        this.toolsService.overflowToolsChange
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+            .subscribe((rts) => this.navigationService.setRenderedTools(rts));
         this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
     }
     /**
@@ -411,10 +421,10 @@ export class ToolBarComponent {
      */
     onPopupClose() {
         this.cancelRenderedToolsSubscription$.next();
-        this.navigationService.setRenderedTools(this.renderedTools.toArray());
-        this.renderedTools.changes
+        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
+        this.toolsService.renderedToolsChange
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+            .subscribe((rts) => this.navigationService.setRenderedTools(rts));
         this.navigationService.moveFocusToToolBar();
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
@@ -455,7 +465,7 @@ export class ToolBarComponent {
         return this.cachedGap;
     }
     get childrenWidth() {
-        const width = this.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
+        const width = this.toolsService.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
         return Math.ceil(width);
     }
     get visibleTools() {
@@ -498,7 +508,10 @@ export class ToolBarComponent {
     }
     hideLastVisibleTool() {
         const tool = this.visibleTools[this.visibleTools.length - 1];
-        const renderedElement = this.renderedTools.find((r) => {
+        if (!tool) {
+            return null;
+        }
+        const renderedElement = this.toolsService.renderedTools.find((r) => {
             return r.tool === tool;
         });
         const width = renderedElement.width;
@@ -508,18 +521,20 @@ export class ToolBarComponent {
     }
     showFirstHiddenTool(containerWidth, childrenWidth) {
         const tool = this.overflowTools[0];
-        const renderedElement = this.renderedTools.find(r => r.tool === tool);
+        if (!tool) {
+            return null;
+        }
+        const renderedElement = this.toolsService.renderedTools.find((r) => r.tool === tool);
         tool.overflows = false;
         tool.visibility = 'hidden';
         this.refreshService.refresh(tool);
         if (containerWidth > childrenWidth + renderedElement.width) {
             tool.visibility = 'visible';
-            this.refreshService.refresh(tool);
         }
         else {
             tool.overflows = true;
-            this.refreshService.refresh(tool);
         }
+        this.refreshService.refresh(tool);
         return renderedElement.width; // returns 0 if `overflows` is true
     }
     setPopupContentDimensions() {
@@ -564,30 +579,29 @@ export class ToolBarComponent {
         return classes;
     }
 }
-ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
 ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
+        ToolbarToolsService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.toolbar'
         }
-    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
         i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
         moreToolsTitle="More tools"
         >
         </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index">
-            <kendo-toolbar-renderer
-                #toolbarRenderer
-                (rendererClick)="onRendererClick($event)"
-                [location]="'toolbar'"
-                [resizable]="overflow"
-                [tool]="tool"
-            ></kendo-toolbar-renderer>
-        </ng-container>
+        <ng-container *ngFor="let tool of allTools; let index = index"
+            kendoToolbarRenderer
+            [tool]="tool"
+            location="toolbar"
+            [resizable]="overflow"
+            (rendererClick)="onRendererClick($event)"
+            [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
         <button
             kendoButton
             fillMode="flat"
@@ -616,20 +630,19 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                 role="menu"
                 [id]="popupId"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of allTools; let index = index">
-                        <kendo-toolbar-renderer
-                            #overflowRenderer
-                            (rendererClick)="onRendererClick($event)"
-                            [location]="'overflow'"
-                            [resizable]="overflow"
-                            [tool]="tool"
-                        ></kendo-toolbar-renderer>
-                </ng-container>
+                <ng-template 
+                    *ngFor="let tool of overflowTools; let index = index"
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="overflow"
+                    [resizable]="overflow"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.popupTemplate"></ng-template>
             </div>
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -638,6 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RefreshService,
                         NavigationService,
                         LocalizationService,
+                        ToolbarToolsService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -650,15 +664,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         moreToolsTitle="More tools"
         >
         </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index">
-            <kendo-toolbar-renderer
-                #toolbarRenderer
-                (rendererClick)="onRendererClick($event)"
-                [location]="'toolbar'"
-                [resizable]="overflow"
-                [tool]="tool"
-            ></kendo-toolbar-renderer>
-        </ng-container>
+        <ng-container *ngFor="let tool of allTools; let index = index"
+            kendoToolbarRenderer
+            [tool]="tool"
+            location="toolbar"
+            [resizable]="overflow"
+            (rendererClick)="onRendererClick($event)"
+            [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
         <button
             kendoButton
             fillMode="flat"
@@ -687,24 +699,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 role="menu"
                 [id]="popupId"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of allTools; let index = index">
-                        <kendo-toolbar-renderer
-                            #overflowRenderer
-                            (rendererClick)="onRendererClick($event)"
-                            [location]="'overflow'"
-                            [resizable]="overflow"
-                            [tool]="tool"
-                        ></kendo-toolbar-renderer>
-                </ng-container>
+                <ng-template 
+                    *ngFor="let tool of overflowTools; let index = index"
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="overflow"
+                    [resizable]="overflow"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.popupTemplate"></ng-template>
             </div>
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }]; }, propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -736,12 +747,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
-            }], renderedTools: [{
-                type: ViewChildren,
-                args: ['toolbarRenderer']
-            }], overflowRenderedTools: [{
-                type: ViewChildren,
-                args: ['overflowRenderer']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']

package/esm2020/toolbar.module.mjs

@@ -34,7 +34,7 @@ export class ToolBarModule {
 }
 ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent], exports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [KENDO_TOOLBAR] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{

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

@@ -181,8 +181,9 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-            <ng-container *ngFor="let button of buttonComponents">
-                <div #listItem
+                <div
+                    *ngFor="let button of buttonComponents" 
+                    #listItem
                     tabindex="-1"
                     role="menuitem"
                     class="k-item k-menu-item"
@@ -203,7 +204,6 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                         <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
                     </span>
                 </div>
-            </ng-container>
         </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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
@@ -250,8 +250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-            <ng-container *ngFor="let button of buttonComponents">
-                <div #listItem
+                <div
+                    *ngFor="let button of buttonComponents" 
+                    #listItem
                     tabindex="-1"
                     role="menuitem"
                     class="k-item k-menu-item"
@@ -272,7 +273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
                     </span>
                 </div>
-            </ng-container>
         </ng-template>
     `,
                     standalone: true,