@progress/kendo-angular-layout 6.3.3 → 6.3.5

package/dist/es2015/package-metadata.js

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

package/dist/es2015/panelbar/panelbar-item.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, QueryList, AfterContentChecked, AfterViewChecked, OnDestroy, ElementRef } from '@angular/core';
+import { TemplateRef, QueryList, AfterContentChecked, AfterViewChecked, OnDestroy, ElementRef, Renderer2, OnInit } from '@angular/core';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
 import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
@@ -11,10 +11,11 @@ import { Subscription } from 'rxjs';
 /**
  * Represents the items of the PanelBar.
  */
-export declare class PanelBarItemComponent implements AfterContentChecked, AfterViewChecked, OnDestroy {
+export declare class PanelBarItemComponent implements OnInit, AfterContentChecked, AfterViewChecked, OnDestroy {
     parent: PanelBarItemComponent;
     private eventService;
     private element;
+    private renderer;
     /**
      * Sets the title of the PanelBar item ([see example]({% slug items_panelbar %}#toc-titles)).
      */
@@ -78,7 +79,7 @@ export declare class PanelBarItemComponent implements AfterContentChecked, After
     readonly animate: boolean;
     role: string;
     titleAttribute: string;
-    readonly kItemClass: boolean;
+    kItemClass: boolean;
     readonly kStateDefaultClass: boolean;
     readonly kStateDisabledClass: boolean;
     readonly kStateExpandedClass: boolean;
@@ -86,6 +87,8 @@ export declare class PanelBarItemComponent implements AfterContentChecked, After
     readonly ariaExpanded: boolean;
     readonly ariaSelected: boolean;
     readonly ariaDisabled: boolean;
+    readonly headerClass: boolean;
+    readonly childClass: boolean;
     /**
      * @hidden
      */
@@ -98,22 +101,15 @@ export declare class PanelBarItemComponent implements AfterContentChecked, After
     wrapperFocused: boolean;
     protected subscriptions: Subscription;
     private _expanded;
-    constructor(parent: PanelBarItemComponent, eventService: PanelBarService, element: ElementRef);
+    private level;
+    constructor(parent: PanelBarItemComponent, eventService: PanelBarService, element: ElementRef, renderer: Renderer2);
     /**
      * @hidden
      */
     headerHeight(): number;
-    /**
-     * @hidden
-     */
+    ngOnInit(): void;
     ngAfterContentChecked(): void;
-    /**
-     * @hidden
-     */
     ngAfterViewChecked(): void;
-    /**
-     * @hidden
-     */
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -147,5 +143,9 @@ export declare class PanelBarItemComponent implements AfterContentChecked, After
      * @hidden
      */
     toggleExpandedChildAnimations(value: boolean): void;
+    /**
+     * @hidden
+     */
+    private addLevelClass;
     private onWrapperFocusChange;
 }

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var PanelBarItemComponent_1;
-import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { animate, trigger, style, state, transition, AUTO_STYLE } from '@angular/animations';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarContentDirective } from "./panelbar-content.directive";
@@ -20,10 +20,11 @@ let nextId = 0;
  * Represents the items of the PanelBar.
  */
 let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponent {
-    constructor(parent, eventService, element) {
+    constructor(parent, eventService, element, renderer) {
         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.
@@ -58,6 +59,7 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
         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(() => { });
@@ -65,6 +67,7 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
         this.subscriptions.add(eventService.parent$.subscribe(focused => this.onWrapperFocusChange(focused)));
         this.subscriptions.add(eventService.keepContent$.subscribe(keepContent => this.keepContent = keepContent));
         this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
     }
     /**
      * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
@@ -83,9 +86,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     get animate() {
         return this.eventService.animate;
     }
-    get kItemClass() {
-        return true;
-    }
     get kStateDefaultClass() {
         return !this.disabled;
     }
@@ -107,6 +107,12 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     get ariaDisabled() {
         return this.disabled ? true : null;
     }
+    get headerClass() {
+        return this.parent ? null : true;
+    }
+    get childClass() {
+        return this.parent ? true : null;
+    }
     /**
      * @hidden
      */
@@ -119,9 +125,9 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     headerHeight() {
         return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
     }
-    /**
-     * @hidden
-     */
+    ngOnInit() {
+        this.addLevelClass();
+    }
     ngAfterContentChecked() {
         this.hasItems = this.items && this.items.filter(item => !item.hidden).length > 0;
         this.hasChildItems = this.contentItems.filter(item => item !== this).length > 0 || this.hasItems;
@@ -129,9 +135,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             this.content !== undefined;
         this.validateConfiguration();
     }
-    /**
-     * @hidden
-     */
     ngAfterViewChecked() {
         if (this.items) {
             this.childrenItems = this.viewChildItems.toArray();
@@ -140,9 +143,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             this.childrenItems = this.contentItems.filter(item => item !== this);
         }
     }
-    /**
-     * @hidden
-     */
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -231,6 +231,14 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             });
         }
     }
+    /**
+     * @hidden
+     */
+    addLevelClass() {
+        if (this.level >= 0) {
+            this.renderer.addClass(this.element.nativeElement, `k-level-${this.level}`);
+        }
+    }
     onWrapperFocusChange(focused) {
         this.wrapperFocused = focused;
     }
@@ -298,9 +306,8 @@ tslib_1.__decorate([
 ], PanelBarItemComponent.prototype, "titleAttribute", void 0);
 tslib_1.__decorate([
     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([
     HostBinding('class.k-state-default'),
     tslib_1.__metadata("design:type", Boolean),
@@ -336,6 +343,16 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], PanelBarItemComponent.prototype, "ariaDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-panelbar-header'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], PanelBarItemComponent.prototype, "headerClass", null);
+tslib_1.__decorate([
+    HostBinding('class.k-panelbar-item'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], PanelBarItemComponent.prototype, "childClass", null);
 tslib_1.__decorate([
     ViewChildren(PanelBarItemComponent_1),
     tslib_1.__metadata("design:type", QueryList)
@@ -373,28 +390,24 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
             <span
                 #header
                 [class.k-link]="true"
-                [class.k-header]="!parent"
                 [class.k-state-selected]="!disabled && selected"
                 [class.k-state-focused]="focused && wrapperFocused"
                 (click)="onItemClick($event)">
                 <span
                     *ngIf="icon || iconClass"
-                    class="k-icon"
+                    class="k-icon k-panelbar-item-icon"
                     [ngClass]="iconClasses">
                 </span>
                 <img
                     *ngIf="imageUrl"
-                    class="k-image"
+                    class="k-image k-panelbar-item-icon"
                     [src]="imageUrl"
                     alt="">
-                <ng-container *ngIf="!titleTemplate">{{title}}</ng-container>
+                <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
                 <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
-                    [class.k-icon]="true"
-                    [class.k-i-arrow-n]="expanded"
-                    [class.k-panelbar-collapse]="expanded"
-                    [class.k-i-arrow-s]="!expanded"
-                    [class.k-panelbar-expand]="!expanded">
+                    class="k-icon k-panelbar-toggle"
+                    [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
                 </span>
             </span>
             <div #contentWrapper
@@ -406,14 +419,14 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
                     *ngIf="hasChildItems && !items?.length"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group">
+                    class="k-panel k-group k-panelbar-group">
                         <ng-content select="kendo-panelbar-item"></ng-content>
                 </div>
                 <div
                     *ngIf="hasContent && !content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content">
+                    class="k-content k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
@@ -431,7 +444,7 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
                 <div *ngIf="hasItems"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group">
+                    class="k-panel k-group k-panelbar-group">
                     <ng-container *ngFor="let item of items">
                         <kendo-panelbar-item *ngIf="!item.hidden"
                             [title]="item.title"
@@ -452,7 +465,7 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
                     *ngIf="content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content">
+                    class="k-content k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
@@ -473,6 +486,7 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
     tslib_1.__param(0, SkipSelf()), tslib_1.__param(0, Host()), tslib_1.__param(0, Optional()),
     tslib_1.__metadata("design:paramtypes", [PanelBarItemComponent,
         PanelBarService,
-        ElementRef])
+        ElementRef,
+        Renderer2])
 ], PanelBarItemComponent);
 export { PanelBarItemComponent };

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

@@ -57,6 +57,7 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     stateChange: EventEmitter<any>;
     tabIndex: number;
     role: string;
+    hostClass: boolean;
     activeDescendant: string;
     readonly hostHeight: string;
     readonly overflow: string;
@@ -108,7 +109,6 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     private validateConfiguration;
     private updateChildrenHeight;
     private onItemAction;
-    readonly hostClasses: boolean;
     private isVisible;
     private getVisibleParent;
     private focusItem;

package/dist/es2015/panelbar/panelbar.component.js

@@ -54,6 +54,7 @@ class PanelBarComponent {
         this.stateChange = new EventEmitter();
         this.tabIndex = 0;
         this.role = "tree";
+        this.hostClass = true;
         this.activeDescendant = "";
         this.isViewInit = true;
         this.focused = false;
@@ -280,9 +281,6 @@ class PanelBarComponent {
             this.stateChange.emit(modifiedItems.map(currentItem => currentItem.serialize()));
         }
     }
-    get hostClasses() {
-        return true;
-    }
     isVisible(item) {
         const visibleItems = this.visibleItems();
         return visibleItems.some(i => i === item);
@@ -431,6 +429,10 @@ tslib_1.__decorate([
     HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String)
 ], PanelBarComponent.prototype, "role", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-panelbar'),
+    tslib_1.__metadata("design:type", Boolean)
+], PanelBarComponent.prototype, "hostClass", void 0);
 tslib_1.__decorate([
     HostBinding('attr.aria-activedescendant'),
     tslib_1.__metadata("design:type", String)
@@ -490,12 +492,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [Object]),
     tslib_1.__metadata("design:returntype", void 0)
 ], PanelBarComponent.prototype, "onComponentKeyDown", null);
-tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-panelbar'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], PanelBarComponent.prototype, "hostClasses", null);
 PanelBarComponent = tslib_1.__decorate([
     Component({
         exportAs: 'kendoPanelbar',

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, EventEmitter, Output, 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, EventEmitter, Output, 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 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634109254,
+    publishDate: 1635940072,
     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'
 };
@@ -232,10 +232,11 @@ let nextId$1 = 0;
  * Represents the items of the PanelBar.
  */
 let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponent {
-    constructor(parent, eventService, element) {
+    constructor(parent, eventService, element, renderer) {
         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.
@@ -270,6 +271,7 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
         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(() => { });
@@ -277,6 +279,7 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
         this.subscriptions.add(eventService.parent$.subscribe(focused => this.onWrapperFocusChange(focused)));
         this.subscriptions.add(eventService.keepContent$.subscribe(keepContent => this.keepContent = keepContent));
         this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
     }
     /**
      * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
@@ -295,9 +298,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     get animate() {
         return this.eventService.animate;
     }
-    get kItemClass() {
-        return true;
-    }
     get kStateDefaultClass() {
         return !this.disabled;
     }
@@ -319,6 +319,12 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     get ariaDisabled() {
         return this.disabled ? true : null;
     }
+    get headerClass() {
+        return this.parent ? null : true;
+    }
+    get childClass() {
+        return this.parent ? true : null;
+    }
     /**
      * @hidden
      */
@@ -331,9 +337,9 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
     headerHeight() {
         return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
     }
-    /**
-     * @hidden
-     */
+    ngOnInit() {
+        this.addLevelClass();
+    }
     ngAfterContentChecked() {
         this.hasItems = this.items && this.items.filter(item => !item.hidden).length > 0;
         this.hasChildItems = this.contentItems.filter(item => item !== this).length > 0 || this.hasItems;
@@ -341,9 +347,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             this.content !== undefined;
         this.validateConfiguration();
     }
-    /**
-     * @hidden
-     */
     ngAfterViewChecked() {
         if (this.items) {
             this.childrenItems = this.viewChildItems.toArray();
@@ -352,9 +355,6 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             this.childrenItems = this.contentItems.filter(item => item !== this);
         }
     }
-    /**
-     * @hidden
-     */
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -443,6 +443,14 @@ let PanelBarItemComponent = PanelBarItemComponent_1 = class PanelBarItemComponen
             });
         }
     }
+    /**
+     * @hidden
+     */
+    addLevelClass() {
+        if (this.level >= 0) {
+            this.renderer.addClass(this.element.nativeElement, `k-level-${this.level}`);
+        }
+    }
     onWrapperFocusChange(focused) {
         this.wrapperFocused = focused;
     }
@@ -510,9 +518,8 @@ __decorate([
 ], 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),
@@ -548,6 +555,16 @@ __decorate([
     __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)
@@ -585,28 +602,24 @@ PanelBarItemComponent = PanelBarItemComponent_1 = __decorate([
             <span
                 #header
                 [class.k-link]="true"
-                [class.k-header]="!parent"
                 [class.k-state-selected]="!disabled && selected"
                 [class.k-state-focused]="focused && wrapperFocused"
                 (click)="onItemClick($event)">
                 <span
                     *ngIf="icon || iconClass"
-                    class="k-icon"
+                    class="k-icon k-panelbar-item-icon"
                     [ngClass]="iconClasses">
                 </span>
                 <img
                     *ngIf="imageUrl"
-                    class="k-image"
+                    class="k-image k-panelbar-item-icon"
                     [src]="imageUrl"
                     alt="">
-                <ng-container *ngIf="!titleTemplate">{{title}}</ng-container>
+                <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
                 <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
-                    [class.k-icon]="true"
-                    [class.k-i-arrow-n]="expanded"
-                    [class.k-panelbar-collapse]="expanded"
-                    [class.k-i-arrow-s]="!expanded"
-                    [class.k-panelbar-expand]="!expanded">
+                    class="k-icon k-panelbar-toggle"
+                    [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
                 </span>
             </span>
             <div #contentWrapper
@@ -618,14 +631,14 @@ PanelBarItemComponent = PanelBarItemComponent_1 = __decorate([
                     *ngIf="hasChildItems && !items?.length"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group">
+                    class="k-panel k-group k-panelbar-group">
                         <ng-content select="kendo-panelbar-item"></ng-content>
                 </div>
                 <div
                     *ngIf="hasContent && !content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content">
+                    class="k-content k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
@@ -643,7 +656,7 @@ PanelBarItemComponent = PanelBarItemComponent_1 = __decorate([
                 <div *ngIf="hasItems"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group">
+                    class="k-panel k-group k-panelbar-group">
                     <ng-container *ngFor="let item of items">
                         <kendo-panelbar-item *ngIf="!item.hidden"
                             [title]="item.title"
@@ -664,7 +677,7 @@ PanelBarItemComponent = PanelBarItemComponent_1 = __decorate([
                     *ngIf="content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content">
+                    class="k-content k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
@@ -685,7 +698,8 @@ PanelBarItemComponent = PanelBarItemComponent_1 = __decorate([
     __param(0, SkipSelf()), __param(0, Host()), __param(0, Optional()),
     __metadata("design:paramtypes", [PanelBarItemComponent,
         PanelBarService,
-        ElementRef])
+        ElementRef,
+        Renderer2])
 ], PanelBarItemComponent);
 
 /**
@@ -744,6 +758,7 @@ class PanelBarComponent {
         this.stateChange = new EventEmitter();
         this.tabIndex = 0;
         this.role = "tree";
+        this.hostClass = true;
         this.activeDescendant = "";
         this.isViewInit = true;
         this.focused = false;
@@ -970,9 +985,6 @@ class PanelBarComponent {
             this.stateChange.emit(modifiedItems.map(currentItem => currentItem.serialize()));
         }
     }
-    get hostClasses() {
-        return true;
-    }
     isVisible(item) {
         const visibleItems = this.visibleItems();
         return visibleItems.some(i => i === item);
@@ -1121,6 +1133,10 @@ __decorate([
     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)
@@ -1180,12 +1196,6 @@ __decorate([
     __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',