@progress/kendo-angular-layout 6.3.6 → 6.4.0-dev.202112211542

package/dist/es2015/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';
-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.
  */
@@ -25,37 +15,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
      */
@@ -70,21 +39,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
@@ -97,22 +55,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`— 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.
@@ -120,40 +100,65 @@ let AvatarComponent = class AvatarComponent {
      * * `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 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
      */
@@ -185,26 +190,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}`);
+        }
     }
 };
 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),
@@ -225,6 +242,11 @@ tslib_1.__decorate([
     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),
@@ -232,8 +254,14 @@ tslib_1.__decorate([
 ], 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)
@@ -283,7 +311,9 @@ AvatarComponent = tslib_1.__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">

package/dist/es2015/avatar/models/fill.d.ts

@@ -3,12 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the appearance fill style of the аvatar
- * ([see example]({% slug appearance_avatar %}#toc-fill)).
- *
- * The possible values are:
- * * `solid` (Default)
- * * `outline`
- *
+ * Specifies the possible appearance fill styles of the аvatar ([see example]({% slug appearance_avatar %}#toc-fill)).
  */
-export declare type AvatarFill = 'solid' | 'outline';
+export declare type AvatarFillMode = 'solid' | 'outline';

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

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './shape';
+export * from './fill';
+export * from './size';
+export * from './rounded';
+export * from './theme-color';

package/dist/es2015/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/es2015/avatar/models/rounded.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the possible rounded options of the аvatar ([see example]({% slug appearance_avatar %}#toc-rounded-corners)).
+ */
+export declare type AvatarRounded = 'small' | 'medium' | 'large' | 'full';

package/dist/es2015/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/es2015/avatar/models/shape.d.ts

@@ -3,14 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Sets the shape for the avatar.
- *
- * Possible values are:
- * * (Default) `square`
- * * `rounded`
- * * `rectangle`
- * * `circle`
- *
+ * @hidden
+ * Specifies the possible shapes of the avatar.
  */
 export declare type AvatarShape = 'square' | 'rectangle' | 'rounded' | 'circle';
 /**

package/dist/es2015/avatar/models/size.d.ts

@@ -3,13 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the size of the аvatar
- * ([see example]({% slug appearance_avatar %}#toc-size)).
- *
- * The possible values are:
- * * `small`
- * * `medium` (Default)
- * * `large`
- *
+ * Specifies the possible sizes of the аvatar ([see example]({% slug appearance_avatar %}#toc-size)).
  */
 export declare type AvatarSize = 'small' | 'medium' | 'large';

package/dist/es2015/avatar/models/theme-color.d.ts

@@ -3,21 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the theme color of the аvatar
- * ([see example]({% slug appearance_avatar %}#toc-theme-color)).
- *
- * The possible values are:
- * * `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.
- * * `error`— Applies coloring based on error theme color.
- * * `dark`— Applies coloring based on dark theme color.
- * * `light`— Applies coloring based on light theme color.
- * * `inverse`— Applies coloring based on inverted theme color.
- *
+ * Specifies the possible theme colors of the аvatar ([see example]({% slug appearance_avatar %}#toc-theme-color)).
  */
-export declare type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'inherit' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export declare type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'base' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/dist/es2015/common/styling-classes.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface StylingClasses {
+    toRemove?: string;
+    toAdd?: string;
+}

package/dist/es2015/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/es2015/common/util.d.ts

@@ -2,6 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { AvatarRounded, AvatarShape } from '../avatar/models/models';
+import { StylingClasses } from './styling-classes';
 declare const _default: {
     parsePanelBarItems: Function;
 };
@@ -26,3 +28,13 @@ export declare const isArrowKey: (keyCode: any) => boolean;
  * @hidden
  */
 export declare const isNavigationKey: (keyCode: any) => boolean;
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => StylingClasses;
+/**
+ * @hidden
+ */
+export declare const mapShapeToRounded: (shape: AvatarShape) => AvatarRounded;

package/dist/es2015/common/util.js

@@ -4,6 +4,21 @@
 *-------------------------------------------------------------------------------------------*/
 import { Keys } from '@progress/kendo-angular-common';
 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) {
@@ -40,4 +55,29 @@ export const isArrowKey = keyCode => isHorizontalArrowKey(keyCode) || isVertical
  */
 export 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
+ */
+export 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
+ */
+export const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
 export { ɵ0 };