@progress/kendo-angular-listbox 21.0.0-develop.16 → 21.0.0-develop.18

package/codemods/template-transformer/index.js

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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.templateTransformer = templateTransformer;
+const node_html_parser_1 = require("node-html-parser");
+function templateTransformer(root, j, ...processFns) {
+    root
+        .find(j.ClassDeclaration)
+        .forEach(classPath => {
+        // Skip if no decorators
+        const classNode = classPath.node;
+        if (!classNode.decorators || !classNode.decorators.length)
+            return;
+        // Find Component decorator
+        const componentDecorator = classNode.decorators.find((decorator) => {
+            if (decorator.expression && decorator.expression.type === 'CallExpression') {
+                const callee = decorator.expression.callee;
+                // Handle direct Component identifier
+                if (callee.type === 'Identifier' && callee.name === 'Component') {
+                    return true;
+                }
+                // Handle angular.core.Component or similar
+                if (callee.type === 'MemberExpression' &&
+                    callee.property &&
+                    callee.property.type === 'Identifier' &&
+                    callee.property.name === 'Component') {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (!componentDecorator || !componentDecorator.expression)
+            return;
+        const expression = componentDecorator.expression;
+        if (expression.type !== 'CallExpression' || !expression.arguments.length)
+            return;
+        const componentOptions = expression.arguments[0];
+        if (componentOptions.type !== 'ObjectExpression')
+            return;
+        // Find template and templateUrl properties
+        const props = componentOptions.properties || [];
+        const templateProp = props.find((prop) => (prop.key.type === 'Identifier' && prop.key.name === 'template') ||
+            (prop.key.type === 'StringLiteral' && prop.key.value === 'template'));
+        //   const templateUrlProp = props.find((prop: any) =>
+        //     (prop.key.type === 'Identifier' && prop.key.name === 'templateUrl') ||
+        //     (prop.key.type === 'StringLiteral' && prop.key.value === 'templateUrl')
+        //   );
+        // Process inline template
+        if (templateProp) {
+            // Extract template based on node type
+            let originalTemplate;
+            if (templateProp.value.type === 'StringLiteral' || templateProp.value.type === 'Literal') {
+                originalTemplate = templateProp.value.value;
+            }
+            else if (templateProp.value.type === 'TemplateLiteral') {
+                // For template literals, join quasis
+                if (templateProp.value.quasis && templateProp.value.quasis.length) {
+                    originalTemplate = templateProp.value.quasis
+                        .map((q) => q.value.cooked || q.value.raw)
+                        .join('');
+                }
+                else {
+                    console.warn('Could not process TemplateLiteral properly');
+                    return;
+                }
+            }
+            else {
+                console.warn(`Unsupported template type: ${templateProp.value.type}`);
+                return;
+            }
+            const root = (0, node_html_parser_1.parse)(originalTemplate);
+            processFns.forEach(fn => {
+                fn(root);
+            });
+            // Transform template using Angular compiler
+            const transformedTemplate = root.toString();
+            if (transformedTemplate !== originalTemplate) {
+                // Update template property
+                if (templateProp.value.type === 'TemplateLiteral') {
+                    // For template literals, create a new template literal
+                    templateProp.value = j.templateLiteral([j.templateElement({ cooked: transformedTemplate, raw: transformedTemplate }, true)], []);
+                }
+                else {
+                    // For string literals, update the value
+                    templateProp.value.value = transformedTemplate;
+                }
+            }
+        }
+    });
+}

package/codemods/utils.js

@@ -0,0 +1,711 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tsInterfaceTransformer = exports.tsComponentPropertyRemoval = exports.templateAttributeRemoval = exports.htmlAttributeRemoval = exports.htmlAttributeValueTransformer = exports.tsPropertyValueTransformer = exports.templateAttributeValueTransformer = exports.htmlEventTransformer = exports.htmlAttributeTransformer = exports.htmlBoundAttributeTransformer = exports.htmlStaticAttributeTransformer = exports.tsPropertyTransformer = exports.templateAttributeTransformer = exports.templateBoundAttributeTransformer = exports.templateStaticAttributeTransformer = exports.templateEventTransformer = exports.blockTextElements = void 0;
+exports.hasKendoInTemplate = hasKendoInTemplate;
+exports.tsPropertyRemoval = tsPropertyRemoval;
+const node_html_parser_1 = __importDefault(require("node-html-parser"));
+exports.blockTextElements = {
+    script: true,
+    noscript: true,
+    style: true,
+    pre: true,
+};
+function hasKendoInTemplate(source) {
+    const kendoPattern = /(<kendo-[^>\s]+|<[^>]*\s+kendo[A-Z][^>\s]*)/g;
+    return kendoPattern.test(source);
+}
+const templateEventTransformer = (root, tagName, eventName, newEventName) => {
+    const elements = Array.from(root.getElementsByTagName(tagName)) || [];
+    for (const element of elements) {
+        // Handle event bindings like (actionClick)="handler($event)"
+        const eventAttr = element.getAttribute(`(${eventName})`);
+        if (eventAttr) {
+            element.setAttribute(`(${newEventName})`, eventAttr);
+            element.removeAttribute(`(${eventName})`);
+        }
+    }
+};
+exports.templateEventTransformer = templateEventTransformer;
+const templateStaticAttributeTransformer = (root, tagName, attributeName, newAttributeName) => {
+    const elements = Array.from(root.getElementsByTagName(tagName)) || [];
+    for (const element of elements) {
+        // Handle static attributes like title="foo"
+        const staticAttr = element.getAttribute(attributeName);
+        if (staticAttr) {
+            element.setAttribute(newAttributeName, staticAttr);
+            element.removeAttribute(attributeName);
+        }
+    }
+};
+exports.templateStaticAttributeTransformer = templateStaticAttributeTransformer;
+const templateBoundAttributeTransformer = (root, tagName, attributeName, newAttributeName, valueProperty) => {
+    const elements = Array.from(root.getElementsByTagName(tagName)) || [];
+    for (const element of elements) {
+        // Handle bound attributes like [title]="foo" or [title]="'foo'"
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr) {
+            const newValue = valueProperty ? `${boundAttr}.${valueProperty}` : boundAttr;
+            element.setAttribute(`[${newAttributeName}]`, newValue);
+            element.removeAttribute(`[${attributeName}]`);
+        }
+    }
+};
+exports.templateBoundAttributeTransformer = templateBoundAttributeTransformer;
+const templateAttributeTransformer = (root, tagName, attributeName, newAttributeName) => {
+    (0, exports.templateBoundAttributeTransformer)(root, tagName, attributeName, newAttributeName);
+    (0, exports.templateStaticAttributeTransformer)(root, tagName, attributeName, newAttributeName);
+};
+exports.templateAttributeTransformer = templateAttributeTransformer;
+const tsPropertyTransformer = (source, root, j, componentType, propertyName, newPropertyName, valueProperty) => {
+    if (source.includes(componentType)) {
+        // Find all class properties that are of type DropDownListComponent
+        const properties = new Set();
+        // Find properties with type annotations
+        root.find(j.ClassProperty, {
+            typeAnnotation: {
+                typeAnnotation: {
+                    typeName: {
+                        name: componentType,
+                    },
+                },
+            },
+        }).forEach((path) => {
+            if (path.node.key.type === 'Identifier') {
+                properties.add(path.node.key.name);
+            }
+        });
+        // Find function parameters of type componentType
+        const parameters = new Set();
+        root.find(j.FunctionDeclaration).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check method declarations in classes
+        root.find(j.ClassMethod).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check arrow functions
+        root.find(j.ArrowFunctionExpression).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Find local variable declarations of type componentType
+        const localVariables = new Set();
+        root.find(j.VariableDeclarator).forEach((path) => {
+            if (path.node.id.type === 'Identifier' &&
+                path.node.id.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                localVariables.add(path.node.id.name);
+            }
+        });
+        // Find all member expressions where title property is accessed on any componentType instance
+        root.find(j.MemberExpression, {
+            property: {
+                type: 'Identifier',
+                name: propertyName,
+            },
+        })
+            .filter((path) => {
+            // Filter to only include accesses on properties that are componentType instances
+            if (path.node.object.type === 'MemberExpression' && path.node.object.property.type === 'Identifier') {
+                // handle properties of this
+                if (path.node.object.object.type === 'ThisExpression' &&
+                    properties.has(path.node.object.property.name)) {
+                    return true;
+                }
+            }
+            // Handle function parameters and local variables
+            if (path.node.object.type === 'Identifier') {
+                return parameters.has(path.node.object.name) || localVariables.has(path.node.object.name);
+            }
+            return false;
+        })
+            .forEach((path) => {
+            // Replace old property name with new property name
+            if (path.node.property.type === 'Identifier') {
+                path.node.property.name = newPropertyName;
+            }
+            // If valueProperty is specified and this is part of an assignment,
+            // we need to also modify the right-hand side of the assignment
+            if (valueProperty) {
+                const assignmentExpression = path.parent;
+                if (assignmentExpression &&
+                    assignmentExpression.value &&
+                    assignmentExpression.value.type === 'AssignmentExpression' &&
+                    assignmentExpression.value.left === path.node) {
+                    const rightSide = assignmentExpression.value.right;
+                    // Case 1: Right side is a member expression (e.g., this.user, obj.user) -> transform to this.user.id, obj.user.id
+                    // Case 2: Right side is an identifier (e.g., user, foo) -> transform to user.id, foo.id
+                    if (rightSide.type === 'MemberExpression' || rightSide.type === 'Identifier') {
+                        const newRightSide = j.memberExpression(rightSide, j.identifier(valueProperty));
+                        assignmentExpression.value.right = newRightSide;
+                    }
+                    // Case 3: Right side is object literal -> extract the valueProperty value
+                    else if (rightSide.type === 'ObjectExpression') {
+                        // Find the property that matches valueProperty
+                        const targetProperty = rightSide.properties.find((prop) => prop.type === 'ObjectProperty' &&
+                            prop.key &&
+                            prop.key.type === 'Identifier' &&
+                            prop.key.name === valueProperty);
+                        if (targetProperty) {
+                            // Replace the entire object literal with just the value of the target property
+                            assignmentExpression.value.right = targetProperty.value;
+                        }
+                    }
+                }
+            }
+        });
+    }
+};
+exports.tsPropertyTransformer = tsPropertyTransformer;
+const htmlStaticAttributeTransformer = (fileInfo, tagName, oldName, newName) => {
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
+    let modified = false;
+    const elements = Array.from(root.querySelectorAll(tagName));
+    for (const element of elements) {
+        const staticAttr = element.getAttribute(oldName);
+        if (staticAttr) {
+            element.removeAttribute(oldName);
+            element.setAttribute(newName, staticAttr);
+            modified = true;
+        }
+    }
+    if (modified) {
+        return root.toString();
+    }
+    return fileContent;
+};
+exports.htmlStaticAttributeTransformer = htmlStaticAttributeTransformer;
+const htmlBoundAttributeTransformer = (fileInfo, tagName, oldName, newName, valueProperty) => {
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
+    let modified = false;
+    const elements = Array.from(root.querySelectorAll(tagName));
+    for (const element of elements) {
+        const boundAttr = element.getAttribute(`[${oldName}]`);
+        if (boundAttr) {
+            element.removeAttribute(`[${oldName}]`);
+            // If valueProperty is provided, append it to the bound value
+            const newValue = valueProperty ? `${boundAttr}.${valueProperty}` : boundAttr;
+            element.setAttribute(`[${newName}]`, newValue);
+            modified = true;
+        }
+    }
+    if (modified) {
+        return root.toString();
+    }
+    return fileContent;
+};
+exports.htmlBoundAttributeTransformer = htmlBoundAttributeTransformer;
+const htmlAttributeTransformer = (fileInfo, tagName, oldName, newName) => {
+    let content = (0, exports.htmlBoundAttributeTransformer)(fileInfo, tagName, oldName, newName);
+    content = (0, exports.htmlStaticAttributeTransformer)({ path: fileInfo.path, source: content }, tagName, oldName, newName);
+    return content;
+};
+exports.htmlAttributeTransformer = htmlAttributeTransformer;
+const htmlEventTransformer = (fileInfo, tagName, oldEventName, newEventName) => {
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
+    let modified = false;
+    const elements = Array.from(root.querySelectorAll(tagName));
+    for (const element of elements) {
+        // Handle event bindings like (actionClick)="handler($event)"
+        const eventAttr = element.getAttribute(`(${oldEventName})`);
+        if (eventAttr) {
+            element.removeAttribute(`(${oldEventName})`);
+            element.setAttribute(`(${newEventName})`, eventAttr);
+            modified = true;
+        }
+    }
+    if (modified) {
+        return root.toString();
+    }
+    return fileContent;
+};
+exports.htmlEventTransformer = htmlEventTransformer;
+const templateAttributeValueTransformer = (root, tagName, attributeName, oldAttributeValue, newAttributeValue) => {
+    const elements = Array.from(root.getElementsByTagName(tagName)) || [];
+    for (const element of elements) {
+        // Handle bound attributes (e.g., [showText]="'overflow'")
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr === `'${oldAttributeValue}'`) {
+            // For bound literals like [showText]="'overflow'" or [showText]="\"overflow\""
+            element.setAttribute(`[${attributeName}]`, boundAttr.replace(oldAttributeValue, newAttributeValue));
+        }
+        // Handle static attributes like title="foo"
+        const staticAttrValue = element.getAttribute(attributeName);
+        if (staticAttrValue === oldAttributeValue) {
+            element.setAttribute(attributeName, newAttributeValue);
+        }
+    }
+};
+exports.templateAttributeValueTransformer = templateAttributeValueTransformer;
+const tsPropertyValueTransformer = (source, root, j, typeName, oldValue, newValue) => {
+    if (source.includes(typeName)) {
+        root.find(j.ClassProperty)
+            .filter((path) => {
+            if (path.node.typeAnnotation?.typeAnnotation &&
+                path.node.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.typeAnnotation.typeAnnotation.typeName &&
+                path.node.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.typeAnnotation.typeAnnotation.typeName.name === typeName) {
+                return true;
+            }
+            return false;
+        })
+            .forEach((path) => {
+            if (path.node.value && path.node.value.type === 'StringLiteral' && path.node.value.value === oldValue) {
+                path.node.value.value = newValue;
+            }
+        });
+        root.find(j.VariableDeclarator)
+            .filter((path) => {
+            if (path.node.id.type === 'Identifier' &&
+                path.node.id.typeAnnotation?.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name === typeName) {
+                return true;
+            }
+            return false;
+        })
+            .forEach((path) => {
+            if (path.node.id.type === 'Identifier') {
+                if (path.node.init && path.node.init.type === 'StringLiteral' && path.node.init.value === oldValue) {
+                    path.node.init.value = newValue;
+                }
+            }
+        });
+        root.find(j.AssignmentExpression)
+            .filter((path) => {
+            return path.node.right.type === 'StringLiteral' && path.node.right.value === oldValue;
+        })
+            .forEach((path) => {
+            path.node.right.value = newValue;
+        });
+        root.find(j.JSXAttribute, {
+            value: {
+                type: 'StringLiteral',
+                value: oldValue,
+            },
+        }).forEach((path) => {
+            if (path.node.value?.type === 'StringLiteral') {
+                path.node.value.value = newValue;
+            }
+        });
+    }
+};
+exports.tsPropertyValueTransformer = tsPropertyValueTransformer;
+const htmlAttributeValueTransformer = (fileInfo, tagName, attributeName, oldValue, newValue) => {
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
+    const elements = root.querySelectorAll(tagName);
+    let modified = false;
+    for (const element of elements) {
+        // Handle static attributes (e.g., showText="overflow")
+        const staticAttr = element.getAttribute(attributeName);
+        if (staticAttr === oldValue) {
+            element.setAttribute(attributeName, newValue);
+            modified = true;
+            console.log(`Modified static attribute ${attributeName} from "${oldValue}" to "${newValue}" in element:`, element.toString().substring(0, 100));
+        }
+        // Handle bound attributes (e.g., [showText]="overflow")
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr) {
+            // For bound literals like [showText]="'overflow'" or [showText]="\"overflow\""
+            if (boundAttr === `'${oldValue}'` || boundAttr === `"${oldValue}"`) {
+                const updatedValue = boundAttr.replace(oldValue, newValue);
+                element.setAttribute(`[${attributeName}]`, updatedValue);
+                modified = true;
+                console.log(`Modified bound attribute [${attributeName}] from "${boundAttr}" to "${updatedValue}" in element:`, element.toString().substring(0, 100));
+            }
+        }
+    }
+    if (modified) {
+        const updatedContent = root.toString();
+        return updatedContent;
+    }
+    return fileContent;
+};
+exports.htmlAttributeValueTransformer = htmlAttributeValueTransformer;
+const htmlAttributeRemoval = (fileInfo, tagName, attributeName, propertyToRemove) => {
+    const filePath = fileInfo.path;
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
+    // Use the same logic as templateAttributeRemoval
+    const elements = root.querySelectorAll(tagName);
+    for (const element of elements) {
+        // If no propertyToRemove is specified, remove the entire attribute
+        if (!propertyToRemove) {
+            // Remove both bound and static attributes
+            element.removeAttribute(`[${attributeName}]`);
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        // Look for bound attribute (e.g., [scrollable]="...")
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr) {
+            if (boundAttr.trim().startsWith('{') && boundAttr.trim().endsWith('}')) {
+                const objectLiteral = boundAttr.trim();
+                const propRegex = new RegExp(`\\s*${propertyToRemove}\\s*:\\s*[^,}]+\\s*(,\\s*)?`, 'g');
+                let newObjectLiteral = objectLiteral.replace(propRegex, '');
+                newObjectLiteral = newObjectLiteral.replace(/,\s*}$/, '}');
+                if (newObjectLiteral === '{}') {
+                    element.removeAttribute(`[${attributeName}]`);
+                }
+                else {
+                    element.setAttribute(`[${attributeName}]`, newObjectLiteral);
+                }
+            }
+            else {
+                console.warn(`Cannot remove property from variable reference: ${boundAttr} in file ${filePath}`);
+            }
+        }
+    }
+    return root.toString();
+};
+exports.htmlAttributeRemoval = htmlAttributeRemoval;
+const templateAttributeRemoval = (root, tagName, attributeName, propertyToRemove) => {
+    const elements = root.querySelectorAll(tagName);
+    for (const element of elements) {
+        if (!propertyToRemove) {
+            element.removeAttribute(`[${attributeName}]`);
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr) {
+            if (boundAttr.trim().startsWith('{') && boundAttr.trim().endsWith('}')) {
+                const objectLiteral = boundAttr.trim();
+                const propRegex = new RegExp(`\\s*${propertyToRemove}\\s*:\\s*[^,}]+\\s*(,\\s*)?`, 'g');
+                let newObjectLiteral = objectLiteral.replace(propRegex, '');
+                newObjectLiteral = newObjectLiteral.replace(/,\s*}$/, '}');
+                if (newObjectLiteral === '{}') {
+                    element.removeAttribute(`[${attributeName}]`);
+                }
+                else {
+                    element.setAttribute(`[${attributeName}]`, newObjectLiteral);
+                }
+            }
+            else {
+                console.warn(`Cannot remove property from variable reference: ${boundAttr}`);
+            }
+        }
+    }
+};
+exports.templateAttributeRemoval = templateAttributeRemoval;
+function tsPropertyRemoval(source, rootSource, j, typeName, propertyName) {
+    if (source.includes(typeName)) {
+        rootSource
+            .find(j.ClassProperty, {
+            typeAnnotation: {
+                typeAnnotation: {
+                    typeName: {
+                        name: typeName,
+                    },
+                },
+            },
+        })
+            .forEach((path) => {
+            if (path.node.value && path.node.value.type === 'ObjectExpression') {
+                const properties = path.node.value.properties;
+                const propIndex = properties.findIndex((p) => p.type === 'ObjectProperty' &&
+                    p.key &&
+                    p.key.type === 'Identifier' &&
+                    p.key.name === propertyName);
+                if (propIndex !== -1) {
+                    if (properties.length === 1) {
+                        j(path).remove();
+                    }
+                    else {
+                        properties.splice(propIndex, 1);
+                    }
+                }
+            }
+        });
+        rootSource
+            .find(j.AssignmentExpression, {
+            left: {
+                type: 'MemberExpression',
+                object: {
+                    type: 'MemberExpression',
+                },
+                property: {
+                    name: propertyName,
+                },
+            },
+        })
+            .forEach((path) => {
+            j(path).remove();
+        });
+        return rootSource;
+    }
+}
+const tsComponentPropertyRemoval = (source, root, j, componentType, componentProperty, propertyToRemove) => {
+    if (source.includes(componentType)) {
+        // If no propertyToRemove is specified, remove the entire componentProperty
+        if (!propertyToRemove) {
+            // Handle direct property assignments like: foo.scrollable = value;
+            root.find(j.AssignmentExpression)
+                .filter((path) => {
+                const { left } = path.value;
+                // Check if this assigns to component.componentProperty
+                if (left &&
+                    left.type === 'MemberExpression' &&
+                    left.property &&
+                    left.property.name === componentProperty) {
+                    // Check if the base object is our component type
+                    return isComponentTypeMatch(root, j, left.object, componentType);
+                }
+                return false;
+            })
+                .forEach((path) => {
+                // Remove the entire statement
+                j(path).closest(j.ExpressionStatement).remove();
+            });
+            return root;
+        }
+        // CASE 1: Handle direct property assignments like: foo.scrollable.mouseScrollSpeed = 3000;
+        root.find(j.AssignmentExpression)
+            .filter((path) => {
+            const { left } = path.value;
+            // Check if this is a member expression assignment
+            if (left && left.type === 'MemberExpression') {
+                // Check if we're accessing the property to remove
+                if (left.property && left.property.name === propertyToRemove) {
+                    // Check if we're accessing it from component.componentProperty
+                    const obj = left.object;
+                    if (obj &&
+                        obj.type === 'MemberExpression' &&
+                        obj.property &&
+                        obj.property.name === componentProperty) {
+                        // Now check if the base object is our component type
+                        return isComponentTypeMatch(root, j, obj.object, componentType);
+                    }
+                }
+            }
+            return false;
+        })
+            .forEach((path) => {
+            // Remove the entire statement
+            j(path).closest(j.ExpressionStatement).remove();
+        });
+        // CASE 2 & 3: Handle object assignments like: foo.scrollable = { mouseScrollSpeed: 3000, ... };
+        root.find(j.AssignmentExpression)
+            .filter((path) => {
+            const { left, right } = path.value;
+            // Check if this assigns to component.componentProperty
+            if (left &&
+                left.type === 'MemberExpression' &&
+                left.property &&
+                left.property.name === componentProperty &&
+                right &&
+                right.type === 'ObjectExpression') {
+                // Check if the base object is our component type
+                return isComponentTypeMatch(root, j, left.object, componentType);
+            }
+            return false;
+        })
+            .forEach((path) => {
+            const properties = path.value.right.properties;
+            // Find the property we want to remove
+            const propIndex = properties.findIndex((p) => p &&
+                p.type === 'ObjectProperty' &&
+                p.key &&
+                p.key.type === 'Identifier' &&
+                p.key.name === propertyToRemove);
+            if (propIndex !== -1) {
+                // Case 2: If it's the only property, remove the entire statement
+                if (properties.length === 1) {
+                    j(path).closest(j.ExpressionStatement).remove();
+                }
+                // Case 3: If there are other properties, just remove this one property
+                else {
+                    properties.splice(propIndex, 1);
+                }
+            }
+        });
+        return root;
+    }
+};
+exports.tsComponentPropertyRemoval = tsComponentPropertyRemoval;
+// Helper function to check if a node is a component of the specified type
+function isComponentTypeMatch(root, j, node, componentType) {
+    if (!node)
+        return false;
+    if (node.type === 'ThisExpression') {
+        return true;
+    }
+    if (node.type === 'Identifier') {
+        const paramName = node.name;
+        return root.find(j.Function).some((path) => {
+            return (path.node.params &&
+                path.node.params.some((param) => param.type === 'Identifier' &&
+                    param.name === paramName &&
+                    param.typeAnnotation?.typeAnnotation?.typeName?.name === componentType));
+        });
+    }
+    if (node.type === 'MemberExpression') {
+        if (node.object.type === 'ThisExpression' && node.property.type === 'Identifier') {
+            const propName = node.property.name;
+            return (root
+                .find(j.ClassProperty, {
+                key: { name: propName },
+                typeAnnotation: {
+                    typeAnnotation: {
+                        typeName: { name: componentType },
+                    },
+                },
+            })
+                .size() > 0);
+        }
+    }
+    return false;
+}
+const tsInterfaceTransformer = (fileInfo, rootSource, j, packageName, interfaceName, newName) => {
+    const source = fileInfo.source;
+    if (source.includes(interfaceName)) {
+        let isImportedFromKendoListbox = false;
+        rootSource.find(j.ImportDeclaration).forEach((path) => {
+            if (path.node.source &&
+                path.node.source.value === packageName &&
+                path.node.specifiers) {
+                path.node.specifiers.forEach((specifier) => {
+                    if (specifier.type === 'ImportSpecifier' &&
+                        specifier.imported.type === 'Identifier' &&
+                        specifier.imported.name === interfaceName) {
+                        isImportedFromKendoListbox = true;
+                        specifier.imported.name = newName;
+                    }
+                });
+            }
+        });
+        if (!isImportedFromKendoListbox) {
+            return;
+        }
+        rootSource.find(j.ClassProperty).forEach((path) => {
+            if (path.node.typeAnnotation &&
+                path.node.typeAnnotation.typeAnnotation &&
+                path.node.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.typeAnnotation.typeAnnotation.typeName &&
+                path.node.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.typeAnnotation.typeAnnotation.typeName.name === interfaceName) {
+                path.node.typeAnnotation.typeAnnotation.typeName.name = newName;
+            }
+        });
+        rootSource.find(j.VariableDeclarator).forEach((path) => {
+            if (path.node.id.type === 'Identifier' &&
+                path.node.id.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name === interfaceName) {
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name = newName;
+            }
+        });
+        rootSource.find(j.FunctionDeclaration).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === interfaceName) {
+                        param.typeAnnotation.typeAnnotation.typeName.name = newName;
+                    }
+                });
+            }
+        });
+        rootSource.find(j.ArrowFunctionExpression).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === interfaceName) {
+                        param.typeAnnotation.typeAnnotation.typeName.name = newName;
+                    }
+                });
+            }
+        });
+        rootSource.find(j.ClassMethod).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === interfaceName) {
+                        param.typeAnnotation.typeAnnotation.typeName.name = newName;
+                    }
+                });
+            }
+        });
+        rootSource.find(j.Function).forEach((path) => {
+            if (path.node.returnType &&
+                path.node.returnType.typeAnnotation &&
+                path.node.returnType.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.returnType.typeAnnotation.typeName &&
+                path.node.returnType.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.returnType.typeAnnotation.typeName.name === interfaceName) {
+                path.node.returnType.typeAnnotation.typeName.name = newName;
+            }
+        });
+        rootSource.find(j.TSAsExpression).forEach((path) => {
+            if (path.node.typeAnnotation &&
+                path.node.typeAnnotation.type === 'TSTypeReference' &&
+                path.node.typeAnnotation.typeName &&
+                path.node.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.typeAnnotation.typeName.name === interfaceName) {
+                path.node.typeAnnotation.typeName.name = newName;
+            }
+        });
+    }
+};
+exports.tsInterfaceTransformer = tsInterfaceTransformer;

package/codemods/v21/listbox-actionclick.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const utils_1 = require("../utils");
+const fs = __importStar(require("fs"));
+const index_1 = require("../template-transformer/index");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlEventTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-listbox', 'actionClick', 'action');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, index_1.templateTransformer)(rootSource, j, (root) => {
+        (0, utils_1.templateEventTransformer)(root, 'kendo-listbox', 'actionClick', 'action');
+    });
+    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, 'ListBoxComponent', 'actionClick', 'action');
+    return rootSource.toSource();
+}

package/codemods/v21/listbox-selectedindex.js

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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.default = default_1;
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        // HTML transformations not needed for this migration
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    tsSelectedIndexTransformer(fileInfo.source, rootSource, j, 'ListBoxComponent');
+    return rootSource.toSource();
+}
+/**
+ * Custom transformer to convert selectedIndex property access to selectedIndices[0]
+ * for ListBoxComponent instances
+ */
+const tsSelectedIndexTransformer = (source, root, j, componentType) => {
+    if (source.includes(componentType)) {
+        // Find all class properties that are of type ListBoxComponent
+        const properties = new Set();
+        // Find properties with type annotations
+        root.find(j.ClassProperty, {
+            typeAnnotation: {
+                typeAnnotation: {
+                    typeName: {
+                        name: componentType,
+                    },
+                },
+            },
+        }).forEach((path) => {
+            if (path.node.key.type === 'Identifier') {
+                properties.add(path.node.key.name);
+            }
+        });
+        // Find function parameters of type componentType
+        const parameters = new Set();
+        root.find(j.FunctionDeclaration).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check method declarations in classes
+        root.find(j.ClassMethod).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Also check arrow functions
+        root.find(j.ArrowFunctionExpression).forEach((path) => {
+            if (path.node.params) {
+                path.node.params.forEach((param) => {
+                    if (param.type === 'Identifier' &&
+                        param.typeAnnotation &&
+                        param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                        param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                        param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                        parameters.add(param.name);
+                    }
+                });
+            }
+        });
+        // Find local variable declarations of type componentType
+        const localVariables = new Set();
+        root.find(j.VariableDeclarator).forEach((path) => {
+            if (path.node.id.type === 'Identifier' &&
+                path.node.id.typeAnnotation &&
+                path.node.id.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                path.node.id.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                localVariables.add(path.node.id.name);
+            }
+        });
+        // Find all member expressions where selectedIndex property is accessed on any ListBoxComponent instance
+        root.find(j.MemberExpression, {
+            property: {
+                type: 'Identifier',
+                name: 'selectedIndex',
+            },
+        })
+            .filter((path) => {
+            // Filter to only include accesses on properties that are ListBoxComponent instances
+            if (path.node.object.type === 'MemberExpression' && path.node.object.property.type === 'Identifier') {
+                // handle properties of this
+                if (path.node.object.object.type === 'ThisExpression' &&
+                    properties.has(path.node.object.property.name)) {
+                    return true;
+                }
+            }
+            // Handle function parameters and local variables
+            if (path.node.object.type === 'Identifier') {
+                return parameters.has(path.node.object.name) || localVariables.has(path.node.object.name);
+            }
+            return false;
+        })
+            .forEach((path) => {
+            // Replace selectedIndex with selectedIndices[0]
+            const memberExpression = j.memberExpression(j.memberExpression(path.node.object, j.identifier('selectedIndices')), j.numericLiteral(0), true // computed property access (uses brackets)
+            );
+            // Replace the entire member expression
+            j(path).replaceWith(memberExpression);
+        });
+    }
+};

package/codemods/v21/listbox-toolbar.js

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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.default = default_1;
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, utils_1.tsInterfaceTransformer)(fileInfo, rootSource, j, '@progress/kendo-angular-listbox', 'Toolbar', 'ListBoxToolbarConfig');
+    return rootSource.toSource();
+}

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762162659,
-    version: '21.0.0-develop.16',
+    publishDate: 1762263863,
+    version: '21.0.0-develop.18',
     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/fesm2022/progress-kendo-angular-listbox.mjs

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762162659,
-    version: '21.0.0-develop.16',
+    publishDate: 1762263863,
+    version: '21.0.0-develop.18',
     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-listbox",
-  "version": "21.0.0-develop.16",
+  "version": "21.0.0-develop.18",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -16,10 +16,35 @@
   ],
   "@progress": {
     "friendlyName": "ListBox",
+    "migrations": {
+      "options": {
+        "parser": "tsx",
+        "pattern": "*.{ts,html}"
+      },
+      "codemods": {
+        "19": [
+          {
+            "description": "Migrate selectedIndex to selectedIndices for ListBox component.",
+            "file": "codemods/v21/listbox-selectedindex.js",
+            "prompt": "true"
+          },
+          {
+            "description": "Migrate actionClick to action for ListBox component.",
+            "file": "codemods/v21/listbox-actionclick.js",
+            "prompt": "true"
+          },
+          {
+            "description": "Migrate Toolbar interface name to ListBoxToolbarConfig.",
+            "file": "codemods/v21/listbox-toolbar.js",
+            "prompt": "true"
+          }
+        ]
+      }
+    },
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1762162659,
+      "publishDate": 1762263863,
       "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"
     }
   },
@@ -29,15 +54,16 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.16",
-    "@progress/kendo-angular-common": "21.0.0-develop.16",
-    "@progress/kendo-angular-popup": "21.0.0-develop.16",
+    "@progress/kendo-angular-buttons": "21.0.0-develop.18",
+    "@progress/kendo-angular-common": "21.0.0-develop.18",
+    "@progress/kendo-angular-popup": "21.0.0-develop.18",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.16",
-    "@progress/kendo-common": "^1.0.1"
+    "@progress/kendo-angular-schematics": "21.0.0-develop.18",
+    "@progress/kendo-common": "^1.0.1",
+    "node-html-parser": "^7.0.1"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-listbox.mjs",

package/schematics/ngAdd/index.js

@@ -7,11 +7,11 @@ function default_1(options) {
         // Additional dependencies to install.
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
-            '@progress/kendo-angular-buttons': '21.0.0-develop.16',
-            '@progress/kendo-angular-common': '21.0.0-develop.16',
-            '@progress/kendo-angular-l10n': '21.0.0-develop.16',
+            '@progress/kendo-angular-buttons': '21.0.0-develop.18',
+            '@progress/kendo-angular-common': '21.0.0-develop.18',
+            '@progress/kendo-angular-l10n': '21.0.0-develop.18',
             // Peer of kendo-angular-buttons
-            '@progress/kendo-angular-popup': '21.0.0-develop.16'
+            '@progress/kendo-angular-popup': '21.0.0-develop.18'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }