@progress/kendo-angular-toolbar 5.0.2 → 6.0.0-dev.202204131416

package/{dist/es2015 → esm2015}/toolbar.component.js

@@ -2,10 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * 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, 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 { Component, HostBinding, ViewChild, ContentChildren, Input, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
@@ -16,21 +13,29 @@ 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 { bufferTime, take, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { defaultPopupWidth } from './common/constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-popup";
+import * as i3 from "./refresh.service";
+import * as i4 from "./navigation.service";
+import * as i5 from "./renderer.component";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "./localization/localized-toolbar-messages.directive";
+import * as i8 from "@angular/common";
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
     popupAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'top' }
 });
-const ɵ0 = getInitialPopupSettings;
 /**
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
-let ToolBarComponent = class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer) {
+export class ToolBarComponent {
+    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -38,6 +43,7 @@ let ToolBarComponent = class ToolBarComponent {
         this.element = element;
         this.zone = zone;
         this.renderer = renderer;
+        this._cdr = _cdr;
         /**
          * Hides the overflowing tools in a popup.
          */
@@ -157,7 +163,12 @@ let ToolBarComponent = class ToolBarComponent {
                     case Keys.ArrowLeft:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusPrev(ev) : this.navigationService.focusNext(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusPrev(ev);
+                            }
+                            else {
+                                this.navigationService.focusNext(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -165,7 +176,12 @@ let ToolBarComponent = class ToolBarComponent {
                     case Keys.ArrowRight:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusNext(ev) : this.navigationService.focusPrev(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusNext(ev);
+                            }
+                            else {
+                                this.navigationService.focusPrev(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -182,9 +198,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
@@ -229,6 +243,12 @@ let ToolBarComponent = class ToolBarComponent {
     get moreToolsTitle() {
         return this.localization.get('moreToolsTitle');
     }
+    /**
+     * @hidden
+     */
+    get cdr() {
+        return this._cdr;
+    }
     /**
      * @hidden
      */
@@ -276,11 +296,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
@@ -443,112 +461,77 @@ let ToolBarComponent = class ToolBarComponent {
         popupContentContainer.style.height = this.popupHeight;
         popupContentContainer.style.overflow = 'auto';
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarComponent.prototype, "overflow", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], ToolBarComponent.prototype, "resizable", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], ToolBarComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], ToolBarComponent.prototype, "tabindex", void 0);
-tslib_1.__decorate([
-    Input('tabIndex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], ToolBarComponent.prototype, "tabIndex", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ToolBarComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ToolBarComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    ContentChildren(ToolBarToolComponent),
-    tslib_1.__metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "allTools", void 0);
-tslib_1.__decorate([
-    ViewChild('overflowButton', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ToolBarComponent.prototype, "overflowButton", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ToolBarComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('resizeSensor', { static: false }),
-    tslib_1.__metadata("design:type", ResizeSensorComponent)
-], ToolBarComponent.prototype, "resizeSensor", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], ToolBarComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChildren('toolbarRenderer'),
-    tslib_1.__metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "renderedTools", void 0);
-tslib_1.__decorate([
-    ViewChildren('overflowRenderer'),
-    tslib_1.__metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "overflowRenderedTools", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-toolbar'),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostListener('focus', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], ToolBarComponent.prototype, "onFocus", null);
-tslib_1.__decorate([
-    HostListener('focusout', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], ToolBarComponent.prototype, "onFocusOut", null);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "getRole", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "getDir", null);
-tslib_1.__decorate([
-    HostBinding('class.k-toolbar-resizable'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "resizableClass", null);
-ToolBarComponent = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoToolBar',
-        providers: [
-            RefreshService,
-            NavigationService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.toolbar'
-            }
-        ],
-        selector: 'kendo-toolbar',
-        template: `
+}
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+        RefreshService,
+        NavigationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.toolbar'
+        }
+    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true }, { 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: `
+        <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>
+        <button
+            #overflowButton
+            type="button"
+            tabindex="-1"
+            [title]="moreToolsTitle"
+            [attr.aria-label]="moreToolsTitle"
+            *ngIf="overflow"
+            [style.visibility]="'hidden'"
+            class="k-overflow-anchor k-button"
+            (click)="showPopup()"
+        >
+            <span class="k-icon k-i-more-vertical"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <ul class="k-overflow-container k-list-container k-reset">
+                <ng-container *ngFor="let tool of allTools; let index = index">
+                    <li class="k-item">
+                        <kendo-toolbar-renderer
+                            #overflowRenderer
+                            (rendererClick)="onRendererClick($event)"
+                            [location]="'overflow'"
+                            [resizable]="overflow"
+                            [tool]="tool"
+                        ></kendo-toolbar-renderer>
+                    </li>
+                </ng-container>
+            </ul>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i5.ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i7.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBar',
+                    providers: [
+                        RefreshService,
+                        NavigationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.toolbar'
+                        }
+                    ],
+                    selector: 'kendo-toolbar',
+                    template: `
         <ng-container kendoToolbarLocalizedMessages
         i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
         moreToolsTitle="More tools"
@@ -592,16 +575,64 @@ ToolBarComponent = tslib_1.__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>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
-        PopupService,
-        RefreshService,
-        NavigationService,
-        ElementRef,
-        NgZone,
-        Renderer2])
-], ToolBarComponent);
-export { ToolBarComponent };
-export { ɵ0 };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: ['tabIndex']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], allTools: [{
+                type: ContentChildren,
+                args: [ToolBarToolComponent]
+            }], overflowButton: [{
+                type: ViewChild,
+                args: ['overflowButton', { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], resizeSensor: [{
+                type: ViewChild,
+                args: ['resizeSensor', { static: false }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], renderedTools: [{
+                type: ViewChildren,
+                args: ['toolbarRenderer']
+            }], overflowRenderedTools: [{
+                type: ViewChildren,
+                args: ['overflowRenderer']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], getRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], getDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], resizableClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-resizable']
+            }] } });

package/{dist/es2015 → esm2015}/toolbar.module.js

@@ -2,7 +2,6 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
@@ -19,6 +18,7 @@ import { ToolBarRendererComponent } from './renderer.component';
 import { ToolBarButtonListComponent } from './tools/toolbar-buttonlist.component';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 import { ToolbarCustomMessagesComponent } from './localization/custom-messages.component';
+import * as i0 from "@angular/core";
 const TOOLBAR_TOOLS = [
     ToolBarToolComponent,
     ToolBarButtonComponent,
@@ -45,13 +45,29 @@ const TOOLBAR_COMMON = [
  * - `ToolBarSplitButtonComponent`—The SplitButton Tool component class.
  * - `ToolBarSeparatorComponent`—The Separator Tool component class.
  */
-let ToolBarModule = class ToolBarModule {
-};
-ToolBarModule = tslib_1.__decorate([
-    NgModule({
-        declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
-        exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
-        imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
-    })
-], ToolBarModule);
-export { ToolBarModule };
+export class ToolBarModule {
+}
+ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, declarations: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent, ToolBarRendererComponent,
+        ToolBarButtonListComponent,
+        ToolbarCustomMessagesComponent,
+        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
+                    exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
+                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
+                }]
+        }] });