@progress/kendo-angular-toolbar 21.0.0-develop.8 → 21.0.0

package/codemods/utils.js

@@ -7,9 +7,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tsComponentPropertyRemoval = exports.templateAttributeRemoval = exports.htmlAttributeRemoval = exports.htmlAttributeValueTransformer = exports.tsPropertyValueTransformer = exports.templateAttributeValueTransformer = exports.htmlAttributeTransformer = exports.htmlBoundAttributeTransformer = exports.htmlStaticAttributeTransformer = exports.tsPropertyTransformer = exports.templateAttributeTransformer = exports.templateBoundAttributeTransformer = exports.templateStaticAttributeTransformer = void 0;
+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) {
@@ -22,13 +45,14 @@ const templateStaticAttributeTransformer = (root, tagName, attributeName, newAtt
     }
 };
 exports.templateStaticAttributeTransformer = templateStaticAttributeTransformer;
-const templateBoundAttributeTransformer = (root, tagName, attributeName, newAttributeName) => {
+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) {
-            element.setAttribute(`[${newAttributeName}]`, boundAttr);
+            const newValue = valueProperty ? `${boundAttr}.${valueProperty}` : boundAttr;
+            element.setAttribute(`[${newAttributeName}]`, newValue);
             element.removeAttribute(`[${attributeName}]`);
         }
     }
@@ -39,94 +63,141 @@ const templateAttributeTransformer = (root, tagName, attributeName, newAttribute
     (0, exports.templateStaticAttributeTransformer)(root, tagName, attributeName, newAttributeName);
 };
 exports.templateAttributeTransformer = templateAttributeTransformer;
-const tsPropertyTransformer = (root, j, componentType, propertyName, newPropertyName) => {
-    // Find all class properties that are of type DropDownListComponent
-    const properties = new Set();
-    // Find properties with type annotations
-    root
-        .find(j.ClassProperty, {
-        typeAnnotation: {
+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: {
-                typeName: {
-                    name: componentType
-                }
+                typeAnnotation: {
+                    typeName: {
+                        name: componentType,
+                    },
+                },
+            },
+        }).forEach((path) => {
+            if (path.node.key.type === 'Identifier') {
+                properties.add(path.node.key.name);
             }
-        }
-    })
-        .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);
+        });
+        // 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;
                 }
-            });
-        }
-    });
-    // 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);
+            }
+            // 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;
+                        }
+                    }
                 }
-            });
-        }
-    });
-    // 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
-        if (path.node.object.type === 'Identifier' &&
-            parameters.has(path.node.object.name)) {
-            return true;
-        }
-        return false;
-    })
-        .forEach(path => {
-        // Replace old property name with new property name
-        if (path.node.property.type === 'Identifier') {
-            path.node.property.name = newPropertyName;
-        }
-    });
+        });
+    }
 };
 exports.tsPropertyTransformer = tsPropertyTransformer;
 const htmlStaticAttributeTransformer = (fileInfo, tagName, oldName, newName) => {
     const fileContent = fileInfo.source;
-    const root = (0, node_html_parser_1.default)(fileContent);
+    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) {
@@ -143,16 +214,18 @@ const htmlStaticAttributeTransformer = (fileInfo, tagName, oldName, newName) =>
     return fileContent;
 };
 exports.htmlStaticAttributeTransformer = htmlStaticAttributeTransformer;
-const htmlBoundAttributeTransformer = (fileInfo, tagName, oldName, newName) => {
+const htmlBoundAttributeTransformer = (fileInfo, tagName, oldName, newName, valueProperty) => {
     const fileContent = fileInfo.source;
-    const root = (0, node_html_parser_1.default)(fileContent);
+    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}]`);
-            element.setAttribute(`[${newName}]`, boundAttr);
+            // If valueProperty is provided, append it to the bound value
+            const newValue = valueProperty ? `${boundAttr}.${valueProperty}` : boundAttr;
+            element.setAttribute(`[${newName}]`, newValue);
             modified = true;
         }
     }
@@ -168,6 +241,26 @@ const htmlAttributeTransformer = (fileInfo, 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) {
@@ -185,88 +278,67 @@ const templateAttributeValueTransformer = (root, tagName, attributeName, oldAttr
     }
 };
 exports.templateAttributeValueTransformer = templateAttributeValueTransformer;
-const tsPropertyValueTransformer = (root, j, typeName, oldValue, newValue) => {
-    // 1. Find all class properties with the specified type
-    root
-        .find(j.ClassProperty)
-        .filter(path => {
-        // Check if the property has a type annotation matching the specified type
-        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 => {
-        // Update the value if it matches the old value
-        if (path.node.value &&
-            path.node.value.type === 'StringLiteral' &&
-            path.node.value.value === oldValue) {
-            path.node.value.value = newValue;
-        }
-    });
-    // First, collect all variables with the specified type
-    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') {
-            // Also update the initial value if it matches
-            if (path.node.init &&
-                path.node.init.type === 'StringLiteral' &&
-                path.node.init.value === oldValue) {
-                path.node.init.value = newValue;
+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;
             }
-        }
-    });
-    // 3. Update literals in assignment expressions
-    root
-        .find(j.AssignmentExpression)
-        .filter(path => {
-        // Only process string literals with the old value
-        return path.node.right.type === 'StringLiteral' &&
-            path.node.right.value === oldValue;
-    })
-        .forEach(path => {
-        // Update the value
-        path.node.right.value = newValue;
-    });
-    // 4. Also look for string literals in attributes within JSX elements
-    root
-        .find(j.JSXAttribute, {
-        value: {
-            type: 'StringLiteral',
-            value: oldValue
-        }
-    })
-        .forEach(path => {
-        if (path.node.value?.type === 'StringLiteral') {
-            path.node.value.value = newValue;
-        }
-    });
+            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) => {
-    // Read file content from fileInfo
     const fileContent = fileInfo.source;
-    // Parse the HTML content
-    const root = (0, node_html_parser_1.default)(fileContent);
-    // Find all elements matching the tagName
+    const root = (0, node_html_parser_1.default)(fileContent, { comment: true, blockTextElements: exports.blockTextElements });
     const elements = root.querySelectorAll(tagName);
     let modified = false;
-    // Process each element
     for (const element of elements) {
         // Handle static attributes (e.g., showText="overflow")
         const staticAttr = element.getAttribute(attributeName);
@@ -287,37 +359,35 @@ const htmlAttributeValueTransformer = (fileInfo, tagName, attributeName, oldValu
             }
         }
     }
-    // Return modified content if changes were made
     if (modified) {
         const updatedContent = root.toString();
         return updatedContent;
     }
-    // Return original content if no changes were made or if there was an error
     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);
+    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) {
-            // Check if it's an object literal
             if (boundAttr.trim().startsWith('{') && boundAttr.trim().endsWith('}')) {
-                // Process object literal like {mouseScrollSpeed: 10000}
                 const objectLiteral = boundAttr.trim();
-                // Build a regex that matches the property and its value
-                // This handles various formats like {prop: value}, { prop: value }, etc.
                 const propRegex = new RegExp(`\\s*${propertyToRemove}\\s*:\\s*[^,}]+\\s*(,\\s*)?`, 'g');
-                // Remove the property and any trailing comma
                 let newObjectLiteral = objectLiteral.replace(propRegex, '');
-                // Fix syntax if we removed the last property with trailing comma
                 newObjectLiteral = newObjectLiteral.replace(/,\s*}$/, '}');
-                // If the object is now empty, remove the attribute completely
                 if (newObjectLiteral === '{}') {
                     element.removeAttribute(`[${attributeName}]`);
                 }
@@ -325,44 +395,29 @@ const htmlAttributeRemoval = (fileInfo, tagName, attributeName, propertyToRemove
                     element.setAttribute(`[${attributeName}]`, newObjectLiteral);
                 }
             }
-            // Check if it's a variable reference to an object
             else {
-                // For variable references, we can't modify them in the template
-                // We should warn the user or handle this case specially
                 console.warn(`Cannot remove property from variable reference: ${boundAttr} in file ${filePath}`);
             }
         }
     }
-    // Return the modified HTML content
     return root.toString();
 };
 exports.htmlAttributeRemoval = htmlAttributeRemoval;
-/**
- * Removes a specified property from an object binding in HTML templates
- *
- * @param root - The HTML root element
- * @param tagName - The tag to search for (e.g., 'kendo-tabstrip')
- * @param attributeName - The attribute containing the object binding (e.g., 'scrollable')
- * @param propertyToRemove - The property to remove from the object (e.g., 'mouseScrollSpeed')
- */
 const templateAttributeRemoval = (root, tagName, attributeName, propertyToRemove) => {
     const elements = root.querySelectorAll(tagName);
     for (const element of elements) {
-        // Look for bound attribute (e.g., [scrollable]="...")
+        if (!propertyToRemove) {
+            element.removeAttribute(`[${attributeName}]`);
+            element.removeAttribute(attributeName);
+            continue;
+        }
         const boundAttr = element.getAttribute(`[${attributeName}]`);
         if (boundAttr) {
-            // Check if it's an object literal
             if (boundAttr.trim().startsWith('{') && boundAttr.trim().endsWith('}')) {
-                // Process object literal like {mouseScrollSpeed: 10000}
                 const objectLiteral = boundAttr.trim();
-                // Build a regex that matches the property and its value
-                // This handles various formats like {prop: value}, { prop: value }, etc.
                 const propRegex = new RegExp(`\\s*${propertyToRemove}\\s*:\\s*[^,}]+\\s*(,\\s*)?`, 'g');
-                // Remove the property and any trailing comma
                 let newObjectLiteral = objectLiteral.replace(propRegex, '');
-                // Fix syntax if we removed the last property with trailing comma
                 newObjectLiteral = newObjectLiteral.replace(/,\s*}$/, '}');
-                // If the object is now empty, remove the attribute completely
                 if (newObjectLiteral === '{}') {
                     element.removeAttribute(`[${attributeName}]`);
                 }
@@ -370,181 +425,287 @@ const templateAttributeRemoval = (root, tagName, attributeName, propertyToRemove
                     element.setAttribute(`[${attributeName}]`, newObjectLiteral);
                 }
             }
-            // Check if it's a variable reference to an object
             else {
-                // For variable references, we can't modify them in the template
-                // We should warn the user or handle this case specially
                 console.warn(`Cannot remove property from variable reference: ${boundAttr}`);
             }
         }
     }
 };
 exports.templateAttributeRemoval = templateAttributeRemoval;
-/**
- * Removes a property from object literals of a specified type
- *
- * @param root - The AST root
- * @param j - The JSCodeshift instance
- * @param typeName - The type to target (e.g., 'TabStripScrollableSettings')
- * @param propertyToRemove - The property to remove (e.g., 'mouseScrollSpeed')
- */
-function tsPropertyRemoval(rootSource, j, typeName, propertyName) {
-    // Find class properties that have the specified type
-    rootSource
-        .find(j.ClassProperty, {
-        typeAnnotation: {
+function tsPropertyRemoval(source, rootSource, j, typeName, propertyName) {
+    if (source.includes(typeName)) {
+        rootSource
+            .find(j.ClassProperty, {
             typeAnnotation: {
-                typeName: {
-                    name: typeName
+                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;
         }
-    })
-        .forEach(path => {
-        // Check if there's an object literal initializer
-        if (path.node.value && path.node.value.type === 'ObjectExpression') {
-            const properties = path.node.value.properties;
-            // Find the property we want to remove - safely handle different property types
-            const propIndex = properties.findIndex((p) => p.type === 'ObjectProperty' &&
+        // 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 === propertyName);
+                p.key.name === propertyToRemove);
             if (propIndex !== -1) {
-                // If property exists, remove it
-                // Case 1: If it's the only property, remove the entire class property
+                // Case 2: If it's the only property, remove the entire statement
                 if (properties.length === 1) {
-                    j(path).remove();
+                    j(path).closest(j.ExpressionStatement).remove();
                 }
-                // Case 2: If there are other properties, just remove this one property
+                // Case 3: If there are other properties, just remove this one property
                 else {
                     properties.splice(propIndex, 1);
                 }
             }
-        }
-    });
-    // Also handle property assignments (e.g., in methods like ngOnInit)
-    rootSource
-        .find(j.AssignmentExpression, {
-        left: {
-            type: 'MemberExpression',
-            object: {
-                type: 'MemberExpression'
-            },
-            property: {
-                name: propertyName
-            }
-        }
-    })
-        .forEach(path => {
-        j(path).remove();
-    });
-    return rootSource;
-}
-/**
- * Removes assignments to a specific nested property of a component
- *
- * @param root - The AST root
- * @param j - The JSCodeshift instance
- * @param componentType - The component type to target (e.g., 'TabStripComponent')
- * @param componentProperty - The component property (e.g., 'scrollable')
- * @param propertyToRemove - The nested property to remove assignments to (e.g., 'mouseScrollSpeed')
- */
-const tsComponentPropertyRemoval = (root, j, componentType, componentProperty, propertyToRemove) => {
-    // 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;
+        });
+        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;
-    // Case 1: Direct match for 'this.propertyName'
     if (node.type === 'ThisExpression') {
-        return true; // Assuming 'this' refers to the component class
+        return true;
     }
-    // Case 2: Function parameter
     if (node.type === 'Identifier') {
         const paramName = node.name;
-        // Check function parameters
-        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);
+        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));
         });
     }
-    // Case 3: Member expression (obj.prop)
     if (node.type === 'MemberExpression') {
-        // This would need more complex logic to determine if the object is of the right type
-        // For now, we can check if it's a property that has been declared with the right type
         if (node.object.type === 'ThisExpression' && node.property.type === 'Identifier') {
             const propName = node.property.name;
-            return root
+            return (root
                 .find(j.ClassProperty, {
                 key: { name: propName },
                 typeAnnotation: {
                     typeAnnotation: {
-                        typeName: { name: componentType }
-                    }
-                }
+                        typeName: { name: componentType },
+                    },
+                },
             })
-                .size() > 0;
+                .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/v19/toolbar-button-showicon.js

@@ -34,11 +34,13 @@ const fs = __importStar(require("fs"));
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
     if (filePath.endsWith('.html')) {
-        let updatedContent = fileInfo.source;
-        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
-        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
-        // Only write to file once after all transformations
-        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
+            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
         return;
     }
     const j = api.jscodeshift;
@@ -47,7 +49,7 @@ function default_1(fileInfo, api) {
         (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
         (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
     });
-    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'overflow', 'menu');
-    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'both', 'always');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'both', 'always');
     return rootSource.toSource();
 }

package/codemods/v19/toolbar-button-showtext.js

@@ -34,11 +34,13 @@ const fs = __importStar(require("fs"));
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
     if (filePath.endsWith('.html')) {
-        let updatedContent = fileInfo.source;
-        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
-        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'both', 'always');
-        // Only write to file once after all transformations
-        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
+            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'both', 'always');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
         return;
     }
     const j = api.jscodeshift;
@@ -47,7 +49,7 @@ function default_1(fileInfo, api) {
         (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
         (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'both', 'always');
     });
-    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'overflow', 'menu');
-    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'both', 'always');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'both', 'always');
     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: 1761844378,
-    version: '21.0.0-develop.8',
+    publishDate: 1762934390,
+    version: '21.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/toolbar.component.mjs

@@ -611,6 +611,11 @@ export class ToolBarComponent {
                 this.displayAnchor();
                 const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
                 if (this.popupOpen && !isImmediateResize) {
+                    const eventArgs = new PreventableEvent();
+                    this.close.emit(eventArgs);
+                    if (eventArgs.isDefaultPrevented()) {
+                        return;
+                    }
                     this.toggle();
                 }
             }
@@ -790,6 +795,9 @@ export class ToolBarComponent {
             this.showOverflowSeparator = isVisible;
             this.cdr.detectChanges();
         }
+        if (!isVisible) {
+            this.destroyPopup();
+        }
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
@@ -910,6 +918,7 @@ export class ToolBarComponent {
             this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
+            this._open = false;
         }
     }
     handleClasses(value, input) {
@@ -1194,7 +1203,7 @@ export class ToolBarComponent {
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
+                    <ng-template
                         *ngIf="tool.popupTemplate"
                         kendoToolbarRenderer
                         [tool]="tool"
@@ -1410,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
+                    <ng-template
                         *ngIf="tool.popupTemplate"
                         kendoToolbarRenderer
                         [tool]="tool"

package/esm2022/tools/toolbar-button.component.mjs

@@ -310,7 +310,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-badge-container *ngIf="hasBadgeContainer">
                 <button
@@ -393,6 +393,11 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                         [customFontClass]="overflowOptions.iconClass"
                         [svgIcon]="overflowOptions.svgIcon"
                     ></kendo-icon-wrapper>
+                    @if (overflowOptions.imageUrl) {
+                        <span class="k-icon k-button-icon">
+                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
+                        </span>
+                    }
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -550,6 +555,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         [customFontClass]="overflowOptions.iconClass"
                         [svgIcon]="overflowOptions.svgIcon"
                     ></kendo-icon-wrapper>
+                    @if (overflowOptions.imageUrl) {
+                        <span class="k-icon k-button-icon">
+                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
+                        </span>
+                    }
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>

package/fesm2022/progress-kendo-angular-toolbar.mjs

@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761844378,
-    version: '21.0.0-develop.8',
+    publishDate: 1762934390,
+    version: '21.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1688,6 +1688,11 @@ class ToolBarComponent {
                 this.displayAnchor();
                 const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
                 if (this.popupOpen && !isImmediateResize) {
+                    const eventArgs = new PreventableEvent();
+                    this.close.emit(eventArgs);
+                    if (eventArgs.isDefaultPrevented()) {
+                        return;
+                    }
                     this.toggle();
                 }
             }
@@ -1867,6 +1872,9 @@ class ToolBarComponent {
             this.showOverflowSeparator = isVisible;
             this.cdr.detectChanges();
         }
+        if (!isVisible) {
+            this.destroyPopup();
+        }
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
@@ -1987,6 +1995,7 @@ class ToolBarComponent {
             this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
+            this._open = false;
         }
     }
     handleClasses(value, input) {
@@ -2271,7 +2280,7 @@ class ToolBarComponent {
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
+                    <ng-template
                         *ngIf="tool.popupTemplate"
                         kendoToolbarRenderer
                         [tool]="tool"
@@ -2487,7 +2496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
+                    <ng-template
                         *ngIf="tool.popupTemplate"
                         kendoToolbarRenderer
                         [tool]="tool"
@@ -2911,7 +2920,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-badge-container *ngIf="hasBadgeContainer">
                 <button
@@ -2994,6 +3003,11 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                         [customFontClass]="overflowOptions.iconClass"
                         [svgIcon]="overflowOptions.svgIcon"
                     ></kendo-icon-wrapper>
+                    @if (overflowOptions.imageUrl) {
+                        <span class="k-icon k-button-icon">
+                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
+                        </span>
+                    }
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -3151,6 +3165,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         [customFontClass]="overflowOptions.iconClass"
                         [svgIcon]="overflowOptions.svgIcon"
                     ></kendo-icon-wrapper>
+                    @if (overflowOptions.imageUrl) {
+                        <span class="k-icon k-button-icon">
+                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
+                        </span>
+                    }
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "21.0.0-develop.8",
+  "version": "21.0.0",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1761844378,
+      "publishDate": 1762934390,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -55,17 +55,17 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.8",
-    "@progress/kendo-angular-common": "21.0.0-develop.8",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.8",
-    "@progress/kendo-angular-icons": "21.0.0-develop.8",
-    "@progress/kendo-angular-indicators": "21.0.0-develop.8",
-    "@progress/kendo-angular-popup": "21.0.0-develop.8",
+    "@progress/kendo-angular-buttons": "21.0.0",
+    "@progress/kendo-angular-common": "21.0.0",
+    "@progress/kendo-angular-l10n": "21.0.0",
+    "@progress/kendo-angular-icons": "21.0.0",
+    "@progress/kendo-angular-indicators": "21.0.0",
+    "@progress/kendo-angular-popup": "21.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.8",
+    "@progress/kendo-angular-schematics": "21.0.0",
     "node-html-parser": "^7.0.1"
   },
   "schematics": "./schematics/collection.json",