@progress/kendo-angular-inputs 15.4.0 → 15.5.0-develop.1

package/esm2020/colorpicker/color-input.component.mjs

@@ -273,7 +273,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.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"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/maskedtextbox/maskedtextbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef, ContentChild } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { guid, hasObservers, isChanged, KendoInput, PrefixTemplateDirective, SuffixTemplateDirective } from '@progress/kendo-angular-common';
+import { guid, hasObservers, isChanged, isControlRequired, isObjectPresent, KendoInput, parseAttributes, PrefixTemplateDirective, removeHTMLAttributes, setHTMLAttributes, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { RTL } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -167,6 +167,7 @@ export class MaskedTextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -316,6 +317,43 @@ export class MaskedTextBoxComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
+    get defaultAttributes() {
+        return {
+            id: this.focusableId,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            tabindex: this.tabIndex,
+            'aria-placeholder': this.mask,
+            'aria-invalid': this.isControlInvalid,
+            title: this.title,
+            required: this.isControlRequired ? '' : null
+        };
+    }
+    get mutableAttributes() {
+        return {
+            autocomplete: 'off',
+            autocorrect: 'off',
+            autocapitalize: 'off',
+            spellcheck: 'false'
+        };
+    }
+    ;
     get hostDisabledClass() {
         return this.disabled;
     }
@@ -498,6 +536,12 @@ export class MaskedTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && this.control.invalid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -602,9 +646,13 @@ export class MaskedTextBoxComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    setInputAttributes() {
+        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
+    }
 }
 MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: i1.MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, 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" }, 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-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, 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-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
         MaskingService,
         {
             multi: true,
@@ -633,18 +681,18 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </ng-template>
             </span>
             <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
-            <input type="text"
-                #input
+            <input #input
+                class="k-input-inner"
                 autocomplete="off"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
-                class="k-input-inner"
                 [id]="focusableId"
                 [tabindex]="tabIndex"
                 [attr.title]="title"
                 [attr.aria-placeholder]="mask"
                 [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [kendoEventsOutsideAngular]="{
@@ -697,18 +745,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </ng-template>
             </span>
             <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
-            <input type="text"
-                #input
+            <input #input
+                class="k-input-inner"
                 autocomplete="off"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
-                class="k-input-inner"
                 [id]="focusableId"
                 [tabindex]="tabIndex"
                 [attr.title]="title"
                 [attr.aria-placeholder]="mask"
                 [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [kendoEventsOutsideAngular]="{
@@ -769,6 +817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], onFocus: [{
                 type: Output,
                 args: ['focus']

package/esm2020/numerictextbox/numerictextbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector, ContentChild } from '@angular/core';
-import { anyChanged, hasObservers, Keys, guid, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
+import { anyChanged, hasObservers, Keys, guid, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes } from '@progress/kendo-angular-common';
 import { areSame, getStylingClasses, requiresZoneOnBlur } from '../common/utils';
 import { invokeElementMethod } from '../common/dom-utils';
 import { add, toFixedPrecision, limitPrecision } from '../common/math';
@@ -166,6 +166,7 @@ export class NumericTextBoxComponent {
         this.ngTouched = noop;
         this.ngValidatorChange = noop;
         this.domEvents = [];
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -424,9 +425,49 @@ export class NumericTextBoxComponent {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.numericInput.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
     get disableClass() {
         return this.disabled;
     }
+    get defaultAttributes() {
+        return {
+            id: this.focusableId,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            tabindex: this.tabIndex,
+            placeholder: this.placeholder,
+            title: this.title,
+            maxlength: this.maxlength,
+            'aria-valuemin': this.min,
+            'aria-valuemax': this.max,
+            'aria-valuenow': this.value,
+            required: this.isControlRequired ? '' : null,
+            'aria-invalid': this.isControlInvalid
+        };
+    }
+    get mutableAttributes() {
+        return {
+            autocomplete: 'off',
+            autocorrect: 'off',
+            role: 'spinbutton'
+        };
+    }
+    ;
     ngOnInit() {
         this.subscriptions = this.localizationService
             .changes
@@ -587,6 +628,12 @@ export class NumericTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -917,9 +964,13 @@ export class NumericTextBoxComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    setInputAttributes() {
+        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        setHTMLAttributes(attributesToRender, this.renderer, this.numericInput.nativeElement);
+    }
 }
 NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, 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" }, 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", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
+NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, 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", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
@@ -945,9 +996,9 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </ng-template>
             </span>
             <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
-            <input
-                role="spinbutton"
+            <input #numericInput
                 class="k-input-inner"
+                role="spinbutton"
                 autocomplete="off"
                 autocorrect="off"
                 [id]="focusableId"
@@ -957,10 +1008,11 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [attr.title]="title"
                 [attr.placeholder]="placeholder"
                 [attr.maxLength]="maxlength"
-                [attr.aria-invalid]="isControlInvalid"
                 [tabindex]="tabIndex"
                 [disabled]="disabled"
                 [readonly]="readonly"
+                [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [kendoEventsOutsideAngular]="{
                     mousedown: handleMouseDown,
                     dragenter: handleDragEnter,
@@ -969,8 +1021,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     focus: handleInputFocus,
                     blur: handleInputBlur,
                     paste: handlePaste
-                }"
-                #numericInput />
+                }"/>
             <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
             <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
                 <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
@@ -1049,9 +1100,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </ng-template>
             </span>
             <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
-            <input
-                role="spinbutton"
+            <input #numericInput
                 class="k-input-inner"
+                role="spinbutton"
                 autocomplete="off"
                 autocorrect="off"
                 [id]="focusableId"
@@ -1061,10 +1112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.title]="title"
                 [attr.placeholder]="placeholder"
                 [attr.maxLength]="maxlength"
-                [attr.aria-invalid]="isControlInvalid"
                 [tabindex]="tabIndex"
                 [disabled]="disabled"
                 [readonly]="readonly"
+                [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [kendoEventsOutsideAngular]="{
                     mousedown: handleMouseDown,
                     dragenter: handleDragEnter,
@@ -1073,8 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     focus: handleInputFocus,
                     blur: handleInputBlur,
                     paste: handlePaste
-                }"
-                #numericInput />
+                }"/>
             <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
             <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
                 <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
@@ -1169,6 +1220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onFocus: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1712142368,
-    version: '15.4.0',
+    publishDate: 1712152346,
+    version: '15.5.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/textarea/textarea.component.mjs

@@ -6,7 +6,7 @@ import { Component, HostBinding, Input, Output, ElementRef, EventEmitter, NgZone
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { KendoInput, guid, isDocumentAvailable, hasObservers } from '@progress/kendo-angular-common';
+import { KendoInput, guid, isDocumentAvailable, hasObservers, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { TextFieldsBase } from '../text-fields-common/text-fields-base';
 import { areSame, isPresent, getStylingClasses } from '../common/utils';
@@ -132,6 +132,7 @@ export class TextAreaComponent extends TextFieldsBase {
         this._rounded = 'medium';
         this._fillMode = 'solid';
         this._adornmentsOrientation = 'horizontal';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -191,6 +192,22 @@ export class TextAreaComponent extends TextFieldsBase {
     get flow() {
         return this._flow;
     }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
     /**
      * Specifies the orientation of the TextArea adornments. This property is used in order to specify
      * the adornments' position relative to themselves.
@@ -274,6 +291,29 @@ export class TextAreaComponent extends TextFieldsBase {
     get fillMode() {
         return this._fillMode;
     }
+    get defaultAttributes() {
+        return {
+            id: this.focusableId,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            tabindex: this.disabled ? undefined : this.tabIndex,
+            placeholder: this.placeholder,
+            title: this.title,
+            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'
+        };
+    }
+    ;
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.handleFlow();
@@ -372,6 +412,12 @@ export class TextAreaComponent extends TextFieldsBase {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -501,9 +547,13 @@ export class TextAreaComponent extends TextFieldsBase {
         const element = this.input.nativeElement;
         this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
     }
+    setInputAttributes() {
+        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
+    }
 }
 TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", 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-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", 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-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
         {
@@ -525,14 +575,15 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 *ngIf="prefix && showPrefixSeparator"
                 [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <textarea
-                #input
+            <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"
-                class="k-input-inner !k-overflow-auto"
-                [ngClass]="resizableClass"
+                [attr.aria-invalid]="isControlInvalid"
                 [id]="focusableId"
+                [attr.required]="isControlRequired ? '' : null"
+                [ngClass]="resizableClass"
                 [value]="value"
                 [attr.placeholder]="placeholder"
                 [disabled]="disabled"
@@ -583,14 +634,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 *ngIf="prefix && showPrefixSeparator"
                 [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <textarea
-                #input
+            <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"
-                class="k-input-inner !k-overflow-auto"
-                [ngClass]="resizableClass"
+                [attr.aria-invalid]="isControlInvalid"
                 [id]="focusableId"
+                [attr.required]="isControlRequired ? '' : null"
+                [ngClass]="resizableClass"
                 [value]="value"
                 [attr.placeholder]="placeholder"
                 [disabled]="disabled"
@@ -630,6 +682,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.\!k-flex-row']
             }], flow: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], adornmentsOrientation: [{
                 type: Input
             }], rows: [{

package/esm2020/textbox/textbox.component.mjs

@@ -10,7 +10,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { invokeElementMethod } from '../common/dom-utils';
 import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
-import { guid, hasObservers, KendoInput, isSafari, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
+import { guid, hasObservers, KendoInput, isSafari, SuffixTemplateDirective, PrefixTemplateDirective, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes } from '@progress/kendo-angular-common';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -171,6 +171,7 @@ export class TextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -287,9 +288,39 @@ export class TextBoxComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
     get disabledClass() {
         return this.disabled;
     }
+    get defaultAttributes() {
+        return {
+            id: this.focusableId,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            tabindex: this.disabled ? undefined : this.tabindex,
+            type: this.type,
+            placeholder: this.placeholder,
+            title: this.title,
+            maxlength: this.maxlength,
+            'aria-invalid': this.isControlInvalid,
+            required: this.isControlRequired ? '' : null
+        };
+    }
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
         this.checkClearButton();
@@ -531,6 +562,12 @@ export class TextBoxComponent {
             this._isFocused = value;
         }
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     setSelection(start, end) {
         if (this.isFocused) {
             invokeElementMethod(this.input, 'setSelectionRange', start, end);
@@ -588,9 +625,12 @@ export class TextBoxComponent {
         this.prefix = this.textBoxPrefixTemplate.first || this.prefixTemplate;
         this.suffix = this.textBoxSuffixTemplate.first || this.suffixTemplate;
     }
+    setInputAttributes() {
+        setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
+    }
 }
 TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
-TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, 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" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
         {
@@ -629,6 +669,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [attr.title]="title"
                 [attr.maxlength]="maxlength"
                 [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [kendoEventsOutsideAngular]="{
                     focus: handleInputFocus,
                     blur: handleInputBlur,
@@ -720,6 +761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.title]="title"
                 [attr.maxlength]="maxlength"
                 [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
                 [kendoEventsOutsideAngular]="{
                     focus: handleInputFocus,
                     blur: handleInputBlur,
@@ -816,6 +858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], inputFocus: [{