@progress/kendo-angular-layout 24.0.0-develop.38 → 24.0.0-develop.39

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/fesm2022/progress-kendo-angular-layout.mjs

@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1779191919,
-    version: '24.0.0-develop.38',
+    publishDate: 1779209692,
+    version: '24.0.0-develop.39',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1779191919,
-  "version": "24.0.0-develop.38",
+  "publishDate": 1779209692,
+  "version": "24.0.0-develop.39",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "24.0.0-develop.38",
+  "version": "24.0.0-develop.39",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -57,13 +57,29 @@
             "file": "codemods/v21/layout-rendering-changes.js",
             "instructionsOnly": true
           }
+        ],
+        "24": [
+          {
+            "description": "The ActionSheet, Timeline, ChipList, and Chip components have rendering changes that may affect custom styling.",
+            "file": "codemods/v24/layout-rendering-changes.js",
+            "instructionsOnly": true
+          },
+          {
+            "description": "AvatarThemeColor no longer accepts 'light', 'dark', 'success', 'warning', 'error', 'info', or 'inverse' values.",
+            "file": "codemods/v24/themecolor-light-dark.js"
+          },
+          {
+            "description": "The DrawerComponent's 'miniWidth' property no longer defaults to 50. The mini view width is now determined by the used Kendo Theme.",
+            "file": "codemods/v24/drawer-miniwidth.js",
+            "instructionsOnly": true
+          }
         ]
       }
     },
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1779191919,
+      "publishDate": 1779209692,
       "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"
     }
   },
@@ -73,17 +89,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.38",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.38",
-    "@progress/kendo-angular-progressbar": "24.0.0-develop.38",
-    "@progress/kendo-angular-icons": "24.0.0-develop.38",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.38",
-    "@progress/kendo-angular-intl": "24.0.0-develop.38",
+    "@progress/kendo-angular-common": "24.0.0-develop.39",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.39",
+    "@progress/kendo-angular-progressbar": "24.0.0-develop.39",
+    "@progress/kendo-angular-icons": "24.0.0-develop.39",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.39",
+    "@progress/kendo-angular-intl": "24.0.0-develop.39",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.38",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.39",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",