@progress/kendo-angular-toolbar 5.0.1 → 5.0.2

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es/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 @@ var ɵ0 = getInitialPopupSettings;
  * 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;
         /**
@@ -217,11 +216,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());
@@ -316,12 +318,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();
     };
     /**
@@ -380,13 +385,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) {
@@ -420,9 +422,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,
@@ -610,14 +625,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", [LocalizationService,
             PopupService,
             RefreshService,
             NavigationService,
             ElementRef,
-            ChangeDetectorRef,
             NgZone,
             Renderer2])
     ], ToolBarComponent);

package/dist/es2015/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ToolBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"exportAs":"kendoToolBar","providers":[{"__symbolic":"reference","name":"RefreshService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":55,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":57,"character":21},"useValue":"kendo.toolbar"}],"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    "}]}],"members":{"overflow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5},"arguments":["tabIndex"]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":160,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":165,"character":5}}]}],"allTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":167,"character":5},"arguments":[{"__symbolic":"reference","name":"ToolBarToolComponent"}]}]}],"overflowButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":169,"character":5},"arguments":["overflowButton",{"static":false}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":172,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"resizeSensor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":175,"character":5},"arguments":["resizeSensor",{"static":false}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":178,"character":5},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":178,"character":36},"static":true}]}]}],"renderedTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":181,"character":5},"arguments":["toolbarRenderer"]}]}],"overflowRenderedTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":184,"character":5},"arguments":["overflowRenderer"]}]}],"hostClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":224,"character":5},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":225,"character":5},"arguments":["class.k-toolbar"]}]}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":240,"character":5},"arguments":["focus",["$event"]]}]}],"onFocusOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":251,"character":5},"arguments":["focusout",["$event"]]}]}],"getRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":261,"character":5},"arguments":["attr.role"]}]}],"getDir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":265,"character":5},"arguments":["attr.dir"]}]}],"resizableClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":269,"character":5},"arguments":["class.k-toolbar-resizable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":274,"character":30},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":275,"character":30},{"__symbolic":"reference","name":"RefreshService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":278,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":279,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":280,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":281,"character":26}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onRendererClick":[{"__symbolic":"method"}],"showPopup":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onPopupOpen":[{"__symbolic":"method"}],"onPopupClose":[{"__symbolic":"method"}],"shrink":[{"__symbolic":"method"}],"stretch":[{"__symbolic":"method"}],"hideLastVisibleTool":[{"__symbolic":"method"}],"showFirstHiddenTool":[{"__symbolic":"method"}],"setPopupContentDimensions":[{"__symbolic":"method"}]}},"ToolBarToolComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"toolbar-tool","template":""}]}],"members":{"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}]}},"ToolBarButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"exportAs":"kendoToolBarButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarButtonComponent"}}],"selector":"kendo-toolbar-button","template":"\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"togglable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":5}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":211,"character":5}}]}],"pointerdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":216,"character":6}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":224,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":227,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"toolbarButtonElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":243,"character":5},"arguments":["toolbarButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":243,"character":40},"static":false}]}]}],"overflowButtonElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":246,"character":5},"arguments":["overflowButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":246,"character":41},"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onBlur":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"getButton":[{"__symbolic":"method"}]}},"ToolBarButtonGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"exportAs":"kendoToolBarButtonGroup","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":16,"character":16},{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"}}],"selector":"kendo-toolbar-buttongroup","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-buttongroup\n                #toolbarButtonGroup\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n                (navigate)=\"onNavigate($event)\"\n                (focus)=\"onFocus()\"\n            >\n                <span\n                    kendoButton\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.toolbarOptions.icon\"\n                    [iconClass]=\"button.toolbarOptions.iconClass\"\n                    [imageUrl]=\"button.toolbarOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (pointerdown)=\"button.pointerdown.emit($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.toolbarOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <kendo-buttongroup\n                #overflowButtonGroup\n                class=\"k-overflow-button\"\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n            >\n                <span\n                    kendoButton\n                    class=\"k-overflow-button\"\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.overflowOptions.icon\"\n                    [iconClass]=\"button.overflowOptions.iconClass\"\n                    [imageUrl]=\"button.overflowOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.overflowOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":117,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":120,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"buttonComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":124,"character":5},"arguments":[{"__symbolic":"reference","name":"ToolBarButtonComponent"}]}]}],"toolbarButtonGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":5},"arguments":["toolbarButtonGroup",{"static":false}]}]}],"overflowButtonGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":135,"character":5},"arguments":["overflowButtonGroup",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":142,"character":38}]}],"onFocus":[{"__symbolic":"method"}],"onNavigate":[{"__symbolic":"method"}],"selectedChangeHandler":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"getButtonGroup":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarDropDownButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"exportAs":"kendoToolBarDropDownButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"}}],"selector":"kendo-toolbar-dropdownbutton","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-dropdownbutton\n                #toolbarDropDownButton\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n                {{ toolbarOptions.text }}\n            </kendo-dropdownbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"true\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"itemClick.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowDropDownButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"primary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"buttonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":220,"character":5}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":232,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":234,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":237,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":240,"character":5},"arguments":["dropdownButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":240,"character":41},"static":true}]}]}],"dropDownButtonComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":243,"character":5},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"DropDownButtonComponent","line":243,"character":15},{"static":false}]}]}],"toolbarDropDownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":263,"character":5},"arguments":["toolbarDropDownButton",{"static":false}]}]}],"overflowDropDownButtonButtonList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":266,"character":5},"arguments":["overflowDropDownButtonButtonList",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onButtonListClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarSplitButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"exportAs":"kendoToolBarSplitButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"}}],"selector":"kendo-toolbar-splitbutton","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-splitbutton\n                #toolbarSplitButton\n                [data]=\"data\"\n                [text]=\"toolbarOptions.text\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [arrowButtonClass]=\"arrowButtonClass\"\n                [arrowButtonIcon]=\"arrowButtonIcon\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n            </kendo-splitbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowSplitButton\n                type=\"button\"\n                tabindex=\"-1\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"disabled\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"buttonClick.emit($event)\"\n                (click)=\"onMainButtonClick($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowSplitButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"buttonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":5}}]}],"arrowButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"arrowButtonIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":233,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":239,"character":5}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":245,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":251,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":253,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":256,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"toolbarSplitButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":283,"character":5},"arguments":["toolbarSplitButton",{"static":false}]}]}],"overflowSplitButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":285,"character":5},"arguments":["overflowSplitButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":285,"character":46},"static":false}]}]}],"overflowSplitButtonButtonList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":288,"character":5},"arguments":["overflowSplitButtonButtonList",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onButtonListClick":[{"__symbolic":"method"}],"onMainButtonClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"exportAs":"kendoToolBarSeparator","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}}],"selector":"kendo-toolbar-separator","template":"\n        <ng-template #toolbarTemplate>\n            <div class=\"k-separator\"></div>\n        </ng-template>\n    "}]}],"members":{"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":5},"arguments":["separator",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ButtonGroupSelection":{"__symbolic":"interface"},"PopupSettings":{"__symbolic":"interface"},"DisplayMode":{"__symbolic":"interface"},"ToolBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolBarComponent"},[{"__symbolic":"reference","name":"ToolBarToolComponent"},{"__symbolic":"reference","name":"ToolBarButtonComponent"},{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"},{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"},{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"},{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}],[{"__symbolic":"reference","name":"ToolBarRendererComponent"},{"__symbolic":"reference","name":"ToolBarButtonListComponent"},{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"},{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}]],"exports":[{"__symbolic":"reference","name":"ToolBarComponent"},[{"__symbolic":"reference","name":"ToolBarToolComponent"},{"__symbolic":"reference","name":"ToolBarButtonComponent"},{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"},{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"},{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"},{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}],{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"},{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"ButtonsModule","line":49,"character":28},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":49,"character":43},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"ResizeSensorModule","line":49,"character":56}]}]}],"members":{}},"LocalizedToolbarMessagesDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolbarMessages"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","name":"ToolbarMessages"},"useExisting":{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}}],"selector":"[kendoToolbarLocalizedMessages]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":17,"character":35}]}]}},"ToolbarCustomMessagesComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolbarMessages"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","name":"ToolbarMessages"},"useExisting":{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"}}],"selector":"kendo-toolbar-messages","template":""}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":19,"character":35}]}]}},"RefreshService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"refresh":[{"__symbolic":"method"}]}},"NavigationService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":19,"character":30}]}],"setRenderedTools":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"moveFocusToToolBar":[{"__symbolic":"method"}],"moveFocusToPopup":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrev":[{"__symbolic":"method"}],"resetNavigation":[{"__symbolic":"method"}],"focusFirst":[{"__symbolic":"method"}],"getFocusableTools":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blurOverflowButton":[{"__symbolic":"method"}],"focusOverflowButton":[{"__symbolic":"method"}],"isOverflowButtonVisible":[{"__symbolic":"method"}]}},"ToolBarRendererComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"exportAs":"kendoToolBarRenderer","providers":[{"__symbolic":"reference","name":"RendererService"}],"selector":"kendo-toolbar-renderer","template":"\n        <ng-container *ngIf=\"location === 'toolbar'\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"location === 'overflow' && tool.responsive\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n    "}]}],"members":{"tool":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"location":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"rendererClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":63,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":26},{"__symbolic":"reference","name":"RendererService"},{"__symbolic":"reference","name":"RefreshService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"isDisplayed":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"setAttribute":[{"__symbolic":"method"}]}},"RendererService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"getElement":[{"__symbolic":"method"}],"querySelector":[{"__symbolic":"method"}],"querySelectorAll":[{"__symbolic":"method"}],"findFocusable":[{"__symbolic":"method"}],"findFocusableChild":[{"__symbolic":"method"}],"findNextFocusableSibling":[{"__symbolic":"method"}],"findPrevFocusableSibling":[{"__symbolic":"method"}],"setAttribute":[{"__symbolic":"method"}]}},"ToolBarButtonListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-toolbar-buttonlist","template":"\n        <button\n            #button\n            type=\"button\"\n            tabindex=\"-1\"\n            kendoButton\n            style=\"padding-left: 16px\"\n            class=\"k-overflow-button\"\n            *ngFor=\"let item of data; let i = index\"\n            [disabled]=\"disabled || item.disabled\"\n            [icon]=\"item.icon\"\n            [iconClass]=\"item.iconClass\"\n            [imageUrl]=\"item.imageUrl\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            (click)=\"onClick(item, i)\"\n        >\n            {{ getText(item) }}\n        </button>\n    "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":37,"character":5},"arguments":["button"]}]}],"getText":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}]}},"ToolbarMessages":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":6,"character":37},"members":{"moreToolsTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}]}}},"origins":{"ToolBarComponent":"./toolbar.component","ToolBarToolComponent":"./tools/toolbar-tool.component","ToolBarButtonComponent":"./tools/toolbar-button.component","ToolBarButtonGroupComponent":"./tools/toolbar-buttongroup.component","ToolBarDropDownButtonComponent":"./tools/toolbar-dropdownbutton.component","ToolBarSplitButtonComponent":"./tools/toolbar-splitbutton.component","ToolBarSeparatorComponent":"./tools/toolbar-separator.component","ButtonGroupSelection":"./group-selection-settings","PopupSettings":"./popup-settings","DisplayMode":"./display-mode","ToolBarModule":"./toolbar.module","LocalizedToolbarMessagesDirective":"./localization/localized-toolbar-messages.directive","ToolbarCustomMessagesComponent":"./localization/custom-messages.component","RefreshService":"./refresh.service","NavigationService":"./navigation.service","ToolBarRendererComponent":"./renderer.component","RendererService":"./renderer.service","ToolBarButtonListComponent":"./tools/toolbar-buttonlist.component","ToolbarMessages":"./localization/messages"},"importAs":"@progress/kendo-angular-toolbar"}
+{"__symbolic":"module","version":4,"metadata":{"ToolBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":49,"character":1},"arguments":[{"exportAs":"kendoToolBar","providers":[{"__symbolic":"reference","name":"RefreshService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":54,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":56,"character":21},"useValue":"kendo.toolbar"}],"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    "}]}],"members":{"overflow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":5}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5},"arguments":["tabIndex"]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":159,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":164,"character":5}}]}],"allTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":166,"character":5},"arguments":[{"__symbolic":"reference","name":"ToolBarToolComponent"}]}]}],"overflowButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":168,"character":5},"arguments":["overflowButton",{"static":false}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":171,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"resizeSensor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":174,"character":5},"arguments":["resizeSensor",{"static":false}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":177,"character":5},"arguments":["container",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":177,"character":36},"static":true}]}]}],"renderedTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":180,"character":5},"arguments":["toolbarRenderer"]}]}],"overflowRenderedTools":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":183,"character":5},"arguments":["overflowRenderer"]}]}],"hostClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":223,"character":5},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":224,"character":5},"arguments":["class.k-toolbar"]}]}],"onFocus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":240,"character":5},"arguments":["focus",["$event"]]}]}],"onFocusOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":251,"character":5},"arguments":["focusout",["$event"]]}]}],"getRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":261,"character":5},"arguments":["attr.role"]}]}],"getDir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":265,"character":5},"arguments":["attr.dir"]}]}],"resizableClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":269,"character":5},"arguments":["class.k-toolbar-resizable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":274,"character":30},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupService","line":275,"character":30},{"__symbolic":"reference","name":"RefreshService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":278,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":279,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":280,"character":26}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onRendererClick":[{"__symbolic":"method"}],"showPopup":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"onPopupOpen":[{"__symbolic":"method"}],"onPopupClose":[{"__symbolic":"method"}],"displayAnchor":[{"__symbolic":"method"}],"shrink":[{"__symbolic":"method"}],"stretch":[{"__symbolic":"method"}],"hideLastVisibleTool":[{"__symbolic":"method"}],"showFirstHiddenTool":[{"__symbolic":"method"}],"setPopupContentDimensions":[{"__symbolic":"method"}]}},"ToolBarToolComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"toolbar-tool","template":""}]}],"members":{"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}]}},"ToolBarButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"exportAs":"kendoToolBarButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarButtonComponent"}}],"selector":"kendo-toolbar-button","template":"\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"toggleable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"togglable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":5}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":211,"character":5}}]}],"pointerdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":216,"character":6}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":224,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":227,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"toolbarButtonElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":243,"character":5},"arguments":["toolbarButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":243,"character":40},"static":false}]}]}],"overflowButtonElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":246,"character":5},"arguments":["overflowButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":246,"character":41},"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onBlur":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"getButton":[{"__symbolic":"method"}]}},"ToolBarButtonGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"exportAs":"kendoToolBarButtonGroup","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":16,"character":16},{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"}}],"selector":"kendo-toolbar-buttongroup","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-buttongroup\n                #toolbarButtonGroup\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n                (navigate)=\"onNavigate($event)\"\n                (focus)=\"onFocus()\"\n            >\n                <span\n                    kendoButton\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.toolbarOptions.icon\"\n                    [iconClass]=\"button.toolbarOptions.iconClass\"\n                    [imageUrl]=\"button.toolbarOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (pointerdown)=\"button.pointerdown.emit($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.toolbarOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <kendo-buttongroup\n                #overflowButtonGroup\n                class=\"k-overflow-button\"\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n            >\n                <span\n                    kendoButton\n                    class=\"k-overflow-button\"\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.overflowOptions.icon\"\n                    [iconClass]=\"button.overflowOptions.iconClass\"\n                    [imageUrl]=\"button.overflowOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.overflowOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n    "}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":117,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":120,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"buttonComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":124,"character":5},"arguments":[{"__symbolic":"reference","name":"ToolBarButtonComponent"}]}]}],"toolbarButtonGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":5},"arguments":["toolbarButtonGroup",{"static":false}]}]}],"overflowButtonGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":135,"character":5},"arguments":["overflowButtonGroup",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":142,"character":38}]}],"onFocus":[{"__symbolic":"method"}],"onNavigate":[{"__symbolic":"method"}],"selectedChangeHandler":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"getButtonGroup":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarDropDownButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"exportAs":"kendoToolBarDropDownButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"}}],"selector":"kendo-toolbar-dropdownbutton","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-dropdownbutton\n                #toolbarDropDownButton\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n                {{ toolbarOptions.text }}\n            </kendo-dropdownbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"true\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"itemClick.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowDropDownButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"primary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"buttonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":220,"character":5}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":232,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":234,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":237,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"dropdownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":240,"character":5},"arguments":["dropdownButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":240,"character":41},"static":true}]}]}],"dropDownButtonComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":243,"character":5},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"DropDownButtonComponent","line":243,"character":15},{"static":false}]}]}],"toolbarDropDownButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":263,"character":5},"arguments":["toolbarDropDownButton",{"static":false}]}]}],"overflowDropDownButtonButtonList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":266,"character":5},"arguments":["overflowDropDownButtonButtonList",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onButtonListClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarSplitButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"exportAs":"kendoToolBarSplitButton","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"}}],"selector":"kendo-toolbar-splitbutton","template":"\n        <ng-template #toolbarTemplate>\n            <kendo-splitbutton\n                #toolbarSplitButton\n                [data]=\"data\"\n                [text]=\"toolbarOptions.text\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [arrowButtonClass]=\"arrowButtonClass\"\n                [arrowButtonIcon]=\"arrowButtonIcon\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n            </kendo-splitbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowSplitButton\n                type=\"button\"\n                tabindex=\"-1\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"disabled\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"buttonClick.emit($event)\"\n                (click)=\"onMainButtonClick($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowSplitButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "}]}],"members":{"showText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"showIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"look":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"buttonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":5}}]}],"arrowButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"arrowButtonIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":233,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":239,"character":5}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":245,"character":5}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":251,"character":5}}]}],"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":253,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":256,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"toolbarSplitButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":283,"character":5},"arguments":["toolbarSplitButton",{"static":false}]}]}],"overflowSplitButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":285,"character":5},"arguments":["overflowSplitButton",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":285,"character":46},"static":false}]}]}],"overflowSplitButtonButtonList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":288,"character":5},"arguments":["overflowSplitButtonButtonList",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onButtonListClick":[{"__symbolic":"method"}],"onMainButtonClick":[{"__symbolic":"method"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"focusButton":[{"__symbolic":"method"}]}},"ToolBarSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolBarToolComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"exportAs":"kendoToolBarSeparator","providers":[{"provide":{"__symbolic":"reference","name":"ToolBarToolComponent"},"useExisting":{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}}],"selector":"kendo-toolbar-separator","template":"\n        <ng-template #toolbarTemplate>\n            <div class=\"k-separator\"></div>\n        </ng-template>\n    "}]}],"members":{"toolbarTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":5},"arguments":["toolbarTemplate",{"static":true}]}]}],"popupTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":5},"arguments":["popupTemplate",{"static":true}]}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":5},"arguments":["separator",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"canFocus":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleKey":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ButtonGroupSelection":{"__symbolic":"interface"},"PopupSettings":{"__symbolic":"interface"},"DisplayMode":{"__symbolic":"interface"},"ToolBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ToolBarComponent"},[{"__symbolic":"reference","name":"ToolBarToolComponent"},{"__symbolic":"reference","name":"ToolBarButtonComponent"},{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"},{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"},{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"},{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}],[{"__symbolic":"reference","name":"ToolBarRendererComponent"},{"__symbolic":"reference","name":"ToolBarButtonListComponent"},{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"},{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}]],"exports":[{"__symbolic":"reference","name":"ToolBarComponent"},[{"__symbolic":"reference","name":"ToolBarToolComponent"},{"__symbolic":"reference","name":"ToolBarButtonComponent"},{"__symbolic":"reference","name":"ToolBarButtonGroupComponent"},{"__symbolic":"reference","name":"ToolBarDropDownButtonComponent"},{"__symbolic":"reference","name":"ToolBarSplitButtonComponent"},{"__symbolic":"reference","name":"ToolBarSeparatorComponent"}],{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"},{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"ButtonsModule","line":49,"character":28},{"__symbolic":"reference","module":"@progress/kendo-angular-popup","name":"PopupModule","line":49,"character":43},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"ResizeSensorModule","line":49,"character":56}]}]}],"members":{}},"LocalizedToolbarMessagesDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolbarMessages"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","name":"ToolbarMessages"},"useExisting":{"__symbolic":"reference","name":"LocalizedToolbarMessagesDirective"}}],"selector":"[kendoToolbarLocalizedMessages]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":17,"character":35}]}]}},"ToolbarCustomMessagesComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ToolbarMessages"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","name":"ToolbarMessages"},"useExisting":{"__symbolic":"reference","name":"ToolbarCustomMessagesComponent"}}],"selector":"kendo-toolbar-messages","template":""}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":19,"character":35}]}]}},"RefreshService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"refresh":[{"__symbolic":"method"}]}},"NavigationService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":19,"character":30}]}],"setRenderedTools":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"moveFocusToToolBar":[{"__symbolic":"method"}],"moveFocusToPopup":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrev":[{"__symbolic":"method"}],"resetNavigation":[{"__symbolic":"method"}],"focusFirst":[{"__symbolic":"method"}],"getFocusableTools":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blurOverflowButton":[{"__symbolic":"method"}],"focusOverflowButton":[{"__symbolic":"method"}],"isOverflowButtonVisible":[{"__symbolic":"method"}]}},"ToolBarRendererComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"exportAs":"kendoToolBarRenderer","providers":[{"__symbolic":"reference","name":"RendererService"}],"selector":"kendo-toolbar-renderer","template":"\n        <ng-container *ngIf=\"location === 'toolbar'\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"location === 'overflow' && tool.responsive\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n    "}]}],"members":{"tool":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"location":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"rendererClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":63,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":26},{"__symbolic":"reference","name":"RendererService"},{"__symbolic":"reference","name":"RefreshService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"isDisplayed":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"setAttribute":[{"__symbolic":"method"}]}},"RendererService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1}}],"members":{"getElement":[{"__symbolic":"method"}],"querySelector":[{"__symbolic":"method"}],"querySelectorAll":[{"__symbolic":"method"}],"findFocusable":[{"__symbolic":"method"}],"findFocusableChild":[{"__symbolic":"method"}],"findNextFocusableSibling":[{"__symbolic":"method"}],"findPrevFocusableSibling":[{"__symbolic":"method"}],"setAttribute":[{"__symbolic":"method"}]}},"ToolBarButtonListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-toolbar-buttonlist","template":"\n        <button\n            #button\n            type=\"button\"\n            tabindex=\"-1\"\n            kendoButton\n            style=\"padding-left: 16px\"\n            class=\"k-overflow-button\"\n            *ngFor=\"let item of data; let i = index\"\n            [disabled]=\"disabled || item.disabled\"\n            [icon]=\"item.icon\"\n            [iconClass]=\"item.iconClass\"\n            [imageUrl]=\"item.imageUrl\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            (click)=\"onClick(item, i)\"\n        >\n            {{ getText(item) }}\n        </button>\n    "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"fillMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"themeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":37,"character":5},"arguments":["button"]}]}],"getText":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}]}},"ToolbarMessages":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"ComponentMessages","line":6,"character":37},"members":{"moreToolsTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}]}}},"origins":{"ToolBarComponent":"./toolbar.component","ToolBarToolComponent":"./tools/toolbar-tool.component","ToolBarButtonComponent":"./tools/toolbar-button.component","ToolBarButtonGroupComponent":"./tools/toolbar-buttongroup.component","ToolBarDropDownButtonComponent":"./tools/toolbar-dropdownbutton.component","ToolBarSplitButtonComponent":"./tools/toolbar-splitbutton.component","ToolBarSeparatorComponent":"./tools/toolbar-separator.component","ButtonGroupSelection":"./group-selection-settings","PopupSettings":"./popup-settings","DisplayMode":"./display-mode","ToolBarModule":"./toolbar.module","LocalizedToolbarMessagesDirective":"./localization/localized-toolbar-messages.directive","ToolbarCustomMessagesComponent":"./localization/custom-messages.component","RefreshService":"./refresh.service","NavigationService":"./navigation.service","ToolBarRendererComponent":"./renderer.component","RendererService":"./renderer.service","ToolBarButtonListComponent":"./tools/toolbar-buttonlist.component","ToolbarMessages":"./localization/messages"},"importAs":"@progress/kendo-angular-toolbar"}

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es2015/toolbar.component.d.ts

@@ -2,7 +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 { TemplateRef, ElementRef, QueryList, ChangeDetectorRef, EventEmitter, ViewContainerRef, NgZone, Renderer2, SimpleChanges } from '@angular/core';
+import { TemplateRef, ElementRef, QueryList, EventEmitter, ViewContainerRef, NgZone, Renderer2, SimpleChanges } from '@angular/core';
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -23,7 +23,6 @@ export declare class ToolBarComponent {
     private refreshService;
     private navigationService;
     private element;
-    private cdr;
     private zone;
     private renderer;
     /**
@@ -76,6 +75,7 @@ export declare class ToolBarComponent {
     private toolbarKeydownListener;
     private overflowKeydownListener;
     private cancelRenderedToolsSubscription$;
+    private cachedGap;
     private subscriptions;
     /**
      * @hidden
@@ -88,7 +88,7 @@ export declare class ToolBarComponent {
     readonly getRole: string;
     readonly getDir: string;
     readonly resizableClass: boolean;
-    constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
+    constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2);
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -121,10 +121,11 @@ export declare class ToolBarComponent {
      * @hidden
      */
     onPopupClose(): void;
-    readonly displayAnchor: string;
+    private displayAnchor;
     private readonly popupWidth;
     private readonly popupHeight;
     private readonly overflowAnchorWidth;
+    private readonly gap;
     private readonly childrenWidth;
     private readonly visibleTools;
     private readonly overflowTools;