@progress/kendo-angular-layout 24.0.0-develop.8 → 24.0.0

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

@@ -4,5 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Defines the possible theme colors of the Avatar ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance#theme-color)).
+ *
+ * The possible values are:
+ * * `base`—Applies base coloring value.
+ * * `primary`—Applies primary coloring value.
+ * * `secondary`—Applies secondary coloring value.
+ * * `tertiary`—Applies tertiary coloring value.
  */
-export type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'base' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'base';

package/codemods/libs/common/src/codemods/utils.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tsInterfaceTransformer = exports.tsPropertyValueTransformer = exports.tsPropertyTransformer = exports.tsComponentPropertyRemoval = exports.attributeRemoval = exports.attributeValueUpdate = exports.attributeNameValueUpdate = exports.attributeNameUpdate = exports.eventUpdate = exports.htmlTransformer = exports.blockTextElements = void 0;
+exports.tsInterfaceTransformer = exports.tsPropertyValueTransformer = exports.tsPropertyTransformer = exports.tsComponentPropertyRemoval = exports.attributeConditionalRemoval = exports.attributeRemoval = exports.attributeValueUpdate = exports.attributeNameValueUpdate = exports.attributeNameUpdate = exports.eventUpdate = exports.htmlTransformer = exports.blockTextElements = void 0;
 exports.hasKendoInTemplate = hasKendoInTemplate;
 exports.isImportedFromPackage = isImportedFromPackage;
 exports.tsPropertyRemoval = tsPropertyRemoval;
@@ -345,6 +345,34 @@ const attributeRemoval = (templateContent, tagName, attributeName, propertyToRem
     });
 };
 exports.attributeRemoval = attributeRemoval;
+/**
+ * Removes an attribute from a tag only when its value matches one of the specified values.
+ * Handles both static (`attr="value"`) and bound (`[attr]="'value'"`) forms.
+ *
+ * @param templateContent - The template string content to transform
+ * @param tagName - The HTML tag name to target (e.g., 'kendo-button')
+ * @param attributeName - The attribute name to conditionally remove
+ * @param values - The attribute values that trigger removal
+ * @returns The transformed template content
+ */
+const attributeConditionalRemoval = (templateContent, tagName, attributeName, values) => {
+    const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const escapedTag = escapeRegex(tagName);
+    const escapedAttr = escapeRegex(attributeName);
+    // Remove bound attributes [attribute]="value"
+    const boundAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+\\[${escapedAttr}\\]\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
+    // Remove static attributes attribute="value"
+    const staticAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+${escapedAttr}\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
+    // Strip outer and inner quotes to extract the raw value for comparison
+    const matchesValue = (raw) => {
+        const inner = raw.replace(/^["']|["']$/g, '').replace(/^['"]|['"]$/g, '');
+        return values.includes(inner);
+    };
+    let result = templateContent.replace(boundAttributePattern, (match, prefix, value, suffix) => matchesValue(value) ? prefix + suffix : match);
+    result = result.replace(staticAttributePattern, (match, prefix, value, suffix) => matchesValue(value) ? prefix + suffix : match);
+    return result;
+};
+exports.attributeConditionalRemoval = attributeConditionalRemoval;
 function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propertyName) {
     if (source.includes(typeName)) {
         if (!isImportedFromPackage(rootSource, j, packageName, typeName)) {
@@ -441,8 +469,31 @@ function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propert
                 }
             }
         });
-        // Handle return statements with object literals
+        // Handle return statements with object literals, but only when the enclosing
+        // function's declared return type matches typeName. This prevents removing
+        // unrelated propertyName keys from object literals returned in other functions.
+        const enclosingFunctionReturnsType = (nodePath) => {
+            let current = nodePath.parent;
+            while (current) {
+                const node = current.node;
+                if (node.type === 'FunctionDeclaration' ||
+                    node.type === 'FunctionExpression' ||
+                    node.type === 'ArrowFunctionExpression' ||
+                    node.type === 'ClassMethod' ||
+                    node.type === 'ObjectMethod') {
+                    return !!(node.returnType &&
+                        node.returnType.typeAnnotation?.type === 'TSTypeReference' &&
+                        node.returnType.typeAnnotation.typeName?.type === 'Identifier' &&
+                        node.returnType.typeAnnotation.typeName.name === typeName);
+                }
+                current = current.parent;
+            }
+            return false;
+        };
         rootSource.find(j.ReturnStatement).forEach((path) => {
+            if (!enclosingFunctionReturnsType(path)) {
+                return;
+            }
             if (path.node.argument && path.node.argument.type === 'ObjectExpression') {
                 const properties = path.node.argument.properties;
                 const propIndex = properties.findIndex((p) => p.type === 'ObjectProperty' &&
@@ -491,22 +542,6 @@ function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propert
                 statement.remove();
             }
         });
-        // Handle nested member expressions like chatConfig.chat.modelFields.pinnedByField
-        rootSource
-            .find(j.AssignmentExpression, {
-            left: {
-                type: 'MemberExpression',
-                object: {
-                    type: 'MemberExpression',
-                },
-                property: {
-                    name: propertyName,
-                },
-            },
-        })
-            .forEach((path) => {
-            j(path).closest(j.ExpressionStatement).remove();
-        });
         return rootSource;
     }
 }

package/codemods/libs/layout/codemods/v24/drawer-miniwidth.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiInstructions = void 0;
+exports.default = default_1;
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
+// Detects on `mini`, not `miniWidth`, because the default removal only matters
+// when mini mode is active. Without `[mini]`, `miniWidth` has no visible effect.
+const drawerMiniPattern = /<kendo-drawer[^>]*\bmini\b(?!Width)/;
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (!(0, codemods_1.isApiChangeTarget)(filePath)) {
+        return fileInfo.source;
+    }
+    if (filePath.endsWith('.html')) {
+        if (drawerMiniPattern.test(fileInfo.source)) {
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
+        }
+        return fileInfo.source;
+    }
+    let patternDetected = false;
+    (0, codemods_1.htmlTransformer)(fileInfo, api, (templateContent) => {
+        if (drawerMiniPattern.test(templateContent)) {
+            patternDetected = true;
+        }
+        return templateContent;
+    });
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    const hasDrawerImport = (0, codemods_1.isImportedFromPackage)(rootSource, j, '@progress/kendo-angular-layout', 'DrawerComponent');
+    if (patternDetected || hasDrawerImport) {
+        (0, codemods_1.writeInstructionMarker)(exports.aiInstructions, __filename, fileInfo.path);
+    }
+    return fileInfo.source;
+}
+exports.aiInstructions = `The DrawerComponent's 'miniWidth' property no longer defaults to 50.
+The mini view width is now determined by the used Kendo Theme.
+
+If you relied on the default value of 50 and want to preserve the old behavior, explicitly set 'miniWidth':
+
+Before (implicit width of 50 when mini is enabled):
+  <kendo-drawer [mini]="true" ...></kendo-drawer>
+
+After (explicit width to preserve old behavior):
+  <kendo-drawer [mini]="true" [miniWidth]="50" ...></kendo-drawer>
+
+Alternatively, remove any explicit miniWidth binding to let the active Kendo Theme control the mini view width.`;

package/codemods/libs/layout/codemods/v24/layout-rendering-changes.js

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiInstructions = exports.aiInstructionsChipAvatar = exports.aiInstructionsChipListSelection = exports.aiInstructionsTimelineButton = exports.aiInstructionsHbox = void 0;
+exports.default = default_1;
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
+exports.aiInstructionsHbox = `k-hbox — no longer applied in the ActionSheet.
+   Remove any CSS rules or test assertions targeting .k-hbox in ActionSheet context.`;
+exports.aiInstructionsTimelineButton = `Timeline collapse/expand button — now rendered as <button> elements instead of <a> elements.
+   Update any CSS selectors or test assertions targeting a.k-button or anchor elements for Timeline collapse/expand buttons to use button elements instead.`;
+exports.aiInstructionsChipListSelection = `k-selection-single and k-selection-multiple — no longer applied in the ChipList.
+   Remove any CSS rules or test assertions targeting .k-selection-single or .k-selection-multiple on ChipList elements.`;
+exports.aiInstructionsChipAvatar = `k-avatar-sm, k-avatar-solid, k-avatar-solid-primary, k-rounded-full — no longer applied for the avatar of the Chip component.
+   Remove any CSS rules or test assertions targeting these classes in the Chip avatar context.`;
+exports.aiInstructions = `Review your stylesheets, test files, and any code that references these Layout classes:
+
+${exports.aiInstructionsHbox}
+
+${exports.aiInstructionsTimelineButton}
+
+${exports.aiInstructionsChipListSelection}
+
+${exports.aiInstructionsChipAvatar}`;
+const patternHbox = (0, codemods_1.makePattern)(['k-hbox']);
+const patternSelectionSingle = (0, codemods_1.makePattern)(['k-selection-single']);
+const patternSelectionMultiple = (0, codemods_1.makePattern)(['k-selection-multiple']);
+const patternAvatarSm = (0, codemods_1.makePattern)(['k-avatar-sm']);
+const patternAvatarSolid = (0, codemods_1.makePattern)(['k-avatar-solid']);
+const patternRoundedFull = (0, codemods_1.makePattern)(['k-rounded-full']);
+function default_1(fileInfo) {
+    if ((0, codemods_1.isRenderingChangeTarget)(fileInfo.path)) {
+        if (patternHbox.test(fileInfo.source)) {
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructionsHbox, __filename, fileInfo.path);
+        }
+        if (patternSelectionSingle.test(fileInfo.source) || patternSelectionMultiple.test(fileInfo.source)) {
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructionsChipListSelection, __filename, fileInfo.path);
+        }
+        if (patternAvatarSm.test(fileInfo.source) || patternAvatarSolid.test(fileInfo.source) || patternRoundedFull.test(fileInfo.source)) {
+            (0, codemods_1.writeInstructionMarker)(exports.aiInstructionsChipAvatar, __filename, fileInfo.path);
+        }
+    }
+    return fileInfo.source;
+}

package/codemods/libs/layout/codemods/v24/themecolor-light-dark.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiInstructions = void 0;
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const fs = tslib_1.__importStar(require("fs"));
+const codemods_1 = require("@progress/kendo-angular-common/codemods");
+exports.aiInstructions = `AvatarThemeColor no longer accepts 'light', 'dark', 'success', 'warning', 'error', 'info', 'inverse'.
+Replace any use of the unsupported values with a supported value: 'base', 'primary', 'secondary', 'tertiary'.
+
+Static template bindings were removed automatically, which means the component now uses its default themeColor.
+If you want to explicitly set a new value, re-add the attribute with a supported one:
+  Before: (removed by codemod — no themeColor attribute)
+  After:  themeColor="base"
+
+The following patterns could not be migrated automatically and require an additional update:
+
+Dynamic binding:
+  Before: [themeColor]="color"  (where color may be 'light' or 'dark')
+  After:  [themeColor]="color"  (ensure color is a supported value)
+
+Conditional expression — replace both branch values:
+  Before: [themeColor]="isDark ? 'dark' : 'light'"
+  After:  [themeColor]="isDark ? 'tertiary' : 'base'"
+
+TypeScript assignment — update the assigned value:
+  Before: this.avatar.themeColor = 'light';
+  After:  this.avatar.themeColor = 'base';`;
+const REMOVED_VALUES = ['light', 'dark', 'success', 'warning', 'error', 'info', 'inverse'];
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (!(0, codemods_1.isApiChangeTarget)(filePath)) {
+        return fileInfo.source;
+    }
+    const htmlResult = (0, codemods_1.htmlTransformer)(fileInfo, api, (templateContent) => {
+        return (0, codemods_1.attributeConditionalRemoval)(templateContent, 'kendo-avatar', 'themeColor', REMOVED_VALUES);
+    });
+    if (filePath.endsWith('.html')) {
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
+        }
+        return fileInfo.source;
+    }
+    return htmlResult || fileInfo.source;
+}

package/drawer/drawer.component.d.ts

@@ -2,13 +2,12 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, OnDestroy, SimpleChange } from '@angular/core';
+import { EventEmitter, OnDestroy, SimpleChange } from '@angular/core';
 import { LicenseMessage } from '@progress/kendo-licensing';
 import { DrawerMode, DrawerPosition, DrawerAnimation } from './types';
 import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './template-directives';
 import { DrawerService } from './drawer.service';
 import { DrawerSelectEvent } from './events/select-event';
-import { AnimationBuilder } from '@angular/animations';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
 import { DrawerViewItem } from './models/drawer-view-item.interface';
@@ -45,16 +44,11 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DrawerComponent implements OnDestroy {
-    private element;
-    private builder;
     private localizationService;
     private drawerService;
     hostClasses: boolean;
     get startPositionClass(): boolean;
     get endPositionClass(): boolean;
-    get overlayMarginLeft(): string;
-    get overlayMarginRight(): string;
-    get flexStyles(): number;
     /**
      * Specifies the mode in which the Drawer displays.
      *
@@ -89,8 +83,7 @@ export declare class DrawerComponent implements OnDestroy {
     width: number;
     /**
      * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
-     *
-     * @default 50
+     * By default, the mini view width is determined by the used Kendo Theme.
      */
     miniWidth: number;
     /**
@@ -165,12 +158,17 @@ export declare class DrawerComponent implements OnDestroy {
      */
     licenseMessage?: LicenseMessage;
     viewItems: DrawerViewItem[];
-    private animationEnd;
+    private pendingToggle;
+    private animatingViaToggle;
     private dynamicRTLSubscription;
     private rtl;
-    constructor(element: ElementRef, builder: AnimationBuilder, localizationService: LocalizationService, drawerService: DrawerService);
+    constructor(localizationService: LocalizationService, drawerService: DrawerService);
     ngOnChanges(changes: SimpleChange): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    get listExpanded(): boolean;
     /**
      * @hidden
      */
@@ -179,6 +177,12 @@ export declare class DrawerComponent implements OnDestroy {
      * @hidden
      */
     get drawerWidth(): number;
+    /**
+     * @hidden
+     */
+    get drawerWrapperStyle(): {
+        [key: string]: string;
+    };
     /**
      * Toggles the visibility of the Drawer.
      * If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
@@ -190,11 +194,11 @@ export declare class DrawerComponent implements OnDestroy {
      * @hidden
      */
     onSelect(e: DrawerListSelectEvent): void;
-    private onAnimationEnd;
+    /**
+     * @hidden
+     */
+    onTransitionEnd(event: TransitionEvent): void;
     private setExpanded;
-    private shouldApplyOverlayMargin;
-    private animate;
-    private createPlayer;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "kendo-drawer", ["kendoDrawer"], { "mode": { "alias": "mode"; "required": false; }; "position": { "alias": "position"; "required": false; }; "mini": { "alias": "mini"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "width": { "alias": "width"; "required": false; }; "miniWidth": { "alias": "miniWidth"; "required": false; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "items": { "alias": "items"; "required": false; }; "isItemExpanded": { "alias": "isItemExpanded"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; }, { "expand": "expand"; "collapse": "collapse"; "select": "select"; "expandedChange": "expandedChange"; }, ["drawerTemplate", "footerTemplate", "headerTemplate", "itemTemplate"], never, true, never>;
 }

package/expansionpanel/expansionpanel.component.d.ts

@@ -111,6 +111,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     header: ElementRef;
     hostClass: boolean;
     get expandedClass(): boolean;
+    get disabledClass(): boolean;
     direction: string;
     /**
      * @hidden