@progress/kendo-angular-inputs 9.1.0-sig.202208261530 → 10.0.0-dev.202209071528

package/esm2015/maskedtextbox/maskedtextbox.component.js

@@ -449,6 +449,12 @@ export class MaskedTextBoxComponent {
         }
         return null;
     }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
     /**
      * @hidden
      */
@@ -574,6 +580,8 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [id]="focusableId"
             [tabindex]="tabIndex"
             [attr.title]="title"
+            [attr.aria-placeholder]="mask"
+            [attr.aria-invalid]="isControlInvalid"
             [disabled]="disabled"
             [readonly]="readonly"
             [kendoEventsOutsideAngular]="{
@@ -618,6 +626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [id]="focusableId"
             [tabindex]="tabIndex"
             [attr.title]="title"
+            [attr.aria-placeholder]="mask"
+            [attr.aria-invalid]="isControlInvalid"
             [disabled]="disabled"
             [readonly]="readonly"
             [kendoEventsOutsideAngular]="{

package/esm2015/numerictextbox/numerictextbox.component.js

@@ -524,6 +524,12 @@ export class NumericTextBoxComponent {
     get decrementTitle() {
         return this.localizationService.get('decrement');
     }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
     get decimalSeparator() {
         const numberSymbols = this.intl.numberSymbols();
         return numberSymbols.decimal;
@@ -865,30 +871,31 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         >
         </ng-container>
             <input
-            role="spinbutton"
-            class="k-input-inner"
-            autocomplete="off"
-            autocorrect="off"
-            [id]="focusableId"
-            [attr.aria-valuemin]="min"
-            [attr.aria-valuemax]="max"
-            [attr.aria-valuenow]="value"
-            [attr.title]="title"
-            [attr.placeholder]="placeholder"
-            [attr.maxLength]="maxlength"
-            [tabindex]="tabIndex"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                mousedown: handleMouseDown,
-                dragenter: handleDragEnter,
-                keydown: handleKeyDown,
-                input: handleInput,
-                focus: handleFocus,
-                blur: handleBlur,
-                paste: handlePaste
-            }"
-            #numericInput />
+                role="spinbutton"
+                class="k-input-inner"
+                autocomplete="off"
+                autocorrect="off"
+                [id]="focusableId"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="value"
+                [attr.title]="title"
+                [attr.placeholder]="placeholder"
+                [attr.maxLength]="maxlength"
+                [attr.aria-invalid]="isControlInvalid"
+                [tabindex]="tabIndex"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: handleMouseDown,
+                    dragenter: handleDragEnter,
+                    keydown: handleKeyDown,
+                    input: handleInput,
+                    focus: handleFocus,
+                    blur: handleBlur,
+                    paste: handlePaste
+                }"
+                #numericInput />
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
@@ -940,30 +947,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         >
         </ng-container>
             <input
-            role="spinbutton"
-            class="k-input-inner"
-            autocomplete="off"
-            autocorrect="off"
-            [id]="focusableId"
-            [attr.aria-valuemin]="min"
-            [attr.aria-valuemax]="max"
-            [attr.aria-valuenow]="value"
-            [attr.title]="title"
-            [attr.placeholder]="placeholder"
-            [attr.maxLength]="maxlength"
-            [tabindex]="tabIndex"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                mousedown: handleMouseDown,
-                dragenter: handleDragEnter,
-                keydown: handleKeyDown,
-                input: handleInput,
-                focus: handleFocus,
-                blur: handleBlur,
-                paste: handlePaste
-            }"
-            #numericInput />
+                role="spinbutton"
+                class="k-input-inner"
+                autocomplete="off"
+                autocorrect="off"
+                [id]="focusableId"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="value"
+                [attr.title]="title"
+                [attr.placeholder]="placeholder"
+                [attr.maxLength]="maxlength"
+                [attr.aria-invalid]="isControlInvalid"
+                [tabindex]="tabIndex"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: handleMouseDown,
+                    dragenter: handleDragEnter,
+                    keydown: handleKeyDown,
+                    input: handleInput,
+                    focus: handleFocus,
+                    blur: handleBlur,
+                    paste: handlePaste
+                }"
+                #numericInput />
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1661528130,
+    publishDate: 1662564435,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/signature/signature.component.js

@@ -24,6 +24,7 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
+const DEFAULT_EXPORT_SCALE = 2;
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -129,6 +130,14 @@ export class SignatureComponent {
          * @default 3
          */
         this.popupScale = DEFAULT_POPUP_SCALE;
+        /**
+         * The scale factor for the exported image.
+         *
+         * The Signature width and height will be multiplied by the scale when converting the signature to an image.
+         *
+         * @default 2
+         */
+        this.exportScale = DEFAULT_EXPORT_SCALE;
         /**
          * A flag indicating whether the dotted line should be displayed in the background.
          *
@@ -229,19 +238,29 @@ export class SignatureComponent {
     get maximizeTitle() {
         return this.getMessage('maximize');
     }
+    /**
+     * @hidden
+     */
+    get baseWidth() {
+        return this.width || this.element.nativeElement.offsetWidth;
+    }
+    /**
+     * @hidden
+     */
+    get baseHeight() {
+        return this.height || this.element.nativeElement.offsetHeight;
+    }
     /**
      * @hidden
      */
     get popupWidth() {
-        const baseWidth = this.width || this.element.nativeElement.offsetWidth;
-        return baseWidth * this.popupScale;
+        return this.baseWidth * this.popupScale;
     }
     /**
      * @hidden
      */
     get popupHeight() {
-        const baseHeight = this.height || this.element.nativeElement.offsetHeight;
-        return baseHeight * this.popupScale;
+        return this.baseHeight * this.popupScale;
     }
     /**
      * @hidden
@@ -336,7 +355,10 @@ export class SignatureComponent {
      */
     onValueChange() {
         return __awaiter(this, void 0, void 0, function* () {
-            const value = yield this.instance.exportImage();
+            const value = yield this.instance.exportImage({
+                width: this.baseWidth * this.exportScale,
+                height: this.baseHeight * this.exportScale
+            });
             this._value = value;
             this.cd.markForCheck();
             this.ngZone.run(() => {
@@ -351,6 +373,7 @@ export class SignatureComponent {
     onDialogValueChange(value) {
         this.value = value;
         this.valueChange.emit(value);
+        this.notifyNgTouched();
         this.notifyNgChanged(value);
     }
     /**
@@ -400,11 +423,18 @@ export class SignatureComponent {
      * @hidden
      */
     onMaximize() {
-        const args = new SignatureOpenEvent();
-        this.open.next(args);
-        if (!args.isDefaultPrevented()) {
-            this.isOpen = true;
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            const args = new SignatureOpenEvent();
+            this.open.next(args);
+            if (!args.isDefaultPrevented()) {
+                this.popupValue = yield this.instance.exportImage({
+                    width: this.popupWidth * this.exportScale,
+                    height: this.popupHeight * this.exportScale
+                });
+                this.isOpen = true;
+                this.cd.detectChanges();
+            }
+        });
     }
     /**
      * @hidden
@@ -417,7 +447,7 @@ export class SignatureComponent {
         this.hostClasses.forEach(([name]) => classList.remove(name));
         this.hostClasses = [
             [`k-signature-${SIZE_MAP[this.size || DEFAULT_SIZE]}`, !isNone(this.size)],
-            [`k-signature-${this.fillMode || DEFAULT_FILL_MODE}`, !isNone(this.fillMode)],
+            [`k-input-${this.fillMode || DEFAULT_FILL_MODE}`, !isNone(this.fillMode)],
             [`k-rounded-${ROUNDED_MAP[this.rounded || DEFAULT_ROUNDED]}`, !isNone(this.rounded)]
         ];
         this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
@@ -525,7 +555,7 @@ export class SignatureComponent {
     }
 }
 SignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { 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", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
@@ -546,6 +576,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -556,6 +587,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -578,6 +610,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -595,7 +628,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -607,7 +640,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: i3.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["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"] }], directives: [{ type: i3.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -636,6 +669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMaximize()"
                 [attr.aria-label]="maximizeTitle"
                 [title]="maximizeTitle">
@@ -646,6 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-minimize"
                 icon="window-minimize"
                 fillMode="flat"
+                [size]="size"
                 (click)="onMinimize()"
                 [attr.aria-label]="minimizeTitle"
                 [title]="minimizeTitle">
@@ -668,6 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 class="k-signature-action k-signature-clear"
                 icon="close"
                 fillMode="flat"
+                [size]="size"
                 [attr.aria-label]="clearTitle"
                 [title]="clearTitle"
                 (click)="onClear()" >
@@ -685,7 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [backgroundColor]="backgroundColor"
                 [strokeWidth]="strokeWidth"
                 [smooth]="smooth"
-                [value]="value"
+                [value]="popupValue"
                 (valueChange)="onDialogValueChange($event)"
                 [hideLine]="hideLine"
                 [class.k-signature-maximized]="true"
@@ -752,6 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], popupScale: [{
                 type: Input
+            }], exportScale: [{
+                type: Input
             }], parentLocalization: [{
                 type: Input
             }], hideLine: [{

package/esm2015/signature.module.js

@@ -11,13 +11,13 @@ import { SignatureComponent } from './signature/signature.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the MaskedTextBox component.
+ * definition for the Signature component.
  *
  * @example
  *
  * ```ts-no-run
- * // Import the MaskedTextBox module
- * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
+ * // Import the Signature module
+ * import { SignatureModule } from '@progress/kendo-angular-inputs';
  *
  * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -30,7 +30,7 @@ import * as i0 from "@angular/core";
  * // Define the app module
  * _@NgModule({
  *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
+ *     imports:      [BrowserModule, SignatureModule], // import Signature module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}

package/esm2015/switch/switch.component.js

@@ -277,6 +277,12 @@ export class SwitchComponent {
         this.disabled = isDisabled;
         this.changeDetector.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
     /**
      * @hidden
      */
@@ -430,6 +436,8 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [style.transitionDuration]="initialized ? '200ms' : '0ms'"
             [attr.aria-checked]="checked"
             [attr.tabindex]="(disabled ? undefined : tabIndex)"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
         >
             <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
@@ -480,6 +488,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [style.transitionDuration]="initialized ? '200ms' : '0ms'"
             [attr.aria-checked]="checked"
             [attr.tabindex]="(disabled ? undefined : tabIndex)"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
         >
             <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>

package/esm2015/textarea/textarea.component.js

@@ -366,6 +366,12 @@ export class TextAreaComponent extends TextFieldsBase {
     get resizableClass() {
         return resizeClasses[this.resizable];
     }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
     /**
      * Focuses the TextArea component.
      *
@@ -503,6 +509,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.tabindex]="tabIndex"
             [attr.title]="title"
             [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{
                 focus: handleInputFocus,
                 blur: handleInputBlur,
@@ -543,6 +550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.tabindex]="tabIndex"
             [attr.title]="title"
             [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{
                 focus: handleInputFocus,
                 blur: handleInputBlur,

package/esm2015/textbox/textbox.component.js

@@ -473,6 +473,12 @@ export class TextBoxComponent {
         const { valid, dirty, touched } = this.control;
         return valid && (dirty || touched);
     }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
     /**
      * @hidden
      */
@@ -599,6 +605,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [attr.placeholder]="placeholder"
             [attr.title]="title"
             [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{
                 focus: handleInputFocus,
                 blur: handleInputBlur,
@@ -662,6 +669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.placeholder]="placeholder"
             [attr.title]="title"
             [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
             [kendoEventsOutsideAngular]="{
                 focus: handleInputFocus,
                 blur: handleInputBlur,