@progress/kendo-angular-common 24.0.0-develop.4 → 24.0.0-develop.40

package/adornments/prefix.directive.d.ts

@@ -9,13 +9,13 @@ import * as i0 from "@angular/core";
  * ```html
  *  <kendo-textbox>
  *      <ng-template kendoPrefixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-textbox>
  *
  *  <kendo-multiselect [data]="data" [(ngModel)]="value">
  *      <ng-template kendoPrefixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-multiselect>
  * ```

package/adornments/separator.component.d.ts

@@ -7,15 +7,15 @@ import * as i0 from "@angular/core";
 /**
  * Specifies a separator in the content of the [Inputs](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments#separator) and [DropDowns](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/adornments#separator).
  * @example
- * ```ts-no-run
- * _@Component({
+ * ```ts
+ * @Component({
  * selector: 'my-app',
  * template: `
  *  <kendo-textbox>
  *      <ng-template kendoSuffixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *          <kendo-separator></kendo-separator>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-textbox>
  * `

package/adornments/suffix.directive.d.ts

@@ -16,12 +16,12 @@ import * as i0 from "@angular/core";
  * ```html
  * <kendo-textbox>
  *   <ng-template kendoSuffixTemplate>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </ng-template>
  * </kendo-textbox>
  * <kendo-multiselect [data]="data" [(ngModel)]="value">
  *   <ng-template kendoSuffixTemplate>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </ng-template>
  * </kendo-multiselect>
  * ```

package/codemods/utils.js

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

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Directive, Injectable, Component, HostBinding, ViewChild, Optional, isDevMode } from '@angular/core';
+import { EventEmitter, Output, Input, Directive, Injectable, Component, InjectionToken, HostBinding, ViewChild, Optional, isDevMode } from '@angular/core';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { take, auditTime } from 'rxjs/operators';
 import { Draggable } from '@progress/kendo-draggable';
@@ -840,6 +840,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
 class KendoInput {
 }
+/**
+ * @hidden
+ *
+ * Token used by the kendoWebMcp directive to resolve the host component instance.
+ * Each supported Kendo component provides itself under this token.
+ */
+const KENDO_WEBMCP_HOST = new InjectionToken('KendoWebMcpHost');
 
 /**
  * Enum with key codes.
@@ -1532,13 +1539,13 @@ function getLicenseMessage(meta) {
  * ```html
  *  <kendo-textbox>
  *      <ng-template kendoPrefixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-textbox>
  *
  *  <kendo-multiselect [data]="data" [(ngModel)]="value">
  *      <ng-template kendoPrefixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-multiselect>
  * ```
@@ -1587,12 +1594,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-textbox>
  *   <ng-template kendoSuffixTemplate>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </ng-template>
  * </kendo-textbox>
  * <kendo-multiselect [data]="data" [(ngModel)]="value">
  *   <ng-template kendoSuffixTemplate>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </ng-template>
  * </kendo-multiselect>
  * ```
@@ -1632,15 +1639,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 /**
  * Specifies a separator in the content of the [Inputs](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments#separator) and [DropDowns](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/adornments#separator).
  * @example
- * ```ts-no-run
- * _@Component({
+ * ```ts
+ * @Component({
  * selector: 'my-app',
  * template: `
  *  <kendo-textbox>
  *      <ng-template kendoSuffixTemplate>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *          <kendo-separator></kendo-separator>
- *          <button kendoButton look="clear" icon="image"></button>
+ *          <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *      </ng-template>
  *  </kendo-textbox>
  * `
@@ -2162,5 +2169,5 @@ const replaceMessagePlaceholder = (message, name, value) => (message ?? '').repl
  * Generated bundle index. Do not edit.
  */
 
-export { ScrollbarService as BrowserSupportService, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
+export { ScrollbarService as BrowserSupportService, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KENDO_WEBMCP_HOST, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "24.0.0-develop.4",
+  "version": "24.0.0-develop.40",
   "description": "Kendo UI for Angular - Utility Package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.4"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.40"
   },
   "publishConfig": {
     "access": "public"

package/tokens.d.ts

@@ -2,5 +2,13 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
 export declare class KendoInput {
 }
+/**
+ * @hidden
+ *
+ * Token used by the kendoWebMcp directive to resolve the host component instance.
+ * Each supported Kendo component provides itself under this token.
+ */
+export declare const KENDO_WEBMCP_HOST: InjectionToken<any>;