@progress/kendo-angular-toolbar 6.0.0-next.202204011525 → 6.0.0

package/bundles/kendo-angular-toolbar.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@progress/kendo-angular-common"),require("rxjs"),require("@progress/kendo-angular-popup"),require("@angular/common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularToolbar",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","rxjs/operators","@progress/kendo-angular-common","rxjs","@progress/kendo-angular-popup","@angular/common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularToolbar={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.rxjs.operators,e.KendoAngularCommon,e.rxjs,e.KendoAngularPopup,e.ng.common,e.KendoAngularButtons)}(this,function(e,a,t,z,r,n,A,V,j,o){"use strict";function i(o){if(o&&o.__esModule)return o;var n=Object.create(null);return o&&Object.keys(o).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(o,e),Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:function(){return o[e]}}))}),n.default=o,Object.freeze(n)}var s=i(a),l=i(t),p=i(n),U=i(V),u=i(j),c=i(o),$={name:"@progress/kendo-angular-toolbar",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1648826664,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"},d=(L.prototype.refresh=function(e){this.onRefresh.emit(e)},L);function L(){this.onRefresh=new a.EventEmitter}d.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,deps:[],target:s.ɵɵFactoryTarget.Injectable}),d.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,decorators:[{type:a.Injectable}]});var K=function(e,t){return(K=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])})(e,t)};function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function o(){this.constructor=e}K(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}Object.create;function _(e,t){var o="function"==typeof Symbol&&e[Symbol.iterator];if(!o)return e;var n,i,r=o.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(n=r.next()).done;)s.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(o=r.return)&&o.call(r)}finally{if(i)throw i.error}}return s}function G(e,t,o){if(o||2===arguments.length)for(var n,i=0,r=t.length;i<r;i++)!n&&i in t||((n=n||Array.prototype.slice.call(t,0,i))[i]=t[i]);return e.concat(n||Array.prototype.slice.call(t))}Object.create;var H=/^(?:a|input|select|textarea|button|object)$/i;function q(e){var t=e.offsetWidth,e=getComputedStyle(e);return t+=parseFloat(e.marginLeft)||0+parseFloat(e.marginRight)||0}function W(e,t){var o,n;return void 0===t&&(t=!0),!!e.tagName&&(o=e.tagName.toLowerCase(),n=null!==e.getAttribute("tabIndex"),(n=H.test(o)?!e.disabled:n)&&(!t||ne(e)))}function Q(e,t,o){void 0===t&&(t=!0);for(var n=o?e.prevSibling:e.nextSibling;n;){if(1===n.nodeType){var i=ie(n,function(e){return W(e,t)});if(i)return i}n=o?n.prevSibling:n.nextSibling}}function Z(e){return null!=e}function X(t){return function(e){return Z(t[e])}}function J(e,o,n){return function(t){switch(t.type){case"keydown":if(t.keyCode===e)return n.length-1;if(t.keyCode===o)return 0;break;case"click":return n.findIndex(function(e){return e===t.target||e.contains(t.target)});default:return 0}}}function Y(o,n,i){return function(e,t){switch(t.keyCode){case o:return i(e-1)?e-1:e;case n:return i(e+1)?e+1:e;default:return e}}}function ee(t){return function(e){return t===e}}function te(t){return void 0===t&&(t=!1),function(e){return(e=void 0===e?!0:e)?n.Keys.ArrowDown:t?n.Keys.ArrowLeft:n.Keys.ArrowRight}}function oe(t){return void 0===t&&(t=!1),function(e){return(e=void 0===e?!0:e)?n.Keys.ArrowUp:t?n.Keys.ArrowRight:n.Keys.ArrowLeft}}function g(e,t,o){switch(t){case"toolbar":return o?void 0:e;case"overflow":return o?e:void 0;default:return e}}var ne=function(e){var t=e.getBoundingClientRect(),o=0<t.width&&0<t.height,t=0!==t.x&&0!==t.y;return(o||t)&&"hidden"!==window.getComputedStyle(e).visibility},ie=function(e,t,o){if(void 0===o&&(o=!0),e){if(o&&t(e))return e;for(e=e.firstChild;e;){if(1===e.nodeType){var n=ie(e,t);if(n)return n}e=e.nextSibling}}},b=(m.prototype.setRenderedTools=function(e){this.renderedTools=G([],_(e))},m.prototype.click=function(e){var t=e.context,e=e.event;this.focused.renderedTool!==t&&e&&this.focus(t,e)},m.prototype.moveFocusToToolBar=function(){this.isPopupFocused=!1,this.focusOverflowButton()},m.prototype.moveFocusToPopup=function(){this.isPopupFocused=!0,this.blurOverflowButton(),this.focus()},m.prototype.focusNext=function(e){var t;this.isOverflowButtonFocused||!this.focused.renderedTool||this.focused.renderedTool.tool.handleKey(e)||((t=this.getFocusableTools().slice(this.focused.index+1)[0])?this.focus(t,e):this.isOverflowButtonVisible()&&!this.isPopupFocused&&this.focusOverflowButton())},m.prototype.focusPrev=function(e){var t;this.isOverflowButtonFocused?(t=this.getFocusableTools().reverse()[0],this.focus(t,e)):this.focused.renderedTool&&!this.focused.renderedTool.tool.handleKey(e)&&(t=this.getFocusableTools().slice(0,this.focused.index).reverse()[0])&&this.focus(t,e)},m.prototype.resetNavigation=function(){this.blurOverflowButton(),this.focused.renderedTool=null,this.focused.index=-1},m.prototype.focusFirst=function(e){var t=this.getFocusableTools()[0],o=this.overflowButton;t?(this.focused.renderedTool=t,this.focused.index=this.getFocusableTools().findIndex(function(e){return e===t}),this.focus(t,e)):o&&o.nativeElement.focus()},m.prototype.getFocusableTools=function(){var t=this;return this.renderedTools.filter(function(e){return e.tool.overflows===t.isPopupFocused&&e.tool.canFocus()})},m.prototype.focus=function(o,n){var i=this;this.zone.onStable.pipe(r.take(1)).subscribe(function(){var e,t;o?o.tool.canFocus&&o.tool.canFocus()&&(i.focused.renderedTool=o,i.focused.index=i.getFocusableTools().findIndex(function(e){return e===o}),o.tool.focus(n),i.blurOverflowButton()):(e=i.getFocusableTools(),(t=e.find(function(e){return e===i.focused.renderedTool})||e[0])&&(i.focused.renderedTool=t,i.focused.index=i.getFocusableTools().findIndex(function(e){return e===t}),t.tool.focus(n)))})},m.prototype.blurOverflowButton=function(){this.overflowButton&&(this.isOverflowButtonFocused=!1,this.overflowButton.nativeElement.tabIndex=-1)},m.prototype.focusOverflowButton=function(){this.isOverflowButtonFocused=!0,this.overflowButton.nativeElement.tabIndex=0,this.overflowButton.nativeElement.focus()},m.prototype.isOverflowButtonVisible=function(){return Z(this.overflowButton)&&"visible"===window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue("visibility")},m);function m(e){this.zone=e,this.focused={renderedTool:null,index:-1},this.renderedTools=[],this.isPopupFocused=!1,this.isOverflowButtonFocused=!1}b.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:b,deps:[{token:s.NgZone}],target:s.ɵɵFactoryTarget.Injectable}),b.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:b}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:b,decorators:[{type:a.Injectable}],ctorParameters:function(){return[{type:s.NgZone}]}});Object.defineProperty(re.prototype,"toolbarDisplay",{get:function(){return this.overflows?"none":"inline-block"},enumerable:!1,configurable:!0}),Object.defineProperty(re.prototype,"overflowDisplay",{get:function(){return this.overflows?"block":"none"},enumerable:!1,configurable:!0}),re.prototype.canFocus=function(){return!1},re.prototype.focus=function(e){},re.prototype.handleKey=function(e){return!1};var h=re;function re(){this.tabIndex=-1,this.overflows=!0,this.responsive=!0}h.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,deps:[],target:s.ɵɵFactoryTarget.Component}),h.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"toolbar-tool",inputs:{responsive:"responsive"},ngImport:s,template:"",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,decorators:[{type:a.Component,args:[{selector:"toolbar-tool",template:""}]}],propDecorators:{responsive:[{type:a.Input}]}});le.prototype.preventDefault=function(){this.prevented=!0},le.prototype.isDefaultPrevented=function(){return this.prevented};var se=le;function le(){this.prevented=!1}y.prototype.getElement=function(){return this.element.nativeElement},y.prototype.querySelector=function(e){return this.element.nativeElement.querySelector(e)},y.prototype.querySelectorAll=function(e){return this.element.nativeElement.querySelectorAll(e)},y.prototype.findFocusable=function(){return e=this.element.nativeElement,void 0===(t=!1)&&(t=!0),ie(e,function(e){return W(e,t)});var e,t},y.prototype.findFocusableChild=function(e){return e=e||this.findFocusable(),void 0===(t=!1)&&(t=!0),ie(e,function(e){return W(e,t)},!1);var t},y.prototype.findNextFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1)},y.prototype.findPrevFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1,!0)},y.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var v=y;function y(){}v.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,deps:[],target:s.ɵɵFactoryTarget.Injectable}),v.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,decorators:[{type:a.Injectable}]});C.prototype.onClick=function(e){this.rendererClick.emit({context:this,event:e})},C.prototype.ngOnInit=function(){this.resizable?("toolbar"===this.location?(this.template=this.tool.toolbarTemplate,this.renderer.setStyle(this.element.nativeElement,"visibility","hidden")):this.template=this.tool.popupTemplate,this.renderer.setStyle(this.element.nativeElement,"display","none")):(this.tool.overflows=!1,this.template=this.tool.toolbarTemplate,this.renderer.setStyle(this.element.nativeElement,"visibility","display"),this.renderer.setStyle(this.element.nativeElement,"display","inline-block"))},C.prototype.ngOnDestroy=function(){this.refreshSubscription.unsubscribe()},C.prototype.ngAfterViewInit=function(){this.resizable&&this.refresh()},Object.defineProperty(C.prototype,"width",{get:function(){return this.tool.overflows?0:q(this.element.nativeElement)},enumerable:!1,configurable:!0}),C.prototype.isDisplayed=function(){return"none"!==this.element.nativeElement.style.display},C.prototype.refresh=function(){this.resizable&&("toolbar"===this.location?(this.renderer.setStyle(this.element.nativeElement,"visibility",this.tool.visibility),this.renderer.setStyle(this.element.nativeElement,"display",this.tool.toolbarDisplay)):this.renderer.setStyle(this.element.nativeElement,"display",this.tool.overflowDisplay))},C.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var w=C;function C(e,t,o,n){var i=this;this.element=e,this.renderer=t,this.rendererService=o,this.refreshService=n,this.rendererClick=new a.EventEmitter,this.rendererService.element=e,(this.rendererService.renderer=this).refreshSubscription=this.refreshService.onRefresh.subscribe(function(e){i.tool===e&&i.refresh()})}w.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,deps:[{token:s.ElementRef},{token:s.Renderer2},{token:v},{token:d}],target:s.ɵɵFactoryTarget.Component}),w.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"kendo-toolbar-renderer",inputs:{tool:"tool",location:"location",resizable:"resizable"},outputs:{rendererClick:"rendererClick"},host:{listeners:{click:"onClick($event)"}},providers:[v],exportAs:["kendoToolBarRenderer"],ngImport:s,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    ',isInline:!0,directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:u.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarRenderer",providers:[v],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    '}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2},{type:v},{type:d}]},propDecorators:{tool:[{type:a.Input}],location:[{type:a.Input}],resizable:[{type:a.Input}],rendererClick:[{type:a.Output}],onClick:[{type:a.HostListener,args:["click",["$event"]]}]}});f(pe,ae=t.ComponentMessages);var ae,k=pe;function pe(){return null!==ae&&ae.apply(this,arguments)||this}k.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,deps:null,target:s.ɵɵFactoryTarget.Directive}),k.ɵdir=s.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"kendo-toolbar-messages-base",inputs:{moreToolsTitle:"moreToolsTitle"},usesInheritance:!0,ngImport:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,decorators:[{type:a.Directive,args:[{selector:"kendo-toolbar-messages-base"}]}],propDecorators:{moreToolsTitle:[{type:a.Input}]}});f(ce,ue=k);var ue,x=ce;function ce(e){var t=ue.call(this)||this;return t.service=e,t}x.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:x,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Directive}),x.ɵdir=s.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:x,selector:"[kendoToolbarLocalizedMessages]",providers:[{provide:k,useExisting:a.forwardRef(function(){return x})}],usesInheritance:!0,ngImport:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:x,decorators:[{type:a.Directive,args:[{providers:[{provide:k,useExisting:a.forwardRef(function(){return x})}],selector:"[kendoToolbarLocalizedMessages]"}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});function de(e){return{animate:!0,anchorAlign:{horizontal:e?"left":"right",vertical:"bottom"},popupAlign:{horizontal:e?"left":"right",vertical:"top"}}}Object.defineProperty(I.prototype,"resizable",{get:function(){return this.overflow},set:function(e){this.overflow=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupSettings",{get:function(){return this._popupSettings||de(this.localization.rtl)},set:function(e){this._popupSettings=Object.assign({},de(this.localization.rtl),e)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"tabIndex",{get:function(){return this.tabindex},set:function(e){this.tabindex=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"appendTo",{get:function(){var e=this.popupSettings.appendTo;if(e&&"root"!==e)return"component"===e?this.container:e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupOpen",{get:function(){return this._open},set:function(e){var t;this.popupOpen!==e&&(t=new se,(e?this.open:this.close).emit(t),t.isDefaultPrevented()||this.toggle(e))},enumerable:!1,configurable:!0}),I.prototype.onFocus=function(e){this.navigationService.resetNavigation(),this.navigationService.focusFirst(e),this.element.nativeElement.setAttribute("tabindex","-1")},I.prototype.onFocusOut=function(e){var t=this;!function(e,t){for(;e&&!t(e);)e=e.parentNode;return e}(e.relatedTarget,function(e){return e===t.element.nativeElement})?this.element.nativeElement.setAttribute("tabindex",this.tabindex.toString()):this.element.nativeElement.setAttribute("tabindex","-1")},Object.defineProperty(I.prototype,"getRole",{get:function(){return"toolbar"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"getDir",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"resizableClass",{get:function(){return this.overflow},enumerable:!1,configurable:!0}),I.prototype.ngAfterViewInit=function(){var t=this;this.element.nativeElement.getAttribute("tabindex")||this.element.nativeElement.setAttribute("tabindex","0"),this.zone.runOutsideAngular(function(){t.toolbarKeydownListener=t.renderer.listen(t.element.nativeElement,"keydown",function(e){switch(e.keyCode){case n.Keys.ArrowLeft:t.zone.run(function(){e.preventDefault(),"ltr"===t.direction?t.navigationService.focusPrev(e):t.navigationService.focusNext(e),t.element.nativeElement.setAttribute("tabindex","-1")});break;case n.Keys.ArrowRight:t.zone.run(function(){e.preventDefault(),"ltr"===t.direction?t.navigationService.focusNext(e):t.navigationService.focusPrev(e),t.element.nativeElement.setAttribute("tabindex","-1")});break;case n.Keys.Tab:t.zone.run(function(){return t.navigationService.resetNavigation()});break;case n.Keys.Escape:t.zone.run(function(){return t.toggle(!1)})}})}),this.overflow&&(this.subscriptions.add(A.merge(this.resizeSensor.resize.pipe(r.bufferTime(200),r.filter(function(e){return 0<e.length})),this.renderedTools.changes).subscribe(function(){t.onResize()})),this.zone.runOutsideAngular(function(){return setTimeout(function(){t.onResize(),t.onResize()})}),this.navigationService.overflowButton=this.overflowButton),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.subscriptions.add(this.renderedTools.changes.subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}))},I.prototype.ngOnInit=function(){var t=this;this.subscriptions.add(this.localization.changes.subscribe(function(e){e=e.rtl;return t.direction=e?"rtl":"ltr"})),n.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){return t.subscriptions.add(A.fromEvent(document,"click").pipe(r.filter(function(){return!!t.popupRef}),r.filter(function(e){return!t.popupRef.popup.instance.container.nativeElement.contains(e.target)}),r.filter(function(e){return!t.overflowButton.nativeElement.contains(e.target)})).subscribe(function(){t.zone.run(function(){t.popupOpen=!1})}))})},I.prototype.ngOnChanges=function(e){e.tabindex&&this.element.nativeElement.setAttribute("tabindex",e.tabindex.currentValue.toString())},I.prototype.ngOnDestroy=function(){this.popupRef&&this.popupRef.close(),this.toolbarKeydownListener&&this.toolbarKeydownListener(),this.cancelRenderedToolsSubscription$.next(),this.subscriptions.unsubscribe()},Object.defineProperty(I.prototype,"moreToolsTitle",{get:function(){return this.localization.get("moreToolsTitle")},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"cdr",{get:function(){return this._cdr},enumerable:!1,configurable:!0}),I.prototype.onRendererClick=function(e){this.navigationService.click(e),this.element.nativeElement.setAttribute("tabindex","-1")},I.prototype.showPopup=function(){this.popupOpen=!this.popupOpen,this.navigationService.click({context:void 0,event:void 0})},I.prototype.toggle=function(e){this._open=void 0!==e?e:!this.popupOpen,this.popupRef&&(this.popupRef.close(),this.popupRef=null),this.popupOpen&&(this.popupRef=this.popupService.open({anchor:this.overflowButton,anchorAlign:this.popupSettings.anchorAlign,popupAlign:this.popupSettings.popupAlign,content:this.popupTemplate,appendTo:this.appendTo,animate:this.popupSettings.animate,popupClass:this.popupSettings.popupClass,positionMode:"absolute"}),this.setPopupContentDimensions(),this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)),this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)))},I.prototype.onResize=function(){var e,t,o=this;n.isDocumentAvailable()&&(e=this.element.nativeElement,t=e.offsetWidth,e=getComputedStyle(e),t=(t-=parseFloat(e.paddingLeft)||0+parseFloat(e.borderLeftWidth)||0)-(parseFloat(e.paddingRight)||0+parseFloat(e.borderRightWidth)||0)-this.overflowAnchorWidth,this.shrink(t,this.childrenWidth),this.stretch(t,this.childrenWidth),this.zone.onStable.pipe(r.take(1)).subscribe(function(){o.displayAnchor()})),this.resizeSensor.acceptSize()},I.prototype.onPopupOpen=function(){var t=this;this.zone.runOutsideAngular(function(){t.overflowKeydownListener=t.renderer.listen(t.popupRef.popupElement,"keydown",function(e){switch(e.keyCode){case n.Keys.ArrowUp:t.zone.run(function(){e.preventDefault(),t.navigationService.focusPrev(e)});break;case n.Keys.ArrowDown:t.zone.run(function(){e.preventDefault(),t.navigationService.focusNext(e)});break;case n.Keys.Escape:t.zone.run(function(){return t.toggle(!1)});break;case n.Keys.Tab:t.zone.run(function(){t.toggle(!1),t.navigationService.resetNavigation()})}})}),this.cancelRenderedToolsSubscription$.next(),this.navigationService.moveFocusToPopup(),this.navigationService.setRenderedTools(this.overflowRenderedTools.toArray()),this.overflowRenderedTools.changes.pipe(r.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())})},I.prototype.onPopupClose=function(){var t=this;this.cancelRenderedToolsSubscription$.next(),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.renderedTools.changes.pipe(r.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}),this.navigationService.moveFocusToToolBar(),this.overflowKeydownListener&&this.overflowKeydownListener()},I.prototype.displayAnchor=function(){var e=0<this.allTools.filter(function(e){return e.overflows&&e.responsive}).length?"visible":"hidden";this.renderer.setStyle(this.overflowButton.nativeElement,"visibility",e)},Object.defineProperty(I.prototype,"popupWidth",{get:function(){return this.popupSettings&&this.popupSettings.width?isNaN(this.popupSettings.width)?this.popupSettings.width:this.popupSettings.width+"px":"150px"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupHeight",{get:function(){if(this.popupSettings&&this.popupSettings.height)return isNaN(this.popupSettings.height)?this.popupSettings.height:this.popupSettings.height+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"overflowAnchorWidth",{get:function(){return this.overflow?(this.cachedOverflowAnchorWidth||(this.cachedOverflowAnchorWidth=q(this.overflowButton.nativeElement)),this.cachedOverflowAnchorWidth):0},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"gap",{get:function(){if(Z(this.cachedGap))return this.cachedGap;var e=getComputedStyle(this.element.nativeElement).gap;return this.cachedGap=Z(e)?parseInt(e,10):0,this.cachedGap},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"childrenWidth",{get:function(){var o=this,e=this.renderedTools.reduce(function(e,t){return t.width+e+(t.isDisplayed()?o.gap:0)},0);return Math.ceil(e)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"visibleTools",{get:function(){return this.allTools.filter(function(e){return!1===e.overflows})},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"overflowTools",{get:function(){return this.allTools.filter(function(e){return!0===e.overflows})},enumerable:!1,configurable:!0}),I.prototype.shrink=function(e,t){if(e<t)for(var o=this.visibleTools.length-1;0<=o&&!(t<e);o--)t-=this.hideLastVisibleTool()},I.prototype.stretch=function(e,t){var o;if(t<e)for(var n=this.overflowTools.length-1;0<=n&&(o=this.showFirstHiddenTool(e,t));n--)t+=o},I.prototype.hideLastVisibleTool=function(){var t=this.visibleTools[this.visibleTools.length-1],e=this.renderedTools.find(function(e){return e.tool===t}).width;return t.overflows=!0,this.refreshService.refresh(t),e},I.prototype.showFirstHiddenTool=function(e,t){var o=this.overflowTools[0],n=this.renderedTools.find(function(e){return e.tool===o});return o.overflows=!1,o.visibility="hidden",this.refreshService.refresh(o),e>t+n.width?o.visibility="visible":o.overflows=!0,this.refreshService.refresh(o),n.width},I.prototype.setPopupContentDimensions=function(){var e=this.popupRef.popup.instance.contentContainer.nativeElement;e.style.width=this.popupWidth,e.style.height=this.popupHeight,e.style.overflow="auto"};var T=I;function I(e,t,o,n,i,r,s,l){this.localization=e,this.popupService=t,this.refreshService=o,this.navigationService=n,this.element=i,this.zone=r,this.renderer=s,this._cdr=l,this.overflow=!1,this.tabindex=0,this.open=new a.EventEmitter,this.close=new a.EventEmitter,this.hostClasses=!0,this.cancelRenderedToolsSubscription$=new A.Subject,this.subscriptions=new A.Subscription,z.validatePackage($),this.direction=e.rtl?"rtl":"ltr"}T.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:T,deps:[{token:l.LocalizationService},{token:U.PopupService},{token:d},{token:b},{token:s.ElementRef},{token:s.NgZone},{token:s.Renderer2},{token:s.ChangeDetectorRef}],target:s.ɵɵFactoryTarget.Component}),T.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:T,selector:"kendo-toolbar",inputs:{overflow:"overflow",resizable:"resizable",popupSettings:"popupSettings",tabindex:"tabindex",tabIndex:"tabIndex"},outputs:{open:"open",close:"close"},host:{listeners:{focus:"onFocus($event)",focusout:"onFocusOut($event)"},properties:{"class.k-widget":"this.hostClasses","class.k-toolbar":"this.hostClasses","attr.role":"this.getRole","attr.dir":"this.getDir","class.k-toolbar-resizable":"this.resizableClass"}},providers:[d,b,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.toolbar"}],queries:[{propertyName:"allTools",predicate:h}],viewQueries:[{propertyName:"overflowButton",first:!0,predicate:["overflowButton"],descendants:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"resizeSensor",first:!0,predicate:["resizeSensor"],descendants:!0},{propertyName:"container",first:!0,predicate:["container"],descendants:!0,read:a.ViewContainerRef,static:!0},{propertyName:"renderedTools",predicate:["toolbarRenderer"],descendants:!0},{propertyName:"overflowRenderedTools",predicate:["overflowRenderer"],descendants:!0}],exportAs:["kendoToolBar"],usesOnChanges:!0,ngImport:s,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    ',isInline:!0,components:[{type:w,selector:"kendo-toolbar-renderer",inputs:["tool","location","resizable"],outputs:["rendererClick"],exportAs:["kendoToolBarRenderer"]},{type:p.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:x,selector:"[kendoToolbarLocalizedMessages]"},{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:T,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBar",providers:[d,b,t.LocalizationService,{provide:t.L10N_PREFIX,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    '}]}],ctorParameters:function(){return[{type:l.LocalizationService},{type:U.PopupService},{type:d},{type:b},{type:s.ElementRef},{type:s.NgZone},{type:s.Renderer2},{type:s.ChangeDetectorRef}]},propDecorators:{overflow:[{type:a.Input}],resizable:[{type:a.Input}],popupSettings:[{type:a.Input}],tabindex:[{type:a.Input}],tabIndex:[{type:a.Input,args:["tabIndex"]}],open:[{type:a.Output}],close:[{type:a.Output}],allTools:[{type:a.ContentChildren,args:[h]}],overflowButton:[{type:a.ViewChild,args:["overflowButton",{static:!1}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],resizeSensor:[{type:a.ViewChild,args:["resizeSensor",{static:!1}]}],container:[{type:a.ViewChild,args:["container",{read:a.ViewContainerRef,static:!0}]}],renderedTools:[{type:a.ViewChildren,args:["toolbarRenderer"]}],overflowRenderedTools:[{type:a.ViewChildren,args:["overflowRenderer"]}],hostClasses:[{type:a.HostBinding,args:["class.k-widget"]},{type:a.HostBinding,args:["class.k-toolbar"]}],onFocus:[{type:a.HostListener,args:["focus",["$event"]]}],onFocusOut:[{type:a.HostListener,args:["focusout",["$event"]]}],getRole:[{type:a.HostBinding,args:["attr.role"]}],getDir:[{type:a.HostBinding,args:["attr.dir"]}],resizableClass:[{type:a.HostBinding,args:["class.k-toolbar-resizable"]}]}});f(O,fe=h),Object.defineProperty(O.prototype,"text",{set:function(e){this.toolbarOptions.text=g(e,this.showText,!1),this.overflowOptions.text=g(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"togglable",{get:function(){return this.toggleable},set:function(e){this.toggleable=e},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"icon",{set:function(e){this.toolbarOptions.icon=g(e,this.showIcon,!1),this.overflowOptions.icon=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=g(e,this.showIcon,!1),this.overflowOptions.iconClass=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=g(e,this.showIcon,!1),this.overflowOptions.imageUrl=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),O.prototype.onBlur=function(){this.getButton().tabIndex=-1},O.prototype.canFocus=function(){return!this.disabled},O.prototype.focus=function(e){e&&"focus"!==e.type&&"keydown"!==e.type||this.getButton().focus(),this.getButton().tabIndex=0},O.prototype.handleKey=function(){return!(this.getButton().tabIndex=-1)},O.prototype.getButton=function(){return(this.overflows?this.overflowButtonElement:this.toolbarButtonElement).nativeElement};var fe,B=O;function O(){var e=fe.call(this)||this;return e.showText="both",e.showIcon="both",e.toggleable=!1,e.selected=!1,e.fillMode="solid",e.themeColor="base",e.click=new a.EventEmitter,e.pointerdown=new a.EventEmitter,e.selectedChange=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e}B.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:B,deps:[],target:s.ɵɵFactoryTarget.Component}),B.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:B,selector:"kendo-toolbar-button",inputs:{showText:"showText",showIcon:"showIcon",text:"text",style:"style",className:"className",title:"title",disabled:"disabled",toggleable:"toggleable",look:"look",togglable:"togglable",selected:"selected",fillMode:"fillMode",themeColor:"themeColor",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl"},outputs:{click:"click",pointerdown:"pointerdown",selectedChange:"selectedChange"},providers:[{provide:h,useExisting:a.forwardRef(function(){return B})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarButtonElement",first:!0,predicate:["toolbarButton"],descendants:!0,read:a.ElementRef},{propertyName:"overflowButtonElement",first:!0,predicate:["overflowButton"],descendants:!0,read:a.ElementRef}],exportAs:["kendoToolBarButton"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:B,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return B})}],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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],style:[{type:a.Input}],className:[{type:a.Input}],title:[{type:a.Input}],disabled:[{type:a.Input}],toggleable:[{type:a.Input}],look:[{type:a.Input}],togglable:[{type:a.Input}],selected:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],click:[{type:a.Output}],pointerdown:[{type:a.Output}],selectedChange:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],toolbarButtonElement:[{type:a.ViewChild,args:["toolbarButton",{read:a.ElementRef,static:!1}]}],overflowButtonElement:[{type:a.ViewChild,args:["overflowButton",{read:a.ElementRef,static:!1}]}]}});f(F,ge=h),Object.defineProperty(F.prototype,"look",{set:function(t){t&&this.buttonComponents.forEach(function(e){return e.fillMode="default"===t?"solid":t})},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"buttonElements",{get:function(){return this.getButtonGroup().buttons.filter(function(e){return!e.isDisabled}).map(function(e){return e.element})},enumerable:!1,configurable:!0}),F.prototype.onFocus=function(){this.focusedIndex=0},F.prototype.onNavigate=function(e){e.preventDefault()},F.prototype.selectedChangeHandler=function(e,t){t.selected=e,t.selectedChange.emit(e)},F.prototype.onButtonClick=function(t){this.focusedIndex=this.buttonElements.findIndex(function(e){return e===t.target||e.contains(t.target)}),this.focusButton(this.focusedIndex,t)},F.prototype.canFocus=function(){return!(this.disabled||0===this.buttonElements.length)},F.prototype.focus=function(e){void 0===e&&(e={});var t=this.getNextKey(this.overflows),o=this.getPrevKey(this.overflows);this.focusedIndex=J(o,t,this.buttonElements)(e),this.focusButton(this.focusedIndex,e)},F.prototype.handleKey=function(e){var t=this.getNextKey(this.overflows),o=this.getPrevKey(this.overflows),n=X(this.buttonElements),i=ee(this.focusedIndex);return this.focusedIndex=Y(o,t,n)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!i(this.focusedIndex)},F.prototype.getButtonGroup=function(){return this.overflows?this.overflowButtonGroup:this.toolbarButtonGroup},F.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.buttonElements[e].focus()};var ge,S=F;function F(e){var t=ge.call(this)||this;return t.localization=e,t.selection="multiple",t.focusedIndex=-1,t.getNextKey=te(t.localization.rtl),t.getPrevKey=oe(t.localization.rtl),t}S.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),S.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"kendo-toolbar-buttongroup",inputs:{disabled:"disabled",selection:"selection",width:"width",look:"look"},providers:[t.LocalizationService,{provide:h,useExisting:a.forwardRef(function(){return S})}],queries:[{propertyName:"buttonComponents",predicate:s.forwardRef(function(){return B})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarButtonGroup",first:!0,predicate:["toolbarButtonGroup"],descendants:!0},{propertyName:"overflowButtonGroup",first:!0,predicate:["overflowButtonGroup"],descendants:!0}],exportAs:["kendoToolBarButtonGroup"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,components:[{type:c.ButtonGroupComponent,selector:"kendo-buttongroup",inputs:["disabled","selection","width","tabIndex"],outputs:["navigate"],exportAs:["kendoButtonGroup"]}],directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButtonGroup",providers:[t.LocalizationService,{provide:h,useExisting:a.forwardRef(function(){return S})}],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    '}]}],ctorParameters:function(){return[{type:l.LocalizationService}]},propDecorators:{disabled:[{type:a.Input}],selection:[{type:a.Input}],width:[{type:a.Input}],look:[{type:a.Input}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],buttonComponents:[{type:a.ContentChildren,args:[a.forwardRef(function(){return B})]}],toolbarButtonGroup:[{type:a.ViewChild,args:["toolbarButtonGroup",{static:!1}]}],overflowButtonGroup:[{type:a.ViewChild,args:["overflowButtonGroup",{static:!1}]}]}});be.prototype.getText=function(e){if(e)return this.textField?e[this.textField]:e.text||e},be.prototype.onClick=function(e,t){t=this.data[t];e.click&&e.click(t),this.itemClick.emit(t)};p=be;function be(){this.disabled=!1,this.fillMode="solid",this.themeColor="base",this.itemClick=new a.EventEmitter}p.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,deps:[],target:s.ɵɵFactoryTarget.Component}),p.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:p,selector:"kendo-toolbar-buttonlist",inputs:{data:"data",textField:"textField",disabled:"disabled",fillMode:"fillMode",themeColor:"themeColor"},outputs:{itemClick:"itemClick"},viewQueries:[{propertyName:"buttons",predicate:["button"],descendants:!0}],ngImport:s,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    ',isInline:!0,directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,decorators:[{type:a.Component,args:[{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    '}]}],propDecorators:{data:[{type:a.Input}],textField:[{type:a.Input}],disabled:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],itemClick:[{type:a.Output}],buttons:[{type:a.ViewChildren,args:["button"]}]}});f(M,me=h),Object.defineProperty(M.prototype,"text",{set:function(e){this.toolbarOptions.text=g(e,this.showText,!1),this.overflowOptions.text=g(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"icon",{set:function(e){this.toolbarOptions.icon=g(e,this.showIcon,!1),this.overflowOptions.icon=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=g(e,this.showIcon,!1),this.overflowOptions.iconClass=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=g(e,this.showIcon,!1),this.overflowOptions.imageUrl=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"popupSettings",{get:function(){return this._popupSettings},set:function(e){this._popupSettings=Object.assign({animate:!0,popupClass:""},e)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"primary",{set:function(e){this.themeColor=e?"primary":"base"},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"overflowButtons",{get:function(){return G([],_(this.overflowDropDownButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),M.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowDropDownButtonButtonList.buttons.toArray().findIndex(function(e){return e.nativeElement.contains(t.target)})},M.prototype.canFocus=function(){return!this.disabled},M.prototype.focus=function(e){void 0===e&&(e={}),this.overflows?0<this.overflowButtons.length&&(this.focusedIndex=J(this.getPrevKey(),this.getNextKey(),this.overflowButtons.map(function(e){return e.nativeElement}))(e),this.focusButton(this.focusedIndex,e)):"focus"!==e.type&&"keydown"!==e.type||this.toolbarDropDownButton.focus()},M.prototype.handleKey=function(e){return!!(this.overflows||e.keyCode!==this.getPrevKey(this.overflows)&&e.keyCode!==this.getNextKey(this.overflows))&&(this.overflows?(t=X(this.overflowButtons),o=ee(this.focusedIndex),this.focusedIndex=Y(this.getPrevKey(),this.getNextKey(),t)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!o(this.focusedIndex)):void 0);var t,o},M.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.overflowButtons[e].nativeElement.focus()};var me,D=M;function M(){var e=me.call(this)||this;return e.showText="both",e.showIcon="both",e.fillMode="solid",e.themeColor="base",e.itemClick=new a.EventEmitter,e.open=new a.EventEmitter,e.close=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e._popupSettings={animate:!0,popupClass:""},e.focusedIndex=-1,e.getNextKey=te(),e.getPrevKey=oe(),e}D.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,deps:[],target:s.ɵɵFactoryTarget.Component}),D.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:D,selector:"kendo-toolbar-dropdownbutton",inputs:{showText:"showText",showIcon:"showIcon",text:"text",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl",popupSettings:"popupSettings",look:"look",primary:"primary",fillMode:"fillMode",themeColor:"themeColor",buttonClass:"buttonClass",textField:"textField",disabled:"disabled",data:"data"},outputs:{itemClick:"itemClick",open:"open",close:"close"},providers:[{provide:h,useExisting:a.forwardRef(function(){return D})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"dropdownButton",first:!0,predicate:["dropdownButton"],descendants:!0,read:a.ElementRef,static:!0},{propertyName:"dropDownButtonComponent",first:!0,predicate:o.DropDownButtonComponent,descendants:!0},{propertyName:"toolbarDropDownButton",first:!0,predicate:["toolbarDropDownButton"],descendants:!0},{propertyName:"overflowDropDownButtonButtonList",first:!0,predicate:["overflowDropDownButtonButtonList"],descendants:!0}],exportAs:["kendoToolBarDropDownButton"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,components:[{type:c.DropDownButtonComponent,selector:"kendo-dropdownbutton",inputs:["icon","iconClass","imageUrl","popupSettings","textField","disabled","data","size","shape","rounded","fillMode","themeColor","buttonClass","tabIndex"],outputs:["itemClick","open","close","focus","blur"],exportAs:["kendoDropDownButton"]},{type:p,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarDropDownButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return D})}],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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],popupSettings:[{type:a.Input}],look:[{type:a.Input}],primary:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],buttonClass:[{type:a.Input}],textField:[{type:a.Input}],disabled:[{type:a.Input}],data:[{type:a.Input}],itemClick:[{type:a.Output}],open:[{type:a.Output}],close:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],dropdownButton:[{type:a.ViewChild,args:["dropdownButton",{read:a.ElementRef,static:!0}]}],dropDownButtonComponent:[{type:a.ViewChild,args:[o.DropDownButtonComponent,{static:!1}]}],toolbarDropDownButton:[{type:a.ViewChild,args:["toolbarDropDownButton",{static:!1}]}],overflowDropDownButtonButtonList:[{type:a.ViewChild,args:["overflowDropDownButtonButtonList",{static:!1}]}]}});f(P,he=h),Object.defineProperty(P.prototype,"text",{set:function(e){this.toolbarOptions.text=g(e,this.showText,!1),this.overflowOptions.text=g(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"icon",{set:function(e){this.toolbarOptions.icon=g(e,this.showIcon,!1),this.overflowOptions.icon=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=g(e,this.showIcon,!1),this.overflowOptions.iconClass=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=g(e,this.showIcon,!1),this.overflowOptions.imageUrl=g(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"popupSettings",{get:function(){return this._popupSettings||(this._popupSettings={animate:!0,popupClass:""}),this._popupSettings},set:function(e){this._popupSettings=e},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"overflowButtons",{get:function(){return G([this.overflowSplitButton],_(this.overflowSplitButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),P.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowButtons.findIndex(function(e){return e.nativeElement.contains(t.target)})},P.prototype.onMainButtonClick=function(e){this.buttonClick.emit(e),this.focusedIndex=0},P.prototype.canFocus=function(){return!this.disabled},P.prototype.focus=function(e){void 0===e&&(e={}),this.overflows?0<this.overflowButtons.length&&(this.focusedIndex=J(this.getPrevKey(),this.getNextKey(),this.overflowButtons.map(function(e){return e.nativeElement}))(e),this.focusButton(this.focusedIndex,e)):"focus"!==e.type&&"keydown"!==e.type||this.toolbarSplitButton.focus()},P.prototype.handleKey=function(e){return!!(this.overflows||e.keyCode!==this.getPrevKey(this.overflows)&&e.keyCode!==this.getNextKey(this.overflows))&&(this.overflows?(t=X(this.overflowButtons),o=ee(this.focusedIndex),this.focusedIndex=Y(this.getPrevKey(),this.getNextKey(),t)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!o(this.focusedIndex)):void 0);var t,o},P.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type&&"click"!==t.type||this.overflowButtons[e].nativeElement.focus()};var he,E=P;function P(){var e=he.call(this)||this;return e.showText="both",e.showIcon="both",e.fillMode="solid",e.themeColor="base",e.arrowButtonIcon="arrow-s",e.textField="text",e.buttonClick=new a.EventEmitter,e.itemClick=new a.EventEmitter,e.open=new a.EventEmitter,e.close=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e._popupSettings={animate:!0,popupClass:""},e.focusedIndex=-1,e.getNextKey=te(),e.getPrevKey=oe(),e}E.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:E,deps:[],target:s.ɵɵFactoryTarget.Component}),E.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"kendo-toolbar-splitbutton",inputs:{showText:"showText",showIcon:"showIcon",text:"text",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl",disabled:"disabled",popupSettings:"popupSettings",fillMode:"fillMode",themeColor:"themeColor",look:"look",buttonClass:"buttonClass",arrowButtonClass:"arrowButtonClass",arrowButtonIcon:"arrowButtonIcon",textField:"textField",data:"data"},outputs:{buttonClick:"buttonClick",itemClick:"itemClick",open:"open",close:"close"},providers:[{provide:h,useExisting:a.forwardRef(function(){return E})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarSplitButton",first:!0,predicate:["toolbarSplitButton"],descendants:!0},{propertyName:"overflowSplitButton",first:!0,predicate:["overflowSplitButton"],descendants:!0,read:a.ElementRef},{propertyName:"overflowSplitButtonButtonList",first:!0,predicate:["overflowSplitButtonButtonList"],descendants:!0}],exportAs:["kendoToolBarSplitButton"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,components:[{type:c.SplitButtonComponent,selector:"kendo-splitbutton",inputs:["text","icon","iconClass","type","imageUrl","size","rounded","fillMode","themeColor","disabled","popupSettings","tabIndex","textField","data","buttonClass","arrowButtonClass","arrowButtonIcon"],outputs:["buttonClick","itemClick","focus","blur","open","close"],exportAs:["kendoSplitButton"]},{type:p,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:E,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSplitButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return E})}],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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],disabled:[{type:a.Input}],popupSettings:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],look:[{type:a.Input}],buttonClass:[{type:a.Input}],arrowButtonClass:[{type:a.Input}],arrowButtonIcon:[{type:a.Input}],textField:[{type:a.Input}],data:[{type:a.Input}],buttonClick:[{type:a.Output}],itemClick:[{type:a.Output}],open:[{type:a.Output}],close:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],toolbarSplitButton:[{type:a.ViewChild,args:["toolbarSplitButton",{static:!1}]}],overflowSplitButton:[{type:a.ViewChild,args:["overflowSplitButton",{read:a.ElementRef,static:!1}]}],overflowSplitButtonButtonList:[{type:a.ViewChild,args:["overflowSplitButtonButtonList",{static:!1}]}]}});f(ye,ve=h),ye.prototype.canFocus=function(){return!1},ye.prototype.focus=function(){},ye.prototype.handleKey=function(){return!1},ye.prototype.ngAfterViewInit=function(){this.popupTemplate||(this.popupTemplate=this.toolbarTemplate)};var ve,R=ye;function ye(){return ve.call(this)||this}R.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,deps:[],target:s.ɵɵFactoryTarget.Component}),R.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:R,selector:"kendo-toolbar-separator",providers:[{provide:h,useExisting:a.forwardRef(function(){return R})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"separator",first:!0,predicate:["separator"],descendants:!0}],exportAs:["kendoToolBarSeparator"],usesInheritance:!0,ngImport:s,template:'\n        <ng-template #toolbarTemplate>\n            <div class="k-separator"></div>\n        </ng-template>\n    ',isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSeparator",providers:[{provide:h,useExisting:a.forwardRef(function(){return R})}],selector:"kendo-toolbar-separator",template:'\n        <ng-template #toolbarTemplate>\n            <div class="k-separator"></div>\n        </ng-template>\n    '}]}],ctorParameters:function(){return[]},propDecorators:{toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],separator:[{type:a.ViewChild,args:["separator",{static:!1}]}]}});f(Ce,we=k),Object.defineProperty(Ce.prototype,"override",{get:function(){return!0},enumerable:!1,configurable:!0});var we,N=Ce;function Ce(e){var t=we.call(this)||this;return t.service=e,t}N.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:N,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),N.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:N,selector:"kendo-toolbar-messages",providers:[{provide:k,useExisting:a.forwardRef(function(){return N})}],usesInheritance:!0,ngImport:s,template:"",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:N,decorators:[{type:a.Component,args:[{providers:[{provide:k,useExisting:a.forwardRef(function(){return N})}],selector:"kendo-toolbar-messages",template:""}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});t=[h,B,S,D,E,R],c=[w,p,N,x],u=function(){};u.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,deps:[],target:s.ɵɵFactoryTarget.NgModule}),u.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,declarations:[T,h,B,S,D,E,R,w,p,N,x],imports:[j.CommonModule,o.ButtonsModule,V.PopupModule,n.ResizeSensorModule],exports:[T,h,B,S,D,E,R,N,x]}),u.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,imports:[[j.CommonModule,o.ButtonsModule,V.PopupModule,n.ResizeSensorModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,decorators:[{type:a.NgModule,args:[{declarations:[T,t,c],exports:[T,t,N,x],imports:[j.CommonModule,o.ButtonsModule,V.PopupModule,n.ResizeSensorModule]}]}]}),e.LocalizedToolbarMessagesDirective=x,e.ToolBarButtonComponent=B,e.ToolBarButtonGroupComponent=S,e.ToolBarComponent=T,e.ToolBarDropDownButtonComponent=D,e.ToolBarModule=u,e.ToolBarSeparatorComponent=R,e.ToolBarSplitButtonComponent=E,e.ToolBarToolComponent=h,e.ToolbarCustomMessagesComponent=N,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@progress/kendo-angular-common"),require("rxjs"),require("@progress/kendo-angular-popup"),require("@angular/common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularToolbar",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","rxjs/operators","@progress/kendo-angular-common","rxjs","@progress/kendo-angular-popup","@angular/common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularToolbar={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.rxjs.operators,e.KendoAngularCommon,e.rxjs,e.KendoAngularPopup,e.ng.common,e.KendoAngularButtons)}(this,function(e,a,t,z,r,o,A,V,j,n){"use strict";function i(o){if(o&&o.__esModule)return o;var n=Object.create(null);return o&&Object.keys(o).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(o,e),Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:function(){return o[e]}}))}),n.default=o,Object.freeze(n)}var s=i(a),l=i(t),p=i(o),U=i(V),u=i(j),c=i(n),$={name:"@progress/kendo-angular-toolbar",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1650441416,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"},d=(L.prototype.refresh=function(e){this.onRefresh.emit(e)},L);function L(){this.onRefresh=new a.EventEmitter}d.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,deps:[],target:s.ɵɵFactoryTarget.Injectable}),d.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:d,decorators:[{type:a.Injectable}]});var K=function(e,t){return(K=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])})(e,t)};function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function o(){this.constructor=e}K(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}Object.create;function _(e,t){var o="function"==typeof Symbol&&e[Symbol.iterator];if(!o)return e;var n,i,r=o.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(n=r.next()).done;)s.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(o=r.return)&&o.call(r)}finally{if(i)throw i.error}}return s}function G(e,t,o){if(o||2===arguments.length)for(var n,i=0,r=t.length;i<r;i++)!n&&i in t||((n=n||Array.prototype.slice.call(t,0,i))[i]=t[i]);return e.concat(n||Array.prototype.slice.call(t))}Object.create;var H=/^(?:a|input|select|textarea|button|object)$/i;function q(e){var t=e.offsetWidth,e=getComputedStyle(e);return t+=parseFloat(e.marginLeft)||0+parseFloat(e.marginRight)||0}function W(e,t){var o,n;return void 0===t&&(t=!0),!!e.tagName&&(o=e.tagName.toLowerCase(),n=null!==e.getAttribute("tabIndex"),(n=H.test(o)?!e.disabled:n)&&(!t||ne(e)))}function Q(e,t,o){void 0===t&&(t=!0);for(var n=o?e.prevSibling:e.nextSibling;n;){if(1===n.nodeType){var i=ie(n,function(e){return W(e,t)});if(i)return i}n=o?n.prevSibling:n.nextSibling}}function Z(e){return null!=e}function X(t){return function(e){return Z(t[e])}}function J(e,o,n){return function(t){switch(t.type){case"keydown":if(t.keyCode===e)return n.length-1;if(t.keyCode===o)return 0;break;case"click":return n.findIndex(function(e){return e===t.target||e.contains(t.target)});default:return 0}}}function Y(o,n,i){return function(e,t){switch(t.keyCode){case o:return i(e-1)?e-1:e;case n:return i(e+1)?e+1:e;default:return e}}}function ee(t){return function(e){return t===e}}function te(t){return void 0===t&&(t=!1),function(e){return(e=void 0===e?!0:e)?o.Keys.ArrowDown:t?o.Keys.ArrowLeft:o.Keys.ArrowRight}}function oe(t){return void 0===t&&(t=!1),function(e){return(e=void 0===e?!0:e)?o.Keys.ArrowUp:t?o.Keys.ArrowRight:o.Keys.ArrowLeft}}function b(e,t,o){switch(t){case"toolbar":return o?void 0:e;case"overflow":return o?e:void 0;default:return e}}var ne=function(e){var t=e.getBoundingClientRect(),o=0<t.width&&0<t.height,t=0!==t.x&&0!==t.y;return(o||t)&&"hidden"!==window.getComputedStyle(e).visibility},ie=function(e,t,o){if(void 0===o&&(o=!0),e){if(o&&t(e))return e;for(e=e.firstChild;e;){if(1===e.nodeType){var n=ie(e,t);if(n)return n}e=e.nextSibling}}},g=(m.prototype.setRenderedTools=function(e){this.renderedTools=G([],_(e))},m.prototype.click=function(e){var t=e.context,e=e.event;this.focused.renderedTool!==t&&e&&this.focus(t,e)},m.prototype.moveFocusToToolBar=function(){this.isPopupFocused=!1,this.focusOverflowButton()},m.prototype.moveFocusToPopup=function(){this.isPopupFocused=!0,this.blurOverflowButton(),this.focus()},m.prototype.focusNext=function(e){var t;this.isOverflowButtonFocused||!this.focused.renderedTool||this.focused.renderedTool.tool.handleKey(e)||((t=this.getFocusableTools().slice(this.focused.index+1)[0])?this.focus(t,e):this.isOverflowButtonVisible()&&!this.isPopupFocused&&this.focusOverflowButton())},m.prototype.focusPrev=function(e){var t;this.isOverflowButtonFocused?(t=this.getFocusableTools().reverse()[0],this.focus(t,e)):this.focused.renderedTool&&!this.focused.renderedTool.tool.handleKey(e)&&(t=this.getFocusableTools().slice(0,this.focused.index).reverse()[0])&&this.focus(t,e)},m.prototype.resetNavigation=function(){this.blurOverflowButton(),this.focused.renderedTool=null,this.focused.index=-1},m.prototype.focusFirst=function(e){var t=this.getFocusableTools()[0],o=this.overflowButton;t?(this.focused.renderedTool=t,this.focused.index=this.getFocusableTools().findIndex(function(e){return e===t}),this.focus(t,e)):o&&o.nativeElement.focus()},m.prototype.getFocusableTools=function(){var t=this;return this.renderedTools.filter(function(e){return e.tool.overflows===t.isPopupFocused&&e.tool.canFocus()})},m.prototype.focus=function(o,n){var i=this;this.zone.onStable.pipe(r.take(1)).subscribe(function(){var e,t;o?o.tool.canFocus&&o.tool.canFocus()&&(i.focused.renderedTool=o,i.focused.index=i.getFocusableTools().findIndex(function(e){return e===o}),o.tool.focus(n),i.blurOverflowButton()):(e=i.getFocusableTools(),(t=e.find(function(e){return e===i.focused.renderedTool})||e[0])&&(i.focused.renderedTool=t,i.focused.index=i.getFocusableTools().findIndex(function(e){return e===t}),t.tool.focus(n)))})},m.prototype.blurOverflowButton=function(){this.overflowButton&&(this.isOverflowButtonFocused=!1,this.overflowButton.nativeElement.tabIndex=-1)},m.prototype.focusOverflowButton=function(){this.isOverflowButtonFocused=!0,this.overflowButton.nativeElement.tabIndex=0,this.overflowButton.nativeElement.focus()},m.prototype.isOverflowButtonVisible=function(){return Z(this.overflowButton)&&"visible"===window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue("visibility")},m);function m(e){this.zone=e,this.focused={renderedTool:null,index:-1},this.renderedTools=[],this.isPopupFocused=!1,this.isOverflowButtonFocused=!1}g.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:g,deps:[{token:s.NgZone}],target:s.ɵɵFactoryTarget.Injectable}),g.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:g}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:g,decorators:[{type:a.Injectable}],ctorParameters:function(){return[{type:s.NgZone}]}});Object.defineProperty(re.prototype,"toolbarDisplay",{get:function(){return this.overflows?"none":"inline-block"},enumerable:!1,configurable:!0}),Object.defineProperty(re.prototype,"overflowDisplay",{get:function(){return this.overflows?"block":"none"},enumerable:!1,configurable:!0}),re.prototype.canFocus=function(){return!1},re.prototype.focus=function(e){},re.prototype.handleKey=function(e){return!1};var h=re;function re(){this.tabIndex=-1,this.overflows=!0,this.responsive=!0}h.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,deps:[],target:s.ɵɵFactoryTarget.Component}),h.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"toolbar-tool",inputs:{responsive:"responsive"},ngImport:s,template:"",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:h,decorators:[{type:a.Component,args:[{selector:"toolbar-tool",template:""}]}],propDecorators:{responsive:[{type:a.Input}]}});le.prototype.preventDefault=function(){this.prevented=!0},le.prototype.isDefaultPrevented=function(){return this.prevented};var se=le;function le(){this.prevented=!1}y.prototype.getElement=function(){return this.element.nativeElement},y.prototype.querySelector=function(e){return this.element.nativeElement.querySelector(e)},y.prototype.querySelectorAll=function(e){return this.element.nativeElement.querySelectorAll(e)},y.prototype.findFocusable=function(){return e=this.element.nativeElement,void 0===(t=!1)&&(t=!0),ie(e,function(e){return W(e,t)});var e,t},y.prototype.findFocusableChild=function(e){return e=e||this.findFocusable(),void 0===(t=!1)&&(t=!0),ie(e,function(e){return W(e,t)},!1);var t},y.prototype.findNextFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1)},y.prototype.findPrevFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1,!0)},y.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var v=y;function y(){}v.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,deps:[],target:s.ɵɵFactoryTarget.Injectable}),v.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:v,decorators:[{type:a.Injectable}]});C.prototype.onClick=function(e){this.rendererClick.emit({context:this,event:e})},C.prototype.ngOnInit=function(){this.resizable?("toolbar"===this.location?(this.template=this.tool.toolbarTemplate,this.renderer.setStyle(this.element.nativeElement,"visibility","hidden")):this.template=this.tool.popupTemplate,this.renderer.setStyle(this.element.nativeElement,"display","none")):(this.tool.overflows=!1,this.template=this.tool.toolbarTemplate,this.renderer.setStyle(this.element.nativeElement,"visibility","display"),this.renderer.setStyle(this.element.nativeElement,"display","inline-block"))},C.prototype.ngOnDestroy=function(){this.refreshSubscription.unsubscribe()},C.prototype.ngAfterViewInit=function(){this.resizable&&this.refresh()},Object.defineProperty(C.prototype,"width",{get:function(){return this.tool.overflows?0:q(this.element.nativeElement)},enumerable:!1,configurable:!0}),C.prototype.isDisplayed=function(){return"none"!==this.element.nativeElement.style.display},C.prototype.refresh=function(){this.resizable&&("toolbar"===this.location?(this.renderer.setStyle(this.element.nativeElement,"visibility",this.tool.visibility),this.renderer.setStyle(this.element.nativeElement,"display",this.tool.toolbarDisplay)):this.renderer.setStyle(this.element.nativeElement,"display",this.tool.overflowDisplay))},C.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var w=C;function C(e,t,o,n){var i=this;this.element=e,this.renderer=t,this.rendererService=o,this.refreshService=n,this.rendererClick=new a.EventEmitter,this.rendererService.element=e,(this.rendererService.renderer=this).refreshSubscription=this.refreshService.onRefresh.subscribe(function(e){i.tool===e&&i.refresh()})}w.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,deps:[{token:s.ElementRef},{token:s.Renderer2},{token:v},{token:d}],target:s.ɵɵFactoryTarget.Component}),w.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"kendo-toolbar-renderer",inputs:{tool:"tool",location:"location",resizable:"resizable"},outputs:{rendererClick:"rendererClick"},host:{listeners:{click:"onClick($event)"}},providers:[v],exportAs:["kendoToolBarRenderer"],ngImport:s,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    ',isInline:!0,directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:u.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarRenderer",providers:[v],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    '}]}],ctorParameters:function(){return[{type:s.ElementRef},{type:s.Renderer2},{type:v},{type:d}]},propDecorators:{tool:[{type:a.Input}],location:[{type:a.Input}],resizable:[{type:a.Input}],rendererClick:[{type:a.Output}],onClick:[{type:a.HostListener,args:["click",["$event"]]}]}});f(pe,ae=t.ComponentMessages);var ae,k=pe;function pe(){return null!==ae&&ae.apply(this,arguments)||this}k.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,deps:null,target:s.ɵɵFactoryTarget.Directive}),k.ɵdir=s.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"kendo-toolbar-messages-base",inputs:{moreToolsTitle:"moreToolsTitle"},usesInheritance:!0,ngImport:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,decorators:[{type:a.Directive,args:[{selector:"kendo-toolbar-messages-base"}]}],propDecorators:{moreToolsTitle:[{type:a.Input}]}});f(ce,ue=k);var ue,x=ce;function ce(e){var t=ue.call(this)||this;return t.service=e,t}x.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:x,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Directive}),x.ɵdir=s.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:x,selector:"[kendoToolbarLocalizedMessages]",providers:[{provide:k,useExisting:a.forwardRef(function(){return x})}],usesInheritance:!0,ngImport:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:x,decorators:[{type:a.Directive,args:[{providers:[{provide:k,useExisting:a.forwardRef(function(){return x})}],selector:"[kendoToolbarLocalizedMessages]"}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});function de(e){return{animate:!0,anchorAlign:{horizontal:e?"left":"right",vertical:"bottom"},popupAlign:{horizontal:e?"left":"right",vertical:"top"}}}Object.defineProperty(I.prototype,"resizable",{get:function(){return this.overflow},set:function(e){this.overflow=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupSettings",{get:function(){return this._popupSettings||de(this.localization.rtl)},set:function(e){this._popupSettings=Object.assign({},de(this.localization.rtl),e)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"tabIndex",{get:function(){return this.tabindex},set:function(e){this.tabindex=e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"appendTo",{get:function(){var e=this.popupSettings.appendTo;if(e&&"root"!==e)return"component"===e?this.container:e},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupOpen",{get:function(){return this._open},set:function(e){var t;this.popupOpen!==e&&(t=new se,(e?this.open:this.close).emit(t),t.isDefaultPrevented()||this.toggle(e))},enumerable:!1,configurable:!0}),I.prototype.onFocus=function(e){this.navigationService.resetNavigation(),this.navigationService.focusFirst(e),this.element.nativeElement.setAttribute("tabindex","-1")},I.prototype.onFocusOut=function(e){var t=this;!function(e,t){for(;e&&!t(e);)e=e.parentNode;return e}(e.relatedTarget,function(e){return e===t.element.nativeElement})?this.element.nativeElement.setAttribute("tabindex",this.tabindex.toString()):this.element.nativeElement.setAttribute("tabindex","-1")},Object.defineProperty(I.prototype,"getRole",{get:function(){return"toolbar"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"getDir",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"resizableClass",{get:function(){return this.overflow},enumerable:!1,configurable:!0}),I.prototype.ngAfterViewInit=function(){var t=this;this.element.nativeElement.getAttribute("tabindex")||this.element.nativeElement.setAttribute("tabindex","0"),this.zone.runOutsideAngular(function(){t.toolbarKeydownListener=t.renderer.listen(t.element.nativeElement,"keydown",function(e){switch(e.keyCode){case o.Keys.ArrowLeft:t.zone.run(function(){e.preventDefault(),"ltr"===t.direction?t.navigationService.focusPrev(e):t.navigationService.focusNext(e),t.element.nativeElement.setAttribute("tabindex","-1")});break;case o.Keys.ArrowRight:t.zone.run(function(){e.preventDefault(),"ltr"===t.direction?t.navigationService.focusNext(e):t.navigationService.focusPrev(e),t.element.nativeElement.setAttribute("tabindex","-1")});break;case o.Keys.Tab:t.zone.run(function(){return t.navigationService.resetNavigation()});break;case o.Keys.Escape:t.zone.run(function(){return t.toggle(!1)})}})}),this.overflow&&(this.subscriptions.add(A.merge(this.resizeSensor.resize,this.renderedTools.changes).subscribe(function(){t.onResize()})),this.zone.runOutsideAngular(function(){return setTimeout(function(){t.onResize(),t.onResize()})}),this.navigationService.overflowButton=this.overflowButton),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.subscriptions.add(this.renderedTools.changes.subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}))},I.prototype.ngOnInit=function(){var t=this;this.subscriptions.add(this.localization.changes.subscribe(function(e){e=e.rtl;return t.direction=e?"rtl":"ltr"})),o.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){return t.subscriptions.add(A.fromEvent(document,"click").pipe(r.filter(function(){return!!t.popupRef}),r.filter(function(e){return!t.popupRef.popup.instance.container.nativeElement.contains(e.target)}),r.filter(function(e){return!t.overflowButton.nativeElement.contains(e.target)})).subscribe(function(){t.zone.run(function(){t.popupOpen=!1})}))})},I.prototype.ngOnChanges=function(e){e.tabindex&&this.element.nativeElement.setAttribute("tabindex",e.tabindex.currentValue.toString())},I.prototype.ngOnDestroy=function(){this.destroyPopup(),this.toolbarKeydownListener&&this.toolbarKeydownListener(),this.cancelRenderedToolsSubscription$.next(),this.subscriptions.unsubscribe()},Object.defineProperty(I.prototype,"moreToolsTitle",{get:function(){return this.localization.get("moreToolsTitle")},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"cdr",{get:function(){return this._cdr},enumerable:!1,configurable:!0}),I.prototype.onRendererClick=function(e){this.navigationService.click(e),this.element.nativeElement.setAttribute("tabindex","-1")},I.prototype.showPopup=function(){this.popupOpen=!this.popupOpen,this.navigationService.click({context:void 0,event:void 0})},I.prototype.toggle=function(e){this._open=void 0!==e?e:!this.popupOpen,this.popupRef&&(this.popupRef.close(),this.popupRef=null),this.popupOpen&&(this.popupRef=this.popupService.open({anchor:this.overflowButton,anchorAlign:this.popupSettings.anchorAlign,popupAlign:this.popupSettings.popupAlign,content:this.popupTemplate,appendTo:this.appendTo,animate:this.popupSettings.animate,popupClass:this.popupSettings.popupClass,positionMode:"absolute"}),this.setPopupContentDimensions(),this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this))),this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this))))},I.prototype.onResize=function(){var e,t;o.isDocumentAvailable()&&(e=this.element.nativeElement,t=e.offsetWidth,e=getComputedStyle(e),t=(t-=parseFloat(e.paddingLeft)||0+parseFloat(e.borderLeftWidth)||0)-(parseFloat(e.paddingRight)||0+parseFloat(e.borderRightWidth)||0)-this.overflowAnchorWidth,this.shrink(t,this.childrenWidth),this.stretch(t,this.childrenWidth),this.displayAnchor(),this.resizeSensor.acceptSize())},I.prototype.onPopupOpen=function(){var t=this;this.zone.runOutsideAngular(function(){t.overflowKeydownListener=t.renderer.listen(t.popupRef.popupElement,"keydown",function(e){switch(e.keyCode){case o.Keys.ArrowUp:t.zone.run(function(){e.preventDefault(),t.navigationService.focusPrev(e)});break;case o.Keys.ArrowDown:t.zone.run(function(){e.preventDefault(),t.navigationService.focusNext(e)});break;case o.Keys.Escape:t.zone.run(function(){return t.toggle(!1)});break;case o.Keys.Tab:t.zone.run(function(){t.toggle(!1),t.navigationService.resetNavigation()})}})}),this.cancelRenderedToolsSubscription$.next(),this.navigationService.moveFocusToPopup(),this.navigationService.setRenderedTools(this.overflowRenderedTools.toArray()),this.overflowRenderedTools.changes.pipe(r.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())})},I.prototype.onPopupClose=function(){var t=this;this.cancelRenderedToolsSubscription$.next(),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.renderedTools.changes.pipe(r.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}),this.navigationService.moveFocusToToolBar(),this.overflowKeydownListener&&this.overflowKeydownListener()},I.prototype.displayAnchor=function(){var e=0<this.allTools.filter(function(e){return e.overflows&&e.responsive}).length?"visible":"hidden";this.renderer.setStyle(this.overflowButton.nativeElement,"visibility",e)},Object.defineProperty(I.prototype,"popupWidth",{get:function(){return this.popupSettings&&this.popupSettings.width?isNaN(this.popupSettings.width)?this.popupSettings.width:this.popupSettings.width+"px":"150px"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"popupHeight",{get:function(){if(this.popupSettings&&this.popupSettings.height)return isNaN(this.popupSettings.height)?this.popupSettings.height:this.popupSettings.height+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"overflowAnchorWidth",{get:function(){return this.overflow?(this.cachedOverflowAnchorWidth||(this.cachedOverflowAnchorWidth=q(this.overflowButton.nativeElement)),this.cachedOverflowAnchorWidth):0},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"gap",{get:function(){if(Z(this.cachedGap))return this.cachedGap;var e=getComputedStyle(this.element.nativeElement).gap;return this.cachedGap=Z(e)?parseInt(e,10):0,this.cachedGap},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"childrenWidth",{get:function(){var o=this,e=this.renderedTools.reduce(function(e,t){return t.width+e+(t.isDisplayed()?o.gap:0)},0);return Math.ceil(e)},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"visibleTools",{get:function(){return this.allTools.filter(function(e){return!1===e.overflows})},enumerable:!1,configurable:!0}),Object.defineProperty(I.prototype,"overflowTools",{get:function(){return this.allTools.filter(function(e){return!0===e.overflows})},enumerable:!1,configurable:!0}),I.prototype.shrink=function(e,t){if(e<t)for(var o=this.visibleTools.length-1;0<=o&&!(t<e);o--)t-=this.hideLastVisibleTool()},I.prototype.stretch=function(e,t){var o;if(t<e)for(var n=this.overflowTools.length-1;0<=n&&(o=this.showFirstHiddenTool(e,t));n--)t+=o},I.prototype.hideLastVisibleTool=function(){var t=this.visibleTools[this.visibleTools.length-1],e=this.renderedTools.find(function(e){return e.tool===t}).width;return t.overflows=!0,this.refreshService.refresh(t),e},I.prototype.showFirstHiddenTool=function(e,t){var o=this.overflowTools[0],n=this.renderedTools.find(function(e){return e.tool===o});return o.overflows=!1,o.visibility="hidden",this.refreshService.refresh(o),e>t+n.width?o.visibility="visible":o.overflows=!0,this.refreshService.refresh(o),n.width},I.prototype.setPopupContentDimensions=function(){var e=this.popupRef.popup.instance.contentContainer.nativeElement;e.style.width=this.popupWidth,e.style.height=this.popupHeight,e.style.overflow="auto"},I.prototype.destroyPopup=function(){this.popupRef&&(this.popupSubs.unsubscribe(),this.popupRef.close(),this.popupRef=null)};var T=I;function I(e,t,o,n,i,r,s,l){this.localization=e,this.popupService=t,this.refreshService=o,this.navigationService=n,this.element=i,this.zone=r,this.renderer=s,this._cdr=l,this.overflow=!1,this.tabindex=0,this.open=new a.EventEmitter,this.close=new a.EventEmitter,this.hostClasses=!0,this.cancelRenderedToolsSubscription$=new A.Subject,this.subscriptions=new A.Subscription,this.popupSubs=new A.Subscription,z.validatePackage($),this.direction=e.rtl?"rtl":"ltr"}T.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:T,deps:[{token:l.LocalizationService},{token:U.PopupService},{token:d},{token:g},{token:s.ElementRef},{token:s.NgZone},{token:s.Renderer2},{token:s.ChangeDetectorRef}],target:s.ɵɵFactoryTarget.Component}),T.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:T,selector:"kendo-toolbar",inputs:{overflow:"overflow",resizable:"resizable",popupSettings:"popupSettings",tabindex:"tabindex",tabIndex:"tabIndex"},outputs:{open:"open",close:"close"},host:{listeners:{focus:"onFocus($event)",focusout:"onFocusOut($event)"},properties:{"class.k-widget":"this.hostClasses","class.k-toolbar":"this.hostClasses","attr.role":"this.getRole","attr.dir":"this.getDir","class.k-toolbar-resizable":"this.resizableClass"}},providers:[d,g,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.toolbar"}],queries:[{propertyName:"allTools",predicate:h}],viewQueries:[{propertyName:"overflowButton",first:!0,predicate:["overflowButton"],descendants:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"resizeSensor",first:!0,predicate:["resizeSensor"],descendants:!0},{propertyName:"container",first:!0,predicate:["container"],descendants:!0,read:a.ViewContainerRef,static:!0},{propertyName:"renderedTools",predicate:["toolbarRenderer"],descendants:!0},{propertyName:"overflowRenderedTools",predicate:["overflowRenderer"],descendants:!0}],exportAs:["kendoToolBar"],usesOnChanges:!0,ngImport:s,template:'\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"\n        moreToolsTitle="More tools"\n        >\n        </ng-container>\n        <ng-container *ngFor="let tool of allTools; let index = index">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)="onRendererClick($event)"\n                [location]="\'toolbar\'"\n                [resizable]="overflow"\n                [tool]="tool"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type="button"\n            tabindex="-1"\n            [title]="moreToolsTitle"\n            [attr.aria-label]="moreToolsTitle"\n            *ngIf="overflow"\n            [style.visibility]="\'hidden\'"\n            class="k-overflow-anchor k-button"\n            (click)="showPopup()"\n        >\n            <span class="k-icon k-i-more-vertical"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class="k-overflow-container k-list-container k-reset">\n                <ng-container *ngFor="let tool of allTools; let index = index">\n                    <li class="k-item">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)="onRendererClick($event)"\n                            [location]="\'overflow\'"\n                            [resizable]="overflow"\n                            [tool]="tool"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>\n    ',isInline:!0,components:[{type:w,selector:"kendo-toolbar-renderer",inputs:["tool","location","resizable"],outputs:["rendererClick"],exportAs:["kendoToolBarRenderer"]},{type:p.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:x,selector:"[kendoToolbarLocalizedMessages]"},{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:T,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBar",providers:[d,g,t.LocalizationService,{provide:t.L10N_PREFIX,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" #resizeSensor></kendo-resize-sensor>\n    '}]}],ctorParameters:function(){return[{type:l.LocalizationService},{type:U.PopupService},{type:d},{type:g},{type:s.ElementRef},{type:s.NgZone},{type:s.Renderer2},{type:s.ChangeDetectorRef}]},propDecorators:{overflow:[{type:a.Input}],resizable:[{type:a.Input}],popupSettings:[{type:a.Input}],tabindex:[{type:a.Input}],tabIndex:[{type:a.Input,args:["tabIndex"]}],open:[{type:a.Output}],close:[{type:a.Output}],allTools:[{type:a.ContentChildren,args:[h]}],overflowButton:[{type:a.ViewChild,args:["overflowButton",{static:!1}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],resizeSensor:[{type:a.ViewChild,args:["resizeSensor",{static:!1}]}],container:[{type:a.ViewChild,args:["container",{read:a.ViewContainerRef,static:!0}]}],renderedTools:[{type:a.ViewChildren,args:["toolbarRenderer"]}],overflowRenderedTools:[{type:a.ViewChildren,args:["overflowRenderer"]}],hostClasses:[{type:a.HostBinding,args:["class.k-widget"]},{type:a.HostBinding,args:["class.k-toolbar"]}],onFocus:[{type:a.HostListener,args:["focus",["$event"]]}],onFocusOut:[{type:a.HostListener,args:["focusout",["$event"]]}],getRole:[{type:a.HostBinding,args:["attr.role"]}],getDir:[{type:a.HostBinding,args:["attr.dir"]}],resizableClass:[{type:a.HostBinding,args:["class.k-toolbar-resizable"]}]}});f(O,fe=h),Object.defineProperty(O.prototype,"text",{set:function(e){this.toolbarOptions.text=b(e,this.showText,!1),this.overflowOptions.text=b(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"togglable",{get:function(){return this.toggleable},set:function(e){this.toggleable=e},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"icon",{set:function(e){this.toolbarOptions.icon=b(e,this.showIcon,!1),this.overflowOptions.icon=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=b(e,this.showIcon,!1),this.overflowOptions.iconClass=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(O.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=b(e,this.showIcon,!1),this.overflowOptions.imageUrl=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),O.prototype.onBlur=function(){this.getButton().tabIndex=-1},O.prototype.canFocus=function(){return!this.disabled},O.prototype.focus=function(e){e&&"focus"!==e.type&&"keydown"!==e.type||this.getButton().focus(),this.getButton().tabIndex=0},O.prototype.handleKey=function(){return!(this.getButton().tabIndex=-1)},O.prototype.getButton=function(){return(this.overflows?this.overflowButtonElement:this.toolbarButtonElement).nativeElement};var fe,B=O;function O(){var e=fe.call(this)||this;return e.showText="both",e.showIcon="both",e.toggleable=!1,e.selected=!1,e.fillMode="solid",e.themeColor="base",e.click=new a.EventEmitter,e.pointerdown=new a.EventEmitter,e.selectedChange=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e}B.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:B,deps:[],target:s.ɵɵFactoryTarget.Component}),B.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:B,selector:"kendo-toolbar-button",inputs:{showText:"showText",showIcon:"showIcon",text:"text",style:"style",className:"className",title:"title",disabled:"disabled",toggleable:"toggleable",look:"look",togglable:"togglable",selected:"selected",fillMode:"fillMode",themeColor:"themeColor",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl"},outputs:{click:"click",pointerdown:"pointerdown",selectedChange:"selectedChange"},providers:[{provide:h,useExisting:a.forwardRef(function(){return B})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarButtonElement",first:!0,predicate:["toolbarButton"],descendants:!0,read:a.ElementRef},{propertyName:"overflowButtonElement",first:!0,predicate:["overflowButton"],descendants:!0,read:a.ElementRef}],exportAs:["kendoToolBarButton"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:B,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return B})}],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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],style:[{type:a.Input}],className:[{type:a.Input}],title:[{type:a.Input}],disabled:[{type:a.Input}],toggleable:[{type:a.Input}],look:[{type:a.Input}],togglable:[{type:a.Input}],selected:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],click:[{type:a.Output}],pointerdown:[{type:a.Output}],selectedChange:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],toolbarButtonElement:[{type:a.ViewChild,args:["toolbarButton",{read:a.ElementRef,static:!1}]}],overflowButtonElement:[{type:a.ViewChild,args:["overflowButton",{read:a.ElementRef,static:!1}]}]}});f(F,be=h),Object.defineProperty(F.prototype,"look",{set:function(t){t&&this.buttonComponents.forEach(function(e){return e.fillMode="default"===t?"solid":t})},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"buttonElements",{get:function(){return this.getButtonGroup().buttons.filter(function(e){return!e.isDisabled}).map(function(e){return e.element})},enumerable:!1,configurable:!0}),F.prototype.onFocus=function(){this.focusedIndex=0},F.prototype.onNavigate=function(e){e.preventDefault()},F.prototype.selectedChangeHandler=function(e,t){t.selected=e,t.selectedChange.emit(e)},F.prototype.onButtonClick=function(t){this.focusedIndex=this.buttonElements.findIndex(function(e){return e===t.target||e.contains(t.target)}),this.focusButton(this.focusedIndex,t)},F.prototype.canFocus=function(){return!(this.disabled||0===this.buttonElements.length)},F.prototype.focus=function(e){void 0===e&&(e={});var t=this.getNextKey(this.overflows),o=this.getPrevKey(this.overflows);this.focusedIndex=J(o,t,this.buttonElements)(e),this.focusButton(this.focusedIndex,e)},F.prototype.handleKey=function(e){var t=this.getNextKey(this.overflows),o=this.getPrevKey(this.overflows),n=X(this.buttonElements),i=ee(this.focusedIndex);return this.focusedIndex=Y(o,t,n)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!i(this.focusedIndex)},F.prototype.getButtonGroup=function(){return this.overflows?this.overflowButtonGroup:this.toolbarButtonGroup},F.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.buttonElements[e].focus()};var be,S=F;function F(e){var t=be.call(this)||this;return t.localization=e,t.selection="multiple",t.focusedIndex=-1,t.getNextKey=te(t.localization.rtl),t.getPrevKey=oe(t.localization.rtl),t}S.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),S.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"kendo-toolbar-buttongroup",inputs:{disabled:"disabled",selection:"selection",width:"width",look:"look"},providers:[t.LocalizationService,{provide:h,useExisting:a.forwardRef(function(){return S})}],queries:[{propertyName:"buttonComponents",predicate:s.forwardRef(function(){return B})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarButtonGroup",first:!0,predicate:["toolbarButtonGroup"],descendants:!0},{propertyName:"overflowButtonGroup",first:!0,predicate:["overflowButtonGroup"],descendants:!0}],exportAs:["kendoToolBarButtonGroup"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,components:[{type:c.ButtonGroupComponent,selector:"kendo-buttongroup",inputs:["disabled","selection","width","tabIndex"],outputs:["navigate"],exportAs:["kendoButtonGroup"]}],directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButtonGroup",providers:[t.LocalizationService,{provide:h,useExisting:a.forwardRef(function(){return S})}],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    '}]}],ctorParameters:function(){return[{type:l.LocalizationService}]},propDecorators:{disabled:[{type:a.Input}],selection:[{type:a.Input}],width:[{type:a.Input}],look:[{type:a.Input}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],buttonComponents:[{type:a.ContentChildren,args:[a.forwardRef(function(){return B})]}],toolbarButtonGroup:[{type:a.ViewChild,args:["toolbarButtonGroup",{static:!1}]}],overflowButtonGroup:[{type:a.ViewChild,args:["overflowButtonGroup",{static:!1}]}]}});ge.prototype.getText=function(e){if(e)return this.textField?e[this.textField]:e.text||e},ge.prototype.onClick=function(e,t){t=this.data[t];e.click&&e.click(t),this.itemClick.emit(t)};p=ge;function ge(){this.disabled=!1,this.fillMode="solid",this.themeColor="base",this.itemClick=new a.EventEmitter}p.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,deps:[],target:s.ɵɵFactoryTarget.Component}),p.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:p,selector:"kendo-toolbar-buttonlist",inputs:{data:"data",textField:"textField",disabled:"disabled",fillMode:"fillMode",themeColor:"themeColor"},outputs:{itemClick:"itemClick"},viewQueries:[{propertyName:"buttons",predicate:["button"],descendants:!0}],ngImport:s,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    ',isInline:!0,directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,decorators:[{type:a.Component,args:[{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    '}]}],propDecorators:{data:[{type:a.Input}],textField:[{type:a.Input}],disabled:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],itemClick:[{type:a.Output}],buttons:[{type:a.ViewChildren,args:["button"]}]}});f(M,me=h),Object.defineProperty(M.prototype,"text",{set:function(e){this.toolbarOptions.text=b(e,this.showText,!1),this.overflowOptions.text=b(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"icon",{set:function(e){this.toolbarOptions.icon=b(e,this.showIcon,!1),this.overflowOptions.icon=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=b(e,this.showIcon,!1),this.overflowOptions.iconClass=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=b(e,this.showIcon,!1),this.overflowOptions.imageUrl=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"popupSettings",{get:function(){return this._popupSettings},set:function(e){this._popupSettings=Object.assign({animate:!0,popupClass:""},e)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"primary",{set:function(e){this.themeColor=e?"primary":"base"},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(M.prototype,"overflowButtons",{get:function(){return G([],_(this.overflowDropDownButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),M.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowDropDownButtonButtonList.buttons.toArray().findIndex(function(e){return e.nativeElement.contains(t.target)})},M.prototype.canFocus=function(){return!this.disabled},M.prototype.focus=function(e){void 0===e&&(e={}),this.overflows?0<this.overflowButtons.length&&(this.focusedIndex=J(this.getPrevKey(),this.getNextKey(),this.overflowButtons.map(function(e){return e.nativeElement}))(e),this.focusButton(this.focusedIndex,e)):"focus"!==e.type&&"keydown"!==e.type||this.toolbarDropDownButton.focus()},M.prototype.handleKey=function(e){return!!(this.overflows||e.keyCode!==this.getPrevKey(this.overflows)&&e.keyCode!==this.getNextKey(this.overflows))&&(this.overflows?(t=X(this.overflowButtons),o=ee(this.focusedIndex),this.focusedIndex=Y(this.getPrevKey(),this.getNextKey(),t)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!o(this.focusedIndex)):void 0);var t,o},M.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.overflowButtons[e].nativeElement.focus()};var me,D=M;function M(){var e=me.call(this)||this;return e.showText="both",e.showIcon="both",e.fillMode="solid",e.themeColor="base",e.itemClick=new a.EventEmitter,e.open=new a.EventEmitter,e.close=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e._popupSettings={animate:!0,popupClass:""},e.focusedIndex=-1,e.getNextKey=te(),e.getPrevKey=oe(),e}D.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,deps:[],target:s.ɵɵFactoryTarget.Component}),D.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:D,selector:"kendo-toolbar-dropdownbutton",inputs:{showText:"showText",showIcon:"showIcon",text:"text",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl",popupSettings:"popupSettings",look:"look",primary:"primary",fillMode:"fillMode",themeColor:"themeColor",buttonClass:"buttonClass",textField:"textField",disabled:"disabled",data:"data"},outputs:{itemClick:"itemClick",open:"open",close:"close"},providers:[{provide:h,useExisting:a.forwardRef(function(){return D})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"dropdownButton",first:!0,predicate:["dropdownButton"],descendants:!0,read:a.ElementRef,static:!0},{propertyName:"dropDownButtonComponent",first:!0,predicate:n.DropDownButtonComponent,descendants:!0},{propertyName:"toolbarDropDownButton",first:!0,predicate:["toolbarDropDownButton"],descendants:!0},{propertyName:"overflowDropDownButtonButtonList",first:!0,predicate:["overflowDropDownButtonButtonList"],descendants:!0}],exportAs:["kendoToolBarDropDownButton"],usesInheritance:!0,ngImport:s,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    ',isInline:!0,components:[{type:c.DropDownButtonComponent,selector:"kendo-dropdownbutton",inputs:["icon","iconClass","imageUrl","popupSettings","textField","disabled","data","size","rounded","fillMode","themeColor","buttonClass","tabIndex"],outputs:["itemClick","open","close","focus","blur"],exportAs:["kendoDropDownButton"]},{type:p,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:D,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarDropDownButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return D})}],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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],popupSettings:[{type:a.Input}],look:[{type:a.Input}],primary:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],buttonClass:[{type:a.Input}],textField:[{type:a.Input}],disabled:[{type:a.Input}],data:[{type:a.Input}],itemClick:[{type:a.Output}],open:[{type:a.Output}],close:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],dropdownButton:[{type:a.ViewChild,args:["dropdownButton",{read:a.ElementRef,static:!0}]}],dropDownButtonComponent:[{type:a.ViewChild,args:[n.DropDownButtonComponent,{static:!1}]}],toolbarDropDownButton:[{type:a.ViewChild,args:["toolbarDropDownButton",{static:!1}]}],overflowDropDownButtonButtonList:[{type:a.ViewChild,args:["overflowDropDownButtonButtonList",{static:!1}]}]}});f(P,he=h),Object.defineProperty(P.prototype,"text",{set:function(e){this.toolbarOptions.text=b(e,this.showText,!1),this.overflowOptions.text=b(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"icon",{set:function(e){this.toolbarOptions.icon=b(e,this.showIcon,!1),this.overflowOptions.icon=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=b(e,this.showIcon,!1),this.overflowOptions.iconClass=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=b(e,this.showIcon,!1),this.overflowOptions.imageUrl=b(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"popupSettings",{get:function(){return this._popupSettings||(this._popupSettings={animate:!0,popupClass:""}),this._popupSettings},set:function(e){this._popupSettings=e},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(P.prototype,"overflowButtons",{get:function(){return G([this.overflowSplitButton],_(this.overflowSplitButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),P.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowButtons.findIndex(function(e){return e.nativeElement.contains(t.target)})},P.prototype.onMainButtonClick=function(e){this.buttonClick.emit(e),this.focusedIndex=0},P.prototype.canFocus=function(){return!this.disabled},P.prototype.focus=function(e){void 0===e&&(e={}),this.overflows?0<this.overflowButtons.length&&(this.focusedIndex=J(this.getPrevKey(),this.getNextKey(),this.overflowButtons.map(function(e){return e.nativeElement}))(e),this.focusButton(this.focusedIndex,e)):"focus"!==e.type&&"keydown"!==e.type||this.toolbarSplitButton.focus()},P.prototype.handleKey=function(e){return!!(this.overflows||e.keyCode!==this.getPrevKey(this.overflows)&&e.keyCode!==this.getNextKey(this.overflows))&&(this.overflows?(t=X(this.overflowButtons),o=ee(this.focusedIndex),this.focusedIndex=Y(this.getPrevKey(),this.getNextKey(),t)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!o(this.focusedIndex)):void 0);var t,o},P.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type&&"click"!==t.type||this.overflowButtons[e].nativeElement.focus()};var he,E=P;function P(){var e=he.call(this)||this;return e.showText="both",e.showIcon="both",e.fillMode="solid",e.themeColor="base",e.arrowButtonIcon="arrow-s",e.textField="text",e.buttonClick=new a.EventEmitter,e.itemClick=new a.EventEmitter,e.open=new a.EventEmitter,e.close=new a.EventEmitter,e.toolbarOptions={text:"",icon:"",iconClass:"",imageUrl:""},e.overflowOptions={text:"",icon:"",iconClass:"",imageUrl:""},e._popupSettings={animate:!0,popupClass:""},e.focusedIndex=-1,e.getNextKey=te(),e.getPrevKey=oe(),e}E.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:E,deps:[],target:s.ɵɵFactoryTarget.Component}),E.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"kendo-toolbar-splitbutton",inputs:{showText:"showText",showIcon:"showIcon",text:"text",icon:"icon",iconClass:"iconClass",imageUrl:"imageUrl",disabled:"disabled",popupSettings:"popupSettings",fillMode:"fillMode",themeColor:"themeColor",look:"look",buttonClass:"buttonClass",arrowButtonClass:"arrowButtonClass",arrowButtonIcon:"arrowButtonIcon",textField:"textField",data:"data"},outputs:{buttonClick:"buttonClick",itemClick:"itemClick",open:"open",close:"close"},providers:[{provide:h,useExisting:a.forwardRef(function(){return E})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"toolbarSplitButton",first:!0,predicate:["toolbarSplitButton"],descendants:!0},{propertyName:"overflowSplitButton",first:!0,predicate:["overflowSplitButton"],descendants:!0,read:a.ElementRef},{propertyName:"overflowSplitButtonButtonList",first:!0,predicate:["overflowSplitButtonButtonList"],descendants:!0}],exportAs:["kendoToolBarSplitButton"],usesInheritance:!0,ngImport:s,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)="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    ',isInline:!0,components:[{type:c.SplitButtonComponent,selector:"kendo-splitbutton",inputs:["text","icon","iconClass","type","imageUrl","size","rounded","fillMode","themeColor","disabled","popupSettings","tabIndex","textField","data","buttonClass","arrowButtonClass","arrowButtonIcon"],outputs:["buttonClick","itemClick","focus","blur","open","close"],exportAs:["kendoSplitButton"]},{type:p,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:c.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:E,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSplitButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return E})}],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)="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    '}]}],ctorParameters:function(){return[]},propDecorators:{showText:[{type:a.Input}],showIcon:[{type:a.Input}],text:[{type:a.Input}],icon:[{type:a.Input}],iconClass:[{type:a.Input}],imageUrl:[{type:a.Input}],disabled:[{type:a.Input}],popupSettings:[{type:a.Input}],fillMode:[{type:a.Input}],themeColor:[{type:a.Input}],look:[{type:a.Input}],buttonClass:[{type:a.Input}],arrowButtonClass:[{type:a.Input}],arrowButtonIcon:[{type:a.Input}],textField:[{type:a.Input}],data:[{type:a.Input}],buttonClick:[{type:a.Output}],itemClick:[{type:a.Output}],open:[{type:a.Output}],close:[{type:a.Output}],toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],toolbarSplitButton:[{type:a.ViewChild,args:["toolbarSplitButton",{static:!1}]}],overflowSplitButton:[{type:a.ViewChild,args:["overflowSplitButton",{read:a.ElementRef,static:!1}]}],overflowSplitButtonButtonList:[{type:a.ViewChild,args:["overflowSplitButtonButtonList",{static:!1}]}]}});f(ye,ve=h),ye.prototype.canFocus=function(){return!1},ye.prototype.focus=function(){},ye.prototype.handleKey=function(){return!1},ye.prototype.ngAfterViewInit=function(){this.popupTemplate||(this.popupTemplate=this.toolbarTemplate)};var ve,R=ye;function ye(){return ve.call(this)||this}R.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,deps:[],target:s.ɵɵFactoryTarget.Component}),R.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:R,selector:"kendo-toolbar-separator",providers:[{provide:h,useExisting:a.forwardRef(function(){return R})}],viewQueries:[{propertyName:"toolbarTemplate",first:!0,predicate:["toolbarTemplate"],descendants:!0,static:!0},{propertyName:"popupTemplate",first:!0,predicate:["popupTemplate"],descendants:!0,static:!0},{propertyName:"separator",first:!0,predicate:["separator"],descendants:!0}],exportAs:["kendoToolBarSeparator"],usesInheritance:!0,ngImport:s,template:'\n        <ng-template #toolbarTemplate>\n            <div class="k-separator"></div>\n        </ng-template>\n    ',isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSeparator",providers:[{provide:h,useExisting:a.forwardRef(function(){return R})}],selector:"kendo-toolbar-separator",template:'\n        <ng-template #toolbarTemplate>\n            <div class="k-separator"></div>\n        </ng-template>\n    '}]}],ctorParameters:function(){return[]},propDecorators:{toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}],separator:[{type:a.ViewChild,args:["separator",{static:!1}]}]}});f(Ce,we=k),Object.defineProperty(Ce.prototype,"override",{get:function(){return!0},enumerable:!1,configurable:!0});var we,N=Ce;function Ce(e){var t=we.call(this)||this;return t.service=e,t}N.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:N,deps:[{token:l.LocalizationService}],target:s.ɵɵFactoryTarget.Component}),N.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:N,selector:"kendo-toolbar-messages",providers:[{provide:k,useExisting:a.forwardRef(function(){return N})}],usesInheritance:!0,ngImport:s,template:"",isInline:!0}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:N,decorators:[{type:a.Component,args:[{providers:[{provide:k,useExisting:a.forwardRef(function(){return N})}],selector:"kendo-toolbar-messages",template:""}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});t=[h,B,S,D,E,R],c=[w,p,N,x],u=function(){};u.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,deps:[],target:s.ɵɵFactoryTarget.NgModule}),u.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,declarations:[T,h,B,S,D,E,R,w,p,N,x],imports:[j.CommonModule,n.ButtonsModule,V.PopupModule,o.ResizeSensorModule],exports:[T,h,B,S,D,E,R,N,x]}),u.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,imports:[[j.CommonModule,n.ButtonsModule,V.PopupModule,o.ResizeSensorModule]]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,decorators:[{type:a.NgModule,args:[{declarations:[T,t,c],exports:[T,t,N,x],imports:[j.CommonModule,n.ButtonsModule,V.PopupModule,o.ResizeSensorModule]}]}]}),e.LocalizedToolbarMessagesDirective=x,e.ToolBarButtonComponent=B,e.ToolBarButtonGroupComponent=S,e.ToolBarComponent=T,e.ToolBarDropDownButtonComponent=D,e.ToolBarModule=u,e.ToolBarSeparatorComponent=R,e.ToolBarSplitButtonComponent=E,e.ToolBarToolComponent=h,e.ToolbarCustomMessagesComponent=N,Object.defineProperty(e,"__esModule",{value:!0})});

package/esm2015/localization/messages.js

@@ -15,6 +15,7 @@ ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-toolbar-messages-base'
                 }]
         }], propDecorators: { moreToolsTitle: [{

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826664,
+    publishDate: 1650441416,
     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/esm2015/toolbar.component.js

@@ -13,7 +13,7 @@ import { outerWidth, innerWidth, closest, isPresent } from './util';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { Subscription, fromEvent, Subject, merge } from 'rxjs';
-import { bufferTime, take, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { defaultPopupWidth } from './common/constants';
@@ -63,6 +63,7 @@ export class ToolBarComponent {
         this.hostClasses = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
         this.subscriptions = new Subscription();
+        this.popupSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -163,7 +164,12 @@ export class ToolBarComponent {
                     case Keys.ArrowLeft:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusPrev(ev) : this.navigationService.focusNext(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusPrev(ev);
+                            }
+                            else {
+                                this.navigationService.focusNext(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -171,7 +177,12 @@ export class ToolBarComponent {
                     case Keys.ArrowRight:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusNext(ev) : this.navigationService.focusPrev(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusNext(ev);
+                            }
+                            else {
+                                this.navigationService.focusPrev(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -188,9 +199,7 @@ export class ToolBarComponent {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(merge(
-            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
-            this.resizeSensor.resize.pipe(bufferTime(200), filter(v => v.length > 0)), this.renderedTools.changes).subscribe(() => { this.onResize(); }));
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(() => { this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // calling onResize twice is the trade-off for removing the manual ChangeDetection
             // triggering altogether - it ensures correct layout and calculations
@@ -220,9 +229,7 @@ export class ToolBarComponent {
         }
     }
     ngOnDestroy() {
-        if (this.popupRef) {
-            this.popupRef.close();
-        }
+        this.destroyPopup();
         if (this.toolbarKeydownListener) {
             this.toolbarKeydownListener();
         }
@@ -276,8 +283,8 @@ export class ToolBarComponent {
                 positionMode: 'absolute'
             });
             this.setPopupContentDimensions();
-            this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this));
-            this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this));
+            this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
+            this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
     }
     /**
@@ -288,11 +295,9 @@ export class ToolBarComponent {
             const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.displayAnchor();
-            });
+            this.displayAnchor();
+            this.resizeSensor.acceptSize();
         }
-        this.resizeSensor.acceptSize();
     }
     /**
      * @hidden
@@ -455,6 +460,13 @@ export class ToolBarComponent {
         popupContentContainer.style.height = this.popupHeight;
         popupContentContainer.style.overflow = 'auto';
     }
+    destroyPopup() {
+        if (this.popupRef) {
+            this.popupSubs.unsubscribe();
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
@@ -509,7 +521,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             </ul>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `, isInline: true, components: [{ type: i5.ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i7.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -569,7 +581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </ul>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{

package/esm2015/tools/toolbar-button.component.js

@@ -223,7 +223,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 {{ overflowOptions.text }}
             </button>
         </ng-template>
-    `, isInline: true, directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/tools/toolbar-buttongroup.component.js

@@ -168,7 +168,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </span>
             </kendo-buttongroup>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/tools/toolbar-buttonlist.component.js

@@ -50,7 +50,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/tools/toolbar-dropdownbutton.component.js

@@ -259,7 +259,7 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "shape", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/tools/toolbar-splitbutton.component.js

@@ -263,7 +263,6 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
                 [ngClass]="buttonClass"
-                (click)="buttonClick.emit($event)"
                 (click)="onMainButtonClick($event)"
             >
                 {{ overflowOptions.text }}
@@ -280,7 +279,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -326,7 +325,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
                 [ngClass]="buttonClass"
-                (click)="buttonClick.emit($event)"
                 (click)="onMainButtonClick($event)"
             >
                 {{ overflowOptions.text }}

package/fesm2015/kendo-angular-toolbar.js

@@ -7,7 +7,7 @@ import { EventEmitter, Injectable, Component, Input, Output, HostListener, Direc
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { take, bufferTime, filter, takeUntil } from 'rxjs/operators';
+import { take, filter, takeUntil } from 'rxjs/operators';
 import * as i6 from '@progress/kendo-angular-common';
 import { Keys, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
@@ -25,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826664,
+    publishDate: 1650441416,
     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'
 };
@@ -612,6 +612,7 @@ ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-toolbar-messages-base'
                 }]
         }], propDecorators: { moreToolsTitle: [{
@@ -684,6 +685,7 @@ class ToolBarComponent {
         this.hostClasses = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
         this.subscriptions = new Subscription();
+        this.popupSubs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -784,7 +786,12 @@ class ToolBarComponent {
                     case Keys.ArrowLeft:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusPrev(ev) : this.navigationService.focusNext(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusPrev(ev);
+                            }
+                            else {
+                                this.navigationService.focusNext(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -792,7 +799,12 @@ class ToolBarComponent {
                     case Keys.ArrowRight:
                         this.zone.run(() => {
                             ev.preventDefault();
-                            this.direction === 'ltr' ? this.navigationService.focusNext(ev) : this.navigationService.focusPrev(ev);
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusNext(ev);
+                            }
+                            else {
+                                this.navigationService.focusPrev(ev);
+                            }
                             // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
                             this.element.nativeElement.setAttribute('tabindex', '-1');
                         });
@@ -809,9 +821,7 @@ class ToolBarComponent {
             });
         });
         if (this.overflow) {
-            this.subscriptions.add(merge(
-            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
-            this.resizeSensor.resize.pipe(bufferTime(200), filter(v => v.length > 0)), this.renderedTools.changes).subscribe(() => { this.onResize(); }));
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(() => { this.onResize(); }));
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // calling onResize twice is the trade-off for removing the manual ChangeDetection
             // triggering altogether - it ensures correct layout and calculations
@@ -841,9 +851,7 @@ class ToolBarComponent {
         }
     }
     ngOnDestroy() {
-        if (this.popupRef) {
-            this.popupRef.close();
-        }
+        this.destroyPopup();
         if (this.toolbarKeydownListener) {
             this.toolbarKeydownListener();
         }
@@ -897,8 +905,8 @@ class ToolBarComponent {
                 positionMode: 'absolute'
             });
             this.setPopupContentDimensions();
-            this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this));
-            this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this));
+            this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
+            this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
     }
     /**
@@ -909,11 +917,9 @@ class ToolBarComponent {
             const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.displayAnchor();
-            });
+            this.displayAnchor();
+            this.resizeSensor.acceptSize();
         }
-        this.resizeSensor.acceptSize();
     }
     /**
      * @hidden
@@ -1076,6 +1082,13 @@ class ToolBarComponent {
         popupContentContainer.style.height = this.popupHeight;
         popupContentContainer.style.overflow = 'auto';
     }
+    destroyPopup() {
+        if (this.popupRef) {
+            this.popupSubs.unsubscribe();
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
@@ -1130,7 +1143,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             </ul>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -1190,7 +1203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </ul>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
@@ -1467,7 +1480,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 {{ overflowOptions.text }}
             </button>
         </ng-template>
-    `, isInline: true, directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1735,7 +1748,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </span>
             </kendo-buttongroup>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1877,7 +1890,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2169,7 +2182,7 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "shape", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2535,7 +2548,6 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
                 [ngClass]="buttonClass"
-                (click)="buttonClick.emit($event)"
                 (click)="onMainButtonClick($event)"
             >
                 {{ overflowOptions.text }}
@@ -2552,7 +2564,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             >
             </kendo-toolbar-buttonlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2598,7 +2610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
                 [ngClass]="buttonClass"
-                (click)="buttonClick.emit($event)"
                 (click)="onMainButtonClick($event)"
             >
                 {{ overflowOptions.text }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "6.0.0-next.202204011525",
+  "version": "6.0.0",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -32,12 +32,12 @@
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "@angular/common": "^12.0.0 || ^13.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0",
-    "@progress/kendo-angular-buttons": "next",
-    "@progress/kendo-angular-common": "next",
-    "@progress/kendo-angular-l10n": "next",
-    "@progress/kendo-angular-popup": "^4.0.0",
+    "@angular/common": "12 - 14",
+    "@angular/core": "12 - 14",
+    "@progress/kendo-angular-buttons": "^8.0.0",
+    "@progress/kendo-angular-common": "^3.0.0",
+    "@progress/kendo-angular-l10n": "^4.0.0",
+    "@progress/kendo-angular-popup": "^5.0.0",
     "@progress/kendo-licensing": "^1.0.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
@@ -68,12 +68,10 @@
   "release": {
     "debug": false,
     "branchTags": {
-      "develop": "dev",
-      "ng12-update": "next"
+      "develop": "dev"
     },
     "fallbackTags": {
-      "dev": "latest",
-      "next": "latest"
+      "dev": "latest"
     },
     "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",

package/toolbar.component.d.ts

@@ -83,6 +83,7 @@ export declare class ToolBarComponent {
     private cancelRenderedToolsSubscription$;
     private cachedGap;
     private subscriptions;
+    private popupSubs;
     /**
      * @hidden
      */
@@ -144,6 +145,7 @@ export declare class ToolBarComponent {
     private hideLastVisibleTool;
     private showFirstHiddenTool;
     private setPopupContentDimensions;
+    private destroyPopup;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": "overflow"; "resizable": "resizable"; "popupSettings": "popupSettings"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; }, { "open": "open"; "close": "close"; }, ["allTools"], never>;
 }