@progress/kendo-angular-grid 18.4.1-develop.2 → 18.5.0-develop.10

package/esm2022/column-menu/column-list.component.mjs

@@ -131,6 +131,17 @@ export class ColumnListComponent {
         if (e.keyCode !== Keys.Tab) {
             e.preventDefault();
         }
+        if (e.key === 'Tab' && !e.shiftKey && this.autoSync) {
+            e.preventDefault();
+        }
+        if (e.key === 'Tab' && e.shiftKey) {
+            this.ngZone.run(() => {
+                if (e.target.matches('.k-column-list-item')) {
+                    e.preventDefault();
+                    this.resetButton?.nativeElement.focus();
+                }
+            });
+        }
         if (e.keyCode === Keys.ArrowDown) {
             this.listNavigationService.next();
         }
@@ -145,19 +156,23 @@ export class ColumnListComponent {
         if (this.allowHideAll && !this.hasLocked) {
             return;
         }
-        const checkedItems = [];
+        // Cache visible columns to avoid repeated checks
+        const visibleColumns = [];
+        const columnMap = new Map();
         this.checkboxes.forEach((checkbox, index) => {
+            // Reset all disabled states first
+            this.setDisabledState(checkbox, false);
             if (checkbox.checkedState) {
-                checkedItems.push({ checkbox, index });
+                visibleColumns.push({ checkbox, index });
+                columnMap.set(index, this.columns[index]);
             }
-            this.setDisabledState(checkbox, false);
         });
-        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            this.setDisabledState(checkedItems[0].checkbox, true);
+        // Only apply disabled states where needed
+        if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
+            this.setDisabledState(visibleColumns[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
-            const columns = this.columns;
-            const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
+            const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
             if (checkedUnlocked.length === 1) {
                 this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
@@ -178,34 +193,32 @@ export class ColumnListComponent {
         }
     }
     setDisabledState(checkbox, disabled) {
-        this.ngZone.run(() => checkbox.disabled = disabled);
-        const checkboxElement = checkbox.hostElement.nativeElement;
-        const parentElement = checkboxElement.parentElement;
-        const classCommand = disabled ? 'addClass' : 'removeClass';
-        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
-        this.renderer[classCommand](parentElement, 'k-disabled');
-        this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
+        if (checkbox.disabled !== disabled) {
+            this.ngZone.runOutsideAngular(() => {
+                checkbox.disabled = disabled;
+                const checkboxElement = checkbox.hostElement.nativeElement;
+                const parentElement = checkboxElement.parentElement;
+                if (disabled) {
+                    this.renderer.addClass(parentElement, 'k-disabled');
+                    this.renderer.setAttribute(parentElement, 'aria-disabled', 'true');
+                }
+                else {
+                    this.renderer.removeClass(parentElement, 'k-disabled');
+                    this.renderer.removeAttribute(parentElement, 'aria-disabled');
+                }
+            });
+        }
     }
     handleCheckBoxClick = (e) => {
         const closestItem = e.target.closest('.k-column-list-item');
         if (closestItem) {
             const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
             const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-            if (index !== this.listNavigationService.activeIndex) {
-                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                this.listNavigationService.activeIndex = index;
-                this.listNavigationService.toggle(index, true);
+            const checkbox = this.checkboxes.toArray()[index];
+            if (e.target === checkbox.input.nativeElement) {
+                closestItem.focus();
+                e.target.classList.remove('k-focus');
             }
-            if (checkboxElement.contains(e.target)) {
-                const checkboxInputElement = checkboxElement.firstElementChild;
-                checkboxInputElement.blur();
-                checkboxInputElement.classList.remove('k-focus');
-            }
-            else {
-                this.listNavigationService.toggleCheckedState();
-            }
-            closestItem.focus();
             if (this.autoSync) {
                 if (!this.columns[index]) {
                     return;
@@ -213,14 +226,21 @@ export class ColumnListComponent {
                 const column = this.columns[index];
                 const hidden = !checkbox.checkedState;
                 if (Boolean(column.hidden) !== hidden) {
-                    this.ngZone.run(() => {
+                    this.ngZone.runOutsideAngular(() => {
                         column.hidden = hidden;
-                        this.columnChange.emit([column]);
+                        this.ngZone.run(() => {
+                            this.columnChange.emit([column]);
+                        });
                     });
                 }
             }
             else {
-                this.updateDisabled();
+                this.ngZone.run(() => this.updateDisabled());
+            }
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
             }
         }
     };
@@ -238,9 +258,9 @@ export class ColumnListComponent {
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
@@ -282,9 +302,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>

package/esm2022/column-menu/column-menu-item.component.mjs

@@ -38,13 +38,12 @@ export class ColumnMenuItemComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Specifies the name of the [font icon](slug:icons#icons-list)
-     * that will be rendered for the item.
+     * Specifies the name of the [font icon](slug:icon_list)
+     * that will be rendered within the item.
      */
     icon;
     /**
-     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
-     * that will be rendered for the item.
+     * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
     /**

package/esm2022/columns/column-base.mjs

@@ -354,6 +354,10 @@ export class ColumnBase {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
+    ngAfterViewInit() {
+        this.initialMaxResizableWidth = this.maxResizableWidth;
+        this.initialMinResizableWidth = this.minResizableWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 }

package/esm2022/columns/column.component.mjs

@@ -116,10 +116,6 @@ export class ColumnComponent extends ColumnBase {
     get displayTitle() {
         return this.title === undefined ? this.field : this.title;
     }
-    ngAfterViewInit() {
-        this.initialMaxResizableWidth = this.maxResizableWidth;
-        this.initialMinResizableWidth = this.minResizableWidth;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
             {

package/esm2022/common/dom-events.service.mjs

@@ -13,6 +13,7 @@ export class DomEventsService {
     cellMouseup = new EventEmitter();
     click = new EventEmitter();
     keydown = new EventEmitter();
+    shiftKeyup = new EventEmitter();
     focus = new EventEmitter();
     focusIn = new EventEmitter();
     focusOut = new EventEmitter();

package/esm2022/common/field-datatype.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/directives.mjs

@@ -130,6 +130,7 @@ import { SelectionDirective } from "./selection/selection.directive";
 import { TemplateEditingDirective } from "./editing-directives/template-editing.directive";
 import { ReactiveEditingDirective } from "./editing-directives/reactive-editing.directive";
 import { InCellEditingDirective } from "./editing-directives/in-cell-editing.directive";
+import { ExternalEditingDirective } from "./editing-directives/external-editing.directive";
 import { ExpandDetailsDirective } from "./rendering/details-expand.directive";
 import { ExpandGroupDirective } from "./rendering/groups-expand.directive";
 import { GroupBindingDirective } from "./grouping/group-scroll-binding.directive";
@@ -145,6 +146,7 @@ import { ExcelCommandToolbarDirective } from "./excel/excel-command-tool.directi
 import { AddCommandToolbarDirective } from "./editing/add-command-tool.directive";
 import { RowDragHandleTemplateDirective } from "./row-reordering/drag-handle-template.directive";
 import { RowDragHintTemplateDirective } from "./row-reordering/drag-hint-template.directive";
+import { DialogFormComponent, FormComponent, FormFormFieldComponent } from "./editing/form";
 /**
  * @hidden
  *
@@ -383,6 +385,7 @@ export const KENDO_GRID_DECLARATIONS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GroupBindingDirective,
@@ -391,7 +394,10 @@ export const KENDO_GRID_DECLARATIONS = [
     GridToolbarFocusableDirective,
     StatusBarComponent,
     StatusBarTemplateDirective,
-    GridClipboardDirective
+    GridClipboardDirective,
+    FormComponent,
+    DialogFormComponent,
+    FormFormFieldComponent
 ];
 /**
  * @hidden
@@ -411,6 +417,7 @@ export const KENDO_GRID_EXPORTS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GridToolbarFocusableDirective,

package/esm2022/editing/edit.service.mjs

@@ -153,7 +153,7 @@ export class EditService {
         this.changes.emit({ action: 'edit', rowIndex });
     }
     beginAdd() {
-        this.changes.emit({ action: 'add' });
+        this.changes.emit({ action: 'add', isNew: true });
     }
     endEdit(rowIndex) {
         const { group: formGroup } = this.context(rowIndex);

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

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { DialogActionsComponent, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
+import { FormComponent } from './form.component';
+import { FormGroup } from '@angular/forms';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class DialogFormComponent extends DialogContentBase {
+    localization;
+    controls;
+    formGroup;
+    formSettings;
+    saveIcon = saveIcon;
+    cancelIcon = cancelIcon;
+    constructor(dialogRef, localization) {
+        super(dialogRef);
+        this.localization = localization;
+    }
+    save() {
+        this.dialog.close({ text: this.localization.get('externalEditingSaveText') });
+    }
+    cancel() {
+        this.dialog.close({ text: this.localization.get('externalEditingCancelText') });
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, deps: [{ token: i1.DialogRef }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogFormComponent, isStandalone: true, selector: "kendo-grid-dialog-form", inputs: { controls: "controls", formGroup: "formGroup", formSettings: "formSettings" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `, isInline: true, dependencies: [{ kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i3.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-dialog-form',
+                    standalone: true,
+                    imports: [FormComponent, DialogActionsComponent, KENDO_BUTTON],
+                    template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.LocalizationService }]; }, propDecorators: { controls: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }] } });

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

@@ -0,0 +1,161 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { KENDO_DATEPICKER } from '@progress/kendo-angular-dateinputs';
+import { KENDO_CHECKBOX, KENDO_FORMFIELD, KENDO_NUMERICTEXTBOX, KENDO_TEXTBOX } from '@progress/kendo-angular-inputs';
+import { KENDO_LABELS } from '@progress/kendo-angular-label';
+import { ReactiveFormsModule } from '@angular/forms';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { replaceMessagePlaceholder } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-label";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+/**
+ * @hidden
+ */
+export class FormFormFieldComponent {
+    localization;
+    cdr;
+    control;
+    floatingLabel;
+    showError;
+    input;
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+    }
+    // required to avoid ExpressionChangedAfterItHasBeenCheckedError caused by
+    // binding to the label's 'for' attribute dynamically
+    ngAfterContentInit() {
+        this.cdr.detectChanges();
+    }
+    messageFor(key, errorName, field) {
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(this.localization.get(key), 'fieldName', field), 'errorName', errorName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="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>
+        </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"] }, { 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", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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],
+                    template: `
+        <kendo-formfield
+            [orientation]="control.orientation">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="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>
+        </kendo-formfield>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], floatingLabel: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });