@progress/kendo-angular-layout 13.6.0-develop.5 → 13.6.0-develop.7

package/esm2020/index.mjs

@@ -17,6 +17,7 @@ export { TabContentDirective } from './tabstrip/directives/tab-content.directive
 export { TabTitleDirective } from './tabstrip/directives/tab-title.directive';
 export { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
 export { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
+export { TabTemplateDirective } from './tabstrip/directives/tab.directive';
 export * from './tabstrip/events';
 // Drawer exports
 export { DrawerComponent } from './drawer/drawer.component';

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831957,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886942,
+    version: '13.6.0-develop.7',
     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/esm2020/tabstrip/directives/tab.directive.mjs

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class TabTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabTemplateDirective, selector: "[kendoTabTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTabTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2020/tabstrip/models/tabstrip-tab.component.mjs

@@ -5,6 +5,7 @@
 import { Component, Input, ContentChildren, QueryList } from '@angular/core';
 import { TabContentDirective } from '../directives/tab-content.directive';
 import { TabTitleDirective } from '../directives/tab-title.directive';
+import { TabTemplateDirective } from '../directives/tab.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the tab component of the TabStrip.
@@ -17,6 +18,7 @@ export class TabStripTabComponent {
          * Defaults to `false`.
          */
         this.disabled = false;
+        this._tabDirective = new QueryList();
         this._tabContent = new QueryList();
         /**
          * @hidden
@@ -32,9 +34,12 @@ export class TabStripTabComponent {
     get tabTitle() {
         return this._tabTitleDirective.first;
     }
+    get tabTemplate() {
+        return this._tabDirective.first;
+    }
 }
 TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -60,6 +65,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], _tabDirective: [{
+                type: ContentChildren,
+                args: [TabTemplateDirective]
             }], _tabContent: [{
                 type: ContentChildren,
                 args: [TabContentDirective]

package/esm2020/tabstrip/rendering/tab.component.mjs

@@ -76,11 +76,16 @@ export class TabComponent {
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton
@@ -96,18 +101,23 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], 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: "13.3.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripTab]',
                     template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton

package/esm2020/tabstrip/tabstrip-scroll.service.mjs

@@ -138,7 +138,7 @@ export class ScrollService {
     }
     scrollTabs(direction) {
         this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
-        if (isTablistHorizontal(this.owner.tabPosition)) {
+        if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
             this.tablistElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
         }
         else {
@@ -161,10 +161,10 @@ export class ScrollService {
     }
     restoreScrollPosition() {
         if (isTablistHorizontal(this.owner.tabPosition)) {
-            this.tablistElement.scrollTo({ left: this.position });
+            this.tablistElement.scrollLeft = this.position;
         }
         else {
-            this.tablistElement.scrollTo({ top: this.position });
+            this.tablistElement.scrollTop = this.position;
         }
         this.toggleScrollButtonsState();
     }

package/esm2020/tabstrip/tabstrip.component.mjs

@@ -69,6 +69,12 @@ export class TabStripComponent {
          * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
          */
         this.closeIcon = 'x';
+        /**
+         * Determines whether the content associated with each tab will be rendered.
+         *
+         * @default true
+         */
+        this.showContentArea = true;
         /**
          * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
          * The event data contains the index of the selected tab and its title.
@@ -183,6 +189,10 @@ export class TabStripComponent {
             });
         });
         this.initDomEvents();
+        this.tabsChangesSub = this.tabs.changes.subscribe(() => {
+            this.toggleScrollButtons(this.scrollService.tabsOverflow);
+            this.scrollService.toggleScrollButtonsState();
+        });
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -197,6 +207,12 @@ export class TabStripComponent {
                         this.subscriptions.unsubscribe();
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
+                        this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+                            if (this.hasScrollButtons) {
+                                const action = activeButtonSettings.active ? 'remove' : 'add';
+                                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+                            }
+                        });
                     }
                     this.initDomEvents();
                 }
@@ -208,6 +224,12 @@ export class TabStripComponent {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
+        if (this.tabsChangesSub) {
+            this.tabsChangesSub.unsubscribe();
+        }
+        if (this.activeStateChangeSub) {
+            this.activeStateChangeSub.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -389,7 +411,7 @@ export class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -410,17 +432,17 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -460,7 +482,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -543,17 +565,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -593,7 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -653,6 +675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], showContentArea: [{
+                type: Input
             }], tabSelect: [{
                 type: Output
             }], tabClose: [{

package/esm2020/tabstrip.module.mjs

@@ -15,6 +15,7 @@ import { ResizeSensorModule, WatermarkModule } from '@progress/kendo-angular-com
 import { TabStripScrollableButtonComponent } from './tabstrip/scrollable-button.component';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { TabTemplateDirective } from './tabstrip/directives/tab.directive';
 import * as i0 from "@angular/core";
 const exportedModules = [
     TabStripComponent,
@@ -23,7 +24,8 @@ const exportedModules = [
     TabTitleDirective,
     TabComponent,
     TabStripCustomMessagesComponent,
-    LocalizedTabStripMessagesDirective
+    LocalizedTabStripMessagesDirective,
+    TabTemplateDirective
 ];
 const declarations = [
     ...exportedModules,
@@ -48,13 +50,15 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective] });
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective] });
 TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,

package/fesm2015/progress-kendo-angular-layout.mjs

@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831957,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886942,
+    version: '13.6.0-develop.7',
     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'
 };
 
@@ -2595,6 +2595,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+class TabTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabTemplateDirective, selector: "[kendoTabTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTabTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * Represents the tab component of the TabStrip.
  */
@@ -2606,6 +2623,7 @@ class TabStripTabComponent {
          * Defaults to `false`.
          */
         this.disabled = false;
+        this._tabDirective = new QueryList();
         this._tabContent = new QueryList();
         /**
          * @hidden
@@ -2621,9 +2639,12 @@ class TabStripTabComponent {
     get tabTitle() {
         return this._tabTitleDirective.first;
     }
+    get tabTemplate() {
+        return this._tabDirective.first;
+    }
 }
 TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -2649,6 +2670,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], _tabDirective: [{
+                type: ContentChildren,
+                args: [TabTemplateDirective]
             }], _tabContent: [{
                 type: ContentChildren,
                 args: [TabContentDirective]
@@ -3102,7 +3126,7 @@ class ScrollService {
     }
     scrollTabs(direction) {
         this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
-        if (isTablistHorizontal(this.owner.tabPosition)) {
+        if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
             this.tablistElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
         }
         else {
@@ -3125,10 +3149,10 @@ class ScrollService {
     }
     restoreScrollPosition() {
         if (isTablistHorizontal(this.owner.tabPosition)) {
-            this.tablistElement.scrollTo({ left: this.position });
+            this.tablistElement.scrollLeft = this.position;
         }
         else {
-            this.tablistElement.scrollTo({ top: this.position });
+            this.tablistElement.scrollTop = this.position;
         }
         this.toggleScrollButtonsState();
     }
@@ -3402,11 +3426,16 @@ class TabComponent {
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton
@@ -3422,18 +3451,23 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, components: [{ type: i2$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], 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: "13.3.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripTab]',
                     template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton
@@ -3582,6 +3616,12 @@ class TabStripComponent {
          * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
          */
         this.closeIcon = 'x';
+        /**
+         * Determines whether the content associated with each tab will be rendered.
+         *
+         * @default true
+         */
+        this.showContentArea = true;
         /**
          * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
          * The event data contains the index of the selected tab and its title.
@@ -3696,6 +3736,10 @@ class TabStripComponent {
             });
         });
         this.initDomEvents();
+        this.tabsChangesSub = this.tabs.changes.subscribe(() => {
+            this.toggleScrollButtons(this.scrollService.tabsOverflow);
+            this.scrollService.toggleScrollButtonsState();
+        });
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -3710,6 +3754,12 @@ class TabStripComponent {
                         this.subscriptions.unsubscribe();
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
+                        this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+                            if (this.hasScrollButtons) {
+                                const action = activeButtonSettings.active ? 'remove' : 'add';
+                                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+                            }
+                        });
                     }
                     this.initDomEvents();
                 }
@@ -3721,6 +3771,12 @@ class TabStripComponent {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
+        if (this.tabsChangesSub) {
+            this.tabsChangesSub.unsubscribe();
+        }
+        if (this.activeStateChangeSub) {
+            this.activeStateChangeSub.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -3902,7 +3958,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -3923,17 +3979,17 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -3973,7 +4029,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4056,17 +4112,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -4106,7 +4162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4166,6 +4222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], showContentArea: [{
+                type: Input
             }], tabSelect: [{
                 type: Output
             }], tabClose: [{
@@ -9795,7 +9853,8 @@ const exportedModules$3 = [
     TabTitleDirective,
     TabComponent,
     TabStripCustomMessagesComponent,
-    LocalizedTabStripMessagesDirective
+    LocalizedTabStripMessagesDirective,
+    TabTemplateDirective
 ];
 const declarations$3 = [
     ...exportedModules$3,
@@ -9820,13 +9879,15 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective] });
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective] });
 TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
@@ -10411,5 +10472,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
 

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831957,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886942,
+    version: '13.6.0-develop.7',
     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'
 };
 
@@ -2585,6 +2585,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+ */
+class TabTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabTemplateDirective, selector: "[kendoTabTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTabTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * Represents the tab component of the TabStrip.
  */
@@ -2596,6 +2613,7 @@ class TabStripTabComponent {
          * Defaults to `false`.
          */
         this.disabled = false;
+        this._tabDirective = new QueryList();
         this._tabContent = new QueryList();
         /**
          * @hidden
@@ -2611,9 +2629,12 @@ class TabStripTabComponent {
     get tabTitle() {
         return this._tabTitleDirective.first;
     }
+    get tabTemplate() {
+        return this._tabDirective.first;
+    }
 }
 TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -2639,6 +2660,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], _tabDirective: [{
+                type: ContentChildren,
+                args: [TabTemplateDirective]
             }], _tabContent: [{
                 type: ContentChildren,
                 args: [TabContentDirective]
@@ -3092,7 +3116,7 @@ class ScrollService {
     }
     scrollTabs(direction) {
         this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
-        if (isTablistHorizontal(this.owner.tabPosition)) {
+        if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
             this.tablistElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
         }
         else {
@@ -3115,10 +3139,10 @@ class ScrollService {
     }
     restoreScrollPosition() {
         if (isTablistHorizontal(this.owner.tabPosition)) {
-            this.tablistElement.scrollTo({ left: this.position });
+            this.tablistElement.scrollLeft = this.position;
         }
         else {
-            this.tablistElement.scrollTo({ top: this.position });
+            this.tablistElement.scrollTop = this.position;
         }
         this.toggleScrollButtonsState();
     }
@@ -3392,11 +3416,16 @@ class TabComponent {
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton
@@ -3412,18 +3441,23 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, components: [{ type: i2$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], 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: "13.3.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripTab]',
                     template: `
-        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
-        <span class="k-link" *ngIf="tab.tabTitle">
-            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
-            </ng-template>
-        </span>
+        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
+            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="tab.tabTitle">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
+        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+        </ng-template>
 
         <button
             kendoButton
@@ -3572,6 +3606,12 @@ class TabStripComponent {
          * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
          */
         this.closeIcon = 'x';
+        /**
+         * Determines whether the content associated with each tab will be rendered.
+         *
+         * @default true
+         */
+        this.showContentArea = true;
         /**
          * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
          * The event data contains the index of the selected tab and its title.
@@ -3686,6 +3726,10 @@ class TabStripComponent {
             });
         });
         this.initDomEvents();
+        this.tabsChangesSub = this.tabs.changes.subscribe(() => {
+            this.toggleScrollButtons(this.scrollService.tabsOverflow);
+            this.scrollService.toggleScrollButtonsState();
+        });
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -3700,6 +3744,12 @@ class TabStripComponent {
                         this.subscriptions.unsubscribe();
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
+                        this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+                            if (this.hasScrollButtons) {
+                                const action = activeButtonSettings.active ? 'remove' : 'add';
+                                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+                            }
+                        });
                     }
                     this.initDomEvents();
                 }
@@ -3711,6 +3761,12 @@ class TabStripComponent {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
+        if (this.tabsChangesSub) {
+            this.tabsChangesSub.unsubscribe();
+        }
+        if (this.activeStateChangeSub) {
+            this.activeStateChangeSub.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -3892,7 +3948,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -3913,17 +3969,17 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -3963,7 +4019,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4046,17 +4102,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </ng-container>
         <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="content">
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
+            <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
         </ng-container>
 
         <ng-container *ngIf="tabsAtBottom">
-            <ng-container *ngTemplateOutlet="content">
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading">
+        <ng-container *ngIf="showContentArea">
+                <ng-container *ngTemplateOutlet="content"></ng-container>
             </ng-container>
+            <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
             <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
@@ -4096,7 +4152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
                             [id]="getTabId(i)"
-                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
+                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4156,6 +4212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], closeSVGIcon: [{
                 type: Input
+            }], showContentArea: [{
+                type: Input
             }], tabSelect: [{
                 type: Output
             }], tabClose: [{
@@ -9766,7 +9824,8 @@ const exportedModules$3 = [
     TabTitleDirective,
     TabComponent,
     TabStripCustomMessagesComponent,
-    LocalizedTabStripMessagesDirective
+    LocalizedTabStripMessagesDirective,
+    TabTemplateDirective
 ];
 const declarations$3 = [
     ...exportedModules$3,
@@ -9791,13 +9850,15 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective] });
+        LocalizedTabStripMessagesDirective,
+        TabTemplateDirective] });
 TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
@@ -10382,5 +10443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
 

package/index.d.ts

@@ -23,6 +23,7 @@ export { TabStripScrollButtonsVisibility } from './tabstrip/models/scroll-button
 export { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
 export { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
 export { TabStripScrollableSettings } from './tabstrip/models/scrollable-settings';
+export { TabTemplateDirective } from './tabstrip/directives/tab.directive';
 export * from './tabstrip/events';
 export { DrawerComponent } from './drawer/drawer.component';
 export { DrawerContainerComponent } from './drawer/drawer-container.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "13.6.0-develop.5",
+  "version": "13.6.0-develop.7",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,16 +39,16 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.6.0-develop.5",
-    "@progress/kendo-angular-l10n": "13.6.0-develop.5",
-    "@progress/kendo-angular-progressbar": "13.6.0-develop.5",
-    "@progress/kendo-angular-icons": "13.6.0-develop.5",
-    "@progress/kendo-angular-buttons": "13.6.0-develop.5",
+    "@progress/kendo-angular-common": "13.6.0-develop.7",
+    "@progress/kendo-angular-l10n": "13.6.0-develop.7",
+    "@progress/kendo-angular-progressbar": "13.6.0-develop.7",
+    "@progress/kendo-angular-icons": "13.6.0-develop.7",
+    "@progress/kendo-angular-buttons": "13.6.0-develop.7",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.6.0-develop.5",
+    "@progress/kendo-angular-schematics": "13.6.0-develop.7",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/tabstrip/directives/tab.directive.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class TabTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TabTemplateDirective, "[kendoTabTemplate]", never, {}, {}, never>;
+}

package/tabstrip/models/tabstrip-tab.component.d.ts

@@ -6,6 +6,7 @@ import { QueryList } from '@angular/core';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { TabContentDirective } from '../directives/tab-content.directive';
 import { TabTitleDirective } from '../directives/tab-title.directive';
+import { TabTemplateDirective } from '../directives/tab.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the tab component of the TabStrip.
@@ -58,6 +59,8 @@ export declare class TabStripTabComponent {
     closeSVGIcon: SVGIcon;
     get tabContent(): TabContentDirective;
     get tabTitle(): TabTitleDirective;
+    get tabTemplate(): TabTemplateDirective;
+    _tabDirective: QueryList<TabTemplateDirective>;
     _tabContent: QueryList<TabContentDirective>;
     _tabTitleDirective: QueryList<TabTitleDirective>;
     /**
@@ -68,5 +71,5 @@ export declare class TabStripTabComponent {
      */
     focused: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabStripTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripTabComponent, "kendo-tabstrip-tab", ["kendoTabStripTab"], { "title": "title"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; "selected": "selected"; "closable": "closable"; "closeIcon": "closeIcon"; "closeIconClass": "closeIconClass"; "closeSVGIcon": "closeSVGIcon"; }, {}, ["_tabContent", "_tabTitleDirective"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripTabComponent, "kendo-tabstrip-tab", ["kendoTabStripTab"], { "title": "title"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; "selected": "selected"; "closable": "closable"; "closeIcon": "closeIcon"; "closeIconClass": "closeIconClass"; "closeSVGIcon": "closeSVGIcon"; }, {}, ["_tabDirective", "_tabContent", "_tabTitleDirective"], never>;
 }

package/tabstrip/tabstrip.component.d.ts

@@ -86,6 +86,12 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      */
     set closeSVGIcon(icon: SVGIcon);
     get closeSVGIcon(): SVGIcon;
+    /**
+     * Determines whether the content associated with each tab will be rendered.
+     *
+     * @default true
+     */
+    showContentArea: boolean;
     /**
      * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
      * The event data contains the index of the selected tab and its title.
@@ -142,6 +148,8 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     private subscriptionsArePresent;
     private _closeSVGIcon;
     private tabStripId;
+    private tabsChangesSub;
+    private activeStateChangeSub;
     constructor(localization: LocalizationService, renderer: Renderer2, wrapper: ElementRef, tabstripService: TabStripService, scrollService: ScrollService, ngZone: NgZone);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -207,5 +215,5 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     private toggleScrollButtons;
     private attachWheelHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabStripComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "kendo-tabstrip", ["kendoTabStrip"], { "height": "height"; "animate": "animate"; "tabAlignment": "tabAlignment"; "tabPosition": "tabPosition"; "keepTabContent": "keepTabContent"; "closable": "closable"; "scrollable": "scrollable"; "closeIcon": "closeIcon"; "closeIconClass": "closeIconClass"; "closeSVGIcon": "closeSVGIcon"; }, { "tabSelect": "tabSelect"; "tabClose": "tabClose"; "tabScroll": "tabScroll"; }, ["tabs"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabStripComponent, "kendo-tabstrip", ["kendoTabStrip"], { "height": "height"; "animate": "animate"; "tabAlignment": "tabAlignment"; "tabPosition": "tabPosition"; "keepTabContent": "keepTabContent"; "closable": "closable"; "scrollable": "scrollable"; "closeIcon": "closeIcon"; "closeIconClass": "closeIconClass"; "closeSVGIcon": "closeSVGIcon"; "showContentArea": "showContentArea"; }, { "tabSelect": "tabSelect"; "tabClose": "tabClose"; "tabScroll": "tabScroll"; }, ["tabs"], never>;
 }

package/tabstrip.module.d.ts

@@ -10,11 +10,12 @@ import * as i4 from "./tabstrip/directives/tab-title.directive";
 import * as i5 from "./tabstrip/rendering/tab.component";
 import * as i6 from "./tabstrip/localization/custom-messages.component";
 import * as i7 from "./tabstrip/localization/localized-messages.directive";
-import * as i8 from "./tabstrip/scrollable-button.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@progress/kendo-angular-common";
-import * as i11 from "@progress/kendo-angular-icons";
-import * as i12 from "@progress/kendo-angular-buttons";
+import * as i8 from "./tabstrip/directives/tab.directive";
+import * as i9 from "./tabstrip/scrollable-button.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@progress/kendo-angular-common";
+import * as i12 from "@progress/kendo-angular-icons";
+import * as i13 from "@progress/kendo-angular-buttons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TabStrip component.
@@ -27,6 +28,6 @@ import * as i12 from "@progress/kendo-angular-buttons";
  */
 export declare class TabStripModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TabStripModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TabStripModule, [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective, typeof i8.TabStripScrollableButtonComponent], [typeof i9.CommonModule, typeof i10.ResizeSensorModule, typeof i11.IconsModule, typeof i12.ButtonModule, typeof i10.WatermarkModule], [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TabStripModule, [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective, typeof i8.TabTemplateDirective, typeof i9.TabStripScrollableButtonComponent], [typeof i10.CommonModule, typeof i11.ResizeSensorModule, typeof i12.IconsModule, typeof i13.ButtonModule, typeof i11.WatermarkModule], [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective, typeof i8.TabTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TabStripModule>;
 }