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

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

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

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

@@ -8,12 +8,12 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, tap, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import * as i8 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, guid, anyChanged, normalizeKeys, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, KendoInput, hasFocusableParent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, processCssValue, replaceMessagePlaceholder, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, guid, anyChanged, normalizeKeys, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, KendoInput, KENDO_WEBMCP_HOST, hasFocusableParent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, processCssValue, replaceMessagePlaceholder, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@progress/kendo-angular-intl';
@@ -583,8 +583,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1777363110,
-    version: '24.0.0-develop.8',
+    publishDate: 1779273406,
+    version: '24.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1179,19 +1179,19 @@ class SliderComponent extends SliderBase {
     /**
      * @hidden
      */
-    arrowUpIcon = caretAltUpIcon;
+    arrowUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     /**
      * @hidden
      */
-    arrowLeftIcon = caretAltLeftIcon;
+    arrowLeftIcon = chevronLeftIcon;
     /**
      * @hidden
      */
-    arrowRightIcon = caretAltRightIcon;
+    arrowRightIcon = chevronRightIcon;
     draghandle;
     decreaseButton;
     increaseButton;
@@ -1514,43 +1514,36 @@ class SliderComponent extends SliderBase {
         }
     };
     get decreaseButtonArrowIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                'caret-alt-left' :
-                'caret-alt-right' :
-            'caret-alt-down';
-        return icon;
+        if (this.vertical) {
+            return 'chevron-down';
+        }
+        return this.direction === 'ltr' ? 'chevron-left' : 'chevron-right';
     }
     get increaseButtonArrowIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                'caret-alt-right' :
-                'caret-alt-left' :
-            'caret-alt-up';
-        return icon;
+        if (this.vertical) {
+            return 'chevron-up';
+        }
+        return this.direction === 'ltr' ? 'chevron-right' : 'chevron-left';
     }
     get decreaseButtonArrowSVGIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                this.arrowLeftIcon :
-                this.arrowRightIcon :
-            this.arrowDownIcon;
-        return icon;
+        if (this.vertical) {
+            return this.arrowDownIcon;
+        }
+        return this.direction === 'ltr' ? this.arrowLeftIcon : this.arrowRightIcon;
     }
     get increaseButtonArrowSVGIcon() {
-        const icon = !this.vertical ?
-            this.direction === 'ltr' ?
-                this.arrowRightIcon :
-                this.arrowLeftIcon :
-            this.arrowUpIcon;
-        return icon;
+        if (this.vertical) {
+            return this.arrowUpIcon;
+        }
+        return this.direction === 'ltr' ? this.arrowRightIcon : this.arrowLeftIcon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.slider' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
-            { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) }
         ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true, read: ElementRef }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true, read: ElementRef }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
           i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
@@ -1632,7 +1625,7 @@ class SliderComponent extends SliderBase {
             ></button>
           }
           <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -1642,7 +1635,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         LocalizationService,
                         { provide: L10N_PREFIX, useValue: 'kendo.slider' },
                         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
-                        { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) }
                     ],
                     selector: 'kendo-slider',
                     template: `
@@ -2289,7 +2283,8 @@ class RangeSliderComponent extends SliderBase {
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
-            { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => RangeSliderComponent) }
         ], viewQueries: [{ propertyName: "draghandleStart", first: true, predicate: ["draghandleStart"], descendants: true, static: true }, { propertyName: "draghandleEnd", first: true, predicate: ["draghandleEnd"], descendants: true, static: true }], exportAs: ["kendoRangeSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
           i18n-dragHandleStart="kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider."
@@ -2373,7 +2368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         LocalizationService,
                         { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
                         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
-                        { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => RangeSliderComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => RangeSliderComponent) }
                     ],
                     selector: 'kendo-rangeslider',
                     template: `
@@ -2542,11 +2538,19 @@ class SwitchComponent {
     /**
      * @hidden
      */
+    set focusableId(value) {
+        this._focusableId = value;
+    }
     get focusableId() {
-        if (this.hostElement.nativeElement.hasAttribute('id')) {
-            return this.hostElement.nativeElement.getAttribute('id');
+        if (!this._focusableId) {
+            if (this.hostElement.nativeElement.hasAttribute('id')) {
+                this._focusableId = this.hostElement.nativeElement.getAttribute('id');
+            }
+            else {
+                this._focusableId = `k-${guid()}`;
+            }
         }
-        return `k-${guid()}`;
+        return this._focusableId;
     }
     /**
      * Set the **On** label.
@@ -2674,6 +2678,7 @@ class SwitchComponent {
     control;
     domSubscriptions = [];
     _checked = false;
+    _focusableId;
     _size;
     _trackRounded;
     _thumbRounded;
@@ -2941,6 +2946,10 @@ class SwitchComponent {
             {
                 provide: KendoInput,
                 useExisting: forwardRef(() => SwitchComponent)
+            },
+            {
+                provide: KENDO_WEBMCP_HOST,
+                useExisting: forwardRef(() => SwitchComponent)
             }
         ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], exportAs: ["kendoSwitch"], ngImport: i0, template: `
         <ng-container kendoSwitchLocalizedMessages
@@ -2980,6 +2989,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: KendoInput,
                             useExisting: forwardRef(() => SwitchComponent)
+                        },
+                        {
+                            provide: KENDO_WEBMCP_HOST,
+                            useExisting: forwardRef(() => SwitchComponent)
                         }
                     ],
                     selector: 'kendo-switch',
@@ -4069,11 +4082,11 @@ class NumericTextBoxComponent {
     /**
      * @hidden
      */
-    arrowUpIcon = caretAltUpIcon;
+    arrowUpIcon = chevronUpIcon;
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     subscriptions;
     inputValue = '';
     spinTimeout;
@@ -4826,7 +4839,8 @@ class NumericTextBoxComponent {
             { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
-            { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) }
         ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoNumericTextBoxLocalizedMessages
           i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
@@ -4902,7 +4916,7 @@ class NumericTextBoxComponent {
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-up"
+                  name="chevron-up"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowUpIcon"
                   >
@@ -4919,7 +4933,7 @@ class NumericTextBoxComponent {
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-down"
+                  name="chevron-down"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowDownIcon"
                   >
@@ -4939,7 +4953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
-                        { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) }
                     ],
                     selector: 'kendo-numerictextbox',
                     template: `
@@ -5017,7 +5032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-up"
+                  name="chevron-up"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowUpIcon"
                   >
@@ -5034,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
-                  name="caret-alt-down"
+                  name="chevron-down"
                   innerCssClass="k-button-icon"
                   [svgIcon]="arrowDownIcon"
                   >
@@ -6249,6 +6264,10 @@ class MaskedTextBoxComponent {
             {
                 provide: KendoInput,
                 useExisting: forwardRef(() => MaskedTextBoxComponent)
+            },
+            {
+                provide: KENDO_WEBMCP_HOST,
+                useExisting: forwardRef(() => MaskedTextBoxComponent)
             }
         ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
@@ -6320,6 +6339,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: KendoInput,
                             useExisting: forwardRef(() => MaskedTextBoxComponent)
+                        },
+                        {
+                            provide: KENDO_WEBMCP_HOST,
+                            useExisting: forwardRef(() => MaskedTextBoxComponent)
                         }
                     ],
                     selector: 'kendo-maskedtextbox',
@@ -7773,7 +7796,6 @@ class TextBoxComponent {
     get disabledClass() {
         return this.disabled;
     }
-    hostClasses = true;
     direction;
     /**
      * @hidden
@@ -7825,6 +7847,8 @@ class TextBoxComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     ngOnInit() {
+        this.renderer.addClass(this.hostElement.nativeElement, 'k-textbox');
+        this.renderer.addClass(this.hostElement.nativeElement, 'k-input');
         this.control = this.injector.get(NgControl, null);
         this.checkClearButton();
         this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
@@ -8170,7 +8194,7 @@ class TextBoxComponent {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TextBoxComponent, isStandalone: true, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TextBoxComponent, isStandalone: true, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
             {
@@ -8178,7 +8202,8 @@ class TextBoxComponent {
                 useExisting: forwardRef(() => TextBoxComponent),
                 multi: true
             },
-            { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) }
         ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }, { propertyName: "textBoxSuffixTemplate", predicate: TextBoxSuffixTemplateDirective }, { propertyName: "textBoxPrefixTemplate", predicate: TextBoxPrefixTemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTextBoxLocalizedMessages
           i18n-clear="kendo.textbox.clear|The title for the **Clear** button in the TextBox."
@@ -8280,7 +8305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => TextBoxComponent),
                             multi: true
                         },
-                        { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) }
                     ],
                     selector: 'kendo-textbox',
                     template: `
@@ -8455,12 +8481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-textbox']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input']
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -8792,7 +8812,7 @@ class ColorInputComponent {
             </div>
           }
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -10300,7 +10320,7 @@ class ColorGradientComponent {
             [ratio]="contrastTool">
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
@@ -11575,7 +11595,7 @@ class FlatColorPickerHeaderComponent {
             </div>
           }
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
@@ -11731,7 +11751,7 @@ class FlatColorPickerActionButtonsComponent {
             [tabindex]="innerTabIndex.toString()"
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
@@ -12725,7 +12745,7 @@ class AdaptiveCloseButtonComponent {
             [tabIndex]="-1"
             (click)="close.emit($event)"
         ></button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
             type: Component,
@@ -12855,7 +12875,7 @@ class AdaptiveRendererComponent {
             }
           </ng-template>
         </kendo-actionsheet>
-        `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -13320,7 +13340,7 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    arrowDownIcon = caretAltDownIcon;
+    arrowDownIcon = chevronDownIcon;
     popupRef;
     _svgIcon;
     _value;
@@ -13827,6 +13847,10 @@ class ColorPickerComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.colorpicker'
+            },
+            {
+                provide: KENDO_WEBMCP_HOST,
+                useExisting: forwardRef(() => ColorPickerComponent)
             }
         ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorPickerLocalizedMessages
@@ -13906,7 +13930,7 @@ class ColorPickerComponent {
           kendoButton
           tabindex="-1"
           type="button"
-          icon="caret-alt-down"
+          icon="chevron-down"
           [size]="size"
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
@@ -13953,7 +13977,7 @@ class ColorPickerComponent {
         @if (isOpen || isAdaptiveModeEnabled) {
           <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -13976,7 +14000,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.colorpicker'
-                        }],
+                        },
+                        {
+                            provide: KENDO_WEBMCP_HOST,
+                            useExisting: forwardRef(() => ColorPickerComponent)
+                        }
+                    ],
                     template: `
         <ng-container kendoColorPickerLocalizedMessages
           i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
@@ -14055,7 +14084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           kendoButton
           tabindex="-1"
           type="button"
-          icon="caret-alt-down"
+          icon="chevron-down"
           [size]="size"
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
@@ -15294,6 +15323,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+const ratingStarIcon = {
+    name: 'star',
+    content: '<path d="m22.762 10.668-4.557 3.931 1.389 5.88a1.661 1.661 0 0 1-2.481 1.805L12 19.138l-5.116 3.146a1.661 1.661 0 0 1-2.478-1.805l1.394-5.88-4.557-3.931a1.667 1.667 0 0 1 .943-2.921l5.974-.482 2.304-5.577a1.656 1.656 0 0 1 3.065 0l2.304 5.577 5.973.482a1.667 1.667 0 0 1 .95 2.922z"/>',
+    viewBox: '0 0 24 24'
+};
+const ratingStarOutlineIcon = {
+    name: 'star-outline',
+    content: '<path d="M23.065 8.95a1.44 1.44 0 0 0-1.267-1l-6.101-.493-2.351-5.691a1.454 1.454 0 0 0-2.691 0L8.304 7.454l-6.101.496A1.44 1.44 0 0 0 .936 8.951a1.46 1.46 0 0 0 .433 1.562l4.657 4.011-1.417 5.998a1.46 1.46 0 0 0 .567 1.52 1.43 1.43 0 0 0 1.61.061L12 18.898l5.222 3.211a1.43 1.43 0 0 0 1.611-.061 1.46 1.46 0 0 0 .566-1.52l-1.417-5.998 4.65-4.016a1.46 1.46 0 0 0 .433-1.564m-1.229.644-4.929 4.253a.61.61 0 0 0-.195.599l1.506 6.357a.24.24 0 0 1-.096.261.23.23 0 0 1-.262.009l-5.541-3.404a.61.61 0 0 0-.636 0l-5.54 3.403a.23.23 0 0 1-.263-.01.24.24 0 0 1-.101-.26l1.506-6.358a.61.61 0 0 0-.194-.598l-4.93-4.253a.24.24 0 0 1-.074-.269.23.23 0 0 1 .21-.167l6.471-.522a.61.61 0 0 0 .513-.373l2.493-6.035a.238.238 0 0 1 .444 0l2.494 6.035a.61.61 0 0 0 .512.373l6.472.522a.23.23 0 0 1 .21.167.24.24 0 0 1-.068.269z"/>',
+    viewBox: '0 0 24 24'
+};
 /**
  * Represents the Kendo UI Rating component for Angular.
  * Use this component to let users select a rating value.
@@ -15385,11 +15424,11 @@ class RatingComponent {
     /**
      * Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
-    svgIcon = starIcon;
+    svgIcon = ratingStarIcon;
     /**
      * Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
-    svgIconOutline = starOutlineIcon;
+    svgIconOutline = ratingStarOutlineIcon;
     /**
      * Fires when the user selects a new value.
      */
@@ -15656,6 +15695,10 @@ class RatingComponent {
             {
                 provide: KendoInput,
                 useExisting: forwardRef(() => RatingComponent)
+            },
+            {
+                provide: KENDO_WEBMCP_HOST,
+                useExisting: forwardRef(() => RatingComponent)
             }
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true }, { propertyName: "hoveredItemTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true }], exportAs: ["kendoRating"], ngImport: i0, template: `
         <span class="k-rating-container">
@@ -15676,7 +15719,7 @@ class RatingComponent {
                   @if (!icon) {
                     <kendo-icon-wrapper
                       size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [name]="item.selected || item.hovered ? 'star' : 'star'"
                       [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
                       >
                     </kendo-icon-wrapper>
@@ -15717,7 +15760,7 @@ class RatingComponent {
                     @if (!icon) {
                       <kendo-icon-wrapper
                         size="xlarge"
-                        [name]="'star-outline'"
+                        [name]="'star'"
                         [svgIcon]="svgIconOutline"
                         >
                       </kendo-icon-wrapper>
@@ -15812,6 +15855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         {
                             provide: KendoInput,
                             useExisting: forwardRef(() => RatingComponent)
+                        },
+                        {
+                            provide: KENDO_WEBMCP_HOST,
+                            useExisting: forwardRef(() => RatingComponent)
                         }
                     ],
                     selector: 'kendo-rating',
@@ -15834,7 +15881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   @if (!icon) {
                     <kendo-icon-wrapper
                       size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [name]="item.selected || item.hovered ? 'star' : 'star'"
                       [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
                       >
                     </kendo-icon-wrapper>
@@ -15875,7 +15922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     @if (!icon) {
                       <kendo-icon-wrapper
                         size="xlarge"
-                        [name]="'star-outline'"
+                        [name]="'star'"
                         [svgIcon]="svgIconOutline"
                         >
                       </kendo-icon-wrapper>
@@ -16834,7 +16881,8 @@ class SignatureComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SignatureComponent, isStandalone: true, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.signature' },
-            { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
+            { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) }
         ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "minimizeButton", first: true, predicate: ["minimize"], descendants: true, read: ElementRef }, { propertyName: "maximizeButton", first: true, predicate: ["maximize"], descendants: true, read: ElementRef }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSignatureLocalizedMessages
           i18n-clear="kendo.signature.clear|The message for the Clear button."
@@ -16939,7 +16987,7 @@ class SignatureComponent {
             </kendo-signature>
           </kendo-dialog>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "component", type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }, { kind: "directive", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
@@ -16950,7 +16998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     providers: [
                         LocalizationService,
                         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
-                        { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
+                        { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) }
                     ],
                     template: `
         <ng-container kendoSignatureLocalizedMessages
@@ -17225,7 +17274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-prefix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-prefix>
  * </kendo-textarea>
  * ```
@@ -17287,7 +17336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-suffix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-suffix>
  * </kendo-textarea>
  * ```
@@ -18023,7 +18072,8 @@ class TextAreaComponent extends TextFieldsBase {
                 useExisting: forwardRef(() => TextAreaComponent),
                 multi: true
             },
-            { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) },
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextAreaComponent) }
         ], queries: [{ propertyName: "prefix", first: true, predicate: TextAreaPrefixComponent, descendants: true }, { propertyName: "suffix", first: true, predicate: TextAreaSuffixComponent, descendants: true }], exportAs: ["kendoTextArea"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
           kendoInputSharedEvents
@@ -18083,7 +18133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => TextAreaComponent),
                             multi: true
                         },
-                        { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextAreaComponent) }
                     ],
                     selector: 'kendo-textarea',
                     template: `

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1777363110,
-  "version": "24.0.0-develop.8",
+  "publishDate": 1779273406,
+  "version": "24.0.0",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "24.0.0-develop.8",
+  "version": "24.0.0",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -55,7 +55,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1777363110,
+      "publishDate": 1779273406,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -65,22 +65,22 @@
     "@angular/core": "19 - 21",
     "@angular/forms": "19 - 21",
     "@angular/platform-browser": "19 - 21",
-    "@progress/kendo-drawing": "^1.24.1",
+    "@progress/kendo-drawing": "^1.25.0",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.8",
-    "@progress/kendo-angular-common": "24.0.0-develop.8",
-    "@progress/kendo-angular-utils": "24.0.0-develop.8",
-    "@progress/kendo-angular-navigation": "24.0.0-develop.8",
-    "@progress/kendo-angular-dialog": "24.0.0-develop.8",
-    "@progress/kendo-angular-intl": "24.0.0-develop.8",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.8",
-    "@progress/kendo-angular-popup": "24.0.0-develop.8",
-    "@progress/kendo-angular-icons": "24.0.0-develop.8",
+    "@progress/kendo-angular-buttons": "24.0.0",
+    "@progress/kendo-angular-common": "24.0.0",
+    "@progress/kendo-angular-utils": "24.0.0",
+    "@progress/kendo-angular-navigation": "24.0.0",
+    "@progress/kendo-angular-dialog": "24.0.0",
+    "@progress/kendo-angular-intl": "24.0.0",
+    "@progress/kendo-angular-l10n": "24.0.0",
+    "@progress/kendo-angular-popup": "24.0.0",
+    "@progress/kendo-angular-icons": "24.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.8",
+    "@progress/kendo-angular-schematics": "24.0.0",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/switch/switch.component.d.ts

@@ -31,6 +31,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     /**
      * @hidden
      */
+    set focusableId(value: string);
     get focusableId(): string;
     /**
      * Set the **On** label.
@@ -120,6 +121,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
     protected control: NgControl;
     private domSubscriptions;
     private _checked;
+    private _focusableId;
     private _size;
     private _trackRounded;
     private _thumbRounded;

package/textarea/textarea-prefix.component.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-prefix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-prefix>
  * </kendo-textarea>
  * ```

package/textarea/textarea-suffix.component.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * ```html
  * <kendo-textarea>
  *   <kendo-textarea-suffix>
- *     <button kendoButton look="clear" icon="image"></button>
+ *     <button kendoButton fillMode="clear" [svgIcon]="imageIcon"></button>
  *   </kendo-textarea-suffix>
  * </kendo-textarea>
  * ```

package/textbox/textbox.component.d.ts

@@ -194,7 +194,6 @@ export declare class TextBoxComponent implements ControlValueAccessor {
      */
     prefixTemplate: PrefixTemplateDirective;
     get disabledClass(): boolean;
-    hostClasses: boolean;
     direction: string;
     /**
      * @hidden