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

package/dist/fesm5/index.js

@@ -21,7 +21,7 @@ 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'
 };
@@ -147,6 +147,21 @@ var PanelBarItemTitleDirective = /** @class */ (function () {
 }());
 
 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) {
@@ -186,6 +201,31 @@ 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
+ */
+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
+ */
+var mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };
 
 var focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
 var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
@@ -2926,6 +2966,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
@@ -3197,7 +3263,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    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Renderer2,
@@ -4703,17 +4769,6 @@ var LocalizedStepperMessagesDirective = /** @class */ (function (_super) {
     return LocalizedStepperMessagesDirective;
 }(StepperMessages));
 
-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.
  */
@@ -4722,45 +4777,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
@@ -4782,23 +4808,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
@@ -4818,9 +4833,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
@@ -4834,10 +4875,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`&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.
@@ -4845,45 +4886,67 @@ var AvatarComponent = /** @class */ (function () {
          * * `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: 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
@@ -4891,6 +4954,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
      */
@@ -4922,25 +4993,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);
+        }
     };
     __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),
@@ -4961,6 +5045,11 @@ var AvatarComponent = /** @class */ (function () {
         __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),
@@ -4968,8 +5057,14 @@ var AvatarComponent = /** @class */ (function () {
     ], 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)
@@ -5015,7 +5110,7 @@ var AvatarComponent = /** @class */ (function () {
     AvatarComponent = __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    "
         }),
         __metadata("design:paramtypes", [Renderer2, ElementRef])
     ], AvatarComponent);