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

package/esm2022/databinding.directive.mjs

@@ -195,6 +195,7 @@ export class DataBindingDirective {
         }
         this.grid.data = this.process(this.state);
         this.grid.updateNavigationMetadata();
+        this.grid.ngDoCheck();
         this.dataChanged = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.RowReorderService }, { token: i4.ContextService }], target: i0.ɵɵFactoryTarget.Directive });

package/esm2022/editing/add-command.directive.mjs

@@ -6,7 +6,7 @@ import { Component, HostListener, HostBinding, ElementRef, Renderer2 as Renderer
 import { Button } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import { EditService } from './edit.service';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./edit.service";
@@ -42,37 +42,47 @@ export class AddCommandDirective extends Button {
         this.editService = editService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AddCommandDirective, isStandalone: true, selector: "[kendoGridAddCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-add-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AddCommandDirective, isStandalone: true, selector: "[kendoGridAddCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-add-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridAddCommand]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.ContextService }, { type: i0.NgZone }], propDecorators: { onClick: [{
                 type: HostListener,

package/esm2022/editing/cancel-command.directive.mjs

@@ -7,7 +7,7 @@ import { Button } from '@progress/kendo-angular-buttons';
 import { EditService } from './edit.service';
 import { CELL_CONTEXT } from '../rendering/common/cell-context';
 import { ContextService } from '../common/provider.service';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./edit.service";
@@ -70,37 +70,47 @@ export class CancelCommandDirective extends Button {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CancelCommandDirective, deps: [{ token: i1.EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CancelCommandDirective, isStandalone: true, selector: "[kendoGridCancelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-cancel-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CancelCommandDirective, isStandalone: true, selector: "[kendoGridCancelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-cancel-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridCancelCommand]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.EditService }, { type: undefined, decorators: [{
                     type: Inject,

package/esm2022/editing/edit-command.directive.mjs

@@ -7,7 +7,7 @@ import { Button } from '@progress/kendo-angular-buttons';
 import { EditService } from './edit.service';
 import { CELL_CONTEXT } from '../rendering/common/cell-context';
 import { ContextService } from '../common/provider.service';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./edit.service";
@@ -67,37 +67,47 @@ export class EditCommandDirective extends Button {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditCommandDirective, deps: [{ token: i1.EditService }, { token: CELL_CONTEXT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditCommandDirective, isStandalone: true, selector: "[kendoGridEditCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-edit-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditCommandDirective, isStandalone: true, selector: "[kendoGridEditCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "style.display": "this.visible", "class.k-grid-edit-command": "this.commandClass" } }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridEditCommand]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.EditService }, { type: undefined, decorators: [{
                     type: Inject,

package/esm2022/editing/form/form-formfield.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { KeyValuePipe, NgFor, NgIf } from '@angular/common';
+import { KeyValuePipe } from '@angular/common';
 import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
 import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import { KENDO_DATEPICKER } from '@progress/kendo-angular-dateinputs';
@@ -40,114 +40,141 @@ export class FormFormFieldComponent {
         return replaceMessagePlaceholder(replaceMessagePlaceholder(this.localization.get(key), 'fieldName', field), 'errorName', errorName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormFormFieldComponent, isStandalone: true, selector: "kendo-form-formfield", inputs: { control: "control", floatingLabel: "floatingLabel", showError: "showError" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFormFieldComponent, isStandalone: true, selector: "kendo-form-formfield", inputs: { control: "control", floatingLabel: "floatingLabel", showError: "showError" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
         <kendo-formfield
-            [orientation]="control.orientation">
+          [orientation]="control.orientation">
+          @if (control.label && floatingLabel && $any(control.dataType) !== 'boolean') {
             <kendo-floatinglabel
-                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
-                labelCssClass="k-form-label"
-                [text]="control.label">
+              labelCssClass="k-form-label"
+              [text]="control.label">
+              @if ($any(control.dataType) === 'text') {
                 <kendo-textbox
-                    *ngIf="$any(control.dataType) === 'text'" 
-                    [formControl]="control.formControl"></kendo-textbox>
+                [formControl]="control.formControl"></kendo-textbox>
+              }
+              @if ($any(control.dataType) === 'numeric') {
                 <kendo-numerictextbox
-                    *ngIf="$any(control.dataType) === 'numeric'" 
-                    [formControl]="control.formControl"></kendo-numerictextbox>
+                [formControl]="control.formControl"></kendo-numerictextbox>
+              }
+              @if ($any(control.dataType) === 'date') {
                 <kendo-datepicker
-                    *ngIf="$any(control.dataType) === 'date'" 
-                    [formControl]="control.formControl"></kendo-datepicker>
+                [formControl]="control.formControl"></kendo-datepicker>
+              }
             </kendo-floatinglabel>
+          }
+          @if (control.label && !floatingLabel && $any(control.dataType) !== 'boolean') {
             <kendo-label [style.align-items]="'start'"
-                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
-                labelCssClass="k-form-label"
-                [text]="control.label"
-                [for]="input">
+              labelCssClass="k-form-label"
+              [text]="control.label"
+              [for]="input">
             </kendo-label>
+          }
+          @if (!floatingLabel && (control.dataType) === 'text') {
             <kendo-textbox #input
-                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
-                [formControl]="control.formControl"></kendo-textbox>
+            [formControl]="control.formControl"></kendo-textbox>
+          }
+          @if (!floatingLabel && $any(control.dataType) === 'numeric') {
             <kendo-numerictextbox #input
-                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
-                [formControl]="control.formControl"></kendo-numerictextbox>
+            [formControl]="control.formControl"></kendo-numerictextbox>
+          }
+          @if (!floatingLabel && $any(control.dataType) === 'date') {
             <kendo-datepicker #input
-                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
-                [formControl]="control.formControl"></kendo-datepicker>
+            [formControl]="control.formControl"></kendo-datepicker>
+          }
+          @if (control.label && $any(control.dataType) === 'boolean') {
             <div
-                *ngIf="control.label && $any(control.dataType) === 'boolean'"
-                class="k-form-field-checkbox-wrap">
-                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+              class="k-form-field-checkbox-wrap">
+              <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+              @if (control.label) {
                 <kendo-label
-                    *ngIf="control.label"
-                    class="k-checkbox-label"
-                    [for]="cb"
-                    [text]="control.label">
+                  class="k-checkbox-label"
+                  [for]="cb"
+                  [text]="control.label">
                 </kendo-label>
+              }
             </div>
-            
-            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
-            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
-                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
-            </ng-container>
+          }
+        
+          @if (control?.hint) {
+            <kendo-formhint>{{control.hint}}</kendo-formhint>
+          }
+          @if (showError && control.formControl?.invalid && control.formControl.touched) {
+            @for (err of control?.formControl?.errors | keyvalue; track err) {
+              <kendo-formerror>{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            }
+          }
         </kendo-formfield>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
+        `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i4.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-form-formfield',
                     standalone: true,
-                    imports: [KeyValuePipe, NgFor, NgIf, ReactiveFormsModule,
-                        KENDO_LABELS, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_BUTTON, KENDO_CHECKBOX, KENDO_DATEPICKER],
+                    imports: [KeyValuePipe, ReactiveFormsModule, KENDO_LABELS, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_BUTTON, KENDO_CHECKBOX, KENDO_DATEPICKER],
                     template: `
         <kendo-formfield
-            [orientation]="control.orientation">
+          [orientation]="control.orientation">
+          @if (control.label && floatingLabel && $any(control.dataType) !== 'boolean') {
             <kendo-floatinglabel
-                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
-                labelCssClass="k-form-label"
-                [text]="control.label">
+              labelCssClass="k-form-label"
+              [text]="control.label">
+              @if ($any(control.dataType) === 'text') {
                 <kendo-textbox
-                    *ngIf="$any(control.dataType) === 'text'" 
-                    [formControl]="control.formControl"></kendo-textbox>
+                [formControl]="control.formControl"></kendo-textbox>
+              }
+              @if ($any(control.dataType) === 'numeric') {
                 <kendo-numerictextbox
-                    *ngIf="$any(control.dataType) === 'numeric'" 
-                    [formControl]="control.formControl"></kendo-numerictextbox>
+                [formControl]="control.formControl"></kendo-numerictextbox>
+              }
+              @if ($any(control.dataType) === 'date') {
                 <kendo-datepicker
-                    *ngIf="$any(control.dataType) === 'date'" 
-                    [formControl]="control.formControl"></kendo-datepicker>
+                [formControl]="control.formControl"></kendo-datepicker>
+              }
             </kendo-floatinglabel>
+          }
+          @if (control.label && !floatingLabel && $any(control.dataType) !== 'boolean') {
             <kendo-label [style.align-items]="'start'"
-                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
-                labelCssClass="k-form-label"
-                [text]="control.label"
-                [for]="input">
+              labelCssClass="k-form-label"
+              [text]="control.label"
+              [for]="input">
             </kendo-label>
+          }
+          @if (!floatingLabel && (control.dataType) === 'text') {
             <kendo-textbox #input
-                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
-                [formControl]="control.formControl"></kendo-textbox>
+            [formControl]="control.formControl"></kendo-textbox>
+          }
+          @if (!floatingLabel && $any(control.dataType) === 'numeric') {
             <kendo-numerictextbox #input
-                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
-                [formControl]="control.formControl"></kendo-numerictextbox>
+            [formControl]="control.formControl"></kendo-numerictextbox>
+          }
+          @if (!floatingLabel && $any(control.dataType) === 'date') {
             <kendo-datepicker #input
-                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
-                [formControl]="control.formControl"></kendo-datepicker>
+            [formControl]="control.formControl"></kendo-datepicker>
+          }
+          @if (control.label && $any(control.dataType) === 'boolean') {
             <div
-                *ngIf="control.label && $any(control.dataType) === 'boolean'"
-                class="k-form-field-checkbox-wrap">
-                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+              class="k-form-field-checkbox-wrap">
+              <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+              @if (control.label) {
                 <kendo-label
-                    *ngIf="control.label"
-                    class="k-checkbox-label"
-                    [for]="cb"
-                    [text]="control.label">
+                  class="k-checkbox-label"
+                  [for]="cb"
+                  [text]="control.label">
                 </kendo-label>
+              }
             </div>
-            
-            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
-            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
-                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
-            </ng-container>
+          }
+        
+          @if (control?.hint) {
+            <kendo-formhint>{{control.hint}}</kendo-formhint>
+          }
+          @if (showError && control.formControl?.invalid && control.formControl.touched) {
+            @for (err of control?.formControl?.errors | keyvalue; track err) {
+              <kendo-formerror>{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            }
+          }
         </kendo-formfield>
-    `
+        `
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { control: [{
                 type: Input