@progress/kendo-angular-layout 7.0.0-next.202204011521 → 7.0.0

package/fesm2015/kendo-angular-layout.js

@@ -7,7 +7,7 @@ import { Directive, Optional, Injectable, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableModule, ResizeSensorModule, isChanged } from '@progress/kendo-angular-common';
+import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, hasObservers, EventsModule, DraggableModule, ResizeSensorModule, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826299,
+    publishDate: 1650441140,
     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'
 };
@@ -179,12 +179,12 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         default:
             break;
@@ -193,7 +193,7 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
 /**
  * @hidden
  */
-const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
+const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || 'none';
 /**
  * @hidden
  */
@@ -528,7 +528,22 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [src]="imageUrl"
                     alt="">
                 <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     class="k-icon k-panelbar-toggle"
                     [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
@@ -654,7 +669,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [src]="imageUrl"
                     alt="">
                 <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     class="k-icon k-panelbar-toggle"
                     [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
@@ -836,6 +866,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }]; } });
 
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        this.prevented = false;
+        Object.assign(this, args);
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+class PanelBarCollapseEvent extends PreventableEvent {
+}
+
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+class PanelBarExpandEvent extends PreventableEvent {
+}
+
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+class PanelBarSelectEvent extends PreventableEvent {
+}
+
+/**
+ * Arguments for the `stateChange` event of the PanelBar.
+ */
+class PanelBarStateChangeEvent {
+}
+
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -866,17 +951,35 @@ class PanelBarComponent {
          * Sets the height of the component when the `"full"` expand mode is used.
          * This option is ignored in the `"multiple"` and `"single"` expand modes.
          */
-        this.height = "400px";
+        this.height = '400px';
         /**
          * Fires each time the user interacts with a PanelBar item
          * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
-         * The event data contains all items that are modified.
+         * The event data contains a collection of all items that are modified.
          */
         this.stateChange = new EventEmitter();
+        /**
+         * Fires when an item is about to be selected.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will not be selected.
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when an item is about to be expanded.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will remain collapsed.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when an item is about to be collapsed.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will remain expanded.
+         */
+        this.collapse = new EventEmitter();
         this.tabIndex = 0;
-        this.role = "tree";
+        this.role = 'tree';
         this.hostClass = true;
-        this.activeDescendant = "";
+        this.activeDescendant = '';
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
@@ -888,7 +991,7 @@ class PanelBarComponent {
                 childrenHeight += item.headerHeight();
             });
             this.childrenItems.forEach(item => {
-                item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + "px" : 'auto';
+                item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
                 item.contentOverflow = contentOverflow;
             });
         };
@@ -927,7 +1030,7 @@ class PanelBarComponent {
         return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
     }
     get overflow() {
-        return this.expandMode === PanelBarExpandMode.Full ? "hidden" : "visible";
+        return this.expandMode === PanelBarExpandMode.Full ? 'hidden' : 'visible';
     }
     get dir() {
         return this.localization.rtl ? 'rtl' : 'ltr';
@@ -977,7 +1080,7 @@ class PanelBarComponent {
         this.validateConfiguration();
     }
     ngOnChanges(changes) {
-        if (changes['height'] || changes['expandMode'] || changes["items"]) { // eslint-disable-line
+        if (changes['height'] || changes['expandMode'] || changes['items']) { // eslint-disable-line
             if (this.childrenItems) {
                 setTimeout(this.updateChildrenHeight);
             }
@@ -1024,7 +1127,7 @@ class PanelBarComponent {
     onComponentBlur() {
         this.eventService.onBlur();
         this.focused = false;
-        this.activeDescendant = "";
+        this.activeDescendant = '';
     }
     /**
      * @hidden
@@ -1043,6 +1146,26 @@ class PanelBarComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    emitEvent(event, item) {
+        let eventArgs;
+        switch (event) {
+            case 'select':
+                eventArgs = new PanelBarSelectEvent();
+                break;
+            case 'collapse':
+                eventArgs = new PanelBarCollapseEvent();
+                break;
+            default:
+                eventArgs = new PanelBarExpandEvent();
+                break;
+        }
+        eventArgs.item = item.serialize();
+        this[event].emit(eventArgs);
+        return eventArgs;
+    }
     get viewItems() {
         let treeItems = [];
         this.viewChildItems.toArray().forEach(item => {
@@ -1054,7 +1177,7 @@ class PanelBarComponent {
     validateConfiguration() {
         if (isDevMode()) {
             if (this.items && (this.contentItems && this.contentItems.length > 0)) {
-                throw new Error("Invalid configuration: mixed template components and items property.");
+                throw new Error('Invalid configuration: mixed template components and items property.');
             }
         }
     }
@@ -1069,37 +1192,80 @@ class PanelBarComponent {
             let focusedState = selectedState;
             selectedState = this.selectable ? selectedState : currentItem.selected;
             if (currentItem.selected !== selectedState || currentItem.focused !== focusedState) {
-                currentItem.selected = selectedState;
-                currentItem.focused = focusedState;
-                this.activeDescendant = focusedState ? currentItem.itemId : "";
-                modifiedItems.push(currentItem);
+                const isSelectPrevented = selectedState ? this.emitEvent('select', currentItem).isDefaultPrevented() : false;
+                if (!isSelectPrevented) {
+                    currentItem.selected = selectedState;
+                    currentItem.focused = focusedState;
+                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    modifiedItems.push(currentItem);
+                }
             }
         });
         if (this.expandMode === PanelBarExpandMode.Multiple) {
-            if (item.hasChildItems || item.hasContent) {
-                item.expanded = !item.expanded;
-            }
-            if (modifiedItems.indexOf(item) < 0) {
-                modifiedItems.push(item);
+            if ((item.hasChildItems || item.hasContent) && item.selected) {
+                const isEventPrevented = item.expanded ?
+                    this.emitEvent('collapse', item).isDefaultPrevented() :
+                    this.emitEvent('expand', item).isDefaultPrevented();
+                if (!isEventPrevented) {
+                    item.expanded = !item.expanded;
+                    if (modifiedItems.indexOf(item) < 0) {
+                        modifiedItems.push(item);
+                    }
+                }
             }
         }
         else {
             let siblings = item.parent ? item.parent.childrenItems : this.childrenItems;
-            if (item.hasChildItems || item.hasContent) {
+            let preventedCollapseItem;
+            let expandedItems = [];
+            if ((item.hasChildItems || item.hasContent) && item.selected) {
                 siblings
                     .forEach((currentItem) => {
                     let expandedState = currentItem === item;
                     if (currentItem.expanded !== expandedState) {
-                        currentItem.expanded = expandedState;
-                        if (modifiedItems.indexOf(currentItem) < 0) {
-                            modifiedItems.push(currentItem);
+                        const isEventPrevented = currentItem.expanded ?
+                            this.emitEvent('collapse', currentItem).isDefaultPrevented() :
+                            this.emitEvent('expand', currentItem).isDefaultPrevented();
+                        if (!isEventPrevented) {
+                            currentItem.expanded = expandedState;
+                            if (currentItem.expanded) {
+                                expandedItems.push(currentItem);
+                            }
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                        else if (isEventPrevented && currentItem.expanded) {
+                            preventedCollapseItem = currentItem;
+                        }
+                    }
+                    else if (currentItem.expanded === expandedState && expandedState) {
+                        const isCollapsePrevented = this.emitEvent('collapse', currentItem).isDefaultPrevented();
+                        if (!isCollapsePrevented) {
+                            currentItem.expanded = !currentItem.expanded;
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                    }
+                });
+                expandedItems.forEach(item => {
+                    if (preventedCollapseItem && item.id !== preventedCollapseItem.id) {
+                        item.expanded = false;
+                        if (isDevMode()) {
+                            const expandMode = PanelBarExpandMode[this.expandMode].toLowerCase();
+                            console.warn(`
+                            The ${expandMode} expandMode allows the expansion of only one item at a time.
+                            See https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/expand-modes/`);
                         }
                     }
                 });
             }
         }
         if (modifiedItems.length > 0) {
-            this.stateChange.emit(modifiedItems.map(currentItem => currentItem.serialize()));
+            let eventArgs = new PanelBarStateChangeEvent();
+            eventArgs.items = modifiedItems.map(currentItem => currentItem.serialize());
+            this.stateChange.emit(eventArgs);
         }
     }
     isVisible(item) {
@@ -1125,16 +1291,16 @@ class PanelBarComponent {
             currentIndex = visibleItems.findIndex(item => item === currentItem);
         }
         switch (action) {
-            case "lastItem":
+            case 'lastItem':
                 nextItem = visibleItems[visibleItems.length - 1];
                 break;
-            case "firstItem":
+            case 'firstItem':
                 nextItem = visibleItems[0];
                 break;
-            case "nextItem":
+            case 'nextItem':
                 nextItem = visibleItems[currentIndex < visibleItems.length - 1 ? currentIndex + 1 : 0];
                 break;
-            case "previousItem":
+            case 'previousItem':
                 nextItem = visibleItems[currentIndex > 0 ? currentIndex - 1 : visibleItems.length - 1];
                 break;
             default:
@@ -1148,19 +1314,21 @@ class PanelBarComponent {
         to.focused = true;
         this.activeDescendant = to.itemId;
         const modifiedItems = new Array(from.serialize(), to.serialize());
-        this.stateChange.emit(modifiedItems);
+        let eventArgs = new PanelBarStateChangeEvent();
+        eventArgs.items = modifiedItems;
+        this.stateChange.emit(eventArgs);
     }
     focusLastItem() {
-        this.focusItem("lastItem");
+        this.focusItem('lastItem');
     }
     focusFirstItem() {
-        this.focusItem("firstItem");
+        this.focusItem('firstItem');
     }
     focusNextItem() {
-        this.focusItem("nextItem");
+        this.focusItem('nextItem');
     }
     focusPreviousItem() {
-        this.focusItem("previousItem");
+        this.focusItem('previousItem');
     }
     expandItem() {
         let currentItem = this.allItems.filter(item => item.focused)[0];
@@ -1213,7 +1381,7 @@ class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-panelbar": "this.hostClass", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-panelbar": "this.hostClass", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -1225,17 +1393,17 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         <ng-template [ngIf]="items?.length">
             <ng-container *ngFor="let item of items">
                 <kendo-panelbar-item *ngIf="!item.hidden"
-                     [title]="item.title"
-                     [id]="item.id"
-                     [icon]="item.icon"
-                     [iconClass]="item.iconClass"
-                     [imageUrl]="item.imageUrl"
-                     [selected]="!!item.selected"
-                     [expanded]="!!item.expanded"
-                     [disabled]="!!item.disabled"
-                     [template]="templateRef"
-                     [items]="item.children"
-                     [content]="item.content"
+                    [title]="item.title"
+                    [id]="item.id"
+                    [icon]="item.icon"
+                    [iconClass]="item.iconClass"
+                    [imageUrl]="item.imageUrl"
+                    [selected]="!!item.selected"
+                    [expanded]="!!item.expanded"
+                    [disabled]="!!item.disabled"
+                    [template]="templateRef"
+                    [items]="item.children"
+                    [content]="item.content"
                 >
                 </kendo-panelbar-item>
             </ng-container>
@@ -1259,17 +1427,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-template [ngIf]="items?.length">
             <ng-container *ngFor="let item of items">
                 <kendo-panelbar-item *ngIf="!item.hidden"
-                     [title]="item.title"
-                     [id]="item.id"
-                     [icon]="item.icon"
-                     [iconClass]="item.iconClass"
-                     [imageUrl]="item.imageUrl"
-                     [selected]="!!item.selected"
-                     [expanded]="!!item.expanded"
-                     [disabled]="!!item.disabled"
-                     [template]="templateRef"
-                     [items]="item.children"
-                     [content]="item.content"
+                    [title]="item.title"
+                    [id]="item.id"
+                    [icon]="item.icon"
+                    [iconClass]="item.iconClass"
+                    [imageUrl]="item.imageUrl"
+                    [selected]="!!item.selected"
+                    [expanded]="!!item.expanded"
+                    [disabled]="!!item.disabled"
+                    [template]="templateRef"
+                    [items]="item.children"
+                    [content]="item.content"
                 >
                 </kendo-panelbar-item>
             </ng-container>
@@ -1290,6 +1458,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], stateChange: [{
                 type: Output
+            }], select: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
@@ -2292,7 +2466,7 @@ class TabCloseEvent {
  * Arguments for the `select` event of the TabStrip.
  * The `select` event fires when a tab is selected (clicked).
  */
-class SelectEvent extends PreventableEvent {
+class SelectEvent extends PreventableEvent$1 {
     /**
      * Constructs the event arguments for the `select` event.
      * @param index - The index of the selected tab.
@@ -2772,7 +2946,7 @@ const normalizeScrollableSettings = (settings) => normalizeSettings(settings ===
  * The `tabScroll` event fires when the tabs are being scrolled.
  *
  */
-class TabScrollEvent extends PreventableEvent {
+class TabScrollEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -3964,7 +4138,7 @@ const nestedLink = (element, selector) => element.querySelector(selector);
 /**
  * @hidden
  */
-class DrawerListSelectEvent extends PreventableEvent {
+class DrawerListSelectEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -4713,7 +4887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * Arguments for the `select` event of the Drawer.
  */
-class DrawerSelectEvent extends PreventableEvent {
+class DrawerSelectEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -4804,7 +4978,7 @@ handlersRTL[Keys.ArrowRight] = 'left';
 /**
  * @hidden
  */
-class StepperActivateEvent$1 extends PreventableEvent {
+class StepperActivateEvent$1 extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -5750,7 +5924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * Arguments for the `activate` event of the Stepper.
  */
-class StepperActivateEvent extends PreventableEvent {
+class StepperActivateEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -5794,6 +5968,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+const DEFAULT_ROUNDED = 'full';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'primary';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Displays images, icons or initials representing people or other entities.
  */
@@ -5806,10 +5984,10 @@ class AvatarComponent {
          * Sets a border to the avatar.
          */
         this.border = false;
-        this._themeColor = 'primary';
-        this._size = 'medium';
-        this._fillMode = 'solid';
-        this._rounded = 'full';
+        this._themeColor = DEFAULT_THEME_COLOR;
+        this._size = DEFAULT_SIZE;
+        this._fillMode = DEFAULT_FILL_MODE;
+        this._rounded = DEFAULT_ROUNDED;
         validatePackage(packageMetadata);
     }
     /**
@@ -5839,12 +6017,13 @@ class AvatarComponent {
      * * `small`
      * * `medium` (Default)
      * * `large`
-     *
+     * * `none`
      */
     set size(size) {
         if (size !== this._size) {
-            this.handleClasses('size', size);
-            this._size = size === null ? null : size || 'medium';
+            const newSize = size ? size : DEFAULT_SIZE;
+            this.handleClasses('size', newSize);
+            this._size = newSize;
         }
     }
     get size() {
@@ -5859,13 +6038,13 @@ class AvatarComponent {
      * * `medium`
      * * `large`
      * * `full` (Default)
-     * * null
-     *
+     * * `none`
      */
     set rounded(rounded) {
         if (rounded !== this._rounded) {
-            this.handleClasses('rounded', rounded);
-            this._rounded = rounded === null ? null : rounded || 'full';
+            const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+            this.handleClasses('rounded', newRounded);
+            this._rounded = newRounded;
         }
     }
     get rounded() {
@@ -5887,10 +6066,12 @@ 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.
+     * * `none`&mdash; Removes the styling associated with the theme color.
      */
     set themeColor(themeColor) {
         if (themeColor !== this._themeColor) {
-            this._themeColor = themeColor === null ? null : (themeColor || 'primary');
+            const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+            this._themeColor = newThemeColor;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -5903,12 +6084,12 @@ class AvatarComponent {
      * The possible values are:
      * * `solid` (Default)
      * * `outline`
-     * * null
-     *
+     * * `none`
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
-            this._fillMode = fillMode === null ? null : (fillMode || 'solid');
+            const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+            this._fillMode = newFillMode;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -5996,11 +6177,11 @@ class AvatarComponent {
         });
         classesToRemove.forEach((cl => this.renderer.removeClass(wrapperElement, cl)));
         // add fill if needed
-        if (fill !== null) {
+        if (fill !== 'none') {
             this.renderer.addClass(wrapperElement, `k-avatar-${fill}`);
         }
         // add theme color class if fill and theme color
-        if (fill !== null && themeColor !== null) {
+        if (fill !== 'none' && themeColor !== 'none') {
             this.renderer.addClass(wrapperElement, `k-avatar-${fill}-${themeColor}`);
         }
     }
@@ -6553,7 +6734,7 @@ function collapse(duration, height) {
 /**
  * Arguments for the `action` event of the ExpansionPanel.
  */
-class ExpansionPanelActionEvent extends PreventableEvent {
+class ExpansionPanelActionEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -7126,7 +7307,7 @@ const HINT_BORDERS_HEIGHT = 2;
  * Arguments for the `reorder` event. The event fires when the order or starting
  * positions of the items is changed via the UI. If you prevent the event, the change is canceled ([see example]({% slug reordering_tilelayout %}#toc-handling-the-reorder-event)).
  */
-class TileLayoutReorderEvent extends PreventableEvent {
+class TileLayoutReorderEvent extends PreventableEvent$1 {
     /**
      * Constructs the event arguments for the `reorder` event.
      * @param item - The TileLayoutItem being reordered.
@@ -7156,7 +7337,7 @@ class TileLayoutReorderEvent extends PreventableEvent {
  * Arguments for the `resize` event. The `resize` event fires when any item size
  * is changed from the UI. If you cancel the event, the change is prevented ([see example]({% slug resizing_tilelayout %}#toc-handling-the-resize-event)).
  */
-class TileLayoutResizeEvent extends PreventableEvent {
+class TileLayoutResizeEvent extends PreventableEvent$1 {
     /**
      * Constructs the event arguments for the `resize` event.
      * @param item - The TileLayoutItem being resized
@@ -9063,5 +9244,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarComponent, PanelBarContentDirective, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };