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

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

@@ -10,7 +10,7 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i4 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon, starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
@@ -538,8 +538,8 @@ 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/'
 };
 
@@ -3767,6 +3767,7 @@ class NumericTextBoxComponent {
         this.ngTouched = noop$1;
         this.ngValidatorChange = noop$1;
         this.domEvents = [];
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -4025,9 +4026,49 @@ 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
@@ -4188,6 +4229,13 @@ class NumericTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        var _a;
+        return isControlRequired((_a = this.control) === null || _a === void 0 ? void 0 : _a.control);
+    }
     /**
      * @hidden
      */
@@ -4518,9 +4566,13 @@ 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$1.IntlService }, { token: i0.Renderer2 }, { token: i1.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 },
@@ -4546,9 +4598,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"
@@ -4558,10 +4610,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,
@@ -4570,8 +4623,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">
@@ -4650,9 +4702,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"
@@ -4662,10 +4714,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,
@@ -4674,8 +4727,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">
@@ -4770,6 +4822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onFocus: [{
@@ -5413,6 +5467,7 @@ class MaskedTextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -5562,6 +5617,43 @@ 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;
     }
@@ -5744,6 +5836,13 @@ class MaskedTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && this.control.invalid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        var _a;
+        return isControlRequired((_a = this.control) === null || _a === void 0 ? void 0 : _a.control);
+    }
     /**
      * @hidden
      */
@@ -5848,9 +5947,13 @@ 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: 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,
@@ -5879,18 +5982,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]="{
@@ -5943,18 +6046,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]="{
@@ -6017,6 +6120,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']
@@ -6834,6 +6939,7 @@ class TextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -6950,9 +7056,39 @@ 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();
@@ -7194,6 +7330,13 @@ class TextBoxComponent {
             this._isFocused = value;
         }
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        var _a;
+        return isControlRequired((_a = this.control) === null || _a === void 0 ? void 0 : _a.control);
+    }
     setSelection(start, end) {
         if (this.isFocused) {
             invokeElementMethod(this.input, 'setSelectionRange', start, end);
@@ -7251,9 +7394,12 @@ 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' },
         {
@@ -7292,6 +7438,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,
@@ -7383,6 +7530,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,
@@ -7479,6 +7627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], inputFocus: [{
@@ -7990,6 +8140,7 @@ class TextAreaComponent extends TextFieldsBase {
         this._rounded = 'medium';
         this._fillMode = 'solid';
         this._adornmentsOrientation = 'horizontal';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -8049,6 +8200,22 @@ 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.
@@ -8132,6 +8299,29 @@ 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();
@@ -8230,6 +8420,13 @@ class TextAreaComponent extends TextFieldsBase {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        var _a;
+        return isControlRequired((_a = this.control) === null || _a === void 0 ? void 0 : _a.control);
+    }
     /**
      * @hidden
      */
@@ -8359,9 +8556,13 @@ 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' },
         {
@@ -8383,14 +8584,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"
@@ -8441,14 +8643,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"
@@ -8488,6 +8691,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: [{
@@ -9715,7 +9920,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: 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: 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: 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{