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

package/fesm2020/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, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon, starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
@@ -537,8 +537,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/'
 };
 
@@ -3760,6 +3760,7 @@ class NumericTextBoxComponent {
         this.ngTouched = noop$1;
         this.ngValidatorChange = noop$1;
         this.domEvents = [];
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -4018,9 +4019,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
@@ -4181,6 +4222,12 @@ class NumericTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -4511,9 +4558,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 },
@@ -4539,9 +4590,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"
@@ -4551,10 +4602,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,
@@ -4563,8 +4615,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">
@@ -4643,9 +4694,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"
@@ -4655,10 +4706,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,
@@ -4667,8 +4719,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">
@@ -4763,6 +4814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onFocus: [{
@@ -5406,6 +5459,7 @@ class MaskedTextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -5555,6 +5609,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;
     }
@@ -5737,6 +5828,12 @@ class MaskedTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && this.control.invalid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -5841,9 +5938,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,
@@ -5872,18 +5973,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]="{
@@ -5936,18 +6037,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]="{
@@ -6008,6 +6109,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']
@@ -6821,6 +6924,7 @@ class TextBoxComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -6937,9 +7041,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();
@@ -7181,6 +7315,12 @@ 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);
@@ -7238,9 +7378,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' },
         {
@@ -7279,6 +7422,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,
@@ -7370,6 +7514,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,
@@ -7466,6 +7611,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], maxlength: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], inputFocus: [{
@@ -7977,6 +8124,7 @@ class TextAreaComponent extends TextFieldsBase {
         this._rounded = 'medium';
         this._fillMode = 'solid';
         this._adornmentsOrientation = 'horizontal';
+        this.parsedAttributes = {};
         /**
          * @hidden
          */
@@ -8036,6 +8184,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.
@@ -8119,6 +8283,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();
@@ -8217,6 +8404,12 @@ class TextAreaComponent extends TextFieldsBase {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.control?.control);
+    }
     /**
      * @hidden
      */
@@ -8346,9 +8539,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' },
         {
@@ -8370,14 +8567,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"
@@ -8428,14 +8626,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"
@@ -8475,6 +8674,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: [{
@@ -9402,7 +9603,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: [{

package/maskedtextbox/maskedtextbox.component.d.ts

@@ -145,6 +145,17 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      */
     set tabIndex(tabIndex: number);
     get tabIndex(): number;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes: {
+        [key: string]: string;
+    });
+    get inputAttributes(): {
+        [key: string]: string;
+    };
+    private get defaultAttributes();
+    private get mutableAttributes();
     /**
      * Fires each time the user focuses the MaskedTextBox component.
      *
@@ -225,6 +236,8 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     private _size;
     private _rounded;
     private _fillMode;
+    private _inputAttributes;
+    private parsedAttributes;
     constructor(service: MaskingService, renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, injector: Injector, changeDetector: ChangeDetectorRef, rtl: boolean);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -320,6 +333,10 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      * @hidden
      */
     get isControlInvalid(): boolean;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     /**
      * @hidden
      */
@@ -343,6 +360,7 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     set focused(value: boolean);
     private normalizeValue;
     private handleClasses;
+    private setInputAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<MaskedTextBoxComponent, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MaskedTextBoxComponent, "kendo-maskedtextbox", ["kendoMaskedTextBox"], { "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"; }, { "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "valueChange": "valueChange"; }, ["suffixTemplate", "prefixTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaskedTextBoxComponent, "kendo-maskedtextbox", ["kendoMaskedTextBox"], { "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"; }, { "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "valueChange": "valueChange"; }, ["suffixTemplate", "prefixTemplate"], never>;
 }