@progress/kendo-angular-inputs 25.0.0-develop.3 → 25.0.0-develop.30

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, 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';
+import { isDocumentAvailable, Keys, guid, anyChanged, normalizeKeys, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, KendoInput, KENDO_WEBMCP_HOST, provideComponentName, 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 { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, exclamationCircleIcon, checkIcon, caretAltExpandIcon, 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: 1783692480,
-    version: '25.0.0-develop.3',
+    publishDate: 1786449816,
+    version: '25.0.0-develop.30',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -607,10 +607,10 @@ class LabelTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LabelTemplateDirective, isStandalone: true, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LabelTemplateDirective, isStandalone: true, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LabelTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LabelTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSliderLabelTemplate]',
@@ -829,10 +829,10 @@ class SliderBase {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderBase, 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: "14.0.0", version: "20.3.25", type: SliderBase, isStandalone: true, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderBase, 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: "14.0.0", version: "20.3.27", type: SliderBase, isStandalone: true, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-slider-base',
@@ -964,8 +964,8 @@ class SliderTicksComponent {
             'k-last': (!first && !this.vertical) || (first && this.vertical)
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     @for (tick of ticks; track tick) {
       <li #tickElement
         [ngClass]="tick.classes"
@@ -991,7 +991,7 @@ class SliderTicksComponent {
     </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderTicksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSliderTicks]',
@@ -1061,10 +1061,10 @@ class SliderMessages extends ComponentMessages {
      * The title of the drag handle of the Slider.
      */
     dragHandle;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SliderMessages, isStandalone: true, selector: "kendo-slider-messages-base", inputs: { decrement: "decrement", increment: "increment", dragHandle: "dragHandle" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SliderMessages, isStandalone: true, selector: "kendo-slider-messages-base", inputs: { decrement: "decrement", increment: "increment", dragHandle: "dragHandle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-slider-messages-base'
@@ -1086,15 +1086,15 @@ class LocalizedSliderMessagesDirective extends SliderMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedSliderMessagesDirective, isStandalone: true, selector: "[kendoSliderLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedSliderMessagesDirective, isStandalone: true, selector: "[kendoSliderLocalizedMessages]", providers: [
             {
                 provide: SliderMessages,
                 useExisting: forwardRef(() => LocalizedSliderMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSliderMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSliderMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -1176,6 +1176,12 @@ class SliderComponent extends SliderBase {
     get currentValue() {
         return isPresent(this.value) ? this.value.toString() : '';
     }
+    /**
+     * @hidden
+     */
+    get hostAriaLabel() {
+        return this.hostElement.nativeElement.getAttribute('aria-label');
+    }
     /**
      * @hidden
      */
@@ -1248,6 +1254,9 @@ class SliderComponent extends SliderBase {
         }
         this.attachElementEventHandlers();
         this.isSliderInvalid();
+        if (this.control) {
+            this.subscriptions.add(this.control.statusChanges.subscribe(() => this.isSliderInvalid()));
+        }
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -1449,9 +1458,13 @@ class SliderComponent extends SliderBase {
         };
     }
     isSliderInvalid() {
-        const sliderClasses = this.hostElement.nativeElement.classList;
-        this.isInvalid = sliderClasses.contains('ng-invalid') ? true : false;
-        this.renderer.setAttribute(this.draghandle.nativeElement, 'aria-invalid', `${this.isInvalid}`);
+        this.isInvalid = !!(this.control?.invalid && (this.control?.touched || this.control?.dirty));
+        if (this.isInvalid) {
+            this.renderer.setAttribute(this.draghandle.nativeElement, 'aria-invalid', 'true');
+        }
+        else {
+            this.renderer.removeAttribute(this.draghandle.nativeElement, 'aria-invalid');
+        }
     }
     attachElementEventHandlers() {
         const hostElement = this.hostElement.nativeElement;
@@ -1507,6 +1520,7 @@ class SliderComponent extends SliderBase {
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
             this.ngZone.run(() => {
                 this.ngTouched();
+                this.isSliderInvalid();
                 if (!this.focusChangedProgrammatically) {
                     this.onBlur.emit();
                 }
@@ -1537,13 +1551,14 @@ class SliderComponent extends SliderBase {
         }
         return this.direction === 'ltr' ? this.arrowRightIcon : this.arrowLeftIcon;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", 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: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) }
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) },
+            provideComponentName('slider')
         ], 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."
@@ -1595,10 +1610,10 @@ class SliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="currentValue"
-                [attr.aria-valuetext]="currentValue"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="hostAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
                 class="k-draghandle k-draghandle-end"
                 [title]="dragHandleMessage"
@@ -1627,7 +1642,7 @@ class SliderComponent extends SliderBase {
           <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"], 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: "20.3.25", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSlider',
@@ -1636,7 +1651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         { provide: L10N_PREFIX, useValue: 'kendo.slider' },
                         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
                         { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) },
-                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) }
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SliderComponent) },
+                        provideComponentName('slider')
                     ],
                     selector: 'kendo-slider',
                     template: `
@@ -1690,10 +1706,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="currentValue"
-                [attr.aria-valuetext]="currentValue"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="hostAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
                 class="k-draghandle k-draghandle-end"
                 [title]="dragHandleMessage"
@@ -1810,10 +1826,10 @@ class RangeSliderMessages extends ComponentMessages {
      * The title of the range `end` drag handle.
      */
     dragHandleEnd;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: RangeSliderMessages, isStandalone: true, selector: "kendo-rangeslider-messages-base", inputs: { dragHandleStart: "dragHandleStart", dragHandleEnd: "dragHandleEnd" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RangeSliderMessages, isStandalone: true, selector: "kendo-rangeslider-messages-base", inputs: { dragHandleStart: "dragHandleStart", dragHandleEnd: "dragHandleEnd" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-rangeslider-messages-base'
@@ -1833,15 +1849,15 @@ class LocalizedRangeSliderMessagesDirective extends RangeSliderMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedRangeSliderMessagesDirective, isStandalone: true, selector: "[kendoSliderLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedRangeSliderMessagesDirective, isStandalone: true, selector: "[kendoSliderLocalizedMessages]", providers: [
             {
                 provide: RangeSliderMessages,
                 useExisting: forwardRef(() => LocalizedRangeSliderMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -1899,6 +1915,20 @@ class RangeSliderComponent extends SliderBase {
     activeHandle = 'startHandle';
     focusChangedProgrammatically = false;
     isInvalid;
+    /**
+     * @hidden
+     */
+    get startHandleAriaLabel() {
+        const hostLabel = this.hostElement?.nativeElement?.getAttribute('aria-label');
+        return hostLabel ? `${hostLabel} start` : null;
+    }
+    /**
+     * @hidden
+     */
+    get endHandleAriaLabel() {
+        const hostLabel = this.hostElement?.nativeElement?.getAttribute('aria-label');
+        return hostLabel ? `${hostLabel} end` : null;
+    }
     constructor(localization, injector, renderer, ngZone, changeDetector, hostElement) {
         super(localization, injector, renderer, ngZone, changeDetector, hostElement);
         this.localization = localization;
@@ -1956,6 +1986,9 @@ class RangeSliderComponent extends SliderBase {
         }
         this.isRangeSliderInvalid();
         this.attachElementEventHandlers();
+        if (this.control) {
+            this.subscriptions.add(this.control.statusChanges.subscribe(() => this.isRangeSliderInvalid()));
+        }
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -2213,10 +2246,15 @@ class RangeSliderComponent extends SliderBase {
         };
     }
     isRangeSliderInvalid() {
-        const rangeSliderClasses = this.hostElement.nativeElement.classList;
-        this.isInvalid = rangeSliderClasses.contains('ng-invalid') ? true : false;
-        this.renderer.setAttribute(this.draghandleStart.nativeElement, 'aria-invalid', `${this.isInvalid}`);
-        this.renderer.setAttribute(this.draghandleEnd.nativeElement, 'aria-invalid', `${this.isInvalid}`);
+        this.isInvalid = !!(this.control?.invalid && (this.control?.touched || this.control?.dirty));
+        if (this.isInvalid) {
+            this.renderer.setAttribute(this.draghandleStart.nativeElement, 'aria-invalid', 'true');
+            this.renderer.setAttribute(this.draghandleEnd.nativeElement, 'aria-invalid', 'true');
+        }
+        else {
+            this.renderer.removeAttribute(this.draghandleStart.nativeElement, 'aria-invalid');
+            this.renderer.removeAttribute(this.draghandleEnd.nativeElement, 'aria-invalid');
+        }
     }
     attachElementEventHandlers() {
         const hostElement = this.hostElement.nativeElement;
@@ -2272,14 +2310,15 @@ class RangeSliderComponent extends SliderBase {
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
             this.ngZone.run(() => {
                 this.ngTouched();
+                this.isRangeSliderInvalid();
                 if (!this.focusChangedProgrammatically) {
                     this.onBlur.emit();
                 }
             });
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderComponent, 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: "20.3.25", type: RangeSliderComponent, isStandalone: true, selector: "kendo-rangeslider", inputs: { value: "value" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderComponent, 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: "20.3.27", type: RangeSliderComponent, isStandalone: true, selector: "kendo-rangeslider", inputs: { value: "value" }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
@@ -2324,12 +2363,12 @@ class RangeSliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="startHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-start"
                 [title]="textFor('dragHandleStart')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2343,12 +2382,12 @@ class RangeSliderComponent extends SliderBase {
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="endHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-end"
                 [title]="textFor('dragHandleEnd')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2360,7 +2399,7 @@ class RangeSliderComponent extends SliderBase {
           <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
         `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { 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: "20.3.25", ngImport: i0, type: RangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoRangeSlider',
@@ -2411,12 +2450,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="startHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-start"
                 [title]="textFor('dragHandleStart')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2430,12 +2469,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuetext]="valueText"
                 [attr.aria-disabled]="disabled ? true : undefined"
                 [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [attr.aria-orientation]="vertical ? 'vertical' : null"
+                [attr.aria-label]="endHandleAriaLabel"
                 [style.touch-action]="isDisabled ? '' : 'none'"
-                class="k-draghandle"
+                class="k-draghandle k-draghandle-end"
                 [title]="textFor('dragHandleEnd')"
                 kendoDraggable
                 (kendoPress)="ifEnabled(handleDragPress ,$event)"
@@ -2471,10 +2510,10 @@ class Messages extends ComponentMessages {
      * The title of the **Off** button of the Switch.
      */
     off;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, selector: "kendo-switch-messages-base", inputs: { on: "on", off: "off" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendo-switch-messages-base", inputs: { on: "on", off: "off" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-switch-messages-base'
@@ -2494,15 +2533,15 @@ class LocalizedSwitchMessagesDirective extends Messages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSwitchMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedSwitchMessagesDirective, isStandalone: true, selector: "[kendoSwitchLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSwitchMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedSwitchMessagesDirective, isStandalone: true, selector: "[kendoSwitchLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedSwitchMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSwitchMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSwitchMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2661,7 +2700,7 @@ class SwitchComponent {
         return this.disabled ? true : undefined;
     }
     get ariaReadonly() {
-        return this.readonly;
+        return this.readonly || null;
     }
     hostClasses = true;
     get disabledClass() {
@@ -2934,8 +2973,8 @@ class SwitchComponent {
             this.renderer.addClass(thumb, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.switch' },
             {
@@ -2974,7 +3013,7 @@ class SwitchComponent {
         </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSwitch',
@@ -3177,13 +3216,13 @@ class TextBoxDirective {
     ngOnDestroy() {
         this.listeners.forEach(listener => listener());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, providers: [{
                 provide: KendoInput,
                 useExisting: forwardRef(() => TextBoxDirective)
             }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoTextBox]',
@@ -3417,8 +3456,8 @@ class TextAreaDirective {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextAreaDirective, isStandalone: true, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextAreaDirective, isStandalone: true, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextAreaDirective),
                 multi: true
@@ -3427,7 +3466,7 @@ class TextAreaDirective {
                 useExisting: forwardRef(() => TextAreaDirective)
             }], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{
@@ -3643,10 +3682,10 @@ class InputSeparatorComponent {
         return this.orientation === 'horizontal';
     }
     hostClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: InputSeparatorComponent, isStandalone: true, selector: "kendo-input-separator, kendo-textbox-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: InputSeparatorComponent, isStandalone: true, selector: "kendo-input-separator, kendo-textbox-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-input-separator, kendo-textbox-separator',
@@ -3758,10 +3797,10 @@ class SharedInputEventsDirective {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SharedInputEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SharedInputEventsDirective, isStandalone: true, selector: "[kendoInputSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SharedInputEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SharedInputEventsDirective, isStandalone: true, selector: "[kendoInputSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SharedInputEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SharedInputEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoInputSharedEvents]',
@@ -3793,10 +3832,10 @@ class NumericTextBoxMessages extends ComponentMessages {
      * Sets the title of the **Increment** button in the NumericTextBox.
      */
     increment;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: NumericTextBoxMessages, isStandalone: true, selector: "kendo-numerictextbox-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NumericTextBoxMessages, isStandalone: true, selector: "kendo-numerictextbox-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-numerictextbox-messages-base'
@@ -3816,15 +3855,15 @@ class LocalizedNumericTextBoxMessagesDirective extends NumericTextBoxMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedNumericTextBoxMessagesDirective, isStandalone: true, selector: "[kendoNumericTextBoxLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedNumericTextBoxMessagesDirective, isStandalone: true, selector: "[kendoNumericTextBoxLocalizedMessages]", providers: [
             {
                 provide: NumericTextBoxMessages,
                 useExisting: forwardRef(() => LocalizedNumericTextBoxMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4824,14 +4863,15 @@ class NumericTextBoxComponent {
         const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
         setHTMLAttributes(attributesToRender, this.renderer, this.numericInput.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$1.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: NumericTextBoxComponent, isStandalone: true, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.disableClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$1.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: NumericTextBoxComponent, isStandalone: true, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.disableClass" } }, providers: [
             LocalizationService,
             { 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: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) }
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) },
+            provideComponentName('numerictextbox')
         ], 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"
@@ -4899,11 +4939,11 @@ class NumericTextBoxComponent {
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
                 class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
+                [class.k-disabled]="disabled"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -4916,10 +4956,10 @@ class NumericTextBoxComponent {
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
+                [class.k-disabled]="disabled"
                 class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
@@ -4935,7 +4975,7 @@ class NumericTextBoxComponent {
         </ng-container>
         `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoNumericTextBox',
@@ -4945,7 +4985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
                         { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) },
-                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) }
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => NumericTextBoxComponent) },
+                        provideComponentName('numerictextbox')
                     ],
                     selector: 'kendo-numerictextbox',
                     template: `
@@ -5015,11 +5056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
                 class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
+                [class.k-disabled]="disabled"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -5032,10 +5073,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <button
                 type="button"
                 [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                [attr.aria-hidden]="true"
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
+                [class.k-disabled]="disabled"
                 class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
@@ -5155,15 +5196,15 @@ class NumericTextBoxCustomMessagesComponent extends NumericTextBoxMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: NumericTextBoxCustomMessagesComponent, isStandalone: true, selector: "kendo-numerictextbox-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: NumericTextBoxCustomMessagesComponent, isStandalone: true, selector: "kendo-numerictextbox-messages", providers: [
             {
                 provide: NumericTextBoxMessages,
                 useExisting: forwardRef(() => NumericTextBoxCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5598,10 +5639,10 @@ class MaskingService {
             this.validationTokens = tokens;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskingService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskingService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskingService, decorators: [{
             type: Injectable
         }] });
 
@@ -5815,6 +5856,9 @@ class MaskedTextBoxComponent {
     get hostDisabledClass() {
         return this.disabled;
     }
+    get hostInvalidClass() {
+        return this.isControlInvalid;
+    }
     /**
      * Returns the `ElementRef` of the visible `input` element.
      */
@@ -6244,8 +6288,8 @@ class MaskedTextBoxComponent {
         const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-disabled": "this.hostDisabledClass", "class.k-invalid": "this.hostInvalidClass" } }, providers: [
             MaskingService,
             {
                 multi: true,
@@ -6316,7 +6360,7 @@ class MaskedTextBoxComponent {
         </ng-container>
         `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMaskedTextBox',
@@ -6457,6 +6501,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], hostDisabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
+            }], hostInvalidClass: [{
+                type: HostBinding,
+                args: ['class.k-invalid']
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
@@ -6724,10 +6771,10 @@ class RadioCheckBoxBase {
     setInputAttributes() {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RadioCheckBoxBase, isStandalone: true, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadioCheckBoxBase, isStandalone: true, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -6876,8 +6923,8 @@ class CheckBoxComponent extends RadioCheckBoxBase {
         this.checkedState = value;
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CheckBoxComponent, isStandalone: true, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CheckBoxComponent, isStandalone: true, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
             {
@@ -6917,7 +6964,7 @@ class CheckBoxComponent extends RadioCheckBoxBase {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCheckBox',
@@ -7037,10 +7084,10 @@ class CheckBoxDirective {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CheckBoxDirective, isStandalone: true, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: CheckBoxDirective, isStandalone: true, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoCheckBox]',
@@ -7303,10 +7350,10 @@ class ColorPickerLocalizationService extends LocalizationService {
     constructor(prefix, messageService, _rtl) {
         super(prefix, messageService, _rtl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -7335,10 +7382,10 @@ class FlatColorPickerLocalizationService extends LocalizationService {
         }
         return super.get(shortKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: ColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: ColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -7372,10 +7419,10 @@ class ColorGradientLocalizationService extends LocalizationService {
         }
         return super.get(shortKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorGradientLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorGradientLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorGradientLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorGradientLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorGradientLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorGradientLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -7408,10 +7455,10 @@ class NumericLabelDirective {
         const localizationToken = `${this.kendoAdditionalNumericLabel}ChannelLabel`;
         this.host.numericInput.nativeElement.setAttribute('aria-label', this.localizationService.get(localizationToken));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericLabelDirective, deps: [{ token: NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: NumericLabelDirective, isStandalone: true, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericLabelDirective, deps: [{ token: NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: NumericLabelDirective, isStandalone: true, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoAdditionalNumericLabel]',
@@ -7462,10 +7509,10 @@ class TextBoxSuffixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextBoxSuffixTemplateDirective, isStandalone: true, selector: "[kendoTextBoxSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextBoxSuffixTemplateDirective, isStandalone: true, selector: "[kendoTextBoxSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTextBoxSuffixTemplate]',
@@ -7507,10 +7554,10 @@ class TextBoxPrefixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextBoxPrefixTemplateDirective, isStandalone: true, selector: "[kendoTextBoxPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextBoxPrefixTemplateDirective, isStandalone: true, selector: "[kendoTextBoxPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTextBoxPrefixTemplate]',
@@ -7530,10 +7577,10 @@ class TextBoxMessages extends ComponentMessages {
      * The title of the **Clear** button of the TextBox.
      */
     clear;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextBoxMessages, isStandalone: true, selector: "kendo-textbox-messages-base", inputs: { clear: "clear" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextBoxMessages, isStandalone: true, selector: "kendo-textbox-messages-base", inputs: { clear: "clear" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-textbox-messages-base'
@@ -7551,15 +7598,15 @@ class LocalizedTextBoxMessagesDirective extends TextBoxMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedTextBoxMessagesDirective, isStandalone: true, selector: "[kendoTextBoxLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedTextBoxMessagesDirective, isStandalone: true, selector: "[kendoTextBoxLocalizedMessages]", providers: [
             {
                 provide: TextBoxMessages,
                 useExisting: forwardRef(() => LocalizedTextBoxMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedTextBoxMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedTextBoxMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -8187,8 +8234,8 @@ class TextBoxComponent {
     setInputAttributes() {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "20.3.27", 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' },
             {
@@ -8197,7 +8244,8 @@ class TextBoxComponent {
                 multi: true
             },
             { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) },
-            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) }
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) },
+            provideComponentName('textbox')
         ], 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."
@@ -8287,7 +8335,7 @@ class TextBoxComponent {
           <ng-container>
         `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextBox',
@@ -8300,7 +8348,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             multi: true
                         },
                         { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) },
-                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) }
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => TextBoxComponent) },
+                        provideComponentName('textbox')
                     ],
                     selector: 'kendo-textbox',
                     template: `
@@ -8494,10 +8543,10 @@ class TextLabelDirective {
     ngOnInit() {
         this.renderer.setAttribute(this.textBox.input.nativeElement, 'id', this.focusableId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextLabelDirective, deps: [{ token: TextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TextLabelDirective, isStandalone: true, selector: "[kendoTextLabel]", inputs: { focusableId: "focusableId" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextLabelDirective, deps: [{ token: TextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: TextLabelDirective, isStandalone: true, selector: "[kendoTextLabel]", inputs: { focusableId: "focusableId" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTextLabel]',
@@ -8676,8 +8725,8 @@ class ColorInputComponent {
     lastInput() {
         return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
           <button
             kendoButton
@@ -8808,7 +8857,7 @@ class ColorInputComponent {
         }
         `, 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: "20.3.25", ngImport: i0, type: ColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-colorinput',
@@ -9031,7 +9080,7 @@ class ContrastValidationComponent {
     pass;
     value;
     checkIcon = checkIcon;
-    xCircleIcon = xCircleIcon;
+    xIcon = xIcon;
     constructor(localization) {
         this.localization = localization;
     }
@@ -9045,25 +9094,25 @@ class ContrastValidationComponent {
         const ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
         return `${this.type}: ${ratio.toFixed(1)}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ContrastValidationComponent, isStandalone: true, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ContrastValidationComponent, isStandalone: true, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
         <span>{{contrastText}}</span>
         @if (value) {
           @if (pass) {
-            <span class="k-contrast-validation k-text-success">
+            <span class="k-contrast-validation !k-text-success">
               {{passMessage}}
               <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
           } @else {
-            <span class="k-contrast-validation k-text-error">
+            <span class="k-contrast-validation !k-text-error">
               {{failMessage}}
-              <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
           }
         }
         `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ContrastValidationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoContrastValidation]',
@@ -9071,14 +9120,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <span>{{contrastText}}</span>
         @if (value) {
           @if (pass) {
-            <span class="k-contrast-validation k-text-success">
+            <span class="k-contrast-validation !k-text-success">
               {{passMessage}}
               <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
           } @else {
-            <span class="k-contrast-validation k-text-error">
+            <span class="k-contrast-validation !k-text-error">
               {{failMessage}}
-              <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
           }
         }
@@ -9102,7 +9151,7 @@ class ContrastComponent {
     value;
     ratio;
     checkIcon = checkIcon;
-    xCircleIcon = xCircleIcon;
+    xIcon = xIcon;
     constructor(localization) {
         this.localization = localization;
     }
@@ -9122,21 +9171,21 @@ class ContrastComponent {
         const contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
         return contrast;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ContrastComponent, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ContrastComponent, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
         <div class="k-contrast-ratio">
           <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
           @if (value) {
             @if (satisfiesAACondition) {
-              <span class="k-contrast-validation k-text-success">
+              <span class="k-contrast-validation !k-text-success">
                 <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 @if (satisfiesAAACondition) {
                   <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 }
               </span>
             } @else {
-              <span class="k-contrast-validation k-text-error">
-                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <span class="k-contrast-validation !k-text-error">
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
               </span>
             }
           }
@@ -9153,7 +9202,7 @@ class ContrastComponent {
         </div>
         `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ContrastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoContrastTool]',
@@ -9162,15 +9211,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
           @if (value) {
             @if (satisfiesAACondition) {
-              <span class="k-contrast-validation k-text-success">
+              <span class="k-contrast-validation !k-text-success">
                 <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 @if (satisfiesAAACondition) {
                   <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 }
               </span>
             } @else {
-              <span class="k-contrast-validation k-text-error">
-                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+              <span class="k-contrast-validation !k-text-error">
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
               </span>
             }
           }
@@ -9208,6 +9257,7 @@ class ColorContrastSvgComponent {
     oldH;
     oldA;
     metrics;
+    hsvaSub;
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -9215,7 +9265,7 @@ class ColorContrastSvgComponent {
         this.metrics = this.wrapper.getBoundingClientRect();
         this.oldA = this.hsva.value.a;
         this.oldH = this.hsva.value.h;
-        this.hsva.subscribe((value) => {
+        this.hsvaSub = this.hsva.subscribe((value) => {
             if (value.h !== this.oldH || value.a !== this.oldA) {
                 this.oldH = value.h;
                 this.oldA = value.a;
@@ -9228,6 +9278,9 @@ class ColorContrastSvgComponent {
             this.setPaths();
         }
     }
+    ngOnDestroy() {
+        this.hsvaSub?.unsubscribe();
+    }
     setPaths() {
         const bezierCommandCalc = bezierCommand(controlPoint(line));
         this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
@@ -9254,6 +9307,10 @@ class ColorContrastSvgComponent {
     }
     getPaths(contrast, stepCount, reversed = false) {
         const points = [];
+        const hasDimensionts = this.metrics.width && this.metrics.height;
+        if (!hasDimensionts) {
+            return points;
+        }
         for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
             const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
             if (value !== null) {
@@ -9262,14 +9319,14 @@ class ColorContrastSvgComponent {
         }
         return points;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
         @for (path of paths; track path) {
           <svg:path [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
           }
         `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoColorContrastSvg]',
@@ -9416,10 +9473,10 @@ class ColorPickerMessages extends ComponentMessages {
      * Sets the aria-label attribute of the ColorPicker toggle button.
      */
     toggleButtonLabel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ColorPickerMessages, isStandalone: true, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ColorPickerMessages, isStandalone: true, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-colorpicker-messages-base'
@@ -9495,15 +9552,15 @@ class LocalizedColorPickerMessagesDirective extends ColorPickerMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedColorPickerMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedColorPickerMessagesDirective, isStandalone: true, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedColorPickerMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedColorPickerMessagesDirective, isStandalone: true, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
             {
                 provide: ColorPickerMessages,
                 useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedColorPickerMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedColorPickerMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -9540,7 +9597,7 @@ class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.ariaAttributesEnabled ? this.readonly : undefined;
+        return this.ariaAttributesEnabled ? (this.readonly || null) : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -9553,13 +9610,13 @@ class ColorGradientComponent {
         return this.tabindex?.toString() || '0';
     }
     get ariaRole() {
-        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+        return this.ariaAttributesEnabled ? 'textbox' : 'none';
     }
     get isControlInvalid() {
-        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
+        return this.ariaAttributesEnabled ? (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString() : undefined;
     }
     get isDisabled() {
-        return this.disabled?.toString() || undefined;
+        return this.disabled ? this.disabled.toString() : null;
     }
     /**
      * @hidden
@@ -9766,6 +9823,12 @@ class ColorGradientComponent {
     get hsvSliderValueText() {
         return `X: ${this.hsvHandleCoordinates.x} Y: ${this.hsvHandleCoordinates.y}`;
     }
+    /**
+     * @hidden
+     */
+    get hsvSliderValueNow() {
+        return Math.round((1 - this.hsva.value.v) * 100);
+    }
     /**
      * @hidden
      */
@@ -10130,8 +10193,8 @@ class ColorGradientComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -10149,7 +10212,8 @@ class ColorGradientComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.colorgradient'
-            }
+            },
+            provideComponentName('colorgradient')
         ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorGradientLocalizedMessages
           i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
@@ -10213,7 +10277,9 @@ class ColorGradientComponent {
                 [attr.aria-readonly]="readonly ? readonly : undefined"
                 [attr.aria-disabled]="disabled ? disabled : undefined"
                 [attr.aria-orientation]="'undefined'"
-                [attr.aria-valuenow]="'0'"
+                [attr.aria-valuenow]="hsvSliderValueNow"
+                aria-valuemin="0"
+                aria-valuemax="100"
                 (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
               </div>
             </div>
@@ -10257,6 +10323,7 @@ class ColorGradientComponent {
               [style.height.px]="clearButton ? '140' : null"
               class="k-hue-slider k-colorgradient-slider"
               [dragHandleTitle]="hueSliderTitle"
+              [attr.aria-label]="hueSliderTitle"
               [tabindex]="innerTabIndex"
               [disabled]="disabled"
               [readonly]="readonly"
@@ -10279,6 +10346,7 @@ class ColorGradientComponent {
                 [style.height.px]="clearButton ? '140' : null"
                 class="k-alpha-slider k-colorgradient-slider"
                 [dragHandleTitle]="opacitySliderTitle"
+                [attr.aria-label]="opacitySliderTitle"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [showButtons]="false"
@@ -10316,7 +10384,7 @@ class ColorGradientComponent {
         }
         `, 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: "20.3.25", ngImport: i0, type: ColorGradientComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorGradient',
@@ -10339,7 +10407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.colorgradient'
-                        }
+                        },
+                        provideComponentName('colorgradient')
                     ],
                     template: `
         <ng-container kendoColorGradientLocalizedMessages
@@ -10404,7 +10473,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [attr.aria-readonly]="readonly ? readonly : undefined"
                 [attr.aria-disabled]="disabled ? disabled : undefined"
                 [attr.aria-orientation]="'undefined'"
-                [attr.aria-valuenow]="'0'"
+                [attr.aria-valuenow]="hsvSliderValueNow"
+                aria-valuemin="0"
+                aria-valuemax="100"
                 (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
               </div>
             </div>
@@ -10448,6 +10519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [style.height.px]="clearButton ? '140' : null"
               class="k-hue-slider k-colorgradient-slider"
               [dragHandleTitle]="hueSliderTitle"
+              [attr.aria-label]="hueSliderTitle"
               [tabindex]="innerTabIndex"
               [disabled]="disabled"
               [readonly]="readonly"
@@ -10470,6 +10542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [style.height.px]="clearButton ? '140' : null"
                 class="k-alpha-slider k-colorgradient-slider"
                 [dragHandleTitle]="opacitySliderTitle"
+                [attr.aria-label]="opacitySliderTitle"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [showButtons]="false"
@@ -10612,10 +10685,10 @@ class ColorPaletteLocalizationService extends LocalizationService {
         }
         return super.get(shortKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteLocalizationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteLocalizationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -10745,10 +10818,10 @@ class ColorPaletteService {
         }
         return index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteService, decorators: [{
             type: Injectable
         }] });
 
@@ -10920,6 +10993,10 @@ class ColorPaletteComponent {
      * @hidden
      */
     hostClasses = true;
+    /**
+     * @hidden
+     */
+    get ariaDisabled() { return this.disabled || null; }
     /**
      * @hidden
      */
@@ -10927,7 +11004,7 @@ class ColorPaletteComponent {
     /**
      * @hidden
      */
-    get readonlyAttribute() { return this.readonly; }
+    get readonlyAttribute() { return this.readonly || null; }
     /**
      * @hidden
      */
@@ -11183,8 +11260,8 @@ class ColorPaletteComponent {
     }
     notifyNgTouched = () => { };
     notifyNgChanged = () => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -11237,7 +11314,7 @@ class ColorPaletteComponent {
         </table>
         `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPalette',
@@ -11345,10 +11422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpalette']
-            }], disabledClass: [{
+            }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }, {
+            }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
             }], readonlyAttribute: [{
@@ -11381,10 +11458,10 @@ class FlatColorPickerService {
             height: tileSize?.height ? tileSize?.height : tileSize?.width
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerService, decorators: [{
             type: Injectable
         }] });
 
@@ -11527,15 +11604,15 @@ class FlatColorPickerHeaderComponent {
             this.tabOut.emit(ev);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection", size: "size" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection", size: "size" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <div class="k-coloreditor-header-actions k-hstack">
           @if (viewButtons) {
             <div
               class="k-button-group k-button-group-flat"
               role="group"
               >
-              @for (view of views; track view; let i = $index) {
+              @for (view of views; track view; let i = $index; let isFirst = $first; let isLast = $last) {
                 <button
                   kendoButton
                   type="button"
@@ -11550,6 +11627,8 @@ class FlatColorPickerHeaderComponent {
                   [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-pressed]="activeView === view"
+                  [class.k-group-start]="isFirst"
+                  [class.k-group-end]="isLast"
                   [ngClass]="activeView === view ? 'k-selected' : ''">
                 </button>
               }
@@ -11568,7 +11647,6 @@ class FlatColorPickerHeaderComponent {
               fillMode="flat"
               icon="reset-color"
               [svgIcon]="dropletSlashIcon"
-              class="k-coloreditor-reset"
               [attr.aria-label]="getText('clearButton')"
               [attr.title]="getText('clearButton')"
               (click)="clearButtonClick.emit()">
@@ -11578,20 +11656,24 @@ class FlatColorPickerHeaderComponent {
             <div class="k-coloreditor-preview k-vstack" aria-hidden="true">
               <span
                 class="k-coloreditor-preview-color k-color-preview"
+                [class.k-no-color]="!selection"
                 [attr.title]="getText('previewColor')"
                 [style.background-color]="selection">
+                <span class="k-color-preview-mask" [style.background-color]="selection"></span>
               </span>
               <span class="k-coloreditor-current-color k-color-preview"
+                [class.k-no-color]="!value"
                 [style.background-color]="value"
                 [attr.title]="getText('revertSelection')"
                 (click)="valuePaneClick.emit($event)">
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
               </span>
             </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"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoFlatColorPickerHeader]',
@@ -11602,7 +11684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               class="k-button-group k-button-group-flat"
               role="group"
               >
-              @for (view of views; track view; let i = $index) {
+              @for (view of views; track view; let i = $index; let isFirst = $first; let isLast = $last) {
                 <button
                   kendoButton
                   type="button"
@@ -11617,6 +11699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                   [attr.aria-pressed]="activeView === view"
+                  [class.k-group-start]="isFirst"
+                  [class.k-group-end]="isLast"
                   [ngClass]="activeView === view ? 'k-selected' : ''">
                 </button>
               }
@@ -11635,7 +11719,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               fillMode="flat"
               icon="reset-color"
               [svgIcon]="dropletSlashIcon"
-              class="k-coloreditor-reset"
               [attr.aria-label]="getText('clearButton')"
               [attr.title]="getText('clearButton')"
               (click)="clearButtonClick.emit()">
@@ -11645,13 +11728,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <div class="k-coloreditor-preview k-vstack" aria-hidden="true">
               <span
                 class="k-coloreditor-preview-color k-color-preview"
+                [class.k-no-color]="!selection"
                 [attr.title]="getText('previewColor')"
                 [style.background-color]="selection">
+                <span class="k-color-preview-mask" [style.background-color]="selection"></span>
               </span>
               <span class="k-coloreditor-current-color k-color-preview"
+                [class.k-no-color]="!value"
                 [style.background-color]="value"
                 [attr.title]="getText('revertSelection')"
                 (click)="valuePaneClick.emit($event)">
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
               </span>
             </div>
           }
@@ -11723,8 +11810,8 @@ class FlatColorPickerActionButtonsComponent {
         };
         this.actionButtonClick.emit(args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: FlatColorPickerActionButtonsComponent, isStandalone: true, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex", size: "size" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: FlatColorPickerActionButtonsComponent, isStandalone: true, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex", size: "size" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <button #first
             kendoButton
             class="k-coloreditor-cancel"
@@ -11747,7 +11834,7 @@ class FlatColorPickerActionButtonsComponent {
         >{{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"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoFlatColorPickerActionButtons]',
@@ -11826,8 +11913,11 @@ class FlatColorPickerComponent {
     get disabledClass() {
         return this.disabled;
     }
+    get ariaDisabled() {
+        return this.disabled || null;
+    }
     get ariaReadonly() {
-        return this.readonly;
+        return this.readonly || null;
     }
     direction;
     get hostTabindex() {
@@ -11835,10 +11925,7 @@ class FlatColorPickerComponent {
     }
     ariaRole = 'textbox';
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
-    }
-    get isDisabled() {
-        return this.disabled?.toString() || undefined;
+        return (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString();
     }
     /**
      * @hidden
@@ -12321,13 +12408,13 @@ class FlatColorPickerComponent {
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'blur', () => {
                 this.focused = false;
-                this.notifyNgTouched();
+                this.ngZone.run(() => this.notifyNgTouched());
             }));
         });
     }
     removeGradientAttributes() {
         if (this.gradientElement) {
-            this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
+            this.renderer.setAttribute(this.gradientElement.nativeElement, 'role', 'none');
             this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
         }
     }
@@ -12341,8 +12428,8 @@ class FlatColorPickerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -12361,7 +12448,8 @@ class FlatColorPickerComponent {
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.flatcolorpicker'
-            }
+            },
+            provideComponentName('flatcolorpicker')
         ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerElement", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "gradientElement", first: true, predicate: ["gradient"], descendants: true, read: ElementRef }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoFlatColorPickerLocalizedMessages
           i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
@@ -12466,14 +12554,14 @@ class FlatColorPickerComponent {
             kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
             [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
+            [ngClass]="'k-actions-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
           </div>
         }
         `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFlatColorPicker',
@@ -12497,7 +12585,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.flatcolorpicker'
-                        }
+                        },
+                        provideComponentName('flatcolorpicker')
                     ],
                     template: `
         <ng-container kendoFlatColorPickerLocalizedMessages
@@ -12603,7 +12692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
             [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
+            [ngClass]="'k-actions-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
           </div>
@@ -12621,7 +12710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
+            }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
             }], ariaReadonly: [{
@@ -12639,9 +12728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], isControlInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
             }], enterHandler: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
@@ -12726,8 +12812,8 @@ class AdaptiveCloseButtonComponent {
     svgIcon;
     color;
     close = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: AdaptiveCloseButtonComponent, isStandalone: true, selector: "kendo-adaptive-close-button", inputs: { title: "title", icon: "icon", svgIcon: "svgIcon", color: "color" }, outputs: { close: "close" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: AdaptiveCloseButtonComponent, isStandalone: true, selector: "kendo-adaptive-close-button", inputs: { title: "title", icon: "icon", svgIcon: "svgIcon", color: "color" }, outputs: { close: "close" }, ngImport: i0, template: `
         <button kendoButton
             type="button"
             [title]="title"
@@ -12741,7 +12827,7 @@ class AdaptiveCloseButtonComponent {
         ></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"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-adaptive-close-button',
@@ -12805,8 +12891,8 @@ class AdaptiveRendererComponent {
     get windowSize() {
         return this.adaptiveService.size;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
           #actionSheet
           [animation]="{ duration: animationDuration }"
@@ -12871,7 +12957,7 @@ class AdaptiveRendererComponent {
         </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"], 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: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-adaptive-renderer',
@@ -13008,11 +13094,14 @@ class ColorPickerComponent {
     get focusedClass() {
         return this.isFocused;
     }
+    get ariaDisabled() {
+        return this.disabled || null;
+    }
     get disabledClass() {
         return this.disabled;
     }
     get ariaReadonly() {
-        return this.readonly;
+        return this.readonly || null;
     }
     get ariaExpanded() {
         return this.isOpen;
@@ -13024,7 +13113,7 @@ class ColorPickerComponent {
     role = 'combobox';
     hasPopup = 'dialog';
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return (this.control?.invalid && (this.control?.touched || this.control?.dirty))?.toString();
     }
     /**
      * @hidden
@@ -13826,8 +13915,8 @@ class ColorPickerComponent {
             this.focusableId = id;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.ariaDisabled", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -13847,7 +13936,8 @@ class ColorPickerComponent {
             {
                 provide: KENDO_WEBMCP_HOST,
                 useExisting: forwardRef(() => ColorPickerComponent)
-            }
+            },
+            provideComponentName('colorpicker')
         ], 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
           i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
@@ -13975,7 +14065,7 @@ class ColorPickerComponent {
         }
         `, 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: "20.3.25", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPicker',
@@ -14000,8 +14090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: KENDO_WEBMCP_HOST,
                             useExisting: forwardRef(() => ColorPickerComponent)
-                        }
-                    ],
+                        },
+                        provideComponentName('colorpicker')],
                     template: `
         <ng-container kendoColorPickerLocalizedMessages
           i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
@@ -14143,10 +14233,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], focusedClass: [{
                 type: HostBinding,
                 args: ['class.k-focus']
-            }], disabledClass: [{
+            }], ariaDisabled: [{
                 type: HostBinding,
                 args: ['attr.aria-disabled']
-            }, {
+            }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
             }], ariaReadonly: [{
@@ -14276,15 +14366,15 @@ class ColorPickerCustomMessagesComponent extends ColorPickerMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ColorPickerCustomMessagesComponent, isStandalone: true, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ColorPickerCustomMessagesComponent, isStandalone: true, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
             {
                 provide: ColorPickerMessages,
                 useExisting: forwardRef(() => ColorPickerCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -14331,12 +14421,12 @@ class ErrorComponent {
     get idAttribute() {
         return this.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ErrorComponent, isStandalone: true, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: ErrorComponent, isStandalone: true, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formerror',
@@ -14394,12 +14484,12 @@ class HintComponent {
     get idAttribute() {
         return this.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: HintComponent, isStandalone: true, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: HintComponent, isStandalone: true, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formhint',
@@ -14429,10 +14519,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class FormService {
     formWidth = new BehaviorSubject(null);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -14834,8 +14924,8 @@ class FormFieldComponent {
             this._previousColSpan = newColSpan;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -14854,7 +14944,7 @@ class FormFieldComponent {
         </div>
         `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formfield',
@@ -15014,8 +15104,8 @@ class RadioButtonComponent extends RadioCheckBoxBase {
         this.checked = value === this.value;
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RadioButtonComponent, isStandalone: true, selector: "kendo-radiobutton", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.k-radio-wrap": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RadioButtonComponent, isStandalone: true, selector: "kendo-radiobutton", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.k-radio-wrap": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
             {
@@ -15055,7 +15145,7 @@ class RadioButtonComponent extends RadioCheckBoxBase {
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoRadioButton',
@@ -15165,10 +15255,10 @@ class RadioButtonDirective {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass", "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RadioButtonDirective, isStandalone: true, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass", "class.k-disabled": "this.isDisabled" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoRadioButton]',
@@ -15206,15 +15296,15 @@ class RangeSliderCustomMessagesComponent extends RangeSliderMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: RangeSliderCustomMessagesComponent, isStandalone: true, selector: "kendo-rangeslider-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: RangeSliderCustomMessagesComponent, isStandalone: true, selector: "kendo-rangeslider-messages", providers: [
             {
                 provide: RangeSliderMessages,
                 useExisting: forwardRef(() => RangeSliderCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -15248,10 +15338,10 @@ class RatingHoveredItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingHoveredItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: RatingHoveredItemTemplateDirective, isStandalone: true, selector: "[kendoRatingHoveredItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingHoveredItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RatingHoveredItemTemplateDirective, isStandalone: true, selector: "[kendoRatingHoveredItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingHoveredItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingHoveredItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoRatingHoveredItemTemplate]',
@@ -15277,10 +15367,10 @@ class RatingItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: RatingItemTemplateDirective, isStandalone: true, selector: "[kendoRatingItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RatingItemTemplateDirective, isStandalone: true, selector: "[kendoRatingItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoRatingItemTemplate]',
@@ -15308,10 +15398,10 @@ class RatingSelectedItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingSelectedItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: RatingSelectedItemTemplateDirective, isStandalone: true, selector: "[kendoRatingSelectedItemTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingSelectedItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: RatingSelectedItemTemplateDirective, isStandalone: true, selector: "[kendoRatingSelectedItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingSelectedItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingSelectedItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoRatingSelectedItemTemplate]',
@@ -15355,6 +15445,9 @@ class RatingComponent {
      * @default false
      */
     disabled = false;
+    get ariaDisabled() {
+        return this.disabled ? true : undefined;
+    }
     /**
      * When `true`, sets the Rating to read-only ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/readonly)).
 
@@ -15362,6 +15455,9 @@ class RatingComponent {
      * @default false
      */
     readonly = false;
+    get ariaReadonly() {
+        return this.readonly ? true : undefined;
+    }
     /**
      * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
      *
@@ -15679,8 +15775,8 @@ class RatingComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: RatingComponent, isStandalone: true, selector: "kendo-rating", inputs: { disabled: "disabled", readonly: "readonly", tabindex: "tabindex", itemsCount: "itemsCount", value: "value", selection: "selection", precision: "precision", label: "label", icon: "icon", svgIcon: "svgIcon", svgIconOutline: "svgIconOutline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.aria-disabled": "this.disabled", "class.k-disabled": "this.disabled", "attr.aria-readonly": "this.readonly", "class.k-readonly": "this.readonly", "attr.tabindex": "this.tabindex", "class.k-rating": "this.hostClass", "attr.dir": "this.direction", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax", "attr.aria-valuenow": "this.valueNow", "attr.role": "this.ariaRole" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: RatingComponent, isStandalone: true, selector: "kendo-rating", inputs: { disabled: "disabled", readonly: "readonly", tabindex: "tabindex", itemsCount: "itemsCount", value: "value", selection: "selection", precision: "precision", label: "label", icon: "icon", svgIcon: "svgIcon", svgIconOutline: "svgIconOutline" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-disabled": "this.disabled", "attr.aria-disabled": "this.ariaDisabled", "class.k-readonly": "this.readonly", "attr.aria-readonly": "this.ariaReadonly", "attr.tabindex": "this.tabindex", "class.k-rating": "this.hostClass", "attr.dir": "this.direction", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax", "attr.aria-valuenow": "this.valueNow", "attr.role": "this.ariaRole" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.rating' },
             {
@@ -15695,7 +15791,8 @@ class RatingComponent {
             {
                 provide: KENDO_WEBMCP_HOST,
                 useExisting: forwardRef(() => RatingComponent)
-            }
+            },
+            provideComponentName('rating')
         ], 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">
           @for (item of ratingItems; track item; let i = $index) {
@@ -15836,7 +15933,7 @@ class RatingComponent {
         }
         `, isInline: true, dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoRating',
@@ -15855,7 +15952,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: KENDO_WEBMCP_HOST,
                             useExisting: forwardRef(() => RatingComponent)
-                        }
+                        },
+                        provideComponentName('rating')
                     ],
                     selector: 'kendo-rating',
                     template: `
@@ -16011,20 +16109,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: [RatingSelectedItemTemplateDirective]
             }], disabled: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
                 args: ['class.k-disabled']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
             }], readonly: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-readonly']
             }, {
                 type: HostBinding,
                 args: ['class.k-readonly']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
             }], tabindex: [{
                 type: Input
             }, {
@@ -16098,10 +16196,10 @@ class InputSpacerComponent {
      * If not set, the Input Spacer takes all available space.
      */
     width;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: InputSpacerComponent, isStandalone: true, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: InputSpacerComponent, isStandalone: true, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-input-spacer, kendo-textbox-spacer',
@@ -16141,10 +16239,10 @@ class SignatureMessages extends ComponentMessages {
      * The value of the Signature canvas element aria-label attribute.
      */
     canvasLabel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SignatureMessages, isStandalone: true, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize", canvasLabel: "canvasLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: SignatureMessages, isStandalone: true, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize", canvasLabel: "canvasLabel" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-signature-messages-base'
@@ -16171,15 +16269,15 @@ class SignatureCustomMessagesComponent extends SignatureMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SignatureCustomMessagesComponent, isStandalone: true, selector: "kendo-signature-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: SignatureCustomMessagesComponent, isStandalone: true, selector: "kendo-signature-messages", providers: [
             {
                 provide: SignatureMessages,
                 useExisting: forwardRef(() => SignatureCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -16215,15 +16313,15 @@ class LocalizedSignatureMessagesDirective extends SignatureMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSignatureMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedSignatureMessagesDirective, isStandalone: true, selector: "[kendoSignatureLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSignatureMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedSignatureMessagesDirective, isStandalone: true, selector: "[kendoSignatureLocalizedMessages]", providers: [
             {
                 provide: SignatureMessages,
                 useExisting: forwardRef(() => LocalizedSignatureMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedSignatureMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedSignatureMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -16874,12 +16972,13 @@ class SignatureComponent {
         }
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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: { "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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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: { "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height", "class.k-signature-maximized": "this.maximized" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.signature' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) },
-            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) }
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) },
+            provideComponentName('signature')
         ], 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."
@@ -16986,7 +17085,7 @@ class SignatureComponent {
         }
         `, 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: "20.3.25", ngImport: i0, type: SignatureComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSignature',
@@ -16996,7 +17095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         LocalizationService,
                         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
                         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) },
-                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) }
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => SignatureComponent) },
+                        provideComponentName('signature')
                     ],
                     template: `
         <ng-container kendoSignatureLocalizedMessages
@@ -17152,6 +17252,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], maximizable: [{
                 type: Input
             }], maximized: [{
+                type: HostBinding,
+                args: ['class.k-signature-maximized']
+            }, {
                 type: Input
             }], popupScale: [{
                 type: Input
@@ -17198,15 +17301,15 @@ class SliderCustomMessagesComponent extends SliderMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SliderCustomMessagesComponent, isStandalone: true, selector: "kendo-slider-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: SliderCustomMessagesComponent, isStandalone: true, selector: "kendo-slider-messages", providers: [
             {
                 provide: SliderMessages,
                 useExisting: forwardRef(() => SliderCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -17233,15 +17336,15 @@ class SwitchCustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SwitchCustomMessagesComponent, isStandalone: true, selector: "kendo-switch-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: SwitchCustomMessagesComponent, isStandalone: true, selector: "kendo-switch-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => SwitchCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -17289,10 +17392,10 @@ class TextAreaPrefixComponent {
     get alignItems() {
         return this.flow === this.orientation;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: TextAreaPrefixComponent, isStandalone: true, selector: "kendo-textarea-prefix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-prefix": "this.hostClass", "class.k-input-prefix-vertical": "this.verticalOrientation", "class.k-input-prefix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaPrefix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TextAreaPrefixComponent, isStandalone: true, selector: "kendo-textarea-prefix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-prefix": "this.hostClass", "class.k-input-prefix-vertical": "this.verticalOrientation", "class.k-input-prefix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaPrefix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaPrefixComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextAreaPrefix',
@@ -17351,10 +17454,10 @@ class TextAreaSuffixComponent {
     get alignItems() {
         return this.flow === this.orientation;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: TextAreaSuffixComponent, isStandalone: true, selector: "kendo-textarea-suffix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-suffix": "this.hostClass", "class.k-input-suffix-vertical": "this.verticalOrientation", "class.k-input-suffix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TextAreaSuffixComponent, isStandalone: true, selector: "kendo-textarea-suffix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-suffix": "this.hostClass", "class.k-input-suffix-vertical": "this.verticalOrientation", "class.k-input-suffix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextAreaSuffix',
@@ -17490,10 +17593,10 @@ class TextFieldsBase {
     }
     ngChange = (_) => { };
     ngTouched = () => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextFieldsBase, 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: "14.0.0", version: "20.3.25", type: TextFieldsBase, isStandalone: true, selector: "kendo-textfield-base", inputs: { title: "title", disabled: "disabled", readonly: "readonly", value: "value", selectOnFocus: "selectOnFocus", placeholder: "placeholder" }, outputs: { inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextFieldsBase, 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: "14.0.0", version: "20.3.27", type: TextFieldsBase, isStandalone: true, selector: "kendo-textfield-base", inputs: { title: "title", disabled: "disabled", readonly: "readonly", value: "value", selectOnFocus: "selectOnFocus", placeholder: "placeholder" }, outputs: { inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextFieldsBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextFieldsBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-textfield-base',
@@ -17735,17 +17838,11 @@ class TextAreaComponent extends TextFieldsBase {
             maxlength: this.maxlength,
             rows: this.rows,
             cols: this.cols,
-            'aria-disabled': this.disabled ? true : undefined,
             'aria-readonly': this.readonly ? true : undefined,
             'aria-invalid': this.isControlInvalid,
             required: this.isControlRequired ? '' : null
         };
     }
-    get mutableAttributes() {
-        return {
-            'aria-multiline': 'true'
-        };
-    }
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         super(localizationService, ngZone, changeDetector, renderer, injector, hostElement);
         this.localizationService = localizationService;
@@ -18058,11 +18155,11 @@ class TextAreaComponent extends TextFieldsBase {
         this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
     }
     setInputAttributes() {
-        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        const attributesToRender = { ...this.parsedAttributes };
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaComponent, 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: "20.3.25", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaComponent, 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: "20.3.27", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
             {
@@ -18088,8 +18185,6 @@ class TextAreaComponent extends TextFieldsBase {
           }
           <textarea #input
             class="k-input-inner !k-overflow-auto"
-            [attr.aria-multiline]="true"
-            [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
             [attr.aria-invalid]="isControlInvalid"
             [id]="focusableId"
@@ -18119,7 +18214,7 @@ class TextAreaComponent extends TextFieldsBase {
         </ng-container>
         `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextArea',
@@ -18151,8 +18246,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
           <textarea #input
             class="k-input-inner !k-overflow-auto"
-            [attr.aria-multiline]="true"
-            [attr.aria-disabled]="disabled ? true : undefined"
             [attr.aria-readonly]="readonly ? true : undefined"
             [attr.aria-invalid]="isControlInvalid"
             [id]="focusableId"
@@ -18250,15 +18343,15 @@ class TextBoxCustomMessagesComponent extends TextBoxMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: TextBoxCustomMessagesComponent, isStandalone: true, selector: "kendo-textbox-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: TextBoxCustomMessagesComponent, isStandalone: true, selector: "kendo-textbox-messages", providers: [
             {
                 provide: TextBoxMessages,
                 useExisting: forwardRef(() => TextBoxCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -18313,8 +18406,8 @@ class OTPInputSeparatorComponent {
         this.hasIconClass = false;
         this.hasSVGIcon = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OTPInputSeparatorComponent, isStandalone: true, selector: "kendo-otpinput-separator", inputs: { separator: "separator" }, host: { properties: { "class.k-otp-separator": "this.wrapperClass" } }, exportAs: ["kendoOTPInputSeparator"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: OTPInputSeparatorComponent, isStandalone: true, selector: "kendo-otpinput-separator", inputs: { separator: "separator" }, host: { properties: { "class.k-otp-separator": "this.wrapperClass" } }, exportAs: ["kendoOTPInputSeparator"], ngImport: i0, template: `
         @if (hasText) {
           {{this.separator}}
         }
@@ -18329,7 +18422,7 @@ class OTPInputSeparatorComponent {
         }
         `, isInline: true, dependencies: [{ 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoOTPInputSeparator',
@@ -18363,20 +18456,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class OTPInputMessages extends ComponentMessages {
     /**
-     * The aria-label of the OTP Input. Follows the pattern **Input {currentInput} of {totalInputs}, current value {value}** by default.
-     * Тhe default label text when the current input is 1, and the total number of inputs is 4 will be
-     * **Input 1 of 4, current value null**.
+     * The aria-label of the OTP Input fields. Follows the pattern **Digit {currentInput} of {totalInputs}** by default.
+     * The default label text when the current input is 1 and the total number of inputs is 6 will be
+     * **Digit 1 of 6**.
      *
-     * The message consists of several parts - the current input number, the total number of inputs, the current value and a localizable string.
-     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input,
-     * total number of inputs and current value. The `{currentInput}`, `{totalInputs}` and `{currentValue}` placeholders will be
+     * The message consists of two parts — the current input number and the total number of inputs.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input
+     * and total number of inputs. The `{currentInput}` and `{totalInputs}` placeholders will be
      * replaced internally with the respective actual values.
      */
     ariaLabel;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: OTPInputMessages, isStandalone: true, selector: "kendo-otpinput-messages-base", inputs: { ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: OTPInputMessages, isStandalone: true, selector: "kendo-otpinput-messages-base", inputs: { ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputMessages, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-otpinput-messages-base'
@@ -18394,15 +18487,15 @@ class LocalizedOTPInputMessagesDirective extends OTPInputMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedOTPInputMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedOTPInputMessagesDirective, isStandalone: true, selector: "[kendoOTPInputLocalizedMessages]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedOTPInputMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: LocalizedOTPInputMessagesDirective, isStandalone: true, selector: "[kendoOTPInputLocalizedMessages]", providers: [
             {
                 provide: OTPInputMessages,
                 useExisting: forwardRef(() => LocalizedOTPInputMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedOTPInputMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: LocalizedOTPInputMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -18603,6 +18696,9 @@ class OTPInputComponent {
      */
     onBlur = new EventEmitter();
     wrapperClass = true;
+    get disabledClass() {
+        return this.disabled;
+    }
     get invalidClass() {
         return this.isControlInvalid;
     }
@@ -19121,8 +19217,8 @@ class OTPInputComponent {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
             {
@@ -19130,11 +19226,12 @@ class OTPInputComponent {
                 useExisting: forwardRef(() => OTPInputComponent),
                 multi: true
             },
-            { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) }
+            { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) },
+            provideComponentName('otpinput')
         ], viewQueries: [{ propertyName: "inputFields", predicate: TextBoxComponent, descendants: true }, { propertyName: "inputGroups", predicate: ["inputGroup"], descendants: true }], exportAs: ["kendoOTPInput"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoOTPInputLocalizedMessages
           i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
-          ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+          ariaLabel="Digit [[currentInput]] of [[totalInputs]]"
         ></ng-container>
         <ng-container
           kendoInputSharedEvents
@@ -19193,7 +19290,7 @@ class OTPInputComponent {
           <ng-container>
         `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { 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: "component", type: OTPInputSeparatorComponent, selector: "kendo-otpinput-separator", inputs: ["separator"], exportAs: ["kendoOTPInputSeparator"] }, { kind: "directive", type: LocalizedOTPInputMessagesDirective, selector: "[kendoOTPInputLocalizedMessages]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoOTPInput',
@@ -19205,13 +19302,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             useExisting: forwardRef(() => OTPInputComponent),
                             multi: true
                         },
-                        { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) }
+                        { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) },
+                        provideComponentName('otpinput')
                     ],
                     selector: 'kendo-otpinput',
                     template: `
         <ng-container kendoOTPInputLocalizedMessages
           i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
-          ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+          ariaLabel="Digit [[currentInput]] of [[totalInputs]]"
         ></ng-container>
         <ng-container
           kendoInputSharedEvents
@@ -19309,6 +19407,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-otp']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
             }], invalidClass: [{
                 type: HostBinding,
                 args: ['class.k-invalid']
@@ -19340,15 +19441,15 @@ class OTPInputCustomMessagesComponent extends OTPInputMessages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: OTPInputCustomMessagesComponent, isStandalone: true, selector: "kendo-otpinput-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: OTPInputCustomMessagesComponent, isStandalone: true, selector: "kendo-otpinput-messages", providers: [
             {
                 provide: OTPInputMessages,
                 useExisting: forwardRef(() => OTPInputCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -19407,7 +19508,7 @@ class FormComponent {
      */
     licenseMessage;
     get formClass() {
-        return 'k-form k-form-md';
+        return 'k-form';
     }
     get horizontalClass() {
         return this.orientation === 'horizontal';
@@ -19483,8 +19584,8 @@ class FormComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: FormService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass", "attr.dir": "this.direction" } }, providers: [
             FormService,
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.form' }
@@ -19498,7 +19599,7 @@ class FormComponent {
         }
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoForm',
@@ -19587,10 +19688,10 @@ class FormSeparatorComponent {
             this._previousColSpan = newColSpan;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: FormSeparatorComponent, isStandalone: true, selector: "kendo-form-separator", inputs: { colSpan: "colSpan" }, host: { properties: { "class.k-form-separator": "this.hostClass" } }, exportAs: ["kendoFormSeparator"], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormSeparatorComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: FormSeparatorComponent, isStandalone: true, selector: "kendo-form-separator", inputs: { colSpan: "colSpan" }, host: { properties: { "class.k-form-separator": "this.hostClass" } }, exportAs: ["kendoFormSeparator"], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFormSeparator',
@@ -19730,8 +19831,8 @@ class FormFieldSetComponent {
             this.cdr.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FormService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FormService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.formfieldset' }
         ], exportAs: ["kendoFormFieldSet"], usesOnChanges: true, ngImport: i0, template: `
@@ -19745,7 +19846,7 @@ class FormFieldSetComponent {
         </div>
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldSetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFormFieldSet',
@@ -20187,11 +20288,11 @@ const KENDO_INPUTS = [
  * ```
  */
 class InputsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i8.SeparatorComponent, NumericTextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent, i8.SeparatorComponent, FormComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i8.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [TextBoxComponent, i8.SeparatorComponent, NumericTextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent, i8.SeparatorComponent, FormComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i8.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_INPUTS, ...KENDO_ADORNMENTS],
@@ -20223,11 +20324,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class SliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SliderModule, imports: [SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective], exports: [SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SliderComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: SliderModule, imports: [SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective], exports: [SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SliderComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SLIDER],
@@ -20259,11 +20360,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class RangeSliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderModule, imports: [RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective], exports: [RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderModule, providers: [ResizeBatchService], imports: [RangeSliderComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderModule, imports: [RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective], exports: [RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderModule, providers: [ResizeBatchService], imports: [RangeSliderComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_RANGESLIDER],
@@ -20294,11 +20395,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class SwitchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SwitchModule, imports: [SwitchComponent, SwitchCustomMessagesComponent], exports: [SwitchComponent, SwitchCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchModule, providers: [ResizeBatchService] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: SwitchModule, imports: [SwitchComponent, SwitchCustomMessagesComponent], exports: [SwitchComponent, SwitchCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchModule, providers: [ResizeBatchService] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SWITCH],
@@ -20329,11 +20430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class OTPInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: OTPInputModule, imports: [OTPInputComponent, OTPInputCustomMessagesComponent], exports: [OTPInputComponent, OTPInputCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputModule, providers: [IconsService], imports: [OTPInputComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: OTPInputModule, imports: [OTPInputComponent, OTPInputCustomMessagesComponent], exports: [OTPInputComponent, OTPInputCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputModule, providers: [IconsService], imports: [OTPInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OTPInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OTPInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_OTPINPUT],
@@ -20364,11 +20465,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class NumericTextBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxModule, imports: [NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxModule, providers: [IconsService], imports: [NumericTextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxModule, imports: [NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxModule, providers: [IconsService], imports: [NumericTextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NumericTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: NumericTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_NUMERICTEXTBOX, ...KENDO_ADORNMENTS],
@@ -20399,11 +20500,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class MaskedTextBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxModule, imports: [MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxModule, imports: [i8.SeparatorComponent, i8.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxModule, imports: [MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [MaskedTextBoxComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxModule, imports: [i8.SeparatorComponent, i8.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_MASKEDTEXTBOX, ...KENDO_ADORNMENTS],
@@ -20433,11 +20534,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class TextBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TextBoxModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxModule, providers: [IconsService], imports: [TextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: TextBoxModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, InputSpacerComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxModule, providers: [IconsService], imports: [TextBoxComponent, i8.SeparatorComponent, i8.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TEXTBOX, ...KENDO_ADORNMENTS],
@@ -20468,11 +20569,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class TextAreaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TextAreaModule, imports: [TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaModule, imports: [i8.SeparatorComponent, i8.SeparatorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: TextAreaModule, imports: [TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent], exports: [TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i8.SeparatorComponent, i8.PrefixTemplateDirective, i8.SuffixTemplateDirective, i8.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaModule, imports: [i8.SeparatorComponent, i8.SeparatorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TextAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: TextAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TEXTAREA, ...KENDO_ADORNMENTS],
@@ -20502,11 +20603,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class CheckBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxModule, imports: [CheckBoxComponent, CheckBoxDirective], exports: [CheckBoxComponent, CheckBoxDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxModule, imports: [CheckBoxComponent, CheckBoxDirective], exports: [CheckBoxComponent, CheckBoxDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_CHECKBOX],
@@ -20537,11 +20638,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class RadioButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonModule, imports: [RadioButtonComponent, RadioButtonDirective], exports: [RadioButtonComponent, RadioButtonDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonModule, imports: [RadioButtonComponent, RadioButtonDirective], exports: [RadioButtonComponent, RadioButtonDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadioButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RadioButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_RADIOBUTTON],
@@ -20591,11 +20692,11 @@ class SwitchFocusEvent {
  * ```
  */
 class ColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerModule, imports: [ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent], exports: [ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService, AdaptiveService], imports: [ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerModule, imports: [ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent], exports: [ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService, AdaptiveService], imports: [ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],
@@ -20626,11 +20727,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class FormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FormFieldModule, imports: [FormFieldComponent, HintComponent, ErrorComponent], exports: [FormFieldComponent, HintComponent, ErrorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: FormFieldModule, imports: [FormFieldComponent, HintComponent, ErrorComponent], exports: [FormFieldComponent, HintComponent, ErrorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_FORMFIELD],
@@ -20660,11 +20761,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class FormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: FormModule, imports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent], exports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormModule, imports: [FormComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: FormModule, imports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent], exports: [FormComponent, FormSeparatorComponent, FormFieldSetComponent, FormFieldComponent, HintComponent, ErrorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormModule, imports: [FormComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_FORM],
@@ -20694,11 +20795,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class SignatureModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SignatureModule, imports: [SignatureComponent, SignatureCustomMessagesComponent], exports: [SignatureComponent, SignatureCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [SignatureComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: SignatureModule, imports: [SignatureComponent, SignatureCustomMessagesComponent], exports: [SignatureComponent, SignatureCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [SignatureComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SignatureModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SignatureModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SIGNATURE],
@@ -20729,11 +20830,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class RatingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RatingModule, imports: [RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective], exports: [RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingModule, providers: [IconsService], imports: [RatingComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.27", ngImport: i0, type: RatingModule, imports: [RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective], exports: [RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingModule, providers: [IconsService], imports: [RatingComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RatingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: RatingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_RATING],