@progress/kendo-angular-toolbar 5.0.1 → 5.0.2

package/dist/es2015/toolbar.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, ChangeDetectorRef, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2 } from '@angular/core';
+import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2 } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -12,11 +12,11 @@ import { packageMetadata } from './package-metadata';
 import { RefreshService } from './refresh.service';
 import { NavigationService } from './navigation.service';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
-import { outerWidth, innerWidth, closest } from './util';
+import { outerWidth, innerWidth, closest, isPresent } from './util';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { Subscription, fromEvent, Subject, merge } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { bufferTime, take, takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { defaultPopupWidth } from './common/constants';
@@ -30,13 +30,12 @@ const ɵ0 = getInitialPopupSettings;
  * 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) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
         /**
@@ -183,9 +182,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());
@@ -272,8 +276,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();
     }
     /**
@@ -330,8 +336,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) {
@@ -354,8 +361,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() {
@@ -555,7 +570,7 @@ ToolBarComponent = tslib_1.__decorate([
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
-            [style.visibility]="displayAnchor"
+            [style.visibility]="'hidden'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >
@@ -585,7 +600,6 @@ ToolBarComponent = tslib_1.__decorate([
         RefreshService,
         NavigationService,
         ElementRef,
-        ChangeDetectorRef,
         NgZone,
         Renderer2])
 ], ToolBarComponent);

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, 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: 1646219288,
+    publishDate: 1648214206,
     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,13 +438,12 @@ 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) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
         /**
@@ -591,9 +590,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());
@@ -680,8 +684,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 +744,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 +769,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 +978,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,7 +1008,6 @@ ToolBarComponent = __decorate([
         RefreshService,
         NavigationService,
         ElementRef,
-        ChangeDetectorRef,
         NgZone,
         Renderer2])
 ], ToolBarComponent);

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, 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: 1646219288,
+    publishDate: 1648214206,
     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,13 +463,12 @@ 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) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
         /**
@@ -650,11 +649,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());
@@ -749,12 +751,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 +818,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 +855,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,14 +1058,13 @@ 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])
     ], 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: 1646219288,
+    publishDate: 1648214206,
     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,13 +33,12 @@ 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) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.cdr = cdr;
         this.zone = zone;
         this.renderer = renderer;
         /**
@@ -220,11 +219,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());
@@ -319,12 +321,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 +388,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 +425,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,14 +628,13 @@ 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])
     ], ToolBarComponent);