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

package/dist/es/avatar/avatar.component.js

@@ -5,18 +5,8 @@
 import * as tslib_1 from "tslib";
 import { Component, HostBinding, Input, isDevMode, Renderer2, ElementRef } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
+import { getStylingClasses, mapShapeToRounded } from '../common/util';
 import { packageMetadata } from '../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.
  */
@@ -25,45 +15,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';
         validatePackage(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
@@ -85,23 +46,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 = mapShapeToRounded(shape);
         },
         enumerable: true,
         configurable: true
@@ -121,9 +71,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
@@ -137,10 +113,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.
@@ -148,45 +124,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
@@ -194,6 +192,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
      */
@@ -225,25 +231,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 = 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([
         HostBinding('class.k-avatar'),
         tslib_1.__metadata("design:type", Boolean)
     ], AvatarComponent.prototype, "hostClass", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-avatar-solid'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AvatarComponent.prototype, "solidClass", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-avatar-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], AvatarComponent.prototype, "outlineClass", null);
     tslib_1.__decorate([
         HostBinding('class.k-avatar-bordered'),
         tslib_1.__metadata("design:type", Boolean),
@@ -264,6 +283,11 @@ var AvatarComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [String])
     ], AvatarComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AvatarComponent.prototype, "rounded", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String),
@@ -271,8 +295,14 @@ var AvatarComponent = /** @class */ (function () {
     ], AvatarComponent.prototype, "themeColor", null);
     tslib_1.__decorate([
         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([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AvatarComponent.prototype, "fill", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -318,7 +348,7 @@ var AvatarComponent = /** @class */ (function () {
     AvatarComponent = tslib_1.__decorate([
         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", [Renderer2, ElementRef])
     ], AvatarComponent);

package/dist/es/avatar/models/models.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/common/util.js

@@ -4,6 +4,21 @@
 *-------------------------------------------------------------------------------------------*/
 import { Keys } from '@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) {
@@ -44,4 +59,29 @@ export var isNavigationKey = function (keyCode) {
     return keyCode === Keys.PageUp || keyCode === Keys.PageDown ||
         keyCode === Keys.Home || keyCode === Keys.End;
 };
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export var 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
+ */
+export var mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };
 export { ɵ0 };

package/dist/es/main.js

@@ -29,6 +29,7 @@ export { StepperActivateEvent } from './stepper/events/activate-event';
 export { StepperCustomMessagesComponent } from './stepper/localization/custom-messages.component';
 export { LocalizedStepperMessagesDirective } from './stepper/localization/localized-messages.directive';
 export * from './stepper/template-directives';
+// Avatar exports
 export { AvatarComponent } from './avatar/avatar.component';
 // Card exports
 export { CardComponent } from './card/card.component';

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var 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/es/tabstrip/tabstrip.component.js

@@ -218,6 +218,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
@@ -489,7 +515,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", [LocalizationService,
             Renderer2,

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

@@ -3,10 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { OnInit, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
-import { AvatarFill } from './models/fill';
-import { AvatarShape } from './models/shape';
-import { AvatarSize } from './models/size';
-import { AvatarThemeColor } from './models/theme-color';
+import { AvatarFillMode, AvatarShape, AvatarSize, AvatarThemeColor, AvatarRounded } from './models/models';
 /**
  * Displays images, icons or initials representing people or other entities.
  */
@@ -14,14 +11,6 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
     private renderer;
     private element;
     hostClass: boolean;
-    /**
-     * @hidden
-     */
-    readonly solidClass: boolean;
-    /**
-     * @hidden
-     */
-    readonly outlineClass: boolean;
     /**
      * @hidden
      */
@@ -32,13 +21,7 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
     readonly flexBasis: string;
     /**
      * Sets the shape for the avatar.
-     *
-     * Possible values are:
-     * * (Default) `square`
-     * * `circle`
-     * * `rectangle`
-     * * `rounded`
-     *
+     * @hidden
      */
     shape: AvatarShape;
     /**
@@ -52,15 +35,28 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
      *
      */
     size: AvatarSize;
+    /**
+     * 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
+     *
+     */
+    rounded: AvatarRounded;
     /**
      * Specifies the theme color of the avatar.
      * 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.
@@ -68,7 +64,6 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
      * * `dark`— Applies coloring based on dark theme color.
      * * `light`— Applies coloring based on light theme color.
      * * `inverse`— Applies coloring based on inverted theme color.
-     *
      */
     themeColor: AvatarThemeColor;
     /**
@@ -77,9 +72,17 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
      * The possible values are:
      * * `solid` (Default)
      * * `outline`
+     * * null
      *
      */
-    fill: AvatarFill;
+    fillMode: AvatarFillMode;
+    /**
+     * Specifies the appearance fill style of the avatar.
+     * Deprecated, left for backward compatibility.
+     *
+     * @hidden
+     */
+    fill: AvatarFillMode;
     /**
      * Sets a border to the avatar.
      */
@@ -126,15 +129,11 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
     imageSrc: string;
     private _themeColor;
     private _size;
-    private _shape;
-    private avatar;
+    private _fillMode;
+    private _rounded;
     constructor(renderer: Renderer2, element: ElementRef);
-    ngAfterViewInit(): void;
-    /**
-     * @hidden
-     */
-    readonly imageUrl: string;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
@@ -144,5 +143,6 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
      */
     readonly customAvatar: boolean;
     private verifyProperties;
-    private setAvatarClasses;
+    private handleClasses;
+    private handleFillModeAndThemeColorClasses;
 }