@progress/kendo-angular-toolbar 6.0.3 → 6.1.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,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:1658917792,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}v.prototype.getElement=function(){return this.element.nativeElement},v.prototype.querySelector=function(e){return this.element.nativeElement.querySelector(e)},v.prototype.querySelectorAll=function(e){return this.element.nativeElement.querySelectorAll(e)},v.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},v.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},v.prototype.findNextFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1)},v.prototype.findPrevFocusableSibling=function(e){return e=e||this.findFocusable(),Q(e,!1,!0)},v.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var y=v;function v(){}y.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:y,deps:[],target:s.ɵɵFactoryTarget.Injectable}),y.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:y}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:y,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:y},{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:[y],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:[y],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:y},{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(){return t.onResize()})),this.navigationService.overflowButton=this.overflowButton,this.onResize()),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(){var e;return Z(this.cachedGap)||(e=getComputedStyle(this.element.nativeElement).gap,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,"showText",{get:function(){return this._showText},set:function(e){this._showText=e,this.setTextDisplayMode()},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.ngOnInit=function(){this.setTextDisplayMode()},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},O.prototype.setTextDisplayMode=function(){this.toolbarOptions.text="overflow"===this.showText?void 0:this.text,this.overflowOptions.text="toolbar"===this.showText?void 0:this.text};var fe,B=O;function O(){var e=fe.call(this)||this;return 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._showText="both",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(D,be=h),Object.defineProperty(D.prototype,"look",{set:function(t){t&&this.buttonComponents.forEach(function(e){return e.fillMode="default"===t?"solid":t})},enumerable:!1,configurable:!0}),Object.defineProperty(D.prototype,"buttonElements",{get:function(){return this.getButtonGroup().buttons.filter(function(e){return!e.isDisabled}).map(function(e){return e.element})},enumerable:!1,configurable:!0}),D.prototype.onFocus=function(){this.focusedIndex=0},D.prototype.onNavigate=function(e){e.preventDefault()},D.prototype.selectedChangeHandler=function(e,t){t.selected=e,t.selectedChange.emit(e)},D.prototype.onButtonClick=function(t){this.focusedIndex=this.buttonElements.findIndex(function(e){return e===t.target||e.contains(t.target)}),this.focusButton(this.focusedIndex,t)},D.prototype.canFocus=function(){return!(this.disabled||0===this.buttonElements.length)},D.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)},D.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)},D.prototype.getButtonGroup=function(){return this.overflows?this.overflowButtonGroup:this.toolbarButtonGroup},D.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.buttonElements[e].focus()};var be,S=D;function D(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,F=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}F.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:F,deps:[],target:s.ɵɵFactoryTarget.Component}),F.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:F,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 F})}],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:F,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarDropDownButton",providers:[{provide:h,useExisting:a.forwardRef(function(){return F})}],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(ve,ye=h),ve.prototype.canFocus=function(){return!1},ve.prototype.focus=function(){},ve.prototype.handleKey=function(){return!1},ve.prototype.ngAfterViewInit=function(){this.popupTemplate||(this.popupTemplate=this.toolbarTemplate)};var ye,R=ve;function ve(){return ye.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,F,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,F,E,R,w,p,N,x],imports:[j.CommonModule,n.ButtonsModule,V.PopupModule,o.ResizeSensorModule],exports:[T,h,B,S,F,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.RefreshService=d,e.ToolBarButtonComponent=B,e.ToolBarButtonGroupComponent=S,e.ToolBarComponent=T,e.ToolBarDropDownButtonComponent=F,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,V,i,o,z,A,j,n){"use strict";function U(o){var n;return o&&o.__esModule?o:(n=Object.create(null),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 r=U(a),s=U(t),l=U(o),$=U(A),p=U(j),u=U(n),L={name:"@progress/kendo-angular-toolbar",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1662551369,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"},c=(K.prototype.refresh=function(e){this.onRefresh.emit(e)},K);function K(){this.onRefresh=new a.EventEmitter}c.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:c,deps:[],target:r.ɵɵFactoryTarget.Injectable}),c.ɵprov=r.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:c}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:c,decorators:[{type:a.Injectable}]});var _=function(e,t){return(_=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 d(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}_(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}Object.create;function G(e,t){var o="function"==typeof Symbol&&e[Symbol.iterator];if(!o)return e;var n,r,i=o.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(n=i.next()).done;)s.push(n.value)}catch(e){r={error:e}}finally{try{n&&!n.done&&(o=i.return)&&o.call(i)}finally{if(r)throw r.error}}return s}function H(e,t,o){if(o||2===arguments.length)for(var n,r=0,i=t.length;r<i;r++)!n&&r in t||((n=n||Array.prototype.slice.call(t,0,r))[r]=t[r]);return e.concat(n||Array.prototype.slice.call(t))}Object.create;var q=/^(?:a|input|select|textarea|button|object)$/i;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=q.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 r=re(n,function(e){return W(e,t)});if(r)return r}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,r){return function(e,t){switch(t.keyCode){case o:return r(e-1)?e-1:e;case n:return r(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 f(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},re=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=re(e,t);if(n)return n}e=e.nextSibling}}},g=(b.prototype.setRenderedTools=function(e){this.renderedTools=H([],G(e))},b.prototype.click=function(e){var t=e.context,e=e.event;this.focused.renderedTool!==t&&e&&this.focus(t,e)},b.prototype.moveFocusToToolBar=function(){this.isPopupFocused=!1,this.focusOverflowButton()},b.prototype.moveFocusToPopup=function(){this.isPopupFocused=!0,this.blurOverflowButton(),this.focus()},b.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())},b.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)},b.prototype.resetNavigation=function(){this.blurOverflowButton(),this.focused.renderedTool=null,this.focused.index=-1},b.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()},b.prototype.getFocusableTools=function(){var t=this;return this.renderedTools.filter(function(e){return e.tool.overflows===t.isPopupFocused&&e.tool.canFocus()})},b.prototype.focus=function(o,n){var r=this;this.zone.onStable.pipe(i.take(1)).subscribe(function(){var e,t;o?o.tool.canFocus&&o.tool.canFocus()&&(r.focused.renderedTool=o,r.focused.index=r.getFocusableTools().findIndex(function(e){return e===o}),o.tool.focus(n),r.blurOverflowButton()):(e=r.getFocusableTools(),(t=e.find(function(e){return e===r.focused.renderedTool})||e[0])&&(r.focused.renderedTool=t,r.focused.index=r.getFocusableTools().findIndex(function(e){return e===t}),t.tool.focus(n)))})},b.prototype.blurOverflowButton=function(){this.overflowButton&&(this.isOverflowButtonFocused=!1,this.overflowButton.nativeElement.tabIndex=-1)},b.prototype.focusOverflowButton=function(){this.isOverflowButtonFocused=!0,this.overflowButton.nativeElement.tabIndex=0,this.overflowButton.nativeElement.focus()},b.prototype.isOverflowButtonVisible=function(){return Z(this.overflowButton)&&"visible"===window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue("visibility")},b);function b(e){this.zone=e,this.focused={renderedTool:null,index:-1},this.renderedTools=[],this.isPopupFocused=!1,this.isOverflowButtonFocused=!1}g.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:g,deps:[{token:r.NgZone}],target:r.ɵɵFactoryTarget.Injectable}),g.ɵprov=r.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:g}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:g,decorators:[{type:a.Injectable}],ctorParameters:function(){return[{type:r.NgZone}]}});Object.defineProperty(ie.prototype,"toolbarDisplay",{get:function(){return this.overflows?"none":"inline-block"},enumerable:!1,configurable:!0}),Object.defineProperty(ie.prototype,"overflowDisplay",{get:function(){return this.overflows?"block":"none"},enumerable:!1,configurable:!0}),ie.prototype.canFocus=function(){return!1},ie.prototype.focus=function(e){},ie.prototype.handleKey=function(e){return!1};var m=ie;function ie(){this.tabIndex=-1,this.overflows=!0,this.responsive=!0}m.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:m,deps:[],target:r.ɵɵFactoryTarget.Component}),m.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:m,selector:"toolbar-tool",inputs:{responsive:"responsive"},ngImport:r,template:"",isInline:!0}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:m,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),re(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),re(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 h=y;function y(){}h.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:h,deps:[],target:r.ɵɵFactoryTarget.Injectable}),h.ɵprov=r.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:h}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:h,decorators:[{type:a.Injectable}]});Object.defineProperty(w.prototype,"spacerClass",{get:function(){return"toolbar"===this.location&&this.isSpacer},enumerable:!1,configurable:!0}),Object.defineProperty(w.prototype,"isSpacer",{get:function(){return this.tool&&this.tool.__isSpacer},enumerable:!1,configurable:!0}),w.prototype.onClick=function(e){this.rendererClick.emit({context:this,event:e})},w.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"))},w.prototype.ngOnDestroy=function(){this.refreshSubscription.unsubscribe()},w.prototype.ngAfterViewInit=function(){this.resizable&&this.refresh()},Object.defineProperty(w.prototype,"width",{get:function(){return this.isSpacer?18:this.tool.overflows?0:(e=this.element.nativeElement,t=e.offsetWidth,e=getComputedStyle(e),t+=parseFloat(e.marginLeft)||0+parseFloat(e.marginRight)||0);var e,t},enumerable:!1,configurable:!0}),w.prototype.isDisplayed=function(){return"none"!==this.element.nativeElement.style.display},w.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))},w.prototype.setAttribute=function(e,t,o){this.renderer.setAttribute(e,t,o)};var v=w;function w(e,t,o,n){var r=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){r.tool===e&&r.refresh()})}v.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:v,deps:[{token:r.ElementRef},{token:r.Renderer2},{token:h},{token:c}],target:r.ɵɵFactoryTarget.Component}),v.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:v,selector:"kendo-toolbar-renderer",inputs:{tool:"tool",location:"location",resizable:"resizable"},outputs:{rendererClick:"rendererClick"},host:{listeners:{click:"onClick($event)"},properties:{"class.k-spacer":"this.spacerClass"}},providers:[h],exportAs:["kendoToolBarRenderer"],ngImport:r,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:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:p.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:v,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarRenderer",providers:[h],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:r.ElementRef},{type:r.Renderer2},{type:h},{type:c}]},propDecorators:{tool:[{type:a.Input}],location:[{type:a.Input}],resizable:[{type:a.Input}],rendererClick:[{type:a.Output}],spacerClass:[{type:a.HostBinding,args:["class.k-spacer"]}],onClick:[{type:a.HostListener,args:["click",["$event"]]}]}});d(pe,ae=t.ComponentMessages);var ae,C=pe;function pe(){return null!==ae&&ae.apply(this,arguments)||this}C.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:C,deps:null,target:r.ɵɵFactoryTarget.Directive}),C.ɵdir=r.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"kendo-toolbar-messages-base",inputs:{moreToolsTitle:"moreToolsTitle"},usesInheritance:!0,ngImport:r}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:C,decorators:[{type:a.Directive,args:[{selector:"kendo-toolbar-messages-base"}]}],propDecorators:{moreToolsTitle:[{type:a.Input}]}});d(ce,ue=C);var ue,k=ce;function ce(e){var t=ue.call(this)||this;return t.service=e,t}k.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:k,deps:[{token:s.LocalizationService}],target:r.ɵɵFactoryTarget.Directive}),k.ɵdir=r.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"[kendoToolbarLocalizedMessages]",providers:[{provide:C,useExisting:a.forwardRef(function(){return k})}],usesInheritance:!0,ngImport:r}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:k,decorators:[{type:a.Directive,args:[{providers:[{provide:C,useExisting:a.forwardRef(function(){return k})}],selector:"[kendoToolbarLocalizedMessages]"}]}],ctorParameters:function(){return[{type:s.LocalizationService}]}});function de(e){return{animate:!0,anchorAlign:{horizontal:e?"left":"right",vertical:"bottom"},popupAlign:{horizontal:e?"left":"right",vertical:"top"}}}Object.defineProperty(T.prototype,"resizable",{get:function(){return this.overflow},set:function(e){this.overflow=e},enumerable:!1,configurable:!0}),Object.defineProperty(T.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(T.prototype,"tabIndex",{get:function(){return this.tabindex},set:function(e){this.tabindex=e},enumerable:!1,configurable:!0}),Object.defineProperty(T.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(T.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}),T.prototype.onFocus=function(e){this.navigationService.resetNavigation(),this.navigationService.focusFirst(e),this.element.nativeElement.setAttribute("tabindex","-1")},T.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(T.prototype,"getRole",{get:function(){return"toolbar"},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"getDir",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"resizableClass",{get:function(){return this.overflow},enumerable:!1,configurable:!0}),T.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(z.merge(this.resizeSensor.resize,this.renderedTools.changes).subscribe(function(){return t.onResize()})),this.navigationService.overflowButton=this.overflowButton,this.onResize()),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.subscriptions.add(this.renderedTools.changes.subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}))},T.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(z.fromEvent(document,"click").pipe(i.filter(function(){return!!t.popupRef}),i.filter(function(e){return!t.popupRef.popup.instance.container.nativeElement.contains(e.target)}),i.filter(function(e){return!t.overflowButton.nativeElement.contains(e.target)})).subscribe(function(){t.zone.run(function(){t.popupOpen=!1})}))})},T.prototype.ngOnChanges=function(e){e.tabindex&&this.element.nativeElement.setAttribute("tabindex",e.tabindex.currentValue.toString())},T.prototype.ngOnDestroy=function(){this.destroyPopup(),this.toolbarKeydownListener&&this.toolbarKeydownListener(),this.cancelRenderedToolsSubscription$.next(),this.subscriptions.unsubscribe()},Object.defineProperty(T.prototype,"moreToolsTitle",{get:function(){return this.localization.get("moreToolsTitle")},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"cdr",{get:function(){return this._cdr},enumerable:!1,configurable:!0}),T.prototype.onRendererClick=function(e){this.navigationService.click(e),this.element.nativeElement.setAttribute("tabindex","-1")},T.prototype.showPopup=function(){this.popupOpen=!this.popupOpen,this.navigationService.click({context:void 0,event:void 0})},T.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))))},T.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())},T.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(i.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())})},T.prototype.onPopupClose=function(){var t=this;this.cancelRenderedToolsSubscription$.next(),this.navigationService.setRenderedTools(this.renderedTools.toArray()),this.renderedTools.changes.pipe(i.takeUntil(this.cancelRenderedToolsSubscription$)).subscribe(function(e){return t.navigationService.setRenderedTools(e.toArray())}),this.navigationService.moveFocusToToolBar(),this.overflowKeydownListener&&this.overflowKeydownListener()},T.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(T.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(T.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(T.prototype,"overflowAnchorWidth",{get:function(){return this.overflow?(this.cachedOverflowAnchorWidth||(this.cachedOverflowAnchorWidth=this.overflowButton.nativeElement.offsetWidth),this.cachedOverflowAnchorWidth):0},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"gap",{get:function(){var e;return Z(this.cachedGap)||(e=getComputedStyle(this.element.nativeElement).gap,this.cachedGap=Z(e)?parseInt(e,10):0),this.cachedGap},enumerable:!1,configurable:!0}),Object.defineProperty(T.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(T.prototype,"visibleTools",{get:function(){return this.allTools.filter(function(e){return!1===e.overflows})},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"overflowTools",{get:function(){return this.allTools.filter(function(e){return!0===e.overflows})},enumerable:!1,configurable:!0}),T.prototype.shrink=function(e,t){if(e<t)for(var o=this.visibleTools.length-1;0<=o&&!(t<e);o--)t-=this.hideLastVisibleTool()},T.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},T.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},T.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},T.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"},T.prototype.destroyPopup=function(){this.popupRef&&(this.popupSubs.unsubscribe(),this.popupRef.close(),this.popupRef=null)};var x=T;function T(e,t,o,n,r,i,s,l){this.localization=e,this.popupService=t,this.refreshService=o,this.navigationService=n,this.element=r,this.zone=i,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 z.Subject,this.subscriptions=new z.Subscription,this.popupSubs=new z.Subscription,V.validatePackage(L),this.direction=e.rtl?"rtl":"ltr"}x.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:x,deps:[{token:s.LocalizationService},{token:$.PopupService},{token:c},{token:g},{token:r.ElementRef},{token:r.NgZone},{token:r.Renderer2},{token:r.ChangeDetectorRef}],target:r.ɵɵFactoryTarget.Component}),x.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:x,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:[c,g,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.toolbar"}],queries:[{propertyName:"allTools",predicate:m}],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:r,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            [style.position]="\'relative\'"\n            [style.margin-inline-start]="\'auto\'"\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:v,selector:"kendo-toolbar-renderer",inputs:["tool","location","resizable"],outputs:["rendererClick"],exportAs:["kendoToolBarRenderer"]},{type:l.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:k,selector:"[kendoToolbarLocalizedMessages]"},{type:p.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:x,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBar",providers:[c,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            [style.position]="\'relative\'"\n            [style.margin-inline-start]="\'auto\'"\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:s.LocalizationService},{type:$.PopupService},{type:c},{type:g},{type:r.ElementRef},{type:r.NgZone},{type:r.Renderer2},{type:r.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:[m]}],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"]}]}});d(B,fe=m),Object.defineProperty(B.prototype,"showText",{get:function(){return this._showText},set:function(e){this._showText=e,this.setTextDisplayMode()},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"togglable",{get:function(){return this.toggleable},set:function(e){this.toggleable=e},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"icon",{set:function(e){this.toolbarOptions.icon=f(e,this.showIcon,!1),this.overflowOptions.icon=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=f(e,this.showIcon,!1),this.overflowOptions.iconClass=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=f(e,this.showIcon,!1),this.overflowOptions.imageUrl=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),B.prototype.ngOnInit=function(){this.setTextDisplayMode()},B.prototype.onBlur=function(){this.getButton().tabIndex=-1},B.prototype.canFocus=function(){return!this.disabled},B.prototype.focus=function(e){e&&"focus"!==e.type&&"keydown"!==e.type||this.getButton().focus(),this.getButton().tabIndex=0},B.prototype.handleKey=function(){return!(this.getButton().tabIndex=-1)},B.prototype.getButton=function(){return(this.overflows?this.overflowButtonElement:this.toolbarButtonElement).nativeElement},B.prototype.setTextDisplayMode=function(){this.toolbarOptions.text="overflow"===this.showText?void 0:this.text,this.overflowOptions.text="toolbar"===this.showText?void 0:this.text};var fe,I=B;function B(){var e=fe.call(this)||this;return 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._showText="both",e}I.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:I,deps:[],target:r.ɵɵFactoryTarget.Component}),I.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:I,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:m,useExisting:a.forwardRef(function(){return I})}],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:r,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:u.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:p.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:p.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:I,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButton",providers:[{provide:m,useExisting:a.forwardRef(function(){return I})}],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}]}]}});d(S,ge=m),Object.defineProperty(S.prototype,"look",{set:function(t){t&&this.buttonComponents.forEach(function(e){return e.fillMode="default"===t?"solid":t})},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"buttonElements",{get:function(){return this.getButtonGroup().buttons.filter(function(e){return!e.isDisabled}).map(function(e){return e.element})},enumerable:!1,configurable:!0}),S.prototype.onFocus=function(){this.focusedIndex=0},S.prototype.onNavigate=function(e){e.preventDefault()},S.prototype.selectedChangeHandler=function(e,t){t.selected=e,t.selectedChange.emit(e)},S.prototype.onButtonClick=function(t){this.focusedIndex=this.buttonElements.findIndex(function(e){return e===t.target||e.contains(t.target)}),this.focusButton(this.focusedIndex,t)},S.prototype.canFocus=function(){return!(this.disabled||0===this.buttonElements.length)},S.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)},S.prototype.handleKey=function(e){var t=this.getNextKey(this.overflows),o=this.getPrevKey(this.overflows),n=X(this.buttonElements),r=ee(this.focusedIndex);return this.focusedIndex=Y(o,t,n)(this.focusedIndex,e),this.focusButton(this.focusedIndex,e),!r(this.focusedIndex)},S.prototype.getButtonGroup=function(){return this.overflows?this.overflowButtonGroup:this.toolbarButtonGroup},S.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.buttonElements[e].focus()};var ge,O=S;function S(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}O.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:O,deps:[{token:s.LocalizationService}],target:r.ɵɵFactoryTarget.Component}),O.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:O,selector:"kendo-toolbar-buttongroup",inputs:{disabled:"disabled",selection:"selection",width:"width",look:"look"},providers:[t.LocalizationService,{provide:m,useExisting:a.forwardRef(function(){return O})}],queries:[{propertyName:"buttonComponents",predicate:r.forwardRef(function(){return I})}],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:r,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:u.ButtonGroupComponent,selector:"kendo-buttongroup",inputs:["disabled","selection","width","tabIndex"],outputs:["navigate"],exportAs:["kendoButtonGroup"]}],directives:[{type:p.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.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:p.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:p.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:O,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarButtonGroup",providers:[t.LocalizationService,{provide:m,useExisting:a.forwardRef(function(){return O})}],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:s.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 I})]}],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)};l=be;function be(){this.disabled=!1,this.fillMode="solid",this.themeColor="base",this.itemClick=new a.EventEmitter}l.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:l,deps:[],target:r.ɵɵFactoryTarget.Component}),l.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:l,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:r,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:p.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.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"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:l,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"]}]}});d(F,me=m),Object.defineProperty(F.prototype,"text",{set:function(e){this.toolbarOptions.text=f(e,this.showText,!1),this.overflowOptions.text=f(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"icon",{set:function(e){this.toolbarOptions.icon=f(e,this.showIcon,!1),this.overflowOptions.icon=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=f(e,this.showIcon,!1),this.overflowOptions.iconClass=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=f(e,this.showIcon,!1),this.overflowOptions.imageUrl=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"popupSettings",{get:function(){return this._popupSettings},set:function(e){this._popupSettings=Object.assign({animate:!0,popupClass:""},e)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"primary",{set:function(e){this.themeColor=e?"primary":"base"},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(F.prototype,"overflowButtons",{get:function(){return H([],G(this.overflowDropDownButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),F.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowDropDownButtonButtonList.buttons.toArray().findIndex(function(e){return e.nativeElement.contains(t.target)})},F.prototype.canFocus=function(){return!this.disabled},F.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()},F.prototype.handleKey=function(e){var t,o;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)},F.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type||this.overflowButtons[e].nativeElement.focus()};var me,D=F;function F(){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=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:D,deps:[],target:r.ɵɵFactoryTarget.Component}),D.ɵcmp=r.ɵɵ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:m,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:r,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:u.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:l,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:u.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:p.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:D,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarDropDownButton",providers:[{provide:m,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}]}]}});d(E,he=m),Object.defineProperty(E.prototype,"text",{set:function(e){this.toolbarOptions.text=f(e,this.showText,!1),this.overflowOptions.text=f(e,this.showText,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"icon",{set:function(e){this.toolbarOptions.icon=f(e,this.showIcon,!1),this.overflowOptions.icon=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"iconClass",{set:function(e){this.toolbarOptions.iconClass=f(e,this.showIcon,!1),this.overflowOptions.iconClass=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"imageUrl",{set:function(e){this.toolbarOptions.imageUrl=f(e,this.showIcon,!1),this.overflowOptions.imageUrl=f(e,this.showIcon,!0)},enumerable:!1,configurable:!0}),Object.defineProperty(E.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(E.prototype,"look",{set:function(e){e&&(this.fillMode="default"===e?"solid":e)},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"data",{get:function(){return this._data||(this.data=[]),this._data},set:function(e){this._data=e||[]},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"overflowButtons",{get:function(){return H([this.overflowSplitButton],G(this.overflowSplitButtonButtonList.buttons.toArray().filter(function(e){return!e.nativeElement.disabled})))},enumerable:!1,configurable:!0}),E.prototype.onButtonListClick=function(t){this.focusedIndex=this.overflowButtons.findIndex(function(e){return e.nativeElement.contains(t.target)})},E.prototype.onMainButtonClick=function(e){this.buttonClick.emit(e),this.focusedIndex=0},E.prototype.canFocus=function(){return!this.disabled},E.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()},E.prototype.handleKey=function(e){var t,o;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)},E.prototype.focusButton=function(e,t){t.type&&"focus"!==t.type&&"keydown"!==t.type&&"click"!==t.type||this.overflowButtons[e].nativeElement.focus()};var he,M=E;function E(){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}M.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:M,deps:[],target:r.ɵɵFactoryTarget.Component}),M.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:M,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:m,useExisting:a.forwardRef(function(){return M})}],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:r,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:u.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:l,selector:"kendo-toolbar-buttonlist",inputs:["data","textField","disabled","fillMode","themeColor"],outputs:["itemClick"]}],directives:[{type:u.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:p.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:M,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSplitButton",providers:[{provide:m,useExisting:a.forwardRef(function(){return M})}],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}]}]}});d(ve,ye=m),ve.prototype.canFocus=function(){return!1},ve.prototype.focus=function(){},ve.prototype.handleKey=function(){return!1},ve.prototype.ngAfterViewInit=function(){this.popupTemplate||(this.popupTemplate=this.toolbarTemplate)};var ye,P=ve;function ve(){return ye.call(this)||this}P.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:P,deps:[],target:r.ɵɵFactoryTarget.Component}),P.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:P,selector:"kendo-toolbar-separator",providers:[{provide:m,useExisting:a.forwardRef(function(){return P})}],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:r,template:'\n        <ng-template #toolbarTemplate>\n            <div class="k-separator"></div>\n        </ng-template>\n    ',isInline:!0}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:P,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSeparator",providers:[{provide:m,useExisting:a.forwardRef(function(){return P})}],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}]}]}});d(Ce,we=m),Ce.prototype.canFocus=function(){return!1},Ce.prototype.focus=function(){},Ce.prototype.handleKey=function(){return!1},Ce.prototype.ngAfterViewInit=function(){this.popupTemplate||(this.popupTemplate=this.toolbarTemplate)};var we,R=Ce;function Ce(){var e=we.call(this)||this;return e.__isSpacer=!0,e}R.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:R,deps:[],target:r.ɵɵFactoryTarget.Component}),R.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:R,selector:"kendo-toolbar-spacer",providers:[{provide:m,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}],exportAs:["kendoToolBarSpacer"],usesInheritance:!0,ngImport:r,template:"",isInline:!0}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:R,decorators:[{type:a.Component,args:[{exportAs:"kendoToolBarSpacer",providers:[{provide:m,useExisting:a.forwardRef(function(){return R})}],selector:"kendo-toolbar-spacer",template:""}]}],ctorParameters:function(){return[]},propDecorators:{toolbarTemplate:[{type:a.ViewChild,args:["toolbarTemplate",{static:!0}]}],popupTemplate:[{type:a.ViewChild,args:["popupTemplate",{static:!0}]}]}});d(xe,ke=C),Object.defineProperty(xe.prototype,"override",{get:function(){return!0},enumerable:!1,configurable:!0});var ke,N=xe;function xe(e){var t=ke.call(this)||this;return t.service=e,t}N.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:N,deps:[{token:s.LocalizationService}],target:r.ɵɵFactoryTarget.Component}),N.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:N,selector:"kendo-toolbar-messages",providers:[{provide:C,useExisting:a.forwardRef(function(){return N})}],usesInheritance:!0,ngImport:r,template:"",isInline:!0}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:N,decorators:[{type:a.Component,args:[{providers:[{provide:C,useExisting:a.forwardRef(function(){return N})}],selector:"kendo-toolbar-messages",template:""}]}],ctorParameters:function(){return[{type:s.LocalizationService}]}});t=[m,I,O,D,M,P,R],u=[v,l,N,k],p=function(){};p.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:p,deps:[],target:r.ɵɵFactoryTarget.NgModule}),p.ɵmod=r.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:p,declarations:[x,m,I,O,D,M,P,R,v,l,N,k],imports:[j.CommonModule,n.ButtonsModule,A.PopupModule,o.ResizeSensorModule],exports:[x,m,I,O,D,M,P,R,N,k]}),p.ɵinj=r.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:p,imports:[[j.CommonModule,n.ButtonsModule,A.PopupModule,o.ResizeSensorModule]]}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:r,type:p,decorators:[{type:a.NgModule,args:[{declarations:[x,t,u],exports:[x,t,N,k],imports:[j.CommonModule,n.ButtonsModule,A.PopupModule,o.ResizeSensorModule]}]}]}),e.LocalizedToolbarMessagesDirective=k,e.RefreshService=c,e.ToolBarButtonComponent=I,e.ToolBarButtonGroupComponent=O,e.ToolBarComponent=x,e.ToolBarDropDownButtonComponent=D,e.ToolBarModule=p,e.ToolBarSeparatorComponent=P,e.ToolBarSpacerComponent=R,e.ToolBarSplitButtonComponent=M,e.ToolBarToolComponent=m,e.ToolbarCustomMessagesComponent=N,Object.defineProperty(e,"__esModule",{value:!0})});

package/esm2015/main.js

@@ -9,6 +9,7 @@ export { ToolBarButtonGroupComponent } from './tools/toolbar-buttongroup.compone
 export { ToolBarDropDownButtonComponent } from './tools/toolbar-dropdownbutton.component';
 export { ToolBarSplitButtonComponent } from './tools/toolbar-splitbutton.component';
 export { ToolBarSeparatorComponent } from './tools/toolbar-separator.component';
+export { ToolBarSpacerComponent } from './tools/toolbar-spacer.component';
 export { ToolBarModule } from './toolbar.module';
 export { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 export { ToolbarCustomMessagesComponent } from './localization/custom-messages.component';

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: 1658917792,
+    publishDate: 1662551369,
     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/renderer.component.js

@@ -2,13 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
 import { outerWidth } from './util';
 import { RendererService } from './renderer.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./renderer.service";
 import * as i2 from "./refresh.service";
 import * as i3 from "@angular/common";
+const MIN_SPACER_WIDTH = 18;
 /**
  * @hidden
  */
@@ -27,6 +28,12 @@ export class ToolBarRendererComponent {
             }
         });
     }
+    get spacerClass() {
+        return this.location === 'toolbar' && this.isSpacer;
+    }
+    get isSpacer() {
+        return this.tool && this.tool.__isSpacer;
+    }
     onClick(ev) {
         this.rendererClick.emit({ context: this, event: ev });
     }
@@ -61,6 +68,9 @@ export class ToolBarRendererComponent {
      * @hidden
      */
     get width() {
+        if (this.isSpacer) {
+            return MIN_SPACER_WIDTH;
+        }
         return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
     }
     /**
@@ -91,7 +101,7 @@ export class ToolBarRendererComponent {
     }
 }
 ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
+ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
         <ng-container *ngIf="location === 'toolbar'">
             <ng-template [ngTemplateOutlet]="template"></ng-template>
         </ng-container>
@@ -122,6 +132,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], rendererClick: [{
                 type: Output
+            }], spacerClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]

package/esm2015/toolbar.component.js

@@ -9,7 +9,7 @@ import { packageMetadata } from './package-metadata';
 import { RefreshService } from './refresh.service';
 import { NavigationService } from './navigation.service';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
-import { outerWidth, innerWidth, closest, isPresent } from './util';
+import { 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';
@@ -372,7 +372,7 @@ export class ToolBarComponent {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
-            this.cachedOverflowAnchorWidth = outerWidth(this.overflowButton.nativeElement);
+            this.cachedOverflowAnchorWidth = this.overflowButton.nativeElement.offsetWidth;
         }
         return this.cachedOverflowAnchorWidth;
     }
@@ -498,6 +498,8 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >
@@ -558,6 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >

package/esm2015/toolbar.module.js

@@ -14,6 +14,7 @@ import { ToolBarButtonGroupComponent } from './tools/toolbar-buttongroup.compone
 import { ToolBarDropDownButtonComponent } from './tools/toolbar-dropdownbutton.component';
 import { ToolBarSplitButtonComponent } from './tools/toolbar-splitbutton.component';
 import { ToolBarSeparatorComponent } from './tools/toolbar-separator.component';
+import { ToolBarSpacerComponent } from './tools/toolbar-spacer.component';
 import { ToolBarRendererComponent } from './renderer.component';
 import { ToolBarButtonListComponent } from './tools/toolbar-buttonlist.component';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
@@ -25,7 +26,8 @@ const TOOLBAR_TOOLS = [
     ToolBarButtonGroupComponent,
     ToolBarDropDownButtonComponent,
     ToolBarSplitButtonComponent,
-    ToolBarSeparatorComponent
+    ToolBarSeparatorComponent,
+    ToolBarSpacerComponent
 ];
 const TOOLBAR_COMMON = [
     ToolBarRendererComponent,
@@ -53,7 +55,8 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
-        ToolBarSeparatorComponent, ToolBarRendererComponent,
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolBarRendererComponent,
         ToolBarButtonListComponent,
         ToolbarCustomMessagesComponent,
         LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
@@ -61,7 +64,8 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
-        ToolBarSeparatorComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
 ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,

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

@@ -0,0 +1,61 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, ViewChild } from '@angular/core';
+import { ToolBarToolComponent } from './toolbar-tool.component';
+import * as i0 from "@angular/core";
+/**
+ * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ */
+export class ToolBarSpacerComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * @hidden
+         */
+        this.__isSpacer = true;
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return false;
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    focus() {
+        /* noop */
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    handleKey() {
+        return false;
+    }
+    ngAfterViewInit() {
+        if (!this.popupTemplate) {
+            this.popupTemplate = this.toolbarTemplate;
+        }
+    }
+}
+ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSpacer',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }],
+                    selector: 'kendo-toolbar-spacer',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }] } });

package/fesm2015/kendo-angular-toolbar.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Input, Output, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, HostBinding, ElementRef, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -25,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1658917792,
+    publishDate: 1662551369,
     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'
 };
@@ -484,6 +484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }] });
 
+const MIN_SPACER_WIDTH = 18;
 /**
  * @hidden
  */
@@ -502,6 +503,12 @@ class ToolBarRendererComponent {
             }
         });
     }
+    get spacerClass() {
+        return this.location === 'toolbar' && this.isSpacer;
+    }
+    get isSpacer() {
+        return this.tool && this.tool.__isSpacer;
+    }
     onClick(ev) {
         this.rendererClick.emit({ context: this, event: ev });
     }
@@ -536,6 +543,9 @@ class ToolBarRendererComponent {
      * @hidden
      */
     get width() {
+        if (this.isSpacer) {
+            return MIN_SPACER_WIDTH;
+        }
         return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
     }
     /**
@@ -566,7 +576,7 @@ class ToolBarRendererComponent {
     }
 }
 ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
+ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
         <ng-container *ngIf="location === 'toolbar'">
             <ng-template [ngTemplateOutlet]="template"></ng-template>
         </ng-container>
@@ -597,6 +607,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], rendererClick: [{
                 type: Output
+            }], spacerClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -994,7 +1007,7 @@ class ToolBarComponent {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
-            this.cachedOverflowAnchorWidth = outerWidth(this.overflowButton.nativeElement);
+            this.cachedOverflowAnchorWidth = this.overflowButton.nativeElement.offsetWidth;
         }
         return this.cachedOverflowAnchorWidth;
     }
@@ -1120,6 +1133,8 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >
@@ -1180,6 +1195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.aria-label]="moreToolsTitle"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
             class="k-overflow-anchor k-button"
             (click)="showPopup()"
         >
@@ -2753,6 +2770,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['separator', { static: false }]
             }] } });
 
+/**
+ * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ */
+class ToolBarSpacerComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * @hidden
+         */
+        this.__isSpacer = true;
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return false;
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    focus() {
+        /* noop */
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    handleKey() {
+        return false;
+    }
+    ngAfterViewInit() {
+        if (!this.popupTemplate) {
+            this.popupTemplate = this.toolbarTemplate;
+        }
+    }
+}
+ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSpacer',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }],
+                    selector: 'kendo-toolbar-spacer',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }] } });
+
 /**
  * Custom component messages override default component messages.
  */
@@ -2792,7 +2864,8 @@ const TOOLBAR_TOOLS = [
     ToolBarButtonGroupComponent,
     ToolBarDropDownButtonComponent,
     ToolBarSplitButtonComponent,
-    ToolBarSeparatorComponent
+    ToolBarSeparatorComponent,
+    ToolBarSpacerComponent
 ];
 const TOOLBAR_COMMON = [
     ToolBarRendererComponent,
@@ -2820,7 +2893,8 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
-        ToolBarSeparatorComponent, ToolBarRendererComponent,
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolBarRendererComponent,
         ToolBarButtonListComponent,
         ToolbarCustomMessagesComponent,
         LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
@@ -2828,7 +2902,8 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
-        ToolBarSeparatorComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
 ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
@@ -2843,5 +2918,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
+export { LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
 

package/main.d.ts

@@ -9,6 +9,7 @@ export { ToolBarButtonGroupComponent } from './tools/toolbar-buttongroup.compone
 export { ToolBarDropDownButtonComponent } from './tools/toolbar-dropdownbutton.component';
 export { ToolBarSplitButtonComponent } from './tools/toolbar-splitbutton.component';
 export { ToolBarSeparatorComponent } from './tools/toolbar-separator.component';
+export { ToolBarSpacerComponent } from './tools/toolbar-spacer.component';
 export { ButtonGroupSelection } from './group-selection-settings';
 export { PopupSettings } from './popup-settings';
 export { DisplayMode } from './display-mode';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "6.0.3",
+  "version": "6.1.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",

package/renderer.component.d.ts

@@ -31,6 +31,8 @@ export declare class ToolBarRendererComponent implements OnInit, OnDestroy {
     resizable: boolean;
     rendererClick: EventEmitter<RendererClickPayload>;
     template: TemplateRef<any>;
+    get spacerClass(): boolean;
+    private get isSpacer();
     private refreshSubscription;
     onClick(ev: any): void;
     constructor(element: ElementRef, renderer: Renderer, rendererService: RendererService, refreshService: RefreshService);

package/toolbar.module.d.ts

@@ -10,14 +10,15 @@ import * as i4 from "./tools/toolbar-buttongroup.component";
 import * as i5 from "./tools/toolbar-dropdownbutton.component";
 import * as i6 from "./tools/toolbar-splitbutton.component";
 import * as i7 from "./tools/toolbar-separator.component";
-import * as i8 from "./renderer.component";
-import * as i9 from "./tools/toolbar-buttonlist.component";
-import * as i10 from "./localization/custom-messages.component";
-import * as i11 from "./localization/localized-toolbar-messages.directive";
-import * as i12 from "@angular/common";
-import * as i13 from "@progress/kendo-angular-buttons";
-import * as i14 from "@progress/kendo-angular-popup";
-import * as i15 from "@progress/kendo-angular-common";
+import * as i8 from "./tools/toolbar-spacer.component";
+import * as i9 from "./renderer.component";
+import * as i10 from "./tools/toolbar-buttonlist.component";
+import * as i11 from "./localization/custom-messages.component";
+import * as i12 from "./localization/localized-toolbar-messages.directive";
+import * as i13 from "@angular/common";
+import * as i14 from "@progress/kendo-angular-buttons";
+import * as i15 from "@progress/kendo-angular-popup";
+import * as i16 from "@progress/kendo-angular-common";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }}) definition for the ToolBar component.
  *
@@ -32,6 +33,6 @@ import * as i15 from "@progress/kendo-angular-common";
  */
 export declare class ToolBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ToolBarModule, [typeof i1.ToolBarComponent, typeof i2.ToolBarToolComponent, typeof i3.ToolBarButtonComponent, typeof i4.ToolBarButtonGroupComponent, typeof i5.ToolBarDropDownButtonComponent, typeof i6.ToolBarSplitButtonComponent, typeof i7.ToolBarSeparatorComponent, typeof i8.ToolBarRendererComponent, typeof i9.ToolBarButtonListComponent, typeof i10.ToolbarCustomMessagesComponent, typeof i11.LocalizedToolbarMessagesDirective], [typeof i12.CommonModule, typeof i13.ButtonsModule, typeof i14.PopupModule, typeof i15.ResizeSensorModule], [typeof i1.ToolBarComponent, typeof i2.ToolBarToolComponent, typeof i3.ToolBarButtonComponent, typeof i4.ToolBarButtonGroupComponent, typeof i5.ToolBarDropDownButtonComponent, typeof i6.ToolBarSplitButtonComponent, typeof i7.ToolBarSeparatorComponent, typeof i10.ToolbarCustomMessagesComponent, typeof i11.LocalizedToolbarMessagesDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ToolBarModule, [typeof i1.ToolBarComponent, typeof i2.ToolBarToolComponent, typeof i3.ToolBarButtonComponent, typeof i4.ToolBarButtonGroupComponent, typeof i5.ToolBarDropDownButtonComponent, typeof i6.ToolBarSplitButtonComponent, typeof i7.ToolBarSeparatorComponent, typeof i8.ToolBarSpacerComponent, typeof i9.ToolBarRendererComponent, typeof i10.ToolBarButtonListComponent, typeof i11.ToolbarCustomMessagesComponent, typeof i12.LocalizedToolbarMessagesDirective], [typeof i13.CommonModule, typeof i14.ButtonsModule, typeof i15.PopupModule, typeof i16.ResizeSensorModule], [typeof i1.ToolBarComponent, typeof i2.ToolBarToolComponent, typeof i3.ToolBarButtonComponent, typeof i4.ToolBarButtonGroupComponent, typeof i5.ToolBarDropDownButtonComponent, typeof i6.ToolBarSplitButtonComponent, typeof i7.ToolBarSeparatorComponent, typeof i8.ToolBarSpacerComponent, typeof i11.ToolbarCustomMessagesComponent, typeof i12.LocalizedToolbarMessagesDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ToolBarModule>;
 }

package/tools/toolbar-spacer.component.d.ts

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef, AfterViewInit } from '@angular/core';
+import { ToolBarToolComponent } from './toolbar-tool.component';
+import * as i0 from "@angular/core";
+/**
+ * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ */
+export declare class ToolBarSpacerComponent extends ToolBarToolComponent implements AfterViewInit {
+    toolbarTemplate: TemplateRef<any>;
+    popupTemplate: TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    readonly __isSpacer = true;
+    constructor();
+    /**
+     * @hidden
+     */
+    canFocus(): boolean;
+    /**
+     * @hidden
+     */
+    focus(): void;
+    /**
+     * @hidden
+     */
+    handleKey(): boolean;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarSpacerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarSpacerComponent, "kendo-toolbar-spacer", ["kendoToolBarSpacer"], {}, {}, never, never>;
+}