@progress/kendo-angular-toolbar 5.0.2 → 5.0.4-dev.202204180802

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, 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, bufferTime, filter, takeUntil } from 'rxjs/operators';
+import { take, 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: 1648214206,
+    publishDate: 1650268908,
     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,7 +438,7 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 let ToolBarComponent = class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer) {
+    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -446,6 +446,7 @@ let ToolBarComponent = class ToolBarComponent {
         this.element = element;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -590,9 +591,7 @@ let ToolBarComponent = class ToolBarComponent {
             });
         });
         if (this.overflow) {
-            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(); }));
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(() => { this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // calling onResize twice is the trade-off for removing the manual ChangeDetection
             // triggering altogether - it ensures correct layout and calculations
@@ -637,6 +636,12 @@ let ToolBarComponent = class ToolBarComponent {
     get moreToolsTitle() {
         return this.localization.get('moreToolsTitle');
     }
+    /**
+     * @hidden
+     */
+    get cdr() {
+        return this._cdr;
+    }
     /**
      * @hidden
      */
@@ -684,11 +689,9 @@ 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.displayAnchor();
+            this.resizeSensor.acceptSize();
         }
-        this.resizeSensor.acceptSize();
     }
     /**
      * @hidden
@@ -1000,7 +1003,7 @@ ToolBarComponent = __decorate([
             </ul>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `
     }),
     __metadata("design:paramtypes", [LocalizationService,
@@ -1009,7 +1012,8 @@ ToolBarComponent = __decorate([
         NavigationService,
         ElementRef,
         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, 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, bufferTime, filter, takeUntil } from 'rxjs/operators';
+import { take, 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: 1648214206,
+    publishDate: 1650268908,
     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,7 +463,7 @@ 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, zone, renderer) {
+    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -471,6 +471,7 @@ var ToolBarComponent = /** @class */ (function () {
         this.element = element;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -649,9 +650,7 @@ var ToolBarComponent = /** @class */ (function () {
             });
         });
         if (this.overflow) {
-            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(); }));
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // calling onResize twice is the trade-off for removing the manual ChangeDetection
             // triggering altogether - it ensures correct layout and calculations
@@ -708,6 +707,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
      */
@@ -751,16 +760,13 @@ 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.displayAnchor();
+            this.resizeSensor.acceptSize();
         }
-        this.resizeSensor.acceptSize();
     };
     /**
      * @hidden
@@ -1058,7 +1064,7 @@ 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]=\"'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    "
+            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\" #resizeSensor></kendo-resize-sensor>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             PopupService,
@@ -1066,7 +1072,8 @@ var ToolBarComponent = /** @class */ (function () {
             NavigationService,
             ElementRef,
             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: 1648214206,
+    publishDate: 1650268908,
     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,7 +33,7 @@ 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, zone, renderer) {
+    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -41,6 +41,7 @@ var ToolBarComponent = /** @class */ (function () {
         this.element = element;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -219,9 +220,7 @@ var ToolBarComponent = /** @class */ (function () {
             });
         });
         if (this.overflow) {
-            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(); }));
+            this.subscriptions.add(rxjs_1.merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // calling onResize twice is the trade-off for removing the manual ChangeDetection
             // triggering altogether - it ensures correct layout and calculations
@@ -278,6 +277,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
      */
@@ -321,16 +330,13 @@ 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.displayAnchor();
+            this.resizeSensor.acceptSize();
         }
-        this.resizeSensor.acceptSize();
     };
     /**
      * @hidden
@@ -628,7 +634,7 @@ 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]=\"'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    "
+            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\" #resizeSensor></kendo-resize-sensor>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             kendo_angular_popup_1.PopupService,
@@ -636,7 +642,8 @@ var ToolBarComponent = /** @class */ (function () {
             navigation_service_1.NavigationService,
             core_1.ElementRef,
             core_1.NgZone,
-            core_1.Renderer2])
+            core_1.Renderer2,
+            core_1.ChangeDetectorRef])
     ], ToolBarComponent);
     return ToolBarComponent;
 }());