@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.2

package/esm2022/slider/slider.component.mjs

@@ -17,7 +17,6 @@ import { guid, isDocumentAvailable, hasObservers, KendoInput, anyChanged, Keys,
 import { SliderBase } from '../sliders-common/slider-base';
 import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 import { SliderTicksComponent } from '../sliders-common/slider-ticks.component';
-import { NgIf } from '@angular/common';
 import { LocalizedSliderMessagesDirective } from './localization/localized-slider-messages.directive';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
@@ -460,42 +459,43 @@ export class SliderComponent extends SliderBase {
         return icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.slider' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
             { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
         ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true, read: ElementRef }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true, read: ElementRef }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
-            i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
-            increment="increment"
-            i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
-            decrement="decrement"
-            i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
-            dragHandle="Drag"
-        >
-        <button
-            kendoButton
-            #decreaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="decreaseButtonArrowIcon"
-            [svgIcon]="decreaseButtonArrowSVGIcon"
-            class="k-button-decrease"
-            [title]="decrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <div
+          i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
+          increment="increment"
+          i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
+          decrement="decrement"
+          i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
+          dragHandle="Drag"
+          >
+          @if (showButtons) {
+            <button
+              kendoButton
+              #decreaseButton
+              type="button"
+              rounded="full"
+              [icon]="decreaseButtonArrowIcon"
+              [svgIcon]="decreaseButtonArrowSVGIcon"
+              class="k-button-decrease"
+              [title]="decrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <div
             #wrap
             class="k-slider-track-wrap"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
-        >
-            <ul kendoSliderTicks
+            >
+            @if (tickPlacement !== 'none') {
+              <ul kendoSliderTicks
                 #ticks
-                *ngIf="tickPlacement !== 'none'"
                 [tickTitle]="title"
                 [vertical]="vertical"
                 [step]="smallStep"
@@ -504,46 +504,48 @@ export class SliderComponent extends SliderBase {
                 [max]="max"
                 [labelTemplate]="labelTemplate?.templateRef"
                 aria-hidden="true"
-            >
-            </ul>
+                >
+              </ul>
+            }
             <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <span #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle k-draghandle-end"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></span>
+              <div #sliderSelection class="k-slider-selection">
+              </div>
+              <span #draghandle
+                role="slider"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="currentValue"
+                [attr.aria-valuetext]="currentValue"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [style.touch-action]="isDisabled ? '' : 'none'"
+                class="k-draghandle k-draghandle-end"
+                [title]="dragHandleMessage"
+                [attr.tabindex]="disabled ? '-1' : tabIndex"
+                [id]="focusableId"
+                kendoDraggable
+                (kendoPress)="ifEnabled(handleDragPress, $event)"
+                (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+              ></span>
             </div>
-        </div>
-        <button
-            kendoButton
-            #increaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="increaseButtonArrowIcon"
-            [svgIcon]="increaseButtonArrowSVGIcon"
-            class="k-button-increase"
-            [title]="incrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+          </div>
+          @if (showButtons) {
+            <button
+              kendoButton
+              #increaseButton
+              type="button"
+              rounded="full"
+              [icon]="increaseButtonArrowIcon"
+              [svgIcon]="increaseButtonArrowSVGIcon"
+              class="k-button-increase"
+              [title]="incrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -558,35 +560,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-slider',
                     template: `
         <ng-container kendoSliderLocalizedMessages
-            i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
-            increment="increment"
-            i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
-            decrement="decrement"
-            i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
-            dragHandle="Drag"
-        >
-        <button
-            kendoButton
-            #decreaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="decreaseButtonArrowIcon"
-            [svgIcon]="decreaseButtonArrowSVGIcon"
-            class="k-button-decrease"
-            [title]="decrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <div
+          i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
+          increment="increment"
+          i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
+          decrement="decrement"
+          i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
+          dragHandle="Drag"
+          >
+          @if (showButtons) {
+            <button
+              kendoButton
+              #decreaseButton
+              type="button"
+              rounded="full"
+              [icon]="decreaseButtonArrowIcon"
+              [svgIcon]="decreaseButtonArrowSVGIcon"
+              class="k-button-decrease"
+              [title]="decrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <div
             #wrap
             class="k-slider-track-wrap"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
-        >
-            <ul kendoSliderTicks
+            >
+            @if (tickPlacement !== 'none') {
+              <ul kendoSliderTicks
                 #ticks
-                *ngIf="tickPlacement !== 'none'"
                 [tickTitle]="title"
                 [vertical]="vertical"
                 [step]="smallStep"
@@ -595,48 +598,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [max]="max"
                 [labelTemplate]="labelTemplate?.templateRef"
                 aria-hidden="true"
-            >
-            </ul>
+                >
+              </ul>
+            }
             <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <span #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle k-draghandle-end"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></span>
+              <div #sliderSelection class="k-slider-selection">
+              </div>
+              <span #draghandle
+                role="slider"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="currentValue"
+                [attr.aria-valuetext]="currentValue"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [style.touch-action]="isDisabled ? '' : 'none'"
+                class="k-draghandle k-draghandle-end"
+                [title]="dragHandleMessage"
+                [attr.tabindex]="disabled ? '-1' : tabIndex"
+                [id]="focusableId"
+                kendoDraggable
+                (kendoPress)="ifEnabled(handleDragPress, $event)"
+                (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+              ></span>
             </div>
-        </div>
-        <button
-            kendoButton
-            #increaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="increaseButtonArrowIcon"
-            [svgIcon]="increaseButtonArrowSVGIcon"
-            class="k-button-increase"
-            [title]="incrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `,
+          </div>
+          @if (showButtons) {
+            <button
+              kendoButton
+              #increaseButton
+              type="button"
+              rounded="full"
+              [icon]="increaseButtonArrowIcon"
+              [svgIcon]="increaseButtonArrowSVGIcon"
+              class="k-button-increase"
+              [title]="incrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
+        `,
                     standalone: true,
-                    imports: [LocalizedSliderMessagesDirective, NgIf, ButtonComponent, EventsOutsideAngularDirective, SliderTicksComponent, DraggableDirective, ResizeSensorComponent]
+                    imports: [LocalizedSliderMessagesDirective, ButtonComponent, EventsOutsideAngularDirective, SliderTicksComponent, DraggableDirective, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
                 type: Input

package/esm2022/sliders-common/slider-ticks.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
 import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
-import { NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -66,51 +66,63 @@ export class SliderTicksComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <li #tickElement *ngFor="let tick of ticks;"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    @for (tick of ticks; track tick) {
+      <li #tickElement
         [ngClass]="tick.classes"
         title="{{ tickTitle(tick.value) }}"
         role="presentation"
-     >
-         <ng-container [ngSwitch]="tick.large">
-            <span class="k-label" *ngSwitchCase="true">
-                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
-                </ng-container>
+        >
+        @switch (tick.large) {
+          @case (true) {
+            <span class="k-label">
+              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+              </ng-container>
             </span>
-            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
-         </ng-container>
-     </li>
-
-     <ng-template #defaultLabel let-value="value">
-        {{ tickTitle(value) }}
-     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          }
+          @case (false) {
+            &nbsp;
+          }
+        }
+      </li>
+    }
+    
+    <ng-template #defaultLabel let-value="value">
+      {{ tickTitle(value) }}
+    </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSliderTicks]',
                     template: `
-    <li #tickElement *ngFor="let tick of ticks;"
+    @for (tick of ticks; track tick) {
+      <li #tickElement
         [ngClass]="tick.classes"
         title="{{ tickTitle(tick.value) }}"
         role="presentation"
-     >
-         <ng-container [ngSwitch]="tick.large">
-            <span class="k-label" *ngSwitchCase="true">
-                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
-                </ng-container>
+        >
+        @switch (tick.large) {
+          @case (true) {
+            <span class="k-label">
+              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+              </ng-container>
             </span>
-            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
-         </ng-container>
-     </li>
-
-     <ng-template #defaultLabel let-value="value">
-        {{ tickTitle(value) }}
-     </ng-template>
-  `,
+          }
+          @case (false) {
+            &nbsp;
+          }
+        }
+      </li>
+    }
+    
+    <ng-template #defaultLabel let-value="value">
+      {{ tickTitle(value) }}
+    </ng-template>
+    `,
                     standalone: true,
-                    imports: [NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet]
+                    imports: [NgClass, NgTemplateOutlet]
                 }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,

package/esm2022/textarea/textarea.component.mjs

@@ -16,7 +16,7 @@ import { packageMetadata } from '../package-metadata';
 import { TextAreaPrefixComponent } from './textarea-prefix.component';
 import { TextAreaSuffixComponent } from './textarea-suffix.component';
 import { InputSeparatorComponent } from '../shared/input-separator.component';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { SharedInputEventsDirective } from '../shared/shared-events.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -559,7 +559,7 @@ export class TextAreaComponent extends TextFieldsBase {
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextAreaComponent, isStandalone: true, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", inputAttributes: "inputAttributes", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", maxResizableRows: "maxResizableRows", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-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' },
             {
@@ -570,48 +570,50 @@ export class TextAreaComponent extends TextFieldsBase {
             { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
         ], queries: [{ propertyName: "prefix", first: true, predicate: TextAreaPrefixComponent, descendants: true }, { propertyName: "suffix", first: true, predicate: TextAreaSuffixComponent, descendants: true }], exportAs: ["kendoTextArea"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
-            kendoInputSharedEvents
-            [hostElement]="hostElement"
-            [(isFocused)]="isFocused"
-            (handleBlur)="handleBlur()"
-            (onFocus)="handleFocus()"
-        >
-            <ng-content select="kendo-textarea-prefix"></ng-content>
+          kendoInputSharedEvents
+          [hostElement]="hostElement"
+          [(isFocused)]="isFocused"
+          (handleBlur)="handleBlur()"
+          (onFocus)="handleFocus()"
+          >
+          <ng-content select="kendo-textarea-prefix"></ng-content>
+          @if (prefix && showPrefixSeparator) {
             <kendo-input-separator
-                *ngIf="prefix && showPrefixSeparator"
-                [orientation]="separatorOrientation"
+              [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <textarea #input
-                class="k-input-inner !k-overflow-auto"
-                [attr.aria-multiline]="true"
-                [attr.aria-disabled]="disabled ? true : undefined"
-                [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-invalid]="isControlInvalid"
-                [id]="focusableId"
-                [attr.required]="isControlRequired ? '' : null"
-                [ngClass]="resizableClass"
-                [value]="value"
-                [attr.placeholder]="placeholder"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [attr.rows]="rows"
-                [attr.cols]="cols"
-                [attr.tabindex]="tabIndex"
-                [attr.title]="title"
-                [attr.maxlength]="maxlength"
-                [attr.aria-invalid]="isControlInvalid"
+          }
+          <textarea #input
+            class="k-input-inner !k-overflow-auto"
+            [attr.aria-multiline]="true"
+            [attr.aria-disabled]="disabled ? true : undefined"
+            [attr.aria-readonly]="readonly ? true : undefined"
+            [attr.aria-invalid]="isControlInvalid"
+            [id]="focusableId"
+            [attr.required]="isControlRequired ? '' : null"
+            [ngClass]="resizableClass"
+            [value]="value"
+            [attr.placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.rows]="rows"
+            [attr.cols]="cols"
+            [attr.tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
                 [kendoEventsOutsideAngular]="{
                     focus: handleInputFocus,
                     blur: handleInputBlur,
                     input: handleInput}"
-            ></textarea>
+          ></textarea>
+          @if (suffix && showSuffixSeparator) {
             <kendo-input-separator
-                *ngIf="suffix && showSuffixSeparator"
-                [orientation]="separatorOrientation"
+              [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <ng-content select="kendo-textarea-suffix"></ng-content>
+          }
+          <ng-content select="kendo-textarea-suffix"></ng-content>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -630,50 +632,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-textarea',
                     template: `
         <ng-container
-            kendoInputSharedEvents
-            [hostElement]="hostElement"
-            [(isFocused)]="isFocused"
-            (handleBlur)="handleBlur()"
-            (onFocus)="handleFocus()"
-        >
-            <ng-content select="kendo-textarea-prefix"></ng-content>
+          kendoInputSharedEvents
+          [hostElement]="hostElement"
+          [(isFocused)]="isFocused"
+          (handleBlur)="handleBlur()"
+          (onFocus)="handleFocus()"
+          >
+          <ng-content select="kendo-textarea-prefix"></ng-content>
+          @if (prefix && showPrefixSeparator) {
             <kendo-input-separator
-                *ngIf="prefix && showPrefixSeparator"
-                [orientation]="separatorOrientation"
+              [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <textarea #input
-                class="k-input-inner !k-overflow-auto"
-                [attr.aria-multiline]="true"
-                [attr.aria-disabled]="disabled ? true : undefined"
-                [attr.aria-readonly]="readonly ? true : undefined"
-                [attr.aria-invalid]="isControlInvalid"
-                [id]="focusableId"
-                [attr.required]="isControlRequired ? '' : null"
-                [ngClass]="resizableClass"
-                [value]="value"
-                [attr.placeholder]="placeholder"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [attr.rows]="rows"
-                [attr.cols]="cols"
-                [attr.tabindex]="tabIndex"
-                [attr.title]="title"
-                [attr.maxlength]="maxlength"
-                [attr.aria-invalid]="isControlInvalid"
+          }
+          <textarea #input
+            class="k-input-inner !k-overflow-auto"
+            [attr.aria-multiline]="true"
+            [attr.aria-disabled]="disabled ? true : undefined"
+            [attr.aria-readonly]="readonly ? true : undefined"
+            [attr.aria-invalid]="isControlInvalid"
+            [id]="focusableId"
+            [attr.required]="isControlRequired ? '' : null"
+            [ngClass]="resizableClass"
+            [value]="value"
+            [attr.placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.rows]="rows"
+            [attr.cols]="cols"
+            [attr.tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
                 [kendoEventsOutsideAngular]="{
                     focus: handleInputFocus,
                     blur: handleInputBlur,
                     input: handleInput}"
-            ></textarea>
+          ></textarea>
+          @if (suffix && showSuffixSeparator) {
             <kendo-input-separator
-                *ngIf="suffix && showSuffixSeparator"
-                [orientation]="separatorOrientation"
+              [orientation]="separatorOrientation"
             ></kendo-input-separator>
-            <ng-content select="kendo-textarea-suffix"></ng-content>
+          }
+          <ng-content select="kendo-textarea-suffix"></ng-content>
         </ng-container>
-    `,
+        `,
                     standalone: true,
-                    imports: [SharedInputEventsDirective, NgIf, InputSeparatorComponent, NgClass, EventsOutsideAngularDirective]
+                    imports: [SharedInputEventsDirective, InputSeparatorComponent, NgClass, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
                 type: Input