@progress/kendo-angular-layout - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

dist/cdn/js/kendo-angular-layout.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","@angular/common"],t):"object"==typeof exports?exports.KendoAngularLayout=t(require("@angular/core"),require("rxjs/Subject"),require("@angular/common")):e.KendoAngularLayout=t(e["@angular/core"],e["rxjs/Subject"],e["@angular/common"])}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var i=n(1);t.PanelBarComponent=i.PanelBarComponent;var o=n(5);t.PanelBarItemComponent=o.PanelBarItemComponent;var a=n(8);t.PanelBarContentDirective=a.PanelBarContentDirective;var r=n(9);t.PanelBarItemTemplateDirective=r.PanelBarItemTemplateDirective;var s=n(4);t.PanelBarExpandMode=s.PanelBarExpandMode;var l=n(10);t.TabstripComponent=l.TabstripComponent;var c=n(11);t.TabstripTabComponent=c.TabstripTabComponent;var d=n(12);t.TabContentDirective=d.TabContentDirective;var p=n(13);t.TabTitleDirective=p.TabTitleDirective;var u=n(14);t.LayoutModule=u.LayoutModule},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(3),s=n(4),l=n(5),c=n(6),d=n(9),p=function(){function e(e,t){var n=this;this.expandMode=s.PanelBarExpandMode.Default,this.selectable=!0,this.height="400px",this.onFocus=new a.EventEmitter,this.onBlur=new a.EventEmitter,this.onChange=new a.EventEmitter,this.onKeyDown=new a.EventEmitter,this.tabIndex=0,this.role="tree",this.activeDescendant="",this.isViewInit=!0,this.focused=!1,this.keyBinding=(i={},i[r.Keys.space]=function(){return n.selectFocusedItem()},i[r.Keys.enter]=function(){return n.selectFocusedItem()},i[r.Keys.up]=function(){return n.focusPreviousItem()},i[r.Keys.left]=function(){return n.collapseItem()},i[r.Keys.down]=function(){return n.focusNextItem()},i[r.Keys.right]=function(){return n.expandItem()},i[r.Keys.end]=function(){return n.focusLastItem()},i[r.Keys.home]=function(){return n.focusFirstItem()},i),this.updateChildrenHeight=function(){var e=0,t=n.elementRef.nativeElement.offsetHeight,i=n.expandMode===s.PanelBarExpandMode.Full?"auto":"visible";n.childrenItems.forEach(function(t){e+=t.headerHeight()}),n.childrenItems.forEach(function(o){o.contentHeight=s.PanelBarExpandMode.Full===n.expandMode?t-e+"px":"auto",o.contentOverflow=i})},this.elementRef=e,this.eventService=t,this.eventService.children$.subscribe(function(e){return n.onItemAction(e)});var i}return Object.defineProperty(e.prototype,"hostHeight",{get:function(){return this.expandMode===s.PanelBarExpandMode.Full?this.height:"auto"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"overflow",{get:function(){return this.expandMode===s.PanelBarExpandMode.Full?"hidden":"visible"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"viewItems",{get:function(){var e=[];return this.viewChildItems.toArray().forEach(function(t){e.push(t),e=e.concat(t.subTreeViewItems())}),e},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewChecked=function(){this.items?(this.childrenItems=this.viewChildItems.toArray(),this.allItems=this.viewItems):(this.childrenItems=this.contentChildItems.toArray(),this.allItems=this.contentItems.toArray()),this.isViewInit&&this.childrenItems.length&&(this.isViewInit=!1,setTimeout(this.updateChildrenHeight)),this.validateConfiguration()},e.prototype.ngOnChanges=function(e){(e.height||e.expandMode||e.items)&&this.childrenItems&&setTimeout(this.updateChildrenHeight)},Object.defineProperty(e.prototype,"templateRef",{get:function(){return this.template?this.template.templateRef:void 0},enumerable:!0,configurable:!0}),e.prototype.validateConfiguration=function(){if(a.isDevMode()&&this.items&&this.contentItems&&this.contentItems.length>0)throw new Error("Invalid configuration: mixed template components and items property.")},e.prototype.onItemAction=function(e){var t=this;if(e){var n=new Array;if(this.allItems.forEach(function(i){var o=i===e,a=o;o=t.selectable?o:i.selected,i.selected===o&&i.focused===a||(i.selected=o,i.focused=a,t.activeDescendant=a?i.itemId:"",n.push(i))}),this.expandMode===s.PanelBarExpandMode.Multiple)e.expanded=!e.expanded,n.indexOf(e)<0&&n.push(e);else{var i=e.parent?e.parent.childrenItems:this.childrenItems;(e.hasChildItems||e.hasContent)&&i.forEach(function(t){var i=t===e;t.expanded!==i&&(t.expanded=i,n.indexOf(t)<0&&n.push(t))})}n.length>0&&this.onChange.emit(n.map(function(e){return e.serialize()}))}},Object.defineProperty(e.prototype,"className",{get:function(){return"k-panelbar k-widget k-header"},enumerable:!0,configurable:!0}),e.prototype.onComponentFocus=function(){if(this.onFocus.emit(this),this.eventService.onFocus(),this.focused=!0,this.allItems.length>0){var e=this.visibleItems(),t=e.filter(function(e){return e.focused});!t.length&&e.length>0&&(e[0].focused=!0,this.activeDescendant=e[0].itemId)}},e.prototype.onComponentBlur=function(){this.onBlur.emit(this),this.eventService.onBlur(),this.focused=!1,this.activeDescendant=""},e.prototype.onComponentKeyDown=function(e){this.onKeyDown.emit(e);var t=this.keyBinding[e.keyCode];t&&t()},e.prototype.focusItem=function(e){var t,n=this.visibleItems(),i=n.findIndex(function(e){return e.focused}),o=n[i];switch(e){case"lastItem":t=n[n.length-1];break;case"firstItem":t=n[0];break;case"nextItem":t=n[i<n.length-1?i+1:0];break;case"previousItem":t=n[i>0?i-1:n.length-1]}o&&t&&o!==t&&this.moveFocus(o,t)},e.prototype.moveFocus=function(e,t){e.focused=!1,t.focused=!0,this.activeDescendant=t.itemId;var n=new Array(e.serialize(),t.serialize());this.onChange.emit(n)},e.prototype.focusLastItem=function(){this.focusItem("lastItem")},e.prototype.focusFirstItem=function(){this.focusItem("firstItem")},e.prototype.focusNextItem=function(){this.focusItem("nextItem")},e.prototype.focusPreviousItem=function(){this.focusItem("previousItem")},e.prototype.expandItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];if(e.hasChildItems||e.hasContent)if(e.expanded){if(e.hasChildItems){var t=e.childrenItems.findIndex(function(e){return!e.disabled});t>-1&&this.moveFocus(e,e.childrenItems[t])}}else this.onItemAction(e)},e.prototype.collapseItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];e.expanded?this.onItemAction(e):e.parent&&this.moveFocus(e,e.parent)},e.prototype.selectFocusedItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];e&&e.onItemAction()},e.prototype.visibleItems=function(){return this.flatVisibleItems(this.childrenItems)},e.prototype.flatVisibleItems=function(e,t){var n=this;return void 0===e&&(e=new Array),void 0===t&&(t=new Array),e.forEach(function(e){e.disabled||(t.push(e),e.expanded&&e.hasChildItems&&n.flatVisibleItems(e.childrenItems,t))}),t},i([a.Input(),o("design:type",Number)],e.prototype,"expandMode",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"selectable",void 0),i([a.Input(),o("design:type",Object)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Array)],e.prototype,"items",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onFocus",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onBlur",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onChange",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onKeyDown",void 0),i([a.HostBinding("tabIndex"),o("design:type",Number)],e.prototype,"tabIndex",void 0),i([a.HostBinding("attr.role"),o("design:type",String)],e.prototype,"role",void 0),i([a.HostBinding("attr.aria-activedescendant"),o("design:type",String)],e.prototype,"activeDescendant",void 0),i([a.HostBinding("style.height"),o("design:type",String)],e.prototype,"hostHeight",null),i([a.HostBinding("style.overflow"),o("design:type",String)],e.prototype,"overflow",null),i([a.ContentChild(d.PanelBarItemTemplateDirective),o("design:type",d.PanelBarItemTemplateDirective)],e.prototype,"template",void 0),i([a.ContentChildren(l.PanelBarItemComponent,{descendants:!0}),o("design:type",a.QueryList)],e.prototype,"contentItems",void 0),i([a.ContentChildren(l.PanelBarItemComponent),o("design:type",a.QueryList)],e.prototype,"contentChildItems",void 0),i([a.ViewChildren(l.PanelBarItemComponent),o("design:type",a.QueryList)],e.prototype,"viewChildItems",void 0),i([a.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([a.HostListener("focus"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onComponentFocus",null),i([a.HostListener("blur"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onComponentBlur",null),i([a.HostListener("keydown",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],e.prototype,"onComponentKeyDown",null),e=i([a.Component({providers:[c.PanelBarService],selector:"kendo-panelbar",template:'\n        <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>\n        <template [ngIf]="items?.length">\n            <kendo-panelbar-item\n                *ngFor="let item of items"\n                 [title]="item.title"\n                 [id]="item.id"\n                 [icon]="item.icon"\n                 [imageUrl]="item.imageUrl"\n                 [selected]="!!item.selected"\n                 [expanded]="!!item.expanded"\n                 [disabled]="!!item.disabled"\n                 [focused]="!!item.focused"\n                 [template]="templateRef"\n                 [items]="item.children"\n                 [content]="item.content"\n            >\n            </kendo-panelbar-item>\n        </template>\n    '}),o("design:paramtypes",[a.ElementRef,c.PanelBarService])],e)}();t.PanelBarComponent=p},function(t,n){t.exports=e},function(e,t){"use strict";!function(e){e[e.backspace=8]="backspace",e[e.tab=9]="tab",e[e.enter=13]="enter",e[e.shift=16]="shift",e[e.ctrl=17]="ctrl",e[e.alt=18]="alt",e[e["pause/break"]=19]="pause/break",e[e["caps lock"]=20]="caps lock",e[e.esc=27]="esc",e[e.space=32]="space",e[e["page up"]=33]="page up",e[e["page down"]=34]="page down",e[e.end=35]="end",e[e.home=36]="home",e[e.left=37]="left",e[e.up=38]="up",e[e.right=39]="right",e[e.down=40]="down",e[e.insert=45]="insert",e[e.delete=46]="delete",e[e.command=91]="command",e[e["left command"]=91]="left command",e[e["right command"]=93]="right command",e[e["numpad *"]=106]="numpad *",e[e["numpad +"]=107]="numpad +",e[e["numpad -"]=109]="numpad -",e[e["numpad ."]=110]="numpad .",e[e["numpad /"]=111]="numpad /",e[e["num lock"]=144]="num lock",e[e["scroll lock"]=145]="scroll lock",e[e["my computer"]=182]="my computer",e[e["my calculator"]=183]="my calculator",e[e[";"]=186]=";",e[e["="]=187]="=",e[e[","]=188]=",",e[e["-"]=189]="-",e[e["."]=190]=".",e[e["/"]=191]="/",e[e["`"]=192]="`",e[e["["]=219]="[",e[e["\\"]=220]="\\",e[e["]"]=221]="]",e[e["'"]=222]="'"}(t.Keys||(t.Keys={}));t.Keys},function(e,t){"use strict";!function(e){e[e.Single=0]="Single",e[e.Full=1]="Full",e[e.Multiple=2]="Multiple",e[e.Default=2]="Default"}(t.PanelBarExpandMode||(t.PanelBarExpandMode={}));t.PanelBarExpandMode},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},r=n(2),s=n(6),l=n(8),c=0,d=function(){function e(e,t){var n=this;this.title="Untitled",this.id="default-"+c++,this.icon="",this.iconClass="",this.imageUrl="",this.disabled=!1,this.focused=!1,this.selected=!1,this.hasChildItems=!1,this.hasContent=!1,this.state="",this.role="treeitem",this.titleAttribute=null,this.wrapperFocused=!1,this._expanded=!1,this.eventService=t,this.eventService.parent$.subscribe(function(e){return n.onWrapperFocusChange(e)}),this.wrapperFocused=!!e&&e.focused,this.parent=e}return Object.defineProperty(e.prototype,"expanded",{get:function(){return this._expanded},set:function(e){this.state=e?"active":"",this._expanded=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"className",{get:function(){return this.resolveClasses({"k-item":!0,"k-state-default":!this.disabled,"k-state-disabled":this.disabled,"k-state-expanded":!this.disabled&&this.expanded&&(this.hasChildItems||this.hasContent)})},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"itemId",{get:function(){return"k-panelbar-item-"+this.id},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaExpanded",{get:function(){return this.hasChildItems||this.hasContent?!this.disabled&&this.expanded:null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaSelected",{get:function(){return!this.disabled&&this.selected},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaDisabled",{get:function(){return!!this.disabled||null},enumerable:!0,configurable:!0}),e.prototype.headerHeight=function(){return this.header.nativeElement.offsetHeight},e.prototype.ngAfterContentChecked=function(){this.hasChildItems=this.contentItems.length>1||this.items&&this.items.length>0,this.hasContent=void 0!==this.contentTemplate||void 0!==this.content,this.validateConfiguration()},e.prototype.ngAfterViewChecked=function(){var e=this;this.items?this.childrenItems=this.viewChildItems.toArray():this.childrenItems=this.contentItems.filter(function(t){return t!==e})},e.prototype.onItemAction=function(){this.disabled||this.eventService.onSelect(this)},Object.defineProperty(e.prototype,"iconClasses",{get:function(){var e=this.icon?"k-i-"+this.icon:null;return t={},t[e||this.iconClass]=!0,t;var t},enumerable:!0,configurable:!0}),e.prototype.serialize=function(){return{content:this.content,disabled:this.disabled,expanded:this.expanded,focused:this.focused,icon:this.icon,iconClass:this.iconClass,id:this.id,imageUrl:this.imageUrl,selected:this.selected,title:this.title}},e.prototype.subTreeViewItems=function(){var e=[];return this.viewChildItems.forEach(function(t){e=e.concat(t.subTreeViewItems()),e.push(t)}),e},e.prototype.validateConfiguration=function(){if(r.isDevMode()&&this.content&&void 0!==this.contentTemplate)throw new Error("Invalid configuration: mixed template components and component property.")},e.prototype.onWrapperFocusChange=function(e){this.wrapperFocused=e},e.prototype.resolveClasses=function(e){var t="";return Object.keys(e).forEach(function(n){t+=e[n]?n+" ":""}),t},i([r.Input(),o("design:type",String)],e.prototype,"title",void 0),i([r.Input(),o("design:type",String)],e.prototype,"id",void 0),i([r.Input(),o("design:type",String)],e.prototype,"icon",void 0),i([r.Input(),o("design:type",String)],e.prototype,"iconClass",void 0),i([r.Input(),o("design:type",String)],e.prototype,"imageUrl",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"disabled",void 0),i([r.Input(),o("design:type",Boolean),o("design:paramtypes",[Boolean])],e.prototype,"expanded",null),i([r.Input(),o("design:type",Boolean)],e.prototype,"focused",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"selected",void 0),i([r.Input(),o("design:type",Object)],e.prototype,"content",void 0),i([r.Input(),o("design:type",Array)],e.prototype,"items",void 0),i([r.Input(),o("design:type",r.TemplateRef)],e.prototype,"template",void 0),i([r.ViewChild("header",{}),o("design:type",r.ElementRef)],e.prototype,"header",void 0),i([r.HostBinding("attr.role"),o("design:type",String)],e.prototype,"role",void 0),i([r.HostBinding("attr.title"),o("design:type",String)],e.prototype,"titleAttribute",void 0),i([r.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([r.HostBinding("id"),o("design:type",String)],e.prototype,"itemId",null),i([r.HostBinding("attr.aria-expanded"),o("design:type",Boolean)],e.prototype,"ariaExpanded",null),i([r.HostBinding("attr.aria-selected"),o("design:type",Boolean)],e.prototype,"ariaSelected",null),i([r.HostBinding("attr.aria-disabled"),o("design:type",Boolean)],e.prototype,"ariaDisabled",null),i([r.ViewChildren(e),o("design:type",r.QueryList)],e.prototype,"viewChildItems",void 0),i([r.ContentChildren(e),o("design:type",r.QueryList)],e.prototype,"contentItems",void 0),i([r.ContentChild(l.PanelBarContentDirective),o("design:type",l.PanelBarContentDirective)],e.prototype,"contentTemplate",void 0),e=i([r.Component({animations:[r.trigger("toggle",[r.transition("* => void",[r.animate(200,r.style({display:"block",height:"0px"}))]),r.transition("* => active",[r.style({display:"block",height:"0px"}),r.animate(200,r.style({display:"block",height:r.AUTO_STYLE}))])])],selector:"kendo-panelbar-item",template:'<span\n            #header\n            [class.k-link]="true"\n            [class.k-header]="!parent"\n            [class.k-state-selected]="!disabled && selected"\n            [class.k-state-focused]="!disabled && focused && wrapperFocused"\n            (click)="onItemAction()"\n        >\n            <span\n                *ngIf="icon || iconClass"\n                class="k-icon"\n                [ngClass]="iconClasses"\n            ></span>\n            <img\n                *ngIf="imageUrl"\n                class="k-image"\n                [src]="imageUrl"\n                alt=""\n            >\n            {{title}}\n            <span *ngIf="hasChildItems || hasContent"\n                [class.k-icon]="true"\n                [class.k-i-arrow-n]="expanded"\n                [class.k-panelbar-collapse]="expanded"\n                [class.k-i-arrow-s]="!expanded"\n                [class.k-panelbar-expand]="!expanded"\n            ></span>\n        </span>\n        <div\n            *ngIf="!disabled && expanded && (hasChildItems || hasContent)"\n            [@toggle]="state"\n            [style.overflow]="\'hidden\'"\n            [attr.role]="\'group\'"\n            [attr.aria-hidden]="!disabled && !expanded"\n        >\n            <div\n                *ngIf="hasChildItems && !items?.length"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-panel"\n            >\n                <ng-content select="kendo-panelbar-item"></ng-content>\n            </div>\n            <div\n                *ngIf="hasContent && !content"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-content"\n            >\n                <template\n                    [ngTemplateOutlet]="contentTemplate.templateRef"\n                    [ngOutletContext]="{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf="items?.length"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-panel"\n            >\n                <kendo-panelbar-item\n                    *ngFor="let item of items"\n                    [title]="item.title"\n                    [id]="item.id"\n                    [icon]="item.icon"\n                    [imageUrl]="item.imageUrl"\n                    [selected]="!!item.selected"\n                    [expanded]="!!item.expanded"\n                    [disabled]="!!item.disabled"\n                    [focused]="!!item.focused"\n                    [template]="template"\n                    [items]="item.children"\n                    [content]="item.content"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf="content"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-content"\n            >\n                <template\n                    [ngTemplateOutlet]="template"\n                    [ngOutletContext]="{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }"\n                >\n                </template>\n                <template [ngIf]="!template">{{content}}</template>\n            </div>\n        </div>'}),a(0,r.SkipSelf()),a(0,r.Host()),a(0,r.Optional()),o("design:paramtypes",[e,s.PanelBarService])],e)}();t.PanelBarItemComponent=d},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(7),s=function(){function e(){this.parentSource=new r.Subject,this.childSource=new r.Subject,this.parent$=this.parentSource.asObservable(),this.children$=this.childSource.asObservable()}return e.prototype.onSelect=function(e){this.childSource.next(e)},e.prototype.onFocus=function(){this.parentSource.next(!0)},e.prototype.onBlur=function(){this.parentSource.next(!1)},e=i([a.Injectable(),o("design:paramtypes",[])],e)}();t.PanelBarService=s},function(e,n){e.exports=t},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoPanelBarContent]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.PanelBarContentDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},r=n(2),s=function(){function e(e){this.templateRef=e}return e=i([r.Directive({selector:"[kendoPanelBarItemTemplate]"}),a(0,r.Optional()),o("design:paramtypes",[r.TemplateRef])],e)}();t.PanelBarItemTemplateDirective=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(11),s=n(3),l=function(){function e(){var e=this;this.animate=!1,this.animations=!0,this.select=new a.EventEmitter,this.keyBinding=(t={},t[s.Keys.left]=function(t){return e.prevNavigatableIndex(t)},t[s.Keys.right]=function(t){return e.nextNavigatableIndex(t)},t[s.Keys.down]=function(t){return e.nextNavigatableIndex(t)},t[s.Keys.up]=function(t){return e.prevNavigatableIndex(t)},t[s.Keys.home]=function(){return e.firstNavigatableIndex()},t[s.Keys.end]=function(){return e.lastNavigatableIndex()},t);var t}return Object.defineProperty(e.prototype,"className",{get:function(){return"k-widget k-header k-tabstrip k-floatwrap k-tabstrip-top"},enumerable:!0,configurable:!0}),e.prototype.onKeyDown=function(e){var t=this.tabs.toArray().findIndex(function(e){return e.active&&!e.disabled});if(t===-1)this.selectTab(this.firstNavigatableIndex());else{var n=this.keyBinding[e.keyCode];if(n){var i=n(t);t!==i&&this.selectTab(n(t))}}},e.prototype.tabPanelId=function(e){return"k-tabstrip-tabpanel-"+e},e.prototype.tabId=function(e){return"k-tabstrip-tab-"+e},e.prototype.selectTab=function(e){this.animate=!!this.animations;var t=this.tabs.toArray()[e];t&&!t.disabled&&(this.deactivateAll(),t.active=!0,this.emitEvent(t,e))},e.prototype.tabItemClass=function(e){return{"k-item":!0,"k-state-default":!0,"k-state-disabled":e.disabled,"k-state-active":e.active}},e.prototype.firstNavigatableIndex=function(){for(var e=this.tabs.toArray(),t=0;t<e.length;t++)if(!e[t].disabled)return t},e.prototype.lastNavigatableIndex=function(){for(var e=this.tabs.toArray(),t=e.length-1;t>0;t--)if(!e[t].disabled)return t},e.prototype.prevNavigatableIndex=function(e){if(e-1<0)return this.lastNavigatableIndex();for(var t=this.tabs.toArray(),n=e-1;n>-1;n--){if(!t[n].disabled)return n;if(0===n)return this.lastNavigatableIndex()}return e},e.prototype.nextNavigatableIndex=function(e){if(e+1>=this.tabs.length)return this.firstNavigatableIndex();for(var t=this.tabs.toArray(),n=e+1;n<t.length;n++){if(!t[n].disabled)return n;if(n+1===t.length)return this.firstNavigatableIndex()}},e.prototype.emitEvent=function(e,t){this.select.emit({index:t,title:e.title})},e.prototype.deactivateAll=function(){this.tabs.forEach(function(e){e.active=!1})},i([a.Input(),o("design:type",String)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"animations",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"select",void 0),i([a.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([a.ContentChildren(r.TabstripTabComponent),o("design:type",a.QueryList)],e.prototype,"tabs",void 0),e=i([a.Component({animations:[a.trigger("state",[a.state("active",a.style({opacity:1})),a.transition("void => active",[a.style({opacity:0}),a.animate("400ms ease-in")])])],selector:"kendo-tabstrip",template:'\n        <ul\n            class="k-reset k-tabstrip-items"\n            role="tablist"\n            (keydown)="onKeyDown($event)"\n            [tabIndex]="0"\n        >\n            <li *ngFor="let tab of tabs; let i = index;" (click)="selectTab(i)"\n                [ngClass]="tabItemClass(tab)"\n                role="tab"\n                [id]="tabId(i)"\n                [attr.aria-selected]="tab.active"\n                [attr.aria-controls]="tab.tabPanelId"\n                [attr.aria-disabled]="tab.disabled"\n            ><span class="k-link">{{ tab.title }}<template [ngTemplateOutlet]="tab.tabTitle?.templateRef"></template></span></li>\n        </ul>\n        <template ngFor let-tab [ngForOf]="tabs" let-i="index">\n            <div\n                [@state]="tab.active && animate ? \'active\' : \'inactive\'"\n                *ngIf="tab.active"\n                class="k-content k-state-active"\n                [ngStyle]="{\'height\': tab.height}"\n                role="tabpanel"\n                [id]="tabPanelId(i)"\n                [attr.aria-hidden]="!tab.active"\n                [attr.aria-expanded]="tab.active"\n                [attr.aria-labelledby]="tabId(i)"\n                [attr.aria-disabled]="tab.disabled"\n            >\n                <template [ngTemplateOutlet]="tab.tabContent.templateRef"></template>\n            </div>\n        </template>\n    '}),o("design:paramtypes",[])],e)}();t.TabstripComponent=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(12),s=n(13),l=function(){function e(){this.active=!1}return e.prototype.ngAfterContentInit=function(){this.active=this.selected},i([a.Input(),o("design:type",String)],e.prototype,"title",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"disabled",void 0),i([a.Input(),o("design:type",Number)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"selected",void 0),i([a.ContentChild(r.TabContentDirective),o("design:type",r.TabContentDirective)],e.prototype,"tabContent",void 0),i([a.ContentChild(s.TabTitleDirective),o("design:type",s.TabTitleDirective)],e.prototype,"tabTitle",void 0),e=i([a.Component({selector:"kendo-tabstrip-tab",template:""}),o("design:paramtypes",[])],e)}();t.TabstripTabComponent=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoTabContent]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.TabContentDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoTabTitle]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.TabTitleDirective=r;
-},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(15),s=n(1),l=n(5),c=n(8),d=n(9),p=n(10),u=n(11),f=n(12),h=n(13),m=[s.PanelBarComponent,l.PanelBarItemComponent,c.PanelBarContentDirective,d.PanelBarItemTemplateDirective,p.TabstripComponent,u.TabstripTabComponent,f.TabContentDirective,h.TabTitleDirective],y=m.slice(),g=function(){function e(){}return e=i([a.NgModule({declarations:[y],exports:[m],imports:[r.CommonModule]}),o("design:paramtypes",[])],e)}();t.LayoutModule=g},function(e,t){e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/Subject"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/Subject","@angular/common"],t):"object"==typeof exports?exports.KendoAngularLayout=t(require("@angular/core"),require("rxjs/Subject"),require("@angular/common")):e.KendoAngularLayout=t(e["@angular/core"],e["rxjs/Subject"],e["@angular/common"])}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var i=n(1);t.PanelBarComponent=i.PanelBarComponent;var o=n(5);t.PanelBarItemComponent=o.PanelBarItemComponent;var a=n(8);t.PanelBarContentDirective=a.PanelBarContentDirective;var r=n(10);t.PanelBarItemTemplateDirective=r.PanelBarItemTemplateDirective;var s=n(9);t.PanelBarItemTitleDirective=s.PanelBarItemTitleDirective;var l=n(4);t.PanelBarExpandMode=l.PanelBarExpandMode;var c=n(11);t.TabstripComponent=c.TabstripComponent;var p=n(12);t.TabstripTabComponent=p.TabstripTabComponent;var d=n(13);t.TabContentDirective=d.TabContentDirective;var u=n(14);t.TabTitleDirective=u.TabTitleDirective;var f=n(15);t.LayoutModule=f.LayoutModule},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(3),s=n(4),l=n(5),c=n(6),p=n(10),d=function(){function e(e,t){var n=this;this.expandMode=s.PanelBarExpandMode.Default,this.selectable=!0,this.height="400px",this.onFocus=new a.EventEmitter,this.onBlur=new a.EventEmitter,this.onChange=new a.EventEmitter,this.onKeyDown=new a.EventEmitter,this.tabIndex=0,this.role="tree",this.activeDescendant="",this.isViewInit=!0,this.focused=!1,this.keyBinding=(i={},i[r.Keys.space]=function(){return n.selectFocusedItem()},i[r.Keys.enter]=function(){return n.selectFocusedItem()},i[r.Keys.up]=function(){return n.focusPreviousItem()},i[r.Keys.left]=function(){return n.collapseItem()},i[r.Keys.down]=function(){return n.focusNextItem()},i[r.Keys.right]=function(){return n.expandItem()},i[r.Keys.end]=function(){return n.focusLastItem()},i[r.Keys.home]=function(){return n.focusFirstItem()},i),this.updateChildrenHeight=function(){var e=0,t=n.elementRef.nativeElement.offsetHeight,i=n.expandMode===s.PanelBarExpandMode.Full?"auto":"visible";n.childrenItems.forEach(function(t){e+=t.headerHeight()}),n.childrenItems.forEach(function(o){o.contentHeight=s.PanelBarExpandMode.Full===n.expandMode?t-e+"px":"auto",o.contentOverflow=i})},this.elementRef=e,this.eventService=t,this.eventService.children$.subscribe(function(e){return n.onItemAction(e)});var i}return Object.defineProperty(e.prototype,"hostHeight",{get:function(){return this.expandMode===s.PanelBarExpandMode.Full?this.height:"auto"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"overflow",{get:function(){return this.expandMode===s.PanelBarExpandMode.Full?"hidden":"visible"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"viewItems",{get:function(){var e=[];return this.viewChildItems.toArray().forEach(function(t){e.push(t),e=e.concat(t.subTreeViewItems())}),e},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewChecked=function(){this.items?(this.childrenItems=this.viewChildItems.toArray(),this.allItems=this.viewItems):(this.childrenItems=this.contentChildItems.toArray(),this.allItems=this.contentItems.toArray()),this.isViewInit&&this.childrenItems.length&&(this.isViewInit=!1,setTimeout(this.updateChildrenHeight)),this.validateConfiguration()},e.prototype.ngOnChanges=function(e){(e.height||e.expandMode||e.items)&&this.childrenItems&&setTimeout(this.updateChildrenHeight)},Object.defineProperty(e.prototype,"templateRef",{get:function(){return this.template?this.template.templateRef:void 0},enumerable:!0,configurable:!0}),e.prototype.validateConfiguration=function(){if(a.isDevMode()&&this.items&&this.contentItems&&this.contentItems.length>0)throw new Error("Invalid configuration: mixed template components and items property.")},e.prototype.onItemAction=function(e){var t=this;if(e){var n=new Array;if(this.allItems.forEach(function(i){var o=i===e,a=o;o=t.selectable?o:i.selected,i.selected===o&&i.focused===a||(i.selected=o,i.focused=a,t.activeDescendant=a?i.itemId:"",n.push(i))}),this.expandMode===s.PanelBarExpandMode.Multiple)e.expanded=!e.expanded,n.indexOf(e)<0&&n.push(e);else{var i=e.parent?e.parent.childrenItems:this.childrenItems;(e.hasChildItems||e.hasContent)&&i.forEach(function(t){var i=t===e;t.expanded!==i&&(t.expanded=i,n.indexOf(t)<0&&n.push(t))})}n.length>0&&this.onChange.emit(n.map(function(e){return e.serialize()}))}},Object.defineProperty(e.prototype,"className",{get:function(){return"k-panelbar k-widget k-header"},enumerable:!0,configurable:!0}),e.prototype.onComponentFocus=function(){if(this.onFocus.emit(this),this.eventService.onFocus(),this.focused=!0,this.allItems.length>0){var e=this.visibleItems(),t=e.filter(function(e){return e.focused});!t.length&&e.length>0&&(e[0].focused=!0,this.activeDescendant=e[0].itemId)}},e.prototype.onComponentBlur=function(){this.onBlur.emit(this),this.eventService.onBlur(),this.focused=!1,this.activeDescendant=""},e.prototype.onComponentKeyDown=function(e){this.onKeyDown.emit(e);var t=this.keyBinding[e.keyCode];t&&t()},e.prototype.focusItem=function(e){var t,n=this.visibleItems(),i=n.findIndex(function(e){return e.focused}),o=n[i];switch(e){case"lastItem":t=n[n.length-1];break;case"firstItem":t=n[0];break;case"nextItem":t=n[i<n.length-1?i+1:0];break;case"previousItem":t=n[i>0?i-1:n.length-1]}o&&t&&o!==t&&this.moveFocus(o,t)},e.prototype.moveFocus=function(e,t){e.focused=!1,t.focused=!0,this.activeDescendant=t.itemId;var n=new Array(e.serialize(),t.serialize());this.onChange.emit(n)},e.prototype.focusLastItem=function(){this.focusItem("lastItem")},e.prototype.focusFirstItem=function(){this.focusItem("firstItem")},e.prototype.focusNextItem=function(){this.focusItem("nextItem")},e.prototype.focusPreviousItem=function(){this.focusItem("previousItem")},e.prototype.expandItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];if(e.hasChildItems||e.hasContent)if(e.expanded){if(e.hasChildItems){var t=e.childrenItems.findIndex(function(e){return!e.disabled});t>-1&&this.moveFocus(e,e.childrenItems[t])}}else this.onItemAction(e)},e.prototype.collapseItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];e.expanded?this.onItemAction(e):e.parent&&this.moveFocus(e,e.parent)},e.prototype.selectFocusedItem=function(){var e=this.allItems.filter(function(e){return e.focused})[0];e&&e.onItemAction()},e.prototype.visibleItems=function(){return this.flatVisibleItems(this.childrenItems)},e.prototype.flatVisibleItems=function(e,t){var n=this;return void 0===e&&(e=new Array),void 0===t&&(t=new Array),e.forEach(function(e){e.disabled||(t.push(e),e.expanded&&e.hasChildItems&&n.flatVisibleItems(e.childrenItems,t))}),t},i([a.Input(),o("design:type",Number)],e.prototype,"expandMode",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"selectable",void 0),i([a.Input(),o("design:type",Object)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Array)],e.prototype,"items",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onFocus",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onBlur",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onChange",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"onKeyDown",void 0),i([a.HostBinding("tabIndex"),o("design:type",Number)],e.prototype,"tabIndex",void 0),i([a.HostBinding("attr.role"),o("design:type",String)],e.prototype,"role",void 0),i([a.HostBinding("attr.aria-activedescendant"),o("design:type",String)],e.prototype,"activeDescendant",void 0),i([a.HostBinding("style.height"),o("design:type",String)],e.prototype,"hostHeight",null),i([a.HostBinding("style.overflow"),o("design:type",String)],e.prototype,"overflow",null),i([a.ContentChild(p.PanelBarItemTemplateDirective),o("design:type",p.PanelBarItemTemplateDirective)],e.prototype,"template",void 0),i([a.ContentChildren(l.PanelBarItemComponent,{descendants:!0}),o("design:type",a.QueryList)],e.prototype,"contentItems",void 0),i([a.ContentChildren(l.PanelBarItemComponent),o("design:type",a.QueryList)],e.prototype,"contentChildItems",void 0),i([a.ViewChildren(l.PanelBarItemComponent),o("design:type",a.QueryList)],e.prototype,"viewChildItems",void 0),i([a.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([a.HostListener("focus"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onComponentFocus",null),i([a.HostListener("blur"),o("design:type",Function),o("design:paramtypes",[]),o("design:returntype",void 0)],e.prototype,"onComponentBlur",null),i([a.HostListener("keydown",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],e.prototype,"onComponentKeyDown",null),e=i([a.Component({providers:[c.PanelBarService],selector:"kendo-panelbar",template:'\n        <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>\n        <template [ngIf]="items?.length">\n            <kendo-panelbar-item\n                *ngFor="let item of items"\n                 [title]="item.title"\n                 [id]="item.id"\n                 [icon]="item.icon"\n                 [imageUrl]="item.imageUrl"\n                 [selected]="!!item.selected"\n                 [expanded]="!!item.expanded"\n                 [disabled]="!!item.disabled"\n                 [focused]="!!item.focused"\n                 [template]="templateRef"\n                 [items]="item.children"\n                 [content]="item.content"\n            >\n            </kendo-panelbar-item>\n        </template>\n    '}),o("design:paramtypes",[a.ElementRef,c.PanelBarService])],e)}();t.PanelBarComponent=d},function(t,n){t.exports=e},function(e,t){"use strict";!function(e){e[e.backspace=8]="backspace",e[e.tab=9]="tab",e[e.enter=13]="enter",e[e.shift=16]="shift",e[e.ctrl=17]="ctrl",e[e.alt=18]="alt",e[e["pause/break"]=19]="pause/break",e[e["caps lock"]=20]="caps lock",e[e.esc=27]="esc",e[e.space=32]="space",e[e["page up"]=33]="page up",e[e["page down"]=34]="page down",e[e.end=35]="end",e[e.home=36]="home",e[e.left=37]="left",e[e.up=38]="up",e[e.right=39]="right",e[e.down=40]="down",e[e.insert=45]="insert",e[e.delete=46]="delete",e[e.command=91]="command",e[e["left command"]=91]="left command",e[e["right command"]=93]="right command",e[e["numpad *"]=106]="numpad *",e[e["numpad +"]=107]="numpad +",e[e["numpad -"]=109]="numpad -",e[e["numpad ."]=110]="numpad .",e[e["numpad /"]=111]="numpad /",e[e["num lock"]=144]="num lock",e[e["scroll lock"]=145]="scroll lock",e[e["my computer"]=182]="my computer",e[e["my calculator"]=183]="my calculator",e[e[";"]=186]=";",e[e["="]=187]="=",e[e[","]=188]=",",e[e["-"]=189]="-",e[e["."]=190]=".",e[e["/"]=191]="/",e[e["`"]=192]="`",e[e["["]=219]="[",e[e["\\"]=220]="\\",e[e["]"]=221]="]",e[e["'"]=222]="'"}(t.Keys||(t.Keys={}));t.Keys},function(e,t){"use strict";!function(e){e[e.Single=0]="Single",e[e.Full=1]="Full",e[e.Multiple=2]="Multiple",e[e.Default=2]="Default"}(t.PanelBarExpandMode||(t.PanelBarExpandMode={}));t.PanelBarExpandMode},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},r=n(2),s=n(6),l=n(8),c=n(9),p=0,d=function(){function e(e,t){var n=this;this.title="Untitled",this.id="default-"+p++,this.icon="",this.iconClass="",this.imageUrl="",this.disabled=!1,this.focused=!1,this.selected=!1,this.hasChildItems=!1,this.hasContent=!1,this.state="",this.role="treeitem",this.titleAttribute=null,this.wrapperFocused=!1,this._expanded=!1,this.eventService=t,this.eventService.parent$.subscribe(function(e){return n.onWrapperFocusChange(e)}),this.wrapperFocused=!!e&&e.focused,this.parent=e}return Object.defineProperty(e.prototype,"expanded",{get:function(){return this._expanded},set:function(e){this.state=e?"active":"",this._expanded=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"className",{get:function(){return this.resolveClasses({"k-item":!0,"k-state-default":!this.disabled,"k-state-disabled":this.disabled,"k-state-expanded":!this.disabled&&this.expanded&&(this.hasChildItems||this.hasContent)})},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"itemId",{get:function(){return"k-panelbar-item-"+this.id},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaExpanded",{get:function(){return this.hasChildItems||this.hasContent?!this.disabled&&this.expanded:null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaSelected",{get:function(){return!this.disabled&&this.selected},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaDisabled",{get:function(){return!!this.disabled||null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"titleTemplate",{get:function(){return this.titleTemplates.length>0?this.titleTemplates.toArray()[0].templateRef:void 0},enumerable:!0,configurable:!0}),e.prototype.headerHeight=function(){return this.header.nativeElement.offsetHeight},e.prototype.ngAfterContentChecked=function(){this.hasChildItems=this.contentItems.length>1||this.items&&this.items.length>0,this.hasContent=void 0!==this.contentTemplate||void 0!==this.content,this.validateConfiguration()},e.prototype.ngAfterViewChecked=function(){var e=this;this.items?this.childrenItems=this.viewChildItems.toArray():this.childrenItems=this.contentItems.filter(function(t){return t!==e})},e.prototype.onItemAction=function(){this.disabled||this.eventService.onSelect(this)},Object.defineProperty(e.prototype,"iconClasses",{get:function(){var e=this.icon?"k-i-"+this.icon:null;return t={},t[e||this.iconClass]=!0,t;var t},enumerable:!0,configurable:!0}),e.prototype.serialize=function(){return{content:this.content,disabled:this.disabled,expanded:this.expanded,focused:this.focused,icon:this.icon,iconClass:this.iconClass,id:this.id,imageUrl:this.imageUrl,selected:this.selected,title:this.title}},e.prototype.subTreeViewItems=function(){var e=[];return this.viewChildItems.forEach(function(t){e=e.concat(t.subTreeViewItems()),e.push(t)}),e},e.prototype.validateConfiguration=function(){if(r.isDevMode()&&this.content&&void 0!==this.contentTemplate)throw new Error("Invalid configuration: mixed template components and component property.")},e.prototype.onWrapperFocusChange=function(e){this.wrapperFocused=e},e.prototype.resolveClasses=function(e){var t="";return Object.keys(e).forEach(function(n){t+=e[n]?n+" ":""}),t},i([r.Input(),o("design:type",String)],e.prototype,"title",void 0),i([r.Input(),o("design:type",String)],e.prototype,"id",void 0),i([r.Input(),o("design:type",String)],e.prototype,"icon",void 0),i([r.Input(),o("design:type",String)],e.prototype,"iconClass",void 0),i([r.Input(),o("design:type",String)],e.prototype,"imageUrl",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"disabled",void 0),i([r.Input(),o("design:type",Boolean),o("design:paramtypes",[Boolean])],e.prototype,"expanded",null),i([r.Input(),o("design:type",Boolean)],e.prototype,"focused",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"selected",void 0),i([r.Input(),o("design:type",Object)],e.prototype,"content",void 0),i([r.Input(),o("design:type",Array)],e.prototype,"items",void 0),i([r.Input(),o("design:type",r.TemplateRef)],e.prototype,"template",void 0),i([r.ViewChild("header",{}),o("design:type",r.ElementRef)],e.prototype,"header",void 0),i([r.HostBinding("attr.role"),o("design:type",String)],e.prototype,"role",void 0),i([r.HostBinding("attr.title"),o("design:type",String)],e.prototype,"titleAttribute",void 0),i([r.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([r.HostBinding("id"),o("design:type",String)],e.prototype,"itemId",null),i([r.HostBinding("attr.aria-expanded"),o("design:type",Boolean)],e.prototype,"ariaExpanded",null),i([r.HostBinding("attr.aria-selected"),o("design:type",Boolean)],e.prototype,"ariaSelected",null),i([r.HostBinding("attr.aria-disabled"),o("design:type",Boolean)],e.prototype,"ariaDisabled",null),i([r.ViewChildren(e),o("design:type",r.QueryList)],e.prototype,"viewChildItems",void 0),i([r.ContentChildren(e),o("design:type",r.QueryList)],e.prototype,"contentItems",void 0),i([r.ContentChild(l.PanelBarContentDirective),o("design:type",l.PanelBarContentDirective)],e.prototype,"contentTemplate",void 0),i([r.ContentChildren(c.PanelBarItemTitleDirective,{descendants:!1}),o("design:type",r.QueryList)],e.prototype,"titleTemplates",void 0),e=i([r.Component({animations:[r.trigger("toggle",[r.transition("* => void",[r.animate(200,r.style({display:"block",height:"0px"}))]),r.transition("* => active",[r.style({display:"block",height:"0px"}),r.animate(200,r.style({display:"block",height:r.AUTO_STYLE}))])])],selector:"kendo-panelbar-item",template:'<span\n            #header\n            [class.k-link]="true"\n            [class.k-header]="!parent"\n            [class.k-state-selected]="!disabled && selected"\n            [class.k-state-focused]="!disabled && focused && wrapperFocused"\n            (click)="onItemAction()"\n        >\n            <span\n                *ngIf="icon || iconClass"\n                class="k-icon"\n                [ngClass]="iconClasses"\n            ></span>\n            <img\n                *ngIf="imageUrl"\n                class="k-image"\n                [src]="imageUrl"\n                alt=""\n            >\n            {{title}}\n            <template [ngTemplateOutlet]="titleTemplate"></template>\n            <span *ngIf="hasChildItems || hasContent"\n                [class.k-icon]="true"\n                [class.k-i-arrow-n]="expanded"\n                [class.k-panelbar-collapse]="expanded"\n                [class.k-i-arrow-s]="!expanded"\n                [class.k-panelbar-expand]="!expanded"\n            ></span>\n        </span>\n        <div\n            *ngIf="!disabled && expanded && (hasChildItems || hasContent)"\n            [@toggle]="state"\n            [style.overflow]="\'hidden\'"\n            [attr.role]="\'group\'"\n            [attr.aria-hidden]="!disabled && !expanded"\n        >\n            <div\n                *ngIf="hasChildItems && !items?.length"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-panel"\n            >\n                <ng-content select="kendo-panelbar-item"></ng-content>\n            </div>\n            <div\n                *ngIf="hasContent && !content"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-content"\n            >\n                <template\n                    [ngTemplateOutlet]="contentTemplate.templateRef"\n                    [ngOutletContext]="{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf="items?.length"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-panel"\n            >\n                <kendo-panelbar-item\n                    *ngFor="let item of items"\n                    [title]="item.title"\n                    [id]="item.id"\n                    [icon]="item.icon"\n                    [imageUrl]="item.imageUrl"\n                    [selected]="!!item.selected"\n                    [expanded]="!!item.expanded"\n                    [disabled]="!!item.disabled"\n                    [focused]="!!item.focused"\n                    [template]="template"\n                    [items]="item.children"\n                    [content]="item.content"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf="content"\n                [style.overflow]="contentOverflow"\n                [style.height]="contentHeight"\n                class="k-content"\n            >\n                <template\n                    [ngTemplateOutlet]="template"\n                    [ngOutletContext]="{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }"\n                >\n                </template>\n                <template [ngIf]="!template">{{content}}</template>\n            </div>\n        </div>'}),a(0,r.SkipSelf()),a(0,r.Host()),a(0,r.Optional()),o("design:paramtypes",[e,s.PanelBarService])],e)}();t.PanelBarItemComponent=d},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(7),s=function(){function e(){this.parentSource=new r.Subject,this.childSource=new r.Subject,this.parent$=this.parentSource.asObservable(),this.children$=this.childSource.asObservable()}return e.prototype.onSelect=function(e){this.childSource.next(e)},e.prototype.onFocus=function(){this.parentSource.next(!0)},e.prototype.onBlur=function(){this.parentSource.next(!1)},e=i([a.Injectable(),o("design:paramtypes",[])],e)}();t.PanelBarService=s},function(e,n){e.exports=t},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoPanelBarContent]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.PanelBarContentDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},r=n(2),s=function(){function e(e){this.templateRef=e}return e=i([r.Directive({selector:"[kendoPanelBarItemTitle]"}),a(0,r.Optional()),o("design:paramtypes",[r.TemplateRef])],e)}();t.PanelBarItemTitleDirective=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},r=n(2),s=function(){function e(e){this.templateRef=e}return e=i([r.Directive({selector:"[kendoPanelBarItemTemplate]"}),a(0,r.Optional()),o("design:paramtypes",[r.TemplateRef])],e)}();t.PanelBarItemTemplateDirective=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(12),s=n(3),l=function(){function e(){var e=this;this.animate=!1,this.animations=!0,this.select=new a.EventEmitter,this.keyBinding=(t={},t[s.Keys.left]=function(t){return e.prevNavigatableIndex(t)},t[s.Keys.right]=function(t){return e.nextNavigatableIndex(t)},t[s.Keys.down]=function(t){return e.nextNavigatableIndex(t)},t[s.Keys.up]=function(t){return e.prevNavigatableIndex(t)},t[s.Keys.home]=function(){return e.firstNavigatableIndex()},t[s.Keys.end]=function(){return e.lastNavigatableIndex()},t);var t}return Object.defineProperty(e.prototype,"className",{get:function(){return"k-widget k-header k-tabstrip k-floatwrap k-tabstrip-top"},enumerable:!0,configurable:!0}),e.prototype.onKeyDown=function(e){var t=this.tabs.toArray().findIndex(function(e){return e.active&&!e.disabled});if(t===-1)this.selectTab(this.firstNavigatableIndex());else{var n=this.keyBinding[e.keyCode];if(n){var i=n(t);t!==i&&this.selectTab(n(t))}}},e.prototype.tabPanelId=function(e){return"k-tabstrip-tabpanel-"+e},e.prototype.tabId=function(e){return"k-tabstrip-tab-"+e},e.prototype.selectTab=function(e){this.animate=!!this.animations;var t=this.tabs.toArray()[e];t&&!t.disabled&&(this.deactivateAll(),t.active=!0,this.emitEvent(t,e))},e.prototype.tabItemClass=function(e){return{"k-item":!0,"k-state-default":!0,"k-state-disabled":e.disabled,"k-state-active":e.active}},e.prototype.firstNavigatableIndex=function(){for(var e=this.tabs.toArray(),t=0;t<e.length;t++)if(!e[t].disabled)return t},e.prototype.lastNavigatableIndex=function(){for(var e=this.tabs.toArray(),t=e.length-1;t>0;t--)if(!e[t].disabled)return t},e.prototype.prevNavigatableIndex=function(e){if(e-1<0)return this.lastNavigatableIndex();for(var t=this.tabs.toArray(),n=e-1;n>-1;n--){if(!t[n].disabled)return n;if(0===n)return this.lastNavigatableIndex()}return e},e.prototype.nextNavigatableIndex=function(e){if(e+1>=this.tabs.length)return this.firstNavigatableIndex();for(var t=this.tabs.toArray(),n=e+1;n<t.length;n++){if(!t[n].disabled)return n;if(n+1===t.length)return this.firstNavigatableIndex()}},e.prototype.emitEvent=function(e,t){this.select.emit({index:t,title:e.title})},e.prototype.deactivateAll=function(){this.tabs.forEach(function(e){e.active=!1})},i([a.Input(),o("design:type",String)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"animations",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"select",void 0),i([a.HostBinding("class"),o("design:type",String)],e.prototype,"className",null),i([a.ContentChildren(r.TabstripTabComponent),o("design:type",a.QueryList)],e.prototype,"tabs",void 0),e=i([a.Component({animations:[a.trigger("state",[a.state("active",a.style({opacity:1})),a.transition("void => active",[a.style({opacity:0}),a.animate("400ms ease-in")])])],selector:"kendo-tabstrip",template:'\n        <ul\n            class="k-reset k-tabstrip-items"\n            role="tablist"\n            (keydown)="onKeyDown($event)"\n            [tabIndex]="0"\n        >\n            <li *ngFor="let tab of tabs; let i = index;" (click)="selectTab(i)"\n                [ngClass]="tabItemClass(tab)"\n                role="tab"\n                [id]="tabId(i)"\n                [attr.aria-selected]="tab.active"\n                [attr.aria-controls]="tab.tabPanelId"\n                [attr.aria-disabled]="tab.disabled"\n            ><span class="k-link">{{ tab.title }}<template [ngTemplateOutlet]="tab.tabTitle?.templateRef"></template></span></li>\n        </ul>\n        <template ngFor let-tab [ngForOf]="tabs" let-i="index">\n            <div\n                [@state]="tab.active && animate ? \'active\' : \'inactive\'"\n                *ngIf="tab.active"\n                class="k-content k-state-active"\n                [ngStyle]="{\'height\': tab.height}"\n                role="tabpanel"\n                [id]="tabPanelId(i)"\n                [attr.aria-hidden]="!tab.active"\n                [attr.aria-expanded]="tab.active"\n                [attr.aria-labelledby]="tabId(i)"\n                [attr.aria-disabled]="tab.disabled"\n            >\n                <template [ngTemplateOutlet]="tab.tabContent.templateRef"></template>\n            </div>\n        </template>\n    '}),o("design:paramtypes",[])],e)}();t.TabstripComponent=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(13),s=n(14),l=function(){function e(){this.active=!1}return e.prototype.ngAfterContentInit=function(){this.active=this.selected},i([a.Input(),o("design:type",String)],e.prototype,"title",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"disabled",void 0),i([a.Input(),o("design:type",Number)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"selected",void 0),i([a.ContentChild(r.TabContentDirective),o("design:type",r.TabContentDirective)],e.prototype,"tabContent",void 0),i([a.ContentChild(s.TabTitleDirective),o("design:type",s.TabTitleDirective)],e.prototype,"tabTitle",void 0),e=i([a.Component({selector:"kendo-tabstrip-tab",template:""}),o("design:paramtypes",[])],e)}();t.TabstripTabComponent=l},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;
+if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoTabContent]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.TabContentDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=function(){function e(e){this.templateRef=e}return e=i([a.Directive({selector:"[kendoTabTitle]"}),o("design:paramtypes",[a.TemplateRef])],e)}();t.TabTitleDirective=r},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,a=arguments.length,r=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(r=(a<3?o(r):a>3?o(t,n,r):o(t,n))||r);return a>3&&r&&Object.defineProperty(t,n,r),r},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},a=n(2),r=n(16),s=n(1),l=n(5),c=n(8),p=n(10),d=n(9),u=n(11),f=n(12),h=n(13),m=n(14),y=[s.PanelBarComponent,l.PanelBarItemComponent,c.PanelBarContentDirective,p.PanelBarItemTemplateDirective,d.PanelBarItemTitleDirective,u.TabstripComponent,f.TabstripTabComponent,h.TabContentDirective,m.TabTitleDirective],g=y.slice(),v=function(){function e(){}return e=i([a.NgModule({declarations:[g],exports:[y],imports:[r.CommonModule]}),o("design:paramtypes",[])],e)}();t.LayoutModule=v},function(e,t){e.exports=n}])});

dist/es/layout.module.d.ts

@@ -11,2 +11,3 @@ /**
  * - `PanelBarItemTemplateDirective—The `PanelBarItemTemplate` directive.
+ * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
  * - `TabstripComponent`—The `Tabstrip` component class.
@@ -13,0 +14,0 @@ * - `TabstripTabComponent`—The `TabstripTab` component class.

dist/es/layout.module.js

@@ -7,2 +7,3 @@ import { NgModule } from '@angular/core';
 import { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
+import { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 import { TabstripComponent } from './tabstrip/tabstrip.component';
@@ -17,2 +18,3 @@ import { TabstripTabComponent } from './tabstrip/tabstrip-tab.component';
     PanelBarItemTemplateDirective,
+    PanelBarItemTitleDirective,
     TabstripComponent,
@@ -34,2 +36,3 @@ TabstripTabComponent,
  * - `PanelBarItemTemplateDirective—The `PanelBarItemTemplate` directive.
+ * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
  * - `TabstripComponent`—The `Tabstrip` component class.
@@ -36,0 +39,0 @@ * - `TabstripTabComponent`—The `TabstripTab` component class.

dist/es/layout.module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}

dist/es/main.d.ts

@@ -5,2 +5,3 @@ export { PanelBarComponent } from './panelbar/panelbar.component';
 export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
+export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
@@ -7,0 +8,0 @@ export { PanelBarItemModel } from './panelbar/panelbar-item-model';

dist/es/main.js

@@ -5,2 +5,3 @@ export { PanelBarComponent } from './panelbar/panelbar.component';
 export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
+export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
@@ -7,0 +8,0 @@ export { TabstripComponent } from './tabstrip/tabstrip.component';

dist/es/main.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.directive","export":["PanelBarContentDirective"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./tabstrip/tab-content.directive","export":["TabContentDirective"]},{"from":"./tabstrip/tab-title.directive","export":["TabTitleDirective"]},{"from":"./layout.module","export":["LayoutModule"]}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.directive","export":["PanelBarContentDirective"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-item-title.directive","export":["PanelBarItemTitleDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./tabstrip/tab-content.directive","export":["TabContentDirective"]},{"from":"./tabstrip/tab-title.directive","export":["TabTitleDirective"]},{"from":"./layout.module","export":["LayoutModule"]}]}

dist/es/panelbar/panelbar-item.component.d.ts

 import { TemplateRef, QueryList, AfterContentChecked, AfterViewChecked, ElementRef } from '@angular/core';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
+import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 import { PanelBarItemModel } from './panelbar-item-model';
@@ -79,5 +80,10 @@ /**
     readonly ariaDisabled: boolean;
+    /**
+     * @hidden
+     */
+    readonly titleTemplate: TemplateRef<any>;
     viewChildItems: QueryList<PanelBarItemComponent>;
     contentItems: QueryList<PanelBarItemComponent>;
     contentTemplate: PanelBarContentDirective;
+    titleTemplates: QueryList<PanelBarItemTitleDirective>;
     wrapperFocused: boolean;
@@ -84,0 +90,0 @@ private eventService;

dist/es/panelbar/panelbar-item.component.js

 import { Component, Input, ContentChildren, ContentChild, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, AUTO_STYLE, ViewChild, animate, trigger, style, transition } from '@angular/core';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
+import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 /**
@@ -116,2 +117,12 @@ * @hidden
     });
+    Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.titleTemplates.length > 0 ? this.titleTemplates.toArray()[0].templateRef : undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -228,3 +239,3 @@ * @hidden
                     selector: "kendo-panelbar-item",
-                    template: "<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"
+                    template: "<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <template [ngTemplateOutlet]=\"titleTemplate\"></template>\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"
                 },] },
@@ -261,4 +272,5 @@ ];
         'contentTemplate': [{ type: ContentChild, args: [PanelBarContentDirective,] },],
+        'titleTemplates': [{ type: ContentChildren, args: [PanelBarItemTitleDirective, { descendants: false },] },],
     };
     return PanelBarItemComponent;
 }());

dist/es/panelbar/panelbar-item.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"PanelBarItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":{"__symbolic":"reference","module":"@angular/core","name":"AUTO_STYLE"}}]}]}]]}]]}],"selector":"kendo-panelbar-item","template":"<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["header",{}]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"titleAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.title"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"itemId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-selected"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"viewChildItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./panelbar-content.directive","name":"PanelBarContentDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar.service","name":"PanelBarService"}]}],"headerHeight":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemAction":[{"__symbolic":"method"}],"serialize":[{"__symbolic":"method"}],"subTreeViewItems":[{"__symbolic":"method"}],"validateConfiguration":[{"__symbolic":"method"}],"onWrapperFocusChange":[{"__symbolic":"method"}],"resolveClasses":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"PanelBarItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":{"__symbolic":"reference","module":"@angular/core","name":"AUTO_STYLE"}}]}]}]]}]]}],"selector":"kendo-panelbar-item","template":"<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <template [ngTemplateOutlet]=\"titleTemplate\"></template>\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["header",{}]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"titleAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.title"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"itemId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-selected"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"viewChildItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./panelbar-content.directive","name":"PanelBarContentDirective"}]}]}],"titleTemplates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar.service","name":"PanelBarService"}]}],"headerHeight":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemAction":[{"__symbolic":"method"}],"serialize":[{"__symbolic":"method"}],"subTreeViewItems":[{"__symbolic":"method"}],"validateConfiguration":[{"__symbolic":"method"}],"onWrapperFocusChange":[{"__symbolic":"method"}],"resolveClasses":[{"__symbolic":"method"}]}}}}

dist/es/tabstrip/tab-title.directive.d.ts

@@ -17,3 +17,3 @@ import { TemplateRef } from '@angular/core';
  *               Title
- *             </template kendoTabTitle>
+ *             </template>
  *             <template kendoTabContent>
@@ -20,0 +20,0 @@ *               <h3>Content 1</h3>

dist/es/tabstrip/tab-title.directive.js

@@ -17,3 +17,3 @@ import { Directive, TemplateRef } from '@angular/core';
  *               Title
- *             </template kendoTabTitle>
+ *             </template>
  *             <template kendoTabContent>
@@ -20,0 +20,0 @@ *               <h3>Content 1</h3>

dist/npm/layout.module.d.ts

@@ -11,2 +11,3 @@ /**
  * - `PanelBarItemTemplateDirective—The `PanelBarItemTemplate` directive.
+ * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
  * - `TabstripComponent`—The `Tabstrip` component class.
@@ -13,0 +14,0 @@ * - `TabstripTabComponent`—The `TabstripTab` component class.

dist/npm/layout.module.js

@@ -8,2 +8,3 @@ "use strict";
 var panelbar_item_template_directive_1 = require('./panelbar/panelbar-item-template.directive');
+var panelbar_item_title_directive_1 = require('./panelbar/panelbar-item-title.directive');
 var tabstrip_component_1 = require('./tabstrip/tabstrip.component');
@@ -18,2 +19,3 @@ var tabstrip_tab_component_1 = require('./tabstrip/tabstrip-tab.component');
     panelbar_item_template_directive_1.PanelBarItemTemplateDirective,
+    panelbar_item_title_directive_1.PanelBarItemTitleDirective,
     tabstrip_component_1.TabstripComponent,
@@ -35,2 +37,3 @@ tabstrip_tab_component_1.TabstripTabComponent,
  * - `PanelBarItemTemplateDirective—The `PanelBarItemTemplate` directive.
+ * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
  * - `TabstripComponent`—The `Tabstrip` component class.
@@ -37,0 +40,0 @@ * - `TabstripTabComponent`—The `TabstripTab` component class.

dist/npm/layout.module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.directive","name":"PanelBarContentDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}

dist/npm/main.d.ts

@@ -5,2 +5,3 @@ export { PanelBarComponent } from './panelbar/panelbar.component';
 export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
+export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
@@ -7,0 +8,0 @@ export { PanelBarItemModel } from './panelbar/panelbar-item-model';

dist/npm/main.js

@@ -10,2 +10,4 @@ "use strict";
 exports.PanelBarItemTemplateDirective = panelbar_item_template_directive_1.PanelBarItemTemplateDirective;
+var panelbar_item_title_directive_1 = require('./panelbar/panelbar-item-title.directive');
+exports.PanelBarItemTitleDirective = panelbar_item_title_directive_1.PanelBarItemTitleDirective;
 var panelbar_expand_mode_1 = require('./panelbar/panelbar-expand-mode');
@@ -12,0 +14,0 @@ exports.PanelBarExpandMode = panelbar_expand_mode_1.PanelBarExpandMode;

dist/npm/main.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.directive","export":["PanelBarContentDirective"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./tabstrip/tab-content.directive","export":["TabContentDirective"]},{"from":"./tabstrip/tab-title.directive","export":["TabTitleDirective"]},{"from":"./layout.module","export":["LayoutModule"]}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.directive","export":["PanelBarContentDirective"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-item-title.directive","export":["PanelBarItemTitleDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./tabstrip/tab-content.directive","export":["TabContentDirective"]},{"from":"./tabstrip/tab-title.directive","export":["TabTitleDirective"]},{"from":"./layout.module","export":["LayoutModule"]}]}

dist/npm/panelbar/panelbar-item.component.d.ts

 import { TemplateRef, QueryList, AfterContentChecked, AfterViewChecked, ElementRef } from '@angular/core';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
+import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 import { PanelBarItemModel } from './panelbar-item-model';
@@ -79,5 +80,10 @@ /**
     readonly ariaDisabled: boolean;
+    /**
+     * @hidden
+     */
+    readonly titleTemplate: TemplateRef<any>;
     viewChildItems: QueryList<PanelBarItemComponent>;
     contentItems: QueryList<PanelBarItemComponent>;
     contentTemplate: PanelBarContentDirective;
+    titleTemplates: QueryList<PanelBarItemTitleDirective>;
     wrapperFocused: boolean;
@@ -84,0 +90,0 @@ private eventService;

dist/npm/panelbar/panelbar-item.component.js

@@ -5,2 +5,3 @@ "use strict";
 var panelbar_content_directive_1 = require("./panelbar-content.directive");
+var panelbar_item_title_directive_1 = require("./panelbar-item-title.directive");
 /**
@@ -118,2 +119,12 @@ * @hidden
     });
+    Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.titleTemplates.length > 0 ? this.titleTemplates.toArray()[0].templateRef : undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -230,3 +241,3 @@ * @hidden
                     selector: "kendo-panelbar-item",
-                    template: "<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"
+                    template: "<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <template [ngTemplateOutlet]=\"titleTemplate\"></template>\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"
                 },] },
@@ -263,2 +274,3 @@ ];
         'contentTemplate': [{ type: core_1.ContentChild, args: [panelbar_content_directive_1.PanelBarContentDirective,] },],
+        'titleTemplates': [{ type: core_1.ContentChildren, args: [panelbar_item_title_directive_1.PanelBarItemTitleDirective, { descendants: false },] },],
     };
@@ -265,0 +277,0 @@ return PanelBarItemComponent;

dist/npm/panelbar/panelbar-item.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"PanelBarItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":{"__symbolic":"reference","module":"@angular/core","name":"AUTO_STYLE"}}]}]}]]}]]}],"selector":"kendo-panelbar-item","template":"<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["header",{}]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"titleAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.title"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"itemId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-selected"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"viewChildItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./panelbar-content.directive","name":"PanelBarContentDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar.service","name":"PanelBarService"}]}],"headerHeight":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemAction":[{"__symbolic":"method"}],"serialize":[{"__symbolic":"method"}],"subTreeViewItems":[{"__symbolic":"method"}],"validateConfiguration":[{"__symbolic":"method"}],"onWrapperFocusChange":[{"__symbolic":"method"}],"resolveClasses":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"PanelBarItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":"0px"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[200,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"display":"block","height":{"__symbolic":"reference","module":"@angular/core","name":"AUTO_STYLE"}}]}]}]]}]]}],"selector":"kendo-panelbar-item","template":"<span\n            #header\n            [class.k-link]=\"true\"\n            [class.k-header]=\"!parent\"\n            [class.k-state-selected]=\"!disabled && selected\"\n            [class.k-state-focused]=\"!disabled && focused && wrapperFocused\"\n            (click)=\"onItemAction()\"\n        >\n            <span\n                *ngIf=\"icon || iconClass\"\n                class=\"k-icon\"\n                [ngClass]=\"iconClasses\"\n            ></span>\n            <img\n                *ngIf=\"imageUrl\"\n                class=\"k-image\"\n                [src]=\"imageUrl\"\n                alt=\"\"\n            >\n            {{title}}\n            <template [ngTemplateOutlet]=\"titleTemplate\"></template>\n            <span *ngIf=\"hasChildItems || hasContent\"\n                [class.k-icon]=\"true\"\n                [class.k-i-arrow-n]=\"expanded\"\n                [class.k-panelbar-collapse]=\"expanded\"\n                [class.k-i-arrow-s]=\"!expanded\"\n                [class.k-panelbar-expand]=\"!expanded\"\n            ></span>\n        </span>\n        <div\n            *ngIf=\"!disabled && expanded && (hasChildItems || hasContent)\"\n            [@toggle]=\"state\"\n            [style.overflow]=\"'hidden'\"\n            [attr.role]=\"'group'\"\n            [attr.aria-hidden]=\"!disabled && !expanded\"\n        >\n            <div\n                *ngIf=\"hasChildItems && !items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <ng-content select=\"kendo-panelbar-item\"></ng-content>\n            </div>\n            <div\n                *ngIf=\"hasContent && !content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"contentTemplate.templateRef\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n            </div>\n            <div\n                *ngIf=\"items?.length\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-panel\"\n            >\n                <kendo-panelbar-item\n                    *ngFor=\"let item of items\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [focused]=\"!!item.focused\"\n                    [template]=\"template\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                ></kendo-panelbar-item>\n            </div>\n            <div\n                *ngIf=\"content\"\n                [style.overflow]=\"contentOverflow\"\n                [style.height]=\"contentHeight\"\n                class=\"k-content\"\n            >\n                <template\n                    [ngTemplateOutlet]=\"template\"\n                    [ngOutletContext]=\"{\n                        $implicit: {\n                            title: title,\n                            id: id,\n                            icon: icon,\n                            imageUrl: imageUrl,\n                            disabled: disabled,\n                            expanded: expanded,\n                            focused: focused,\n                            selected: selected,\n                            content: content\n                        }\n                    }\"\n                >\n                </template>\n                <template [ngIf]=\"!template\">{{content}}</template>\n            </div>\n        </div>"}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["header",{}]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"titleAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.title"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"itemId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["id"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-selected"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"viewChildItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"PanelBarItemComponent"}]}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./panelbar-content.directive","name":"PanelBarContentDirective"}]}]}],"titleTemplates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./panelbar-item-title.directive","name":"PanelBarItemTitleDirective"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],null],"parameters":[{"__symbolic":"reference","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar.service","name":"PanelBarService"}]}],"headerHeight":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemAction":[{"__symbolic":"method"}],"serialize":[{"__symbolic":"method"}],"subTreeViewItems":[{"__symbolic":"method"}],"validateConfiguration":[{"__symbolic":"method"}],"onWrapperFocusChange":[{"__symbolic":"method"}],"resolveClasses":[{"__symbolic":"method"}]}}}}

dist/npm/tabstrip/tab-title.directive.d.ts

@@ -17,3 +17,3 @@ import { TemplateRef } from '@angular/core';
  *               Title
- *             </template kendoTabTitle>
+ *             </template>
  *             <template kendoTabContent>
@@ -20,0 +20,0 @@ *               <h3>Content 1</h3>

dist/npm/tabstrip/tab-title.directive.js

@@ -18,3 +18,3 @@ "use strict";
  *               Title
- *             </template kendoTabTitle>
+ *             </template>
  *             <template kendoTabContent>
@@ -21,0 +21,0 @@ *               <h3>Content 1</h3>

package.json

 {
   "name": "@progress/kendo-angular-layout",
   "description": "Layout Package for Angular 2",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "publishConfig": {
@@ -41,9 +41,9 @@ "registry": "https://registry.npm.telerik.com"
   "devDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/compiler": "^2.0.0",
-    "@angular/compiler-cli": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/platform-browser": "^2.0.0",
-    "@angular/platform-browser-dynamic": "^2.0.0",
-    "@angular/platform-server": "^2.0.0",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/compiler-cli": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/platform-server": "~2.2.0",
     "core-js": "^2.2.2",
@@ -50,0 +50,0 @@ "rxjs": "5.0.0-beta.12",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

256057

increased by4.21%

Number of package files

92

increased by6.98%

Lines of code

3860

increased by5.03%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes