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

package/dist/es2015/main.d.ts

@@ -36,10 +36,7 @@ export { LocalizedStepperMessagesDirective } from './stepper/localization/locali
 export * from './stepper/template-directives';
 export * from './stepper/types';
 export { AvatarComponent } from './avatar/avatar.component';
-export { AvatarShape, Shape } from './avatar/models/shape';
-export { AvatarSize } from './avatar/models/size';
-export { AvatarFill } from './avatar/models/fill';
-export { AvatarThemeColor } from './avatar/models/theme-color';
+export { AvatarShape, Shape, AvatarRounded, AvatarFillMode, AvatarFillMode as AvatarFill, AvatarSize, AvatarThemeColor } from './avatar/models/models';
 export { CardComponent } from './card/card.component';
 export { CardHeaderComponent } from './card/card-header.component';
 export { CardBodyComponent } from './card/card-body.component';

package/dist/es2015/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/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 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/es2015/tabstrip/tabstrip.component.d.ts

@@ -130,6 +130,14 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      * @hidden
      */
     readonly tabsAlignmentStyles: string;
+    /**
+     * @hidden
+     */
+    readonly tabListWidth: string;
+    /**
+     * @hidden
+     */
+    readonly tabListHeight: string;
     /**
      * @hidden
      */

package/dist/es2015/tabstrip/tabstrip.component.js

@@ -180,6 +180,24 @@ let TabStripComponent = class TabStripComponent {
             justify: 'space-between'
         }[this.tabAlignment];
     }
+    /**
+     * @hidden
+     */
+    get tabListWidth() {
+        if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
+            return '100%';
+        }
+        return null;
+    }
+    /**
+     * @hidden
+     */
+    get tabListHeight() {
+        if (this.tabPosition === 'left' || this.tabPosition === 'right') {
+            return '100%';
+        }
+        return null;
+    }
     /**
      * @hidden
      */
@@ -459,6 +477,8 @@ TabStripComponent = tslib_1.__decorate([
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [style.justifyContent]="tabsAlignmentStyles"
+                    [style.width]="tabListWidth"
+                    [style.height]="tabListHeight"
                 >
                     <ng-container *ngFor="let tab of tabs; let i = index;">
                         <li *ngIf="!tab.closed"

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

@@ -2,13 +2,13 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TileLayoutDraggingService } from './dragging-service';
 /**
  * Represents a tile item within the TileLayoutComponent.
  */
-export declare class TileLayoutItemComponent {
+export declare class TileLayoutItemComponent implements AfterViewInit, OnDestroy, OnChanges {
     elem: ElementRef;
     private renderer;
     private localization;

package/dist/es2015/tilelayout/tilelayout-resize-handle.directive.d.ts

@@ -2,11 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, Renderer2 } from '@angular/core';
+import { ElementRef, OnInit, Renderer2 } from '@angular/core';
 /**
  * @hidden
  */
-export declare class TileLayoutResizeHandleDirective {
+export declare class TileLayoutResizeHandleDirective implements OnInit {
     private el;
     private renderer;
     resizeDirection: string;

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

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, QueryList, SimpleChanges, ElementRef, Renderer2, NgZone } from '@angular/core';
+import { EventEmitter, QueryList, SimpleChanges, ElementRef, Renderer2, NgZone, OnInit, AfterViewInit, OnDestroy, AfterContentInit, OnChanges } from '@angular/core';
 import { TileLayoutDraggingService } from './dragging-service';
 import { TileLayoutResizeEvent } from './resize-event';
 import { TileLayoutItemComponent } from './tilelayout-item.component';
@@ -13,7 +13,7 @@ import { TileLayoutFlowMode } from './models/flowmode.type';
 /**
  * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
  */
-export declare class TileLayoutComponent {
+export declare class TileLayoutComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy, OnChanges {
     private elem;
     private renderer;
     private localization;

package/dist/fesm2015/index.js

@@ -21,7 +21,7 @@ const 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'
 };
@@ -144,6 +144,21 @@ PanelBarItemTitleDirective = __decorate([
 ], PanelBarItemTitleDirective);
 
 let nextId = 0;
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+const ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+const SHAPE_TO_ROUNDED = {
+    rounded: 'large',
+    circle: 'full'
+};
 const parsePanelBarItems = (data) => {
     return data.map((item) => {
         if (!item.id) {
@@ -179,6 +194,31 @@ const isArrowKey = keyCode => isHorizontalArrowKey(keyCode) || isVerticalArrowKe
  */
 const isNavigationKey = keyCode => keyCode === Keys.PageUp || keyCode === Keys.PageDown ||
     keyCode === Keys.Home || keyCode === Keys.End;
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+const getStylingClasses = (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
+ */
+const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
 
 const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
 const toClassList = (classNames) => String(classNames).trim().split(' ');
@@ -2778,6 +2818,24 @@ let TabStripComponent = class TabStripComponent {
             justify: 'space-between'
         }[this.tabAlignment];
     }
+    /**
+     * @hidden
+     */
+    get tabListWidth() {
+        if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
+            return '100%';
+        }
+        return null;
+    }
+    /**
+     * @hidden
+     */
+    get tabListHeight() {
+        if (this.tabPosition === 'left' || this.tabPosition === 'right') {
+            return '100%';
+        }
+        return null;
+    }
     /**
      * @hidden
      */
@@ -3057,6 +3115,8 @@ TabStripComponent = __decorate([
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [style.justifyContent]="tabsAlignmentStyles"
+                    [style.width]="tabListWidth"
+                    [style.height]="tabListHeight"
                 >
                     <ng-container *ngFor="let tab of tabs; let i = index;">
                         <li *ngIf="!tab.closed"
@@ -4512,17 +4572,6 @@ LocalizedStepperMessagesDirective = LocalizedStepperMessagesDirective_1 = __deco
     __metadata("design:paramtypes", [LocalizationService])
 ], LocalizedStepperMessagesDirective);
 
-const SIZE_CLASSES = {
-    'small': 'k-avatar-sm',
-    'medium': 'k-avatar-md',
-    'large': 'k-avatar-lg'
-};
-const 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.
  */
@@ -4531,37 +4580,16 @@ let AvatarComponent = class AvatarComponent {
         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);
     }
-    /**
-     * @hidden
-     */
-    get solidClass() {
-        return this.fill === 'solid';
-    }
-    /**
-     * @hidden
-     */
-    get outlineClass() {
-        return this.fill === 'outline';
-    }
     /**
      * @hidden
      */
@@ -4576,21 +4604,10 @@ let AvatarComponent = class AvatarComponent {
     }
     /**
      * Sets the shape for the avatar.
-     *
-     * Possible values are:
-     * * (Default) `square`
-     * * `circle`
-     * * `rectangle`
-     * * `rounded`
-     *
+     * @hidden
      */
     set shape(shape) {
-        this.renderer.removeClass(this.avatar, SHAPE_CLASSES[this.shape]);
-        this.renderer.addClass(this.avatar, SHAPE_CLASSES[shape]);
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
+        this.rounded = mapShapeToRounded(shape);
     }
     /**
      * Specifies the size of the avatar
@@ -4603,22 +4620,44 @@ let AvatarComponent = class AvatarComponent {
      *
      */
     set size(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';
+        }
     }
     get size() {
         return this._size;
     }
+    /**
+     * 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 rounded(rounded) {
+        if (rounded !== this._rounded) {
+            this.handleClasses('rounded', rounded);
+            this._rounded = rounded === null ? null : rounded || 'full';
+        }
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * 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`&mdash; Applies the base coloring value.
      * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
      * * `secondary`&mdash;Applies coloring based on secondary theme color.
      * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
-     * * `inherit`&mdash; Applies inherited coloring value.
      * * `info`&mdash;Applies coloring based on info theme color.
      * * `success`&mdash; Applies coloring based on success theme color.
      * * `warning`&mdash; Applies coloring based on warning theme color.
@@ -4626,40 +4665,65 @@ let AvatarComponent = class AvatarComponent {
      * * `dark`&mdash; Applies coloring based on dark theme color.
      * * `light`&mdash; Applies coloring based on light theme color.
      * * `inverse`&mdash; Applies coloring based on inverted theme color.
-     *
      */
     set themeColor(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);
+        }
     }
     get themeColor() {
         return this._themeColor;
     }
     /**
-     * @hidden
+     * Specifies the appearance fill style of the avatar.
+     *
+     * The possible values are:
+     * * `solid` (Default)
+     * * `outline`
+     * * null
+     *
      */
-    get avatarWidth() {
-        return this.width;
+    set fillMode(fillMode) {
+        if (fillMode !== this.fillMode) {
+            this._fillMode = fillMode === null ? null : (fillMode || 'solid');
+            this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
+        }
+    }
+    get fillMode() {
+        return this._fillMode;
     }
     /**
+     * Specifies the appearance fill style of the avatar.
+     * Deprecated, left for backward compatibility.
+     *
      * @hidden
      */
-    get avatarHeight() {
-        return this.height;
+    set fill(fillMode) {
+        this.fillMode = fillMode;
     }
-    ngAfterViewInit() {
-        this.setAvatarClasses();
+    /**
+     * @hidden
+     */
+    get avatarWidth() {
+        return this.width;
     }
     /**
      * @hidden
      */
-    get imageUrl() {
-        return `url(${this.imageSrc})`;
+    get avatarHeight() {
+        return this.height;
     }
     ngOnInit() {
         this.verifyProperties();
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(input, this[input]);
+        });
+        this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
+    }
     /**
      * @hidden
      */
@@ -4691,26 +4755,38 @@ let AvatarComponent = class AvatarComponent {
             `);
         }
     }
-    setAvatarClasses() {
-        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]);
+    handleClasses(styleType, value) {
+        const elem = this.element.nativeElement;
+        const 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);
+        }
+    }
+    handleFillModeAndThemeColorClasses(fill, themeColor) {
+        const wrapperElement = this.element.nativeElement;
+        // remove existing fill and theme color classes
+        const currentClasses = Array.from(wrapperElement.classList);
+        const classesToRemove = currentClasses.filter(cl => {
+            return cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
+        });
+        classesToRemove.forEach((cl => 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}`);
+        }
     }
 };
 __decorate([
     HostBinding('class.k-avatar'),
     __metadata("design:type", Boolean)
 ], AvatarComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-avatar-solid'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AvatarComponent.prototype, "solidClass", null);
-__decorate([
-    HostBinding('class.k-avatar-outline'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], AvatarComponent.prototype, "outlineClass", null);
 __decorate([
     HostBinding('class.k-avatar-bordered'),
     __metadata("design:type", Boolean),
@@ -4731,6 +4807,11 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], AvatarComponent.prototype, "size", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AvatarComponent.prototype, "rounded", null);
 __decorate([
     Input(),
     __metadata("design:type", String),
@@ -4738,8 +4819,14 @@ __decorate([
 ], AvatarComponent.prototype, "themeColor", null);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], AvatarComponent.prototype, "fill", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AvatarComponent.prototype, "fillMode", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], AvatarComponent.prototype, "fill", null);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -4789,7 +4876,9 @@ AvatarComponent = __decorate([
         <ng-content *ngIf="customAvatar"></ng-content>
 
         <ng-container *ngIf="imageSrc">
-            <div class="k-avatar-image" [ngStyle]="cssStyle" [style.backgroundImage]="imageUrl"></div>
+            <span class="k-avatar-image">
+                <img src="{{imageSrc}}" [ngStyle]="cssStyle" />
+            </span>
         </ng-container>
 
         <ng-container *ngIf="initials">