@progress/kendo-angular-layout 6.3.3-dev.202110050911 → 6.3.5-dev.202110290740

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends, __assign } from 'tslib';
-import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, Output, EventEmitter, ContentChild, HostListener, Renderer2, ChangeDetectorRef, NgZone, Inject, forwardRef, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, Renderer2, Output, EventEmitter, ContentChild, HostListener, ChangeDetectorRef, NgZone, Inject, forwardRef, ViewEncapsulation, NgModule } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { Keys, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableDirective, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -21,7 +21,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1633425022,
+    publishDate: 1635493161,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -240,11 +240,12 @@ var nextId$1 = 0;
  * Represents the items of the PanelBar.
  */
 var PanelBarItemComponent = /** @class */ (function () {
-    function PanelBarItemComponent(parent, eventService, element) {
+    function PanelBarItemComponent(parent, eventService, element, renderer) {
         var _this = this;
         this.parent = parent;
         this.eventService = eventService;
         this.element = element;
+        this.renderer = renderer;
         /**
          * Allows the component to set the `"id"` property to each item.
          * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
@@ -279,6 +280,7 @@ var PanelBarItemComponent = /** @class */ (function () {
         this.state = "inactive";
         this.role = "treeitem";
         this.titleAttribute = null; // tslint:disable-line
+        this.kItemClass = true;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new Subscription(function () { });
@@ -286,6 +288,7 @@ var PanelBarItemComponent = /** @class */ (function () {
         this.subscriptions.add(eventService.parent$.subscribe(function (focused) { return _this.onWrapperFocusChange(focused); }));
         this.subscriptions.add(eventService.keepContent$.subscribe(function (keepContent) { return _this.keepContent = keepContent; }));
         this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
     }
     PanelBarItemComponent_1 = PanelBarItemComponent;
     Object.defineProperty(PanelBarItemComponent.prototype, "expanded", {
@@ -313,13 +316,6 @@ var PanelBarItemComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(PanelBarItemComponent.prototype, "kItemClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(PanelBarItemComponent.prototype, "kStateDefaultClass", {
         get: function () {
             return !this.disabled;
@@ -369,6 +365,20 @@ var PanelBarItemComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PanelBarItemComponent.prototype, "headerClass", {
+        get: function () {
+            return this.parent ? null : true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PanelBarItemComponent.prototype, "childClass", {
+        get: function () {
+            return this.parent ? true : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
         /**
          * @hidden
@@ -385,9 +395,9 @@ var PanelBarItemComponent = /** @class */ (function () {
     PanelBarItemComponent.prototype.headerHeight = function () {
         return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
     };
-    /**
-     * @hidden
-     */
+    PanelBarItemComponent.prototype.ngOnInit = function () {
+        this.addLevelClass();
+    };
     PanelBarItemComponent.prototype.ngAfterContentChecked = function () {
         var _this = this;
         this.hasItems = this.items && this.items.filter(function (item) { return !item.hidden; }).length > 0;
@@ -396,9 +406,6 @@ var PanelBarItemComponent = /** @class */ (function () {
             this.content !== undefined;
         this.validateConfiguration();
     };
-    /**
-     * @hidden
-     */
     PanelBarItemComponent.prototype.ngAfterViewChecked = function () {
         var _this = this;
         if (this.items) {
@@ -408,9 +415,6 @@ var PanelBarItemComponent = /** @class */ (function () {
             this.childrenItems = this.contentItems.filter(function (item) { return item !== _this; });
         }
     };
-    /**
-     * @hidden
-     */
     PanelBarItemComponent.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -504,6 +508,14 @@ var PanelBarItemComponent = /** @class */ (function () {
             });
         }
     };
+    /**
+     * @hidden
+     */
+    PanelBarItemComponent.prototype.addLevelClass = function () {
+        if (this.level >= 0) {
+            this.renderer.addClass(this.element.nativeElement, "k-level-" + this.level);
+        }
+    };
     PanelBarItemComponent.prototype.onWrapperFocusChange = function (focused) {
         this.wrapperFocused = focused;
     };
@@ -571,9 +583,8 @@ var PanelBarItemComponent = /** @class */ (function () {
     ], PanelBarItemComponent.prototype, "titleAttribute", void 0);
     __decorate([
         HostBinding('class.k-item'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], PanelBarItemComponent.prototype, "kItemClass", null);
+        __metadata("design:type", Boolean)
+    ], PanelBarItemComponent.prototype, "kItemClass", void 0);
     __decorate([
         HostBinding('class.k-state-default'),
         __metadata("design:type", Boolean),
@@ -609,6 +620,16 @@ var PanelBarItemComponent = /** @class */ (function () {
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], PanelBarItemComponent.prototype, "ariaDisabled", null);
+    __decorate([
+        HostBinding('class.k-panelbar-header'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], PanelBarItemComponent.prototype, "headerClass", null);
+    __decorate([
+        HostBinding('class.k-panelbar-item'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], PanelBarItemComponent.prototype, "childClass", null);
     __decorate([
         ViewChildren(PanelBarItemComponent_1),
         __metadata("design:type", QueryList)
@@ -642,12 +663,13 @@ var PanelBarItemComponent = /** @class */ (function () {
             ],
             exportAs: 'kendoPanelbarItem',
             selector: "kendo-panelbar-item",
-            template: "\n            <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]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\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                <ng-container *ngIf=\"!titleTemplate\">{{title}}</ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-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 #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group\">\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                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
+            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\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 k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
         }),
         __param(0, SkipSelf()), __param(0, Host()), __param(0, Optional()),
         __metadata("design:paramtypes", [PanelBarItemComponent,
             PanelBarService,
-            ElementRef])
+            ElementRef,
+            Renderer2])
     ], PanelBarItemComponent);
     return PanelBarItemComponent;
 }());
@@ -708,6 +730,7 @@ var PanelBarComponent = /** @class */ (function () {
         this.stateChange = new EventEmitter();
         this.tabIndex = 0;
         this.role = "tree";
+        this.hostClass = true;
         this.activeDescendant = "";
         this.isViewInit = true;
         this.focused = false;
@@ -973,13 +996,6 @@ var PanelBarComponent = /** @class */ (function () {
             this.stateChange.emit(modifiedItems.map(function (currentItem) { return currentItem.serialize(); }));
         }
     };
-    Object.defineProperty(PanelBarComponent.prototype, "hostClasses", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     PanelBarComponent.prototype.isVisible = function (item) {
         var visibleItems = this.visibleItems();
         return visibleItems.some(function (i) { return i === item; });
@@ -1130,6 +1146,10 @@ var PanelBarComponent = /** @class */ (function () {
         HostBinding('attr.role'),
         __metadata("design:type", String)
     ], PanelBarComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('class.k-panelbar'),
+        __metadata("design:type", Boolean)
+    ], PanelBarComponent.prototype, "hostClass", void 0);
     __decorate([
         HostBinding('attr.aria-activedescendant'),
         __metadata("design:type", String)
@@ -1189,12 +1209,6 @@ var PanelBarComponent = /** @class */ (function () {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], PanelBarComponent.prototype, "onComponentKeyDown", null);
-    __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-panelbar'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], PanelBarComponent.prototype, "hostClasses", null);
     PanelBarComponent = __decorate([
         Component({
             exportAs: 'kendoPanelbar',

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1633425022,
+    publishDate: 1635493161,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

@@ -21,11 +21,12 @@ var nextId = 0;
  * Represents the items of the PanelBar.
  */
 var PanelBarItemComponent = /** @class */ (function () {
-    function PanelBarItemComponent(parent, eventService, element) {
+    function PanelBarItemComponent(parent, eventService, element, renderer) {
         var _this = this;
         this.parent = parent;
         this.eventService = eventService;
         this.element = element;
+        this.renderer = renderer;
         /**
          * Allows the component to set the `"id"` property to each item.
          * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
@@ -60,6 +61,7 @@ var PanelBarItemComponent = /** @class */ (function () {
         this.state = "inactive";
         this.role = "treeitem";
         this.titleAttribute = null; // tslint:disable-line
+        this.kItemClass = true;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new rxjs_1.Subscription(function () { });
@@ -67,6 +69,7 @@ var PanelBarItemComponent = /** @class */ (function () {
         this.subscriptions.add(eventService.parent$.subscribe(function (focused) { return _this.onWrapperFocusChange(focused); }));
         this.subscriptions.add(eventService.keepContent$.subscribe(function (keepContent) { return _this.keepContent = keepContent; }));
         this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
     }
     PanelBarItemComponent_1 = PanelBarItemComponent;
     Object.defineProperty(PanelBarItemComponent.prototype, "expanded", {
@@ -94,13 +97,6 @@ var PanelBarItemComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(PanelBarItemComponent.prototype, "kItemClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(PanelBarItemComponent.prototype, "kStateDefaultClass", {
         get: function () {
             return !this.disabled;
@@ -150,6 +146,20 @@ var PanelBarItemComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PanelBarItemComponent.prototype, "headerClass", {
+        get: function () {
+            return this.parent ? null : true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PanelBarItemComponent.prototype, "childClass", {
+        get: function () {
+            return this.parent ? true : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
         /**
          * @hidden
@@ -166,9 +176,9 @@ var PanelBarItemComponent = /** @class */ (function () {
     PanelBarItemComponent.prototype.headerHeight = function () {
         return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
     };
-    /**
-     * @hidden
-     */
+    PanelBarItemComponent.prototype.ngOnInit = function () {
+        this.addLevelClass();
+    };
     PanelBarItemComponent.prototype.ngAfterContentChecked = function () {
         var _this = this;
         this.hasItems = this.items && this.items.filter(function (item) { return !item.hidden; }).length > 0;
@@ -177,9 +187,6 @@ var PanelBarItemComponent = /** @class */ (function () {
             this.content !== undefined;
         this.validateConfiguration();
     };
-    /**
-     * @hidden
-     */
     PanelBarItemComponent.prototype.ngAfterViewChecked = function () {
         var _this = this;
         if (this.items) {
@@ -189,9 +196,6 @@ var PanelBarItemComponent = /** @class */ (function () {
             this.childrenItems = this.contentItems.filter(function (item) { return item !== _this; });
         }
     };
-    /**
-     * @hidden
-     */
     PanelBarItemComponent.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -285,6 +289,14 @@ var PanelBarItemComponent = /** @class */ (function () {
             });
         }
     };
+    /**
+     * @hidden
+     */
+    PanelBarItemComponent.prototype.addLevelClass = function () {
+        if (this.level >= 0) {
+            this.renderer.addClass(this.element.nativeElement, "k-level-" + this.level);
+        }
+    };
     PanelBarItemComponent.prototype.onWrapperFocusChange = function (focused) {
         this.wrapperFocused = focused;
     };
@@ -352,9 +364,8 @@ var PanelBarItemComponent = /** @class */ (function () {
     ], PanelBarItemComponent.prototype, "titleAttribute", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-item'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], PanelBarItemComponent.prototype, "kItemClass", null);
+        tslib_1.__metadata("design:type", Boolean)
+    ], PanelBarItemComponent.prototype, "kItemClass", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-state-default'),
         tslib_1.__metadata("design:type", Boolean),
@@ -390,6 +401,16 @@ var PanelBarItemComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], PanelBarItemComponent.prototype, "ariaDisabled", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-panelbar-header'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], PanelBarItemComponent.prototype, "headerClass", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-panelbar-item'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], PanelBarItemComponent.prototype, "childClass", null);
     tslib_1.__decorate([
         core_1.ViewChildren(PanelBarItemComponent_1),
         tslib_1.__metadata("design:type", core_1.QueryList)
@@ -423,12 +444,13 @@ var PanelBarItemComponent = /** @class */ (function () {
             ],
             exportAs: 'kendoPanelbarItem',
             selector: "kendo-panelbar-item",
-            template: "\n            <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]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\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                <ng-container *ngIf=\"!titleTemplate\">{{title}}</ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-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 #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group\">\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                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
+            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\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 k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
         }),
         tslib_1.__param(0, core_1.SkipSelf()), tslib_1.__param(0, core_1.Host()), tslib_1.__param(0, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [PanelBarItemComponent,
             panelbar_service_1.PanelBarService,
-            core_1.ElementRef])
+            core_1.ElementRef,
+            core_1.Renderer2])
     ], PanelBarItemComponent);
     return PanelBarItemComponent;
 }());

package/dist/npm/panelbar/panelbar.component.js

@@ -55,6 +55,7 @@ var PanelBarComponent = /** @class */ (function () {
         this.stateChange = new core_1.EventEmitter();
         this.tabIndex = 0;
         this.role = "tree";
+        this.hostClass = true;
         this.activeDescendant = "";
         this.isViewInit = true;
         this.focused = false;
@@ -320,13 +321,6 @@ var PanelBarComponent = /** @class */ (function () {
             this.stateChange.emit(modifiedItems.map(function (currentItem) { return currentItem.serialize(); }));
         }
     };
-    Object.defineProperty(PanelBarComponent.prototype, "hostClasses", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     PanelBarComponent.prototype.isVisible = function (item) {
         var visibleItems = this.visibleItems();
         return visibleItems.some(function (i) { return i === item; });
@@ -477,6 +471,10 @@ var PanelBarComponent = /** @class */ (function () {
         core_1.HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
     ], PanelBarComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-panelbar'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], PanelBarComponent.prototype, "hostClass", void 0);
     tslib_1.__decorate([
         core_1.HostBinding('attr.aria-activedescendant'),
         tslib_1.__metadata("design:type", String)
@@ -536,12 +534,6 @@ var PanelBarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [Object]),
         tslib_1.__metadata("design:returntype", void 0)
     ], PanelBarComponent.prototype, "onComponentKeyDown", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
-        core_1.HostBinding('class.k-panelbar'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], PanelBarComponent.prototype, "hostClasses", null);
     PanelBarComponent = tslib_1.__decorate([
         core_1.Component({
             exportAs: 'kendoPanelbar',