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

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

@@ -3,16 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ElementRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, isDevMode, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, inject, ElementRef, Directive, Input, Output, forwardRef, ViewContainerRef, Component, ContentChildren, ViewChild, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import { Keys, guid, isDocumentAvailable, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
-import { NgIf, NgTemplateOutlet, NgFor, NgClass, NgStyle } from '@angular/common';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
 import { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
+import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1727422886,
-    version: '16.11.0-develop.2',
+    publishDate: 1727433790,
+    version: '16.11.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -252,6 +252,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
             break;
     }
 };
+/**
+ * @hidden
+ */
+const isElement = (element) => element instanceof Element || element instanceof Document;
 
 /**
  * @hidden
@@ -265,7 +269,7 @@ class NavigationService {
         this.isOverflowButtonFocused = false;
     }
     setRenderedTools(rts) {
-        this.renderedTools = [...rts];
+        this.renderedTools = rts;
     }
     click({ context, event: ev }) {
         if (this.focused.renderedTool !== context && ev) {
@@ -278,7 +282,7 @@ class NavigationService {
     }
     moveFocusToPopup() {
         this.isPopupFocused = true;
-        this.blurOverflowButton();
+        this.resetNavigation();
         this.focus();
     }
     focusNext(ev) {
@@ -355,7 +359,7 @@ 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
@@ -414,9 +418,10 @@ class ToolBarToolComponent {
          * @hidden
          */
         this.responsive = true;
+        this.element = inject(ElementRef);
     }
     get toolbarDisplay() {
-        return this.overflows ? 'none' : 'inline-block';
+        return this.overflows ? 'none' : 'inline-flex';
     }
     get overflowDisplay() {
         return this.overflows ? 'block' : 'none';
@@ -448,17 +453,14 @@ class ToolBarToolComponent {
         return false;
     }
 }
-ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarToolComponent, isStandalone: true, selector: "toolbar-tool", inputs: { responsive: "responsive" }, ngImport: i0, template: ``, isInline: true });
+ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ToolBarToolComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: 'toolbar-tool',
-                    template: ``,
                     standalone: true
                 }]
-        }], propDecorators: { responsive: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
                 type: Input
             }] } });
 
@@ -530,125 +532,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+class ToolbarToolsService {
+    constructor() {
+        this.renderedToolsChange = new Subject();
+        this.overflowToolsChange = new Subject();
+        this.renderedTools = [];
+        this.overflowTools = [];
+        this.allTools = [];
+    }
+}
+ToolbarToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ToolbarToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, decorators: [{
+            type: Injectable
+        }] });
+
 const MIN_SPACER_WIDTH = 18;
 /**
  * @hidden
  */
 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: RendererService }, { token: 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: RendererService }, { token: RefreshService }, { token: ToolbarToolsService }, { token: i0.ViewContainerRef }, { token: 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: RendererService }, { type: RefreshService }]; }, propDecorators: { tool: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: RendererService }, { type: RefreshService }, { type: ToolbarToolsService }, { type: i0.ViewContainerRef }, { type: NavigationService }]; }, propDecorators: { tool: [{
                 type: Input
             }], location: [{
                 type: Input
@@ -656,15 +683,6 @@ 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']]
             }] } });
 
 /**
@@ -728,7 +746,7 @@ const getInitialPopupSettings = (isRtl) => ({
 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;
@@ -737,6 +755,7 @@ class ToolBarComponent {
         this.zone = zone;
         this.renderer = renderer;
         this._cdr = _cdr;
+        this.toolsService = toolsService;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -875,7 +894,16 @@ 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');
@@ -927,7 +955,7 @@ 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
@@ -939,8 +967,7 @@ 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() {
@@ -1045,7 +1072,6 @@ 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(() => {
@@ -1073,7 +1099,7 @@ 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();
@@ -1086,11 +1112,11 @@ 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);
     }
     /**
@@ -1098,10 +1124,10 @@ 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();
@@ -1142,7 +1168,7 @@ 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() {
@@ -1185,7 +1211,10 @@ 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;
@@ -1195,18 +1224,20 @@ 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() {
@@ -1251,30 +1282,29 @@ 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: RefreshService }, { token: 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: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: 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"
@@ -1303,20 +1333,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: [{
@@ -1325,6 +1354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RefreshService,
                         NavigationService,
                         LocalizationService,
+                        ToolbarToolsService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -1337,15 +1367,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"
@@ -1374,24 +1402,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: RefreshService }, { type: 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: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }]; }, propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -1423,12 +1450,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']
@@ -2015,8 +2036,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"
@@ -2037,7 +2059,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: [{
@@ -2084,8 +2105,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"
@@ -2106,7 +2128,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,
@@ -3209,14 +3230,22 @@ class ToolBarSpacerComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <div class="k-spacer"></div>
+        </ng-template>
+    `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSpacer',
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }],
                     selector: 'kendo-toolbar-spacer',
-                    template: ``,
+                    template: `
+        <ng-template #toolbarTemplate>
+            <div class="k-spacer"></div>
+        </ng-template>
+    `,
                     standalone: true
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
@@ -3293,7 +3322,7 @@ 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: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, 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: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{