@progress/kendo-angular-layout 7.1.1-dev.202207281410 → 7.1.2-dev.202209021224

package/fesm2015/kendo-angular-layout.js

@@ -12,7 +12,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
 import * as i4 from '@progress/kendo-angular-progressbar';
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1659017391,
+    publishDate: 1662121426,
     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'
 };
@@ -355,9 +355,6 @@ class PanelBarItemComponent {
     get kStateDefaultClass() {
         return !this.disabled;
     }
-    get kStateDisabledClass() {
-        return this.disabled;
-    }
     get kStateExpandedClass() {
         return !this.disabled && this.expanded && (this.hasChildItems || this.hasContent);
     }
@@ -376,9 +373,6 @@ class PanelBarItemComponent {
     get headerClass() {
         return this.parent ? null : true;
     }
-    get childClass() {
-        return this.parent ? true : null;
-    }
     /**
      * @hidden
      */
@@ -510,12 +504,13 @@ class PanelBarItemComponent {
     }
 }
 PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-disabled": "this.kStateDisabledClass", "class.k-state-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass", "class.k-panelbar-item": "this.childClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-state-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
             <span
                 #header
                 [class.k-link]="true"
                 [class.k-selected]="!disabled && selected"
                 [class.k-focus]="focused && wrapperFocused"
+                [class.k-disabled]="disabled"
                 (click)="onItemClick($event)">
                 <span
                     *ngIf="icon || iconClass"
@@ -546,7 +541,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     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}">
+                    [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
                 </span>
             </span>
             <div #contentWrapper
@@ -620,7 +615,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </div>`, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -657,6 +652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [class.k-link]="true"
                 [class.k-selected]="!disabled && selected"
                 [class.k-focus]="focused && wrapperFocused"
+                [class.k-disabled]="disabled"
                 (click)="onItemClick($event)">
                 <span
                     *ngIf="icon || iconClass"
@@ -687,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     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}">
+                    [ngClass]="{'k-i-chevron-up k-panelbar-collapse': expanded, 'k-i-chevron-down k-panelbar-expand': !expanded}">
                 </span>
             </span>
             <div #contentWrapper
@@ -805,13 +801,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.title']
             }], kItemClass: [{
                 type: HostBinding,
-                args: ['class.k-item']
+                args: ['class.k-panelbar-item']
             }], kStateDefaultClass: [{
                 type: HostBinding,
                 args: ['class.k-state-default']
-            }], kStateDisabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
             }], kStateExpandedClass: [{
                 type: HostBinding,
                 args: ['class.k-state-expanded']
@@ -830,9 +823,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-panelbar-header']
-            }], childClass: [{
-                type: HostBinding,
-                args: ['class.k-panelbar-item']
             }], viewChildItems: [{
                 type: ViewChildren,
                 args: [PanelBarItemComponent]
@@ -1412,7 +1402,7 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1671,7 +1661,7 @@ SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
         <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
         <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
             args: [{
@@ -1994,36 +1984,43 @@ class SplitterBarComponent {
     toggleNext() {
         this.splitter.tryToggle(this.index + 1);
     }
+    shouldShowIcon(iconName) {
+        const paneIndex = iconName === 'prev' ? this.index : this.index + 1;
+        const relatedPaneIndex = iconName === 'prev' ? this.index + 1 : this.index;
+        const pane = this.splitter.pane(paneIndex);
+        const relatedPane = this.splitter.pane(relatedPaneIndex);
+        const isCollapsible = pane.collapsible;
+        return isCollapsible && !relatedPane.isHidden;
+    }
+    collapseClass(order) {
+        const pane = this.splitter.pane(this.index);
+        const isCollapsible = pane.collapsible;
+        return isCollapsible ? `k-collapse-${order}` : '';
+    }
     previousArrowClass() {
         const pane = this.splitter.pane(this.index);
-        const nextPane = this.splitter.pane(this.index + 1);
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         return classFromObject({
             'k-icon': true,
-            'k-hidden': !isCollapsible || nextPane.isHidden,
-            'k-collapse-prev': isCollapsible,
-            'k-i-arrow-60-left': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-arrow-60-right': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-arrow-60-up': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-arrow-60-down': isCollapsible && !isHorizontal && isCollapsed
+            'k-i-caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
+            'k-i-caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
+            'k-i-caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
+            'k-i-caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     nextArrowClass() {
         const pane = this.splitter.pane(this.index + 1);
-        const prevPane = this.splitter.pane(this.index);
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         return classFromObject({
             'k-icon': true,
-            'k-hidden': !isCollapsible || prevPane.isHidden,
-            'k-collapse-next': isCollapsible,
-            'k-i-arrow-60-right': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-arrow-60-left': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-arrow-60-down': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-arrow-60-up': isCollapsible && !isHorizontal && isCollapsed
+            'k-i-caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
+            'k-i-caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
+            'k-i-caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
+            'k-i-caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     tryToggleNearest() {
@@ -2036,18 +2033,26 @@ class SplitterBarComponent {
 }
 SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { listeners: { "dblclick": "collapseAny()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-orientation": "this.orientation", "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
-      <div [class]="previousArrowClass()" (click)="togglePrevious()"></div>
-      <div class="k-resize-handle"></div>
-      <div [class]="nextArrowClass()" (click)="toggleNext()"></div>
-    `, isInline: true });
+        <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
+            <span [class]="previousArrowClass()"></span>
+        </div>
+        <div class="k-resize-handle"></div>
+        <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
+            <span [class]="nextArrowClass()"></span>
+        </div>
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
-      <div [class]="previousArrowClass()" (click)="togglePrevious()"></div>
-      <div class="k-resize-handle"></div>
-      <div [class]="nextArrowClass()" (click)="toggleNext()"></div>
+        <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
+            <span [class]="previousArrowClass()"></span>
+        </div>
+        <div class="k-resize-handle"></div>
+        <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
+            <span [class]="nextArrowClass()"></span>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
@@ -2234,7 +2239,7 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
           [orientation]="orientation">
         </kendo-splitter-bar>
       </ng-container>
-    `, isInline: true, components: [{ type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+    `, isInline: true, components: [{ type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
@@ -2748,10 +2753,10 @@ const HIDDEN_CLASS = 'k-hidden';
  * @hidden
  */
 const DIRECTION_CLASSES = {
-    left: 'k-i-arrow-60-left',
-    right: 'k-i-arrow-60-right',
-    up: 'k-i-arrow-60-up',
-    down: 'k-i-arrow-60-down'
+    left: 'k-i-caret-alt-left',
+    right: 'k-i-caret-alt-right',
+    up: 'k-i-caret-alt-up',
+    down: 'k-i-caret-alt-down'
 };
 /**
  * @hidden
@@ -3027,7 +3032,7 @@ class TabStripScrollableButtonComponent {
 TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-button": "this.btnClasses", "class.k-button-md": "this.btnClasses", "class.k-icon-button": "this.btnClasses", "class.k-rounded-md": "this.btnClasses", "class.k-button-flat": "this.btnClasses", "class.k-button-flat-base": "this.btnClasses", "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <span class="k-icon k-button-icon" [ngClass]="iconClass"></span>
-    `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3129,7 +3134,7 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         >
             <span [ngClass]="closeButtonClasses"></span>
         </span>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
@@ -3290,7 +3295,7 @@ class TabStripComponent {
          * The event is preventable.
          */
         this.tabScroll = new EventEmitter();
-        this.hostClasses = true;
+        this.hostClass = true;
         /**
          * A query list of all declared tabs.
          */
@@ -3558,7 +3563,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClass", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -3649,7 +3654,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </ng-template>
         </ng-template>
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('state', [
             state('active', style({ opacity: 1 })),
             transition('* => active', [
@@ -3788,12 +3793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], tabScroll: [{
                 type: Output
-            }], hostClasses: [{
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip']
-            }, {
-                type: HostBinding,
-                args: ['class.k-floatwrap']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -4250,15 +4252,15 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <span class="k-item-text">{{ item.text }}</span>
                 <span *ngIf="viewItem.hasChildren"
                       class="k-icon k-drawer-toggle"
-                      [class.k-i-arrow-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-arrow-chevron-down]="!viewItem.isExpanded"
+                      [class.k-i-chevron-up]="viewItem.isExpanded"
+                      [class.k-i-chevron-down]="!viewItem.isExpanded"
                 ></span>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
                 <span [ngClass]="iconClasses"></span>
             </ng-container>
         </ng-template>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4281,8 +4283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <span class="k-item-text">{{ item.text }}</span>
                 <span *ngIf="viewItem.hasChildren"
                       class="k-icon k-drawer-toggle"
-                      [class.k-i-arrow-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-arrow-chevron-down]="!viewItem.isExpanded"
+                      [class.k-i-chevron-up]="viewItem.isExpanded"
+                      [class.k-i-chevron-down]="!viewItem.isExpanded"
                 ></span>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
@@ -4402,7 +4404,7 @@ class DrawerListComponent {
     }
 }
 DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                tabindex=\"0\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                tabindex=\"0\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4732,7 +4734,7 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
-    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4855,7 +4857,7 @@ class DrawerContainerComponent {
         return this.drawer.mode === 'overlay';
     }
     get miniClass() {
-        return this.drawer.mini;
+        return this.drawer.mini && !this.drawer.expanded;
     }
     get pushClass() {
         return this.drawer.mode === 'push';
@@ -4895,7 +4897,7 @@ DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
     ], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
         <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
         <ng-content></ng-content>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5288,10 +5290,10 @@ class StepperStepComponent {
     }
     get validationIconClasses() {
         if (this.isStepValid) {
-            return this.successIcon ? `${this.successIcon}` : 'k-icon k-i-check';
+            return this.successIcon ? `${this.successIcon}` : 'k-icon k-i-check-circle';
         }
         else {
-            return this.errorIcon ? `${this.errorIcon}` : 'k-icon k-i-warning';
+            return this.errorIcon ? `${this.errorIcon}` : 'k-icon k-i-exclamation-circle';
         }
     }
     get indicatorText() {
@@ -5386,7 +5388,7 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -5471,9 +5473,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 class StepperListComponent {
-    constructor(renderer, ngZone, element) {
+    constructor(renderer, ngZone, service, element) {
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.service = service;
         this.element = element;
         this.listKeydown = new EventEmitter();
         this.listClick = new EventEmitter();
@@ -5492,6 +5495,9 @@ class StepperListComponent {
     get maxStepHeight() {
         return this.maxStepDimension('height');
     }
+    get focusedStep() {
+        return this.service.focusedStep;
+    }
     maxStepDimension(dimension) {
         if (dimension === 'width' && this.orientation === 'vertical') {
             return null;
@@ -5541,8 +5547,8 @@ class StepperListComponent {
         }
     }
 }
-StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [errorIcon]='errorIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-step-disabled]='step.disabled'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [errorIcon]='errorIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5567,7 +5573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [class.k-step-done]='idx < currentStep'
                 [class.k-step-current]='idx === currentStep'
                 [class.k-step-optional]='step.optional'
-                [class.k-step-disabled]='step.disabled'
+                [class.k-disabled]='step.disabled'
+                [class.k-focus]='idx === focusedStep'
                 [ngClass]='step.cssClass'
                 [ngStyle]='step.cssStyle'
                 [style.max-width.%] = 'maxStepWidth'
@@ -5577,7 +5584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { linear: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: StepperService }, { type: i0.ElementRef }]; }, propDecorators: { linear: [{
                 type: Input
             }], stepType: [{
                 type: Input
@@ -5898,7 +5905,7 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
         </kendo-progressbar>
-    `, isInline: true, components: [{ type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{
@@ -6278,9 +6285,11 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </ng-container>
 
         <ng-container *ngIf="icon || iconClass">
-            <span class="k-avatar-icon" [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+            <span class="k-avatar-icon">
+                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+            </span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -6299,7 +6308,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
 
         <ng-container *ngIf="icon || iconClass">
-            <span class="k-avatar-icon" [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+            <span class="k-avatar-icon">
+                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+            </span>
         </ng-container>
     `
                 }]
@@ -6600,7 +6611,7 @@ CardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </ng-container>
 
         <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -7031,10 +7042,10 @@ class ExpansionPanelComponent {
      */
     get indicatorClasses() {
         if (this.expanded) {
-            return this.collapseIcon ? this.collapseIcon : `k-icon k-i-arrow-chevron-up`;
+            return this.collapseIcon ? this.collapseIcon : `k-icon k-i-chevron-up`;
         }
         else {
-            return this.expandIcon ? this.expandIcon : `k-icon k-i-arrow-chevron-down`;
+            return this.expandIcon ? this.expandIcon : `k-icon k-i-chevron-down`;
         }
     }
     /**
@@ -7134,7 +7145,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -8039,7 +8050,7 @@ TileLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [resizeDirection]="dir">
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: ["reorderable"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+    `, isInline: true, components: [{ type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: ["reorderable"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "7.1.1-dev.202207281410",
+  "version": "7.1.2-dev.202209021224",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

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

@@ -83,14 +83,12 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
     titleAttribute: string;
     kItemClass: boolean;
     get kStateDefaultClass(): boolean;
-    get kStateDisabledClass(): boolean;
     get kStateExpandedClass(): boolean;
     get itemId(): string;
     get ariaExpanded(): boolean;
     get ariaSelected(): boolean;
     get ariaDisabled(): boolean;
     get headerClass(): boolean;
-    get childClass(): boolean;
     /**
      * @hidden
      */

package/splitter/splitter-bar.component.d.ts

@@ -35,6 +35,8 @@ export declare class SplitterBarComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     togglePrevious(): void;
     toggleNext(): void;
+    shouldShowIcon(iconName: string): boolean;
+    collapseClass(order: string): string;
     previousArrowClass(): string;
     nextArrowClass(): string;
     private tryToggleNearest;