@progress/kendo-angular-layout 6.3.5 → 6.4.0-dev.202201191016

package/dist/npm/avatar/avatar.component.js

@@ -7,18 +7,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
+var util_1 = require("../common/util");
 var package_metadata_1 = require("../package-metadata");
-var SIZE_CLASSES = {
-    'small': 'k-avatar-sm',
-    'medium': 'k-avatar-md',
-    'large': 'k-avatar-lg'
-};
-var SHAPE_CLASSES = {
-    'circle': 'k-avatar-circle',
-    'square': 'k-avatar-square',
-    'rectangle': 'k-avatar-rectangle',
-    'rounded': 'k-avatar-rounded'
-};
 /**
  * Displays images, icons or initials representing people or other entities.
  */
@@ -27,45 +17,16 @@ var AvatarComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.element = element;
         this.hostClass = true;
-        /**
-         * Specifies the appearance fill style of the avatar.
-         *
-         * The possible values are:
-         * * `solid` (Default)
-         * * `outline`
-         *
-         */
-        this.fill = 'solid';
         /**
          * Sets a border to the avatar.
          */
         this.border = false;
         this._themeColor = 'primary';
         this._size = 'medium';
-        this._shape = 'square';
-        this.avatar = this.element.nativeElement;
+        this._fillMode = 'solid';
+        this._rounded = 'full';
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
     }
-    Object.defineProperty(AvatarComponent.prototype, "solidClass", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.fill === 'solid';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AvatarComponent.prototype, "outlineClass", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.fill === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(AvatarComponent.prototype, "borderClass", {
         /**
          * @hidden
@@ -87,23 +48,12 @@ var AvatarComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(AvatarComponent.prototype, "shape", {
-        get: function () {
-            return this._shape;
-        },
         /**
          * Sets the shape for the avatar.
-         *
-         * Possible values are:
-         * * (Default) `square`
-         * * `circle`
-         * * `rectangle`
-         * * `rounded`
-         *
+         * @hidden
          */
         set: function (shape) {
-            this.renderer.removeClass(this.avatar, SHAPE_CLASSES[this.shape]);
-            this.renderer.addClass(this.avatar, SHAPE_CLASSES[shape]);
-            this._shape = shape;
+            this.rounded = util_1.mapShapeToRounded(shape);
         },
         enumerable: true,
         configurable: true
@@ -123,9 +73,35 @@ var AvatarComponent = /** @class */ (function () {
          *
          */
         set: function (size) {
-            this.renderer.removeClass(this.avatar, SIZE_CLASSES[this.size]);
-            this.renderer.addClass(this.avatar, SIZE_CLASSES[size]);
-            this._size = size;
+            if (size !== this._size) {
+                this.handleClasses('size', size);
+                this._size = size === null ? null : size || 'medium';
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AvatarComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Specifies the rounded styling of the avatar
+         * ([see example]({% slug appearance_avatar %}#toc-rounded-corners)).
+         *
+         * The possible values are:
+         * * `small`
+         * * `medium`
+         * * `large`
+         * * `full` (Default)
+         * * null
+         *
+         */
+        set: function (rounded) {
+            if (rounded !== this._rounded) {
+                this.handleClasses('rounded', rounded);
+                this._rounded = rounded === null ? null : rounded || 'full';
+            }
         },
         enumerable: true,
         configurable: true
@@ -139,10 +115,10 @@ var AvatarComponent = /** @class */ (function () {
          * The theme color will be applied as background and border color, while also amending the text color accordingly.
          *
          * The possible values are:
+         * * `base`— Applies the base coloring value.
          * * `primary` (Default)—Applies coloring based on primary theme color.
          * * `secondary`—Applies coloring based on secondary theme color.
          * * `tertiary`— Applies coloring based on tertiary theme color.
-         * * `inherit`— Applies inherited coloring value.
          * * `info`—Applies coloring based on info theme color.
          * * `success`— Applies coloring based on success theme color.
          * * `warning`— Applies coloring based on warning theme color.
@@ -150,45 +126,67 @@ var AvatarComponent = /** @class */ (function () {
          * * `dark`— Applies coloring based on dark theme color.
          * * `light`— Applies coloring based on light theme color.
          * * `inverse`— Applies coloring based on inverted theme color.
-         *
          */
         set: function (themeColor) {
-            this.renderer.removeClass(this.avatar, "k-avatar-" + this.themeColor);
-            this.renderer.addClass(this.avatar, "k-avatar-" + themeColor);
-            this._themeColor = themeColor;
+            if (themeColor !== this._themeColor) {
+                this._themeColor = themeColor === null ? null : (themeColor || 'primary');
+                this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
+            }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AvatarComponent.prototype, "avatarWidth", {
+    Object.defineProperty(AvatarComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Specifies the appearance fill style of the avatar.
+         *
+         * The possible values are:
+         * * `solid` (Default)
+         * * `outline`
+         * * null
+         *
+         */
+        set: function (fillMode) {
+            if (fillMode !== this.fillMode) {
+                this._fillMode = fillMode === null ? null : (fillMode || 'solid');
+                this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AvatarComponent.prototype, "fill", {
         /**
+         * Specifies the appearance fill style of the avatar.
+         * Deprecated, left for backward compatibility.
+         *
          * @hidden
          */
-        get: function () {
-            return this.width;
+        set: function (fillMode) {
+            this.fillMode = fillMode;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AvatarComponent.prototype, "avatarHeight", {
+    Object.defineProperty(AvatarComponent.prototype, "avatarWidth", {
         /**
          * @hidden
          */
         get: function () {
-            return this.height;
+            return this.width;
         },
         enumerable: true,
         configurable: true
     });
-    AvatarComponent.prototype.ngAfterViewInit = function () {
-        this.setAvatarClasses();
-    };
-    Object.defineProperty(AvatarComponent.prototype, "imageUrl", {
+    Object.defineProperty(AvatarComponent.prototype, "avatarHeight", {
         /**
          * @hidden
          */
         get: function () {
-            return "url(" + this.imageSrc + ")";
+            return this.height;
         },
         enumerable: true,
         configurable: true
@@ -196,6 +194,14 @@ var AvatarComponent = /** @class */ (function () {
     AvatarComponent.prototype.ngOnInit = function () {
         this.verifyProperties();
     };
+    AvatarComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(input, _this[input]);
+        });
+        this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
+    };
     /**
      * @hidden
      */
@@ -227,25 +233,38 @@ var AvatarComponent = /** @class */ (function () {
             throw new Error("\n                Invalid property configuration given.\n                The kendo-avatar component can accept only one of:\n                icon, imageSrc or initials properties.\n            ");
         }
     };
-    AvatarComponent.prototype.setAvatarClasses = function () {
-        this.renderer.addClass(this.avatar, SHAPE_CLASSES[this.shape]);
-        this.renderer.addClass(this.avatar, "k-avatar-" + this.themeColor);
-        this.renderer.addClass(this.avatar, SIZE_CLASSES[this.size]);
+    AvatarComponent.prototype.handleClasses = function (styleType, value) {
+        var elem = this.element.nativeElement;
+        var classes = util_1.getStylingClasses('avatar', styleType, this[styleType], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    AvatarComponent.prototype.handleFillModeAndThemeColorClasses = function (fill, themeColor) {
+        var _this = this;
+        var wrapperElement = this.element.nativeElement;
+        // remove existing fill and theme color classes
+        var currentClasses = Array.from(wrapperElement.classList);
+        var classesToRemove = currentClasses.filter(function (cl) {
+            return cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
+        });
+        classesToRemove.forEach((function (cl) { return _this.renderer.removeClass(wrapperElement, cl); }));
+        // add fill if needed
+        if (fill !== null) {
+            this.renderer.addClass(wrapperElement, "k-avatar-" + fill);
+        }
+        // add theme color class if fill and theme color
+        if (fill !== null && themeColor !== null) {
+            this.renderer.addClass(wrapperElement, "k-avatar-" + fill + "-" + themeColor);
+        }
     };
     tslib_1.__decorate([
         core_1.HostBinding('class.k-avatar'),
         tslib_1.__metadata("design:type", Boolean)
     ], AvatarComponent.prototype, "hostClass", void 0);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-avatar-solid'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AvatarComponent.prototype, "solidClass", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-avatar-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AvatarComponent.prototype, "outlineClass", null);
     tslib_1.__decorate([
         core_1.HostBinding('class.k-avatar-bordered'),
         tslib_1.__metadata("design:type", Boolean),
@@ -266,6 +285,11 @@ var AvatarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [String])
     ], AvatarComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AvatarComponent.prototype, "rounded", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String),
@@ -273,8 +297,14 @@ var AvatarComponent = /** @class */ (function () {
     ], AvatarComponent.prototype, "themeColor", null);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], AvatarComponent.prototype, "fill", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AvatarComponent.prototype, "fillMode", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AvatarComponent.prototype, "fill", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -320,7 +350,7 @@ var AvatarComponent = /** @class */ (function () {
     AvatarComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-avatar',
-            template: "\n        <ng-content *ngIf=\"customAvatar\"></ng-content>\n\n        <ng-container *ngIf=\"imageSrc\">\n            <div class=\"k-avatar-image\" [ngStyle]=\"cssStyle\" [style.backgroundImage]=\"imageUrl\"></div>\n        </ng-container>\n\n        <ng-container *ngIf=\"initials\">\n            <span class=\"k-avatar-text\" [ngStyle]=\"cssStyle\">{{ initials.substring(0, 2) }}</span>\n        </ng-container>\n\n        <ng-container *ngIf=\"icon || iconClass\">\n            <span class=\"k-avatar-icon\" [ngStyle]=\"cssStyle\" [ngClass]=\"iconClasses()\"></span>\n        </ng-container>\n    "
+            template: "\n        <ng-content *ngIf=\"customAvatar\"></ng-content>\n\n        <ng-container *ngIf=\"imageSrc\">\n            <span class=\"k-avatar-image\">\n                <img src=\"{{imageSrc}}\" [ngStyle]=\"cssStyle\" />\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"initials\">\n            <span class=\"k-avatar-text\" [ngStyle]=\"cssStyle\">{{ initials.substring(0, 2) }}</span>\n        </ng-container>\n\n        <ng-container *ngIf=\"icon || iconClass\">\n            <span class=\"k-avatar-icon\" [ngStyle]=\"cssStyle\" [ngClass]=\"iconClasses()\"></span>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.Renderer2, core_1.ElementRef])
     ], AvatarComponent);

package/dist/npm/avatar/models/models.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/avatar/models/rounded.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/styling-classes.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/common/util.js

@@ -6,6 +6,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var nextId = 0;
+var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+var ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+var SHAPE_TO_ROUNDED = {
+    rounded: 'large',
+    circle: 'full'
+};
 var parsePanelBarItems = function (data) {
     return data.map(function (item) {
         if (!item.id) {
@@ -47,3 +62,28 @@ exports.isNavigationKey = function (keyCode) {
     return keyCode === kendo_angular_common_1.Keys.PageUp || keyCode === kendo_angular_common_1.Keys.PageDown ||
         keyCode === kendo_angular_common_1.Keys.Home || keyCode === kendo_angular_common_1.Keys.End;
 };
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+exports.getStylingClasses = function (componentType, stylingOption, previousValue, newValue) {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: "k-" + componentType + "-" + SIZES[previousValue],
+                toAdd: newValue ? "k-" + componentType + "-" + SIZES[newValue] : null
+            };
+        case 'rounded':
+            return {
+                toRemove: "k-rounded-" + ROUNDNESS[previousValue],
+                toAdd: newValue ? "k-rounded-" + ROUNDNESS[newValue] : null
+            };
+        default:
+            break;
+    }
+};
+/**
+ * @hidden
+ */
+exports.mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };

package/dist/npm/main.js

@@ -54,6 +54,7 @@ exports.StepperCustomMessagesComponent = custom_messages_component_2.StepperCust
 var localized_messages_directive_2 = require("./stepper/localization/localized-messages.directive");
 exports.LocalizedStepperMessagesDirective = localized_messages_directive_2.LocalizedStepperMessagesDirective;
 tslib_1.__exportStar(require("./stepper/template-directives"), exports);
+// Avatar exports
 var avatar_component_1 = require("./avatar/avatar.component");
 exports.AvatarComponent = avatar_component_1.AvatarComponent;
 // Card exports

package/dist/npm/package-metadata.js

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

package/dist/npm/tabstrip/tabstrip.component.js

@@ -220,6 +220,32 @@ var TabStripComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TabStripComponent.prototype, "tabListWidth", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
+                return '100%';
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TabStripComponent.prototype, "tabListHeight", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            if (this.tabPosition === 'left' || this.tabPosition === 'right') {
+                return '100%';
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TabStripComponent.prototype, "isScrollable", {
         /**
          * @hidden
@@ -491,7 +517,7 @@ var TabStripComponent = /** @class */ (function () {
             ],
             exportAs: 'kendoTabStrip',
             selector: 'kendo-tabstrip',
-            template: "\n        <ng-container kendoTabStripLocalizedMessages\n            i18n-closeTitle=\"kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab.\"\n            closeTitle=\"Close\">\n        </ng-container>\n        <ng-container *ngIf=\"!tabsAtBottom\">\n            <ng-container *ngTemplateOutlet=\"heading\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"content\">\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"tabsAtBottom\">\n            <ng-container *ngTemplateOutlet=\"content\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"heading\">\n            </ng-container>\n        </ng-container>\n        <ng-template #heading>\n            <div class=\"k-tabstrip-items-wrapper\" [ngClass]=\"itemsWrapperClass\">\n                <span *ngIf=\"hasScrollButtons\"\n                     #prevScrollButton\n                    kendoTabStripScrollableButton\n                    [prev]=\"true\"></span>\n                <ul role=\"tablist\" #tablist\n                    class=\"k-reset k-tabstrip-items\"\n                    [style.justifyContent]=\"tabsAlignmentStyles\"\n                >\n                    <ng-container *ngFor=\"let tab of tabs; let i = index;\">\n                        <li *ngIf=\"!tab.closed\"\n                            #tabHeaderContainer\n                            kendoTabStripTab\n                            [ngClass]=\"tab.cssClass\"\n                            [ngStyle]=\"tab.cssStyle\"\n                            [tab]=\"tab\"\n                            [index]=\"i\"\n                            role=\"tab\"\n                            [tabStripClosable]=\"closable\"\n                            [tabStripCloseIcon]=\"closeIcon\"\n                            (click)=\"onTabClick($event, i)\"\n                            [id]=\"'k-tabstrip-tab-' + i\"\n                            [attr.aria-controls]=\"'k-tabstrip-tabpanel-' + i\">\n                        </li>\n                    </ng-container>\n                </ul>\n                <span *ngIf=\"hasScrollButtons\" #nextScrollButton\n                    kendoTabStripScrollableButton\n                    [prev]=\"false\">\n                </span>\n            </div>\n        </ng-template>\n        <ng-template #content>\n            <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                <div\n                    [@state]=\"tab.selected && animate ? 'active' : 'inactive'\"\n                    *ngIf=\"!tab.closed && (tab.selected || keepTabContent)\"\n                    [ngClass]=\"!this.keepTabContent || tab.selected ? 'k-content k-state-active' : 'k-content'\"\n                    [tabIndex]=\"0\"\n                    role=\"tabpanel\"\n                    [id]=\"'k-tabstrip-tabpanel-' + i\"\n                    [attr.aria-hidden]=\"!tab.selected\"\n                    [attr.aria-expanded]=\"tab.selected\"\n                    [attr.aria-labelledby]=\"'k-tabstrip-tab-' + i\"\n                    [attr.aria-disabled]=\"tab.disabled\"\n                >\n                    <ng-template [ngTemplateOutlet]=\"tab.tabContent?.templateRef\">\n                    </ng-template>\n                </div>\n            </ng-template>\n        </ng-template>\n        <kendo-resize-sensor *ngIf=\"isScrollable\" (resize)=\"onResize()\"></kendo-resize-sensor>\n    "
+            template: "\n        <ng-container kendoTabStripLocalizedMessages\n            i18n-closeTitle=\"kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab.\"\n            closeTitle=\"Close\">\n        </ng-container>\n        <ng-container *ngIf=\"!tabsAtBottom\">\n            <ng-container *ngTemplateOutlet=\"heading\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"content\">\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"tabsAtBottom\">\n            <ng-container *ngTemplateOutlet=\"content\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"heading\">\n            </ng-container>\n        </ng-container>\n        <ng-template #heading>\n            <div class=\"k-tabstrip-items-wrapper\" [ngClass]=\"itemsWrapperClass\">\n                <span *ngIf=\"hasScrollButtons\"\n                     #prevScrollButton\n                    kendoTabStripScrollableButton\n                    [prev]=\"true\"></span>\n                <ul role=\"tablist\" #tablist\n                    class=\"k-reset k-tabstrip-items\"\n                    [style.justifyContent]=\"tabsAlignmentStyles\"\n                    [style.width]=\"tabListWidth\"\n                    [style.height]=\"tabListHeight\"\n                >\n                    <ng-container *ngFor=\"let tab of tabs; let i = index;\">\n                        <li *ngIf=\"!tab.closed\"\n                            #tabHeaderContainer\n                            kendoTabStripTab\n                            [ngClass]=\"tab.cssClass\"\n                            [ngStyle]=\"tab.cssStyle\"\n                            [tab]=\"tab\"\n                            [index]=\"i\"\n                            role=\"tab\"\n                            [tabStripClosable]=\"closable\"\n                            [tabStripCloseIcon]=\"closeIcon\"\n                            (click)=\"onTabClick($event, i)\"\n                            [id]=\"'k-tabstrip-tab-' + i\"\n                            [attr.aria-controls]=\"'k-tabstrip-tabpanel-' + i\">\n                        </li>\n                    </ng-container>\n                </ul>\n                <span *ngIf=\"hasScrollButtons\" #nextScrollButton\n                    kendoTabStripScrollableButton\n                    [prev]=\"false\">\n                </span>\n            </div>\n        </ng-template>\n        <ng-template #content>\n            <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                <div\n                    [@state]=\"tab.selected && animate ? 'active' : 'inactive'\"\n                    *ngIf=\"!tab.closed && (tab.selected || keepTabContent)\"\n                    [ngClass]=\"!this.keepTabContent || tab.selected ? 'k-content k-state-active' : 'k-content'\"\n                    [tabIndex]=\"0\"\n                    role=\"tabpanel\"\n                    [id]=\"'k-tabstrip-tabpanel-' + i\"\n                    [attr.aria-hidden]=\"!tab.selected\"\n                    [attr.aria-expanded]=\"tab.selected\"\n                    [attr.aria-labelledby]=\"'k-tabstrip-tab-' + i\"\n                    [attr.aria-disabled]=\"tab.disabled\"\n                >\n                    <ng-template [ngTemplateOutlet]=\"tab.tabContent?.templateRef\">\n                    </ng-template>\n                </div>\n            </ng-template>\n        </ng-template>\n        <kendo-resize-sensor *ngIf=\"isScrollable\" (resize)=\"onResize()\"></kendo-resize-sensor>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.Renderer2,