@progress/kendo-angular-toolbar 5.0.2-dev.202203090949 → 5.0.3-dev.202203280906

package/dist/fesm2015/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata } from 'tslib';
-import { EventEmitter, Injectable, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, ChangeDetectorRef, Renderer2, forwardRef, Directive, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, Renderer2, ChangeDetectorRef, forwardRef, Directive, NgModule } from '@angular/core';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { Keys, isDocumentAvailable, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { take, filter, takeUntil } from 'rxjs/operators';
+import { take, bufferTime, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
 import { ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
 import { CommonModule } from '@angular/common';
@@ -20,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646819293,
+    publishDate: 1648458287,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -438,15 +438,15 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 let ToolBarComponent = class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, element, cdr, zone, renderer) {
+    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -591,9 +591,14 @@ let ToolBarComponent = class ToolBarComponent {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(merge(this.resizeSensor.resize.pipe(filter(() => this.overflow)), this.renderedTools.changes).subscribe(() => this.onResize()));
+            this.subscriptions.add(merge(
+            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
+            this.resizeSensor.resize.pipe(bufferTime(200), filter(v => v.length > 0)), this.renderedTools.changes).subscribe(() => { this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
-            this.zone.runOutsideAngular(() => setTimeout(() => this.onResize()));
+            // calling onResize twice is the trade-off for removing the manual ChangeDetection
+            // triggering altogether - it ensures correct layout and calculations
+            // when some tools need overflow on initial rendering
+            this.zone.runOutsideAngular(() => setTimeout(() => { this.onResize(); this.onResize(); }));
             this.navigationService.overflowButton = this.overflowButton;
         }
         this.navigationService.setRenderedTools(this.renderedTools.toArray());
@@ -633,6 +638,12 @@ let ToolBarComponent = class ToolBarComponent {
     get moreToolsTitle() {
         return this.localization.get('moreToolsTitle');
     }
+    /**
+     * @hidden
+     */
+    get cdr() {
+        return this._cdr;
+    }
     /**
      * @hidden
      */
@@ -680,8 +691,10 @@ let ToolBarComponent = class ToolBarComponent {
             const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.displayAnchor();
+            });
         }
-        this.cdr.detectChanges();
         this.resizeSensor.acceptSize();
     }
     /**
@@ -738,8 +751,9 @@ let ToolBarComponent = class ToolBarComponent {
             this.overflowKeydownListener();
         }
     }
-    get displayAnchor() {
-        return this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
+    displayAnchor() {
+        const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
+        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
@@ -762,8 +776,16 @@ let ToolBarComponent = class ToolBarComponent {
         }
         return this.cachedOverflowAnchorWidth;
     }
+    get gap() {
+        if (isPresent(this.cachedGap)) {
+            return this.cachedGap;
+        }
+        const computedGap = getComputedStyle(this.element.nativeElement).gap;
+        this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
+        return this.cachedGap;
+    }
     get childrenWidth() {
-        const width = this.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth, 0);
+        const width = this.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
         return Math.ceil(width);
     }
     get visibleTools() {
@@ -963,7 +985,7 @@ ToolBarComponent = __decorate([
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
-            [style.visibility]="displayAnchor"
+            [style.visibility]="'hidden'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >
@@ -993,9 +1015,9 @@ ToolBarComponent = __decorate([
         RefreshService,
         NavigationService,
         ElementRef,
-        ChangeDetectorRef,
         NgZone,
-        Renderer2])
+        Renderer2,
+        ChangeDetectorRef])
 ], ToolBarComponent);
 
 var ToolBarButtonComponent_1;

package/dist/fesm5/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __extends } from 'tslib';
-import { Injectable, EventEmitter, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, ChangeDetectorRef, Renderer2, forwardRef, Directive, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, Renderer2, ChangeDetectorRef, forwardRef, Directive, NgModule } from '@angular/core';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { Keys, isDocumentAvailable, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { take, filter, takeUntil } from 'rxjs/operators';
+import { take, bufferTime, filter, takeUntil } from 'rxjs/operators';
 import { merge, fromEvent, Subject, Subscription } from 'rxjs';
 import { ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
 import { CommonModule } from '@angular/common';
@@ -20,7 +20,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646819293,
+    publishDate: 1648458287,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -463,15 +463,15 @@ var getInitialPopupSettings = function (isRtl) { return ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 var ToolBarComponent = /** @class */ (function () {
-    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, cdr, zone, renderer) {
+    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -650,11 +650,14 @@ var ToolBarComponent = /** @class */ (function () {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(merge(this.resizeSensor.resize.pipe(filter(function () { return _this.overflow; })), this.renderedTools.changes).subscribe(function () {
-                return _this.onResize();
-            }));
+            this.subscriptions.add(merge(
+            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
+            this.resizeSensor.resize.pipe(bufferTime(200), filter(function (v) { return v.length > 0; })), this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
-            this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.onResize(); }); });
+            // calling onResize twice is the trade-off for removing the manual ChangeDetection
+            // triggering altogether - it ensures correct layout and calculations
+            // when some tools need overflow on initial rendering
+            this.zone.runOutsideAngular(function () { return setTimeout(function () { _this.onResize(); _this.onResize(); }); });
             this.navigationService.overflowButton = this.overflowButton;
         }
         this.navigationService.setRenderedTools(this.renderedTools.toArray());
@@ -706,6 +709,16 @@ var ToolBarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarComponent.prototype, "cdr", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._cdr;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -749,12 +762,15 @@ var ToolBarComponent = /** @class */ (function () {
      * @hidden
      */
     ToolBarComponent.prototype.onResize = function () {
+        var _this = this;
         if (isDocumentAvailable()) {
             var containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
+            this.zone.onStable.pipe(take(1)).subscribe(function () {
+                _this.displayAnchor();
+            });
         }
-        this.cdr.detectChanges();
         this.resizeSensor.acceptSize();
     };
     /**
@@ -813,13 +829,10 @@ var ToolBarComponent = /** @class */ (function () {
             this.overflowKeydownListener();
         }
     };
-    Object.defineProperty(ToolBarComponent.prototype, "displayAnchor", {
-        get: function () {
-            return this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
-        },
-        enumerable: true,
-        configurable: true
-    });
+    ToolBarComponent.prototype.displayAnchor = function () {
+        var visibility = this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
+        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
+    };
     Object.defineProperty(ToolBarComponent.prototype, "popupWidth", {
         get: function () {
             if (!this.popupSettings || !this.popupSettings.width) {
@@ -853,9 +866,22 @@ var ToolBarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarComponent.prototype, "gap", {
+        get: function () {
+            if (isPresent(this.cachedGap)) {
+                return this.cachedGap;
+            }
+            var computedGap = getComputedStyle(this.element.nativeElement).gap;
+            this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
+            return this.cachedGap;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarComponent.prototype, "childrenWidth", {
         get: function () {
-            var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth; }, 0);
+            var _this = this;
+            var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth + (tool.isDisplayed() ? _this.gap : 0); }, 0);
             return Math.ceil(width);
         },
         enumerable: true,
@@ -1043,16 +1069,16 @@ var ToolBarComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-toolbar',
-            template: "\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n        moreToolsTitle=\"More tools\"\n        >\n        </ng-container>\n        <ng-container *ngFor=\"let tool of allTools; let index = index\">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)=\"onRendererClick($event)\"\n                [location]=\"'toolbar'\"\n                [resizable]=\"overflow\"\n                [tool]=\"tool\"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type=\"button\"\n            tabindex=\"-1\"\n            [title]=\"moreToolsTitle\"\n            [attr.aria-label]=\"moreToolsTitle\"\n            *ngIf=\"overflow\"\n            [style.visibility]=\"displayAnchor\"\n            class=\"k-overflow-anchor k-button\"\n            (click)=\"showPopup()\"\n        >\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class=\"k-overflow-container k-list-container k-reset\">\n                <ng-container *ngFor=\"let tool of allTools; let index = index\">\n                    <li class=\"k-item\">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)=\"onRendererClick($event)\"\n                            [location]=\"'overflow'\"\n                            [resizable]=\"overflow\"\n                            [tool]=\"tool\"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
+            template: "\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n        moreToolsTitle=\"More tools\"\n        >\n        </ng-container>\n        <ng-container *ngFor=\"let tool of allTools; let index = index\">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)=\"onRendererClick($event)\"\n                [location]=\"'toolbar'\"\n                [resizable]=\"overflow\"\n                [tool]=\"tool\"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type=\"button\"\n            tabindex=\"-1\"\n            [title]=\"moreToolsTitle\"\n            [attr.aria-label]=\"moreToolsTitle\"\n            *ngIf=\"overflow\"\n            [style.visibility]=\"'hidden'\"\n            class=\"k-overflow-anchor k-button\"\n            (click)=\"showPopup()\"\n        >\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class=\"k-overflow-container k-list-container k-reset\">\n                <ng-container *ngFor=\"let tool of allTools; let index = index\">\n                    <li class=\"k-item\">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)=\"onRendererClick($event)\"\n                            [location]=\"'overflow'\"\n                            [resizable]=\"overflow\"\n                            [tool]=\"tool\"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             PopupService,
             RefreshService,
             NavigationService,
             ElementRef,
-            ChangeDetectorRef,
             NgZone,
-            Renderer2])
+            Renderer2,
+            ChangeDetectorRef])
     ], ToolBarComponent);
     return ToolBarComponent;
 }());

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646819293,
+    publishDate: 1648458287,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/toolbar.component.js

@@ -33,15 +33,15 @@ exports.ɵ0 = ɵ0;
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 var ToolBarComponent = /** @class */ (function () {
-    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, cdr, zone, renderer) {
+    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -220,11 +220,14 @@ var ToolBarComponent = /** @class */ (function () {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(rxjs_1.merge(this.resizeSensor.resize.pipe(operators_2.filter(function () { return _this.overflow; })), this.renderedTools.changes).subscribe(function () {
-                return _this.onResize();
-            }));
+            this.subscriptions.add(rxjs_1.merge(
+            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
+            this.resizeSensor.resize.pipe(operators_1.bufferTime(200), operators_2.filter(function (v) { return v.length > 0; })), this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
-            this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.onResize(); }); });
+            // calling onResize twice is the trade-off for removing the manual ChangeDetection
+            // triggering altogether - it ensures correct layout and calculations
+            // when some tools need overflow on initial rendering
+            this.zone.runOutsideAngular(function () { return setTimeout(function () { _this.onResize(); _this.onResize(); }); });
             this.navigationService.overflowButton = this.overflowButton;
         }
         this.navigationService.setRenderedTools(this.renderedTools.toArray());
@@ -276,6 +279,16 @@ var ToolBarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarComponent.prototype, "cdr", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._cdr;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -319,12 +332,15 @@ var ToolBarComponent = /** @class */ (function () {
      * @hidden
      */
     ToolBarComponent.prototype.onResize = function () {
+        var _this = this;
         if (kendo_angular_common_3.isDocumentAvailable()) {
             var containerWidth = util_1.innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
+            this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () {
+                _this.displayAnchor();
+            });
         }
-        this.cdr.detectChanges();
         this.resizeSensor.acceptSize();
     };
     /**
@@ -383,13 +399,10 @@ var ToolBarComponent = /** @class */ (function () {
             this.overflowKeydownListener();
         }
     };
-    Object.defineProperty(ToolBarComponent.prototype, "displayAnchor", {
-        get: function () {
-            return this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
-        },
-        enumerable: true,
-        configurable: true
-    });
+    ToolBarComponent.prototype.displayAnchor = function () {
+        var visibility = this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
+        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
+    };
     Object.defineProperty(ToolBarComponent.prototype, "popupWidth", {
         get: function () {
             if (!this.popupSettings || !this.popupSettings.width) {
@@ -423,9 +436,22 @@ var ToolBarComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarComponent.prototype, "gap", {
+        get: function () {
+            if (util_1.isPresent(this.cachedGap)) {
+                return this.cachedGap;
+            }
+            var computedGap = getComputedStyle(this.element.nativeElement).gap;
+            this.cachedGap = util_1.isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
+            return this.cachedGap;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarComponent.prototype, "childrenWidth", {
         get: function () {
-            var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth; }, 0);
+            var _this = this;
+            var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth + (tool.isDisplayed() ? _this.gap : 0); }, 0);
             return Math.ceil(width);
         },
         enumerable: true,
@@ -613,16 +639,16 @@ var ToolBarComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-toolbar',
-            template: "\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n        moreToolsTitle=\"More tools\"\n        >\n        </ng-container>\n        <ng-container *ngFor=\"let tool of allTools; let index = index\">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)=\"onRendererClick($event)\"\n                [location]=\"'toolbar'\"\n                [resizable]=\"overflow\"\n                [tool]=\"tool\"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type=\"button\"\n            tabindex=\"-1\"\n            [title]=\"moreToolsTitle\"\n            [attr.aria-label]=\"moreToolsTitle\"\n            *ngIf=\"overflow\"\n            [style.visibility]=\"displayAnchor\"\n            class=\"k-overflow-anchor k-button\"\n            (click)=\"showPopup()\"\n        >\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class=\"k-overflow-container k-list-container k-reset\">\n                <ng-container *ngFor=\"let tool of allTools; let index = index\">\n                    <li class=\"k-item\">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)=\"onRendererClick($event)\"\n                            [location]=\"'overflow'\"\n                            [resizable]=\"overflow\"\n                            [tool]=\"tool\"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
+            template: "\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n        moreToolsTitle=\"More tools\"\n        >\n        </ng-container>\n        <ng-container *ngFor=\"let tool of allTools; let index = index\">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)=\"onRendererClick($event)\"\n                [location]=\"'toolbar'\"\n                [resizable]=\"overflow\"\n                [tool]=\"tool\"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type=\"button\"\n            tabindex=\"-1\"\n            [title]=\"moreToolsTitle\"\n            [attr.aria-label]=\"moreToolsTitle\"\n            *ngIf=\"overflow\"\n            [style.visibility]=\"'hidden'\"\n            class=\"k-overflow-anchor k-button\"\n            (click)=\"showPopup()\"\n        >\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class=\"k-overflow-container k-list-container k-reset\">\n                <ng-container *ngFor=\"let tool of allTools; let index = index\">\n                    <li class=\"k-item\">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)=\"onRendererClick($event)\"\n                            [location]=\"'overflow'\"\n                            [resizable]=\"overflow\"\n                            [tool]=\"tool\"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             kendo_angular_popup_1.PopupService,
             refresh_service_1.RefreshService,
             navigation_service_1.NavigationService,
             core_1.ElementRef,
-            core_1.ChangeDetectorRef,
             core_1.NgZone,
-            core_1.Renderer2])
+            core_1.Renderer2,
+            core_1.ChangeDetectorRef])
     ], ToolBarComponent);
     return ToolBarComponent;
 }());