@progress/kendo-angular-inputs 17.0.0-develop.9 → 17.0.1-develop.1

package/esm2022/colorpicker/localization/messages.mjs

@@ -0,0 +1,183 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ColorPickerMessages extends ComponentMessages {
+    /**
+     * The aria-label applied to the ColorPalette component when the value is empty.
+     */
+    colorPaletteNoColor;
+    /**
+     * The aria-label applied to the ColorGradient component when the value is empty.
+     */
+    colorGradientNoColor;
+    /**
+     * The aria-label applied to the FlatColorPicker component when the value is empty.
+     */
+    flatColorPickerNoColor;
+    /**
+     * The aria-label applied to the ColorPicker component when the value is empty.
+     */
+    colorPickerNoColor;
+    /**
+     * The title for the gradient color drag handle chooser.
+     */
+    colorGradientHandle;
+    /**
+     * The title for the clear button.
+     */
+    clearButton;
+    /**
+     * The title for the hue slider handle.
+     */
+    hueSliderHandle;
+    /**
+     * The title for the opacity slider handle.
+     */
+    opacitySliderHandle;
+    /**
+     * The placeholder for the HEX color input.
+     */
+    hexInputPlaceholder;
+    /**
+     * The placeholder for the red color input.
+     */
+    redInputPlaceholder;
+    /**
+     * The placeholder for the green color input.
+     */
+    greenInputPlaceholder;
+    /**
+     * The placeholder for the blue color input.
+     */
+    blueInputPlaceholder;
+    /**
+     * The placeholder for the alpha input.
+     */
+    alphaInputPlaceholder;
+    /**
+     * The aria-label attribute of the red color input.
+     */
+    redChannelLabel;
+    /**
+     * The aria-label attribute of the green color input.
+     */
+    greenChannelLabel;
+    /**
+     * The aria-label attribute of the blue color input.
+     */
+    blueChannelLabel;
+    /**
+     * The aria-label attribute of the alpha color input.
+     */
+    alphaChannelLabel;
+    /**
+     * The "Pass" message for the contrast tool.
+     */
+    passContrast;
+    /**
+     * The "Fail" message for the contrast tool.
+     */
+    failContrast;
+    /**
+     * The "Contrast ratio" message for the contrast tool.
+     */
+    contrastRatio;
+    /**
+     * The message for the color preview pane.
+     */
+    previewColor;
+    /**
+     * The message for the selected color pane.
+     */
+    revertSelection;
+    /**
+     * The message for the gradient view button.
+     */
+    gradientView;
+    /**
+     * The message for the palette view button.
+     */
+    paletteView;
+    /**
+     * The message for the input format toggle button.
+     */
+    formatButton;
+    /**
+     * The message for the Apply action button.
+     */
+    applyButton;
+    /**
+     * The message for the Cancel action button.
+     */
+    cancelButton;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-colorpicker-messages-base'
+                }]
+        }], propDecorators: { colorPaletteNoColor: [{
+                type: Input
+            }], colorGradientNoColor: [{
+                type: Input
+            }], flatColorPickerNoColor: [{
+                type: Input
+            }], colorPickerNoColor: [{
+                type: Input
+            }], colorGradientHandle: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], hueSliderHandle: [{
+                type: Input
+            }], opacitySliderHandle: [{
+                type: Input
+            }], hexInputPlaceholder: [{
+                type: Input
+            }], redInputPlaceholder: [{
+                type: Input
+            }], greenInputPlaceholder: [{
+                type: Input
+            }], blueInputPlaceholder: [{
+                type: Input
+            }], alphaInputPlaceholder: [{
+                type: Input
+            }], redChannelLabel: [{
+                type: Input
+            }], greenChannelLabel: [{
+                type: Input
+            }], blueChannelLabel: [{
+                type: Input
+            }], alphaChannelLabel: [{
+                type: Input
+            }], passContrast: [{
+                type: Input
+            }], failContrast: [{
+                type: Input
+            }], contrastRatio: [{
+                type: Input
+            }], previewColor: [{
+                type: Input
+            }], revertSelection: [{
+                type: Input
+            }], gradientView: [{
+                type: Input
+            }], paletteView: [{
+                type: Input
+            }], formatButton: [{
+                type: Input
+            }], applyButton: [{
+                type: Input
+            }], cancelButton: [{
+                type: Input
+            }] } });

package/{esm2020 → esm2022}/colorpicker/services/color-palette.service.mjs

@@ -9,9 +9,7 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ColorPaletteService {
-    constructor() {
-        this.colorRows = [];
-    }
+    colorRows = [];
     setColorMatrix(palette, columns) {
         this.colorRows = [];
         if (!(isPresent(palette) && palette.length)) {
@@ -59,9 +57,9 @@ export class ColorPaletteService {
         }
         return index;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteService });
 }
-ColorPaletteService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColorPaletteService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/colorpicker/services/flatcolorpicker.service.mjs

@@ -31,9 +31,9 @@ export class FlatColorPickerService {
             height: tileSize.height ? tileSize.height : tileSize.width
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerService });
 }
-FlatColorPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FlatColorPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/colorpicker.module.mjs

@@ -19,11 +19,11 @@ import * as i5 from "./colorpicker/color-palette.component";
  * definition for the ColorPicker.
  */
 export class ColorPickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, imports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent], exports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [i1.ColorPickerComponent, i3.FlatColorPickerComponent, i4.ColorGradientComponent] });
 }
-ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, imports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent], exports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent] });
-ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_COLORGRADIENT, KENDO_COLORPALETTE] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],

package/{esm2020 → esm2022}/common/radio-checkbox.base.mjs

@@ -13,59 +13,36 @@ const DEFAULT_SIZE = 'medium';
  * @hidden
  */
 export class RadioCheckBoxBase {
-    constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
-        this.componentType = componentType;
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        this.injector = injector;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * Sets the disabled state of the component.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Specifies the `tabindex` of the component.
-         *
-         * @default 0
-         */
-        this.tabindex = 0;
-        /**
-         * Fires each time the user focuses the component.
-         *
-         * > To wire the event programmatically, use the `onFocus` property.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the component gets blurred.
-         *
-         * > To wire the event programmatically, use the `onBlur` property.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.handleInputBlur = () => {
-            this.cdr.markForCheck();
-            if (requiresZoneOnBlur(this.control)) {
-                this.ngZone.run(() => {
-                    this.ngTouched();
-                });
-            }
-        };
-        this.focusChangedProgrammatically = false;
-        this.parsedAttributes = {};
-        this.ngChange = (_) => { };
-        this.ngTouched = () => { };
-        this._isFocused = false;
-        this._size = DEFAULT_SIZE;
-    }
+    componentType;
+    hostElement;
+    renderer;
+    cdr;
+    ngZone;
+    injector;
+    /**
+     * @hidden
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * Sets the `title` attribute of the `input` element of the component.
+     */
+    title;
+    /**
+     * Sets the `name` attribute for the component.
+     */
+    name;
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Specifies the `tabindex` of the component.
+     *
+     * @default 0
+     */
+    tabindex = 0;
     /**
      * @hidden
      */
@@ -75,6 +52,10 @@ export class RadioCheckBoxBase {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Provides a value for the component.
+     */
+    value;
     /**
      * The size property specifies the width and height of the component.
      *
@@ -113,6 +94,18 @@ export class RadioCheckBoxBase {
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
     }
+    /**
+     * Fires each time the user focuses the component.
+     *
+     * > To wire the event programmatically, use the `onFocus` property.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the component gets blurred.
+     *
+     * > To wire the event programmatically, use the `onBlur` property.
+     */
+    onBlur = new EventEmitter();
     /**
      * Focuses the component.
      */
@@ -137,6 +130,17 @@ export class RadioCheckBoxBase {
         this.isFocused = false;
         this.focusChangedProgrammatically = false;
     }
+    /**
+     * @hidden
+     */
+    handleInputBlur = () => {
+        this.cdr.markForCheck();
+        if (requiresZoneOnBlur(this.control)) {
+            this.ngZone.run(() => {
+                this.ngTouched();
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -184,6 +188,10 @@ export class RadioCheckBoxBase {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * Represents the visible `input` element.
+     */
+    input;
     /**
      * @hidden
      */
@@ -216,7 +224,23 @@ export class RadioCheckBoxBase {
         this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
+    control;
+    focusChangedProgrammatically = false;
     get defaultAttributes() { return null; }
+    parsedAttributes = {};
+    _inputAttributes;
+    ngChange = (_) => { };
+    ngTouched = () => { };
+    _isFocused = false;
+    _size = DEFAULT_SIZE;
+    constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
+        this.componentType = componentType;
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.injector = injector;
+    }
     /**
      * @hidden
      */
@@ -237,10 +261,10 @@ export class RadioCheckBoxBase {
     setInputAttributes() {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioCheckBoxBase, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 }
-RadioCheckBoxBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-RadioCheckBoxBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadioCheckBoxBase, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
             type: Component,
             args: [{
                     template: ''

package/{esm2020 → esm2022}/formfield/error.component.mjs

@@ -10,22 +10,20 @@ let serial = 0;
  * a Kendo control or native HTML form-bound component after a validation.
  */
 export class ErrorComponent {
-    constructor() {
-        this.hostClass = true;
-        /**
-         * Specifies the alignment of the Error message.
-         *
-         * The possible values are:
-         * * (Default) `start`
-         * * `end`
-         */
-        this.align = 'start';
-        /**
-         * @hidden
-         */
-        this.id = `kendo-error-${serial++}`;
-        this.roleAttribute = 'alert';
-    }
+    hostClass = true;
+    /**
+     * Specifies the alignment of the Error message.
+     *
+     * The possible values are:
+     * * (Default) `start`
+     * * `end`
+     */
+    align = 'start';
+    /**
+     * @hidden
+     */
+    id = `kendo-error-${serial++}`;
+    roleAttribute = 'alert';
     get startClass() {
         return this.align === 'start';
     }
@@ -35,12 +33,12 @@ export class ErrorComponent {
     get idAttribute() {
         return this.id;
     }
-}
-ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ErrorComponent, isStandalone: true, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ErrorComponent, isStandalone: true, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ErrorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formerror',

package/{esm2020 → esm2022}/formfield/formfield.component.mjs

@@ -19,51 +19,14 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Applies styling and behavior rules.
  */
 export class FormFieldComponent {
-    constructor(renderer, localizationService, hostElement) {
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        this.hostElement = hostElement;
-        this.hostClass = true;
-        /**
-         *
-         * Specifies when the Hint messages will be shown.
-         *
-         * The possible values are:
-         *
-         * * (Default) `initial`—Allows displaying hints when the form-bound component state is
-         * `valid` or `untouched` and `pristine`.
-         * * `always`—Allows full control over the visibility of the hints.
-         *
-         */
-        this.showHints = 'initial';
-        /**
-         * Specifies the layout orientation of the form field.
-         *
-         * * The possible values are:
-         *
-         * * (Default) `vertical`
-         * * `horizontal`
-         */
-        this.orientation = 'vertical';
-        /**
-         * Specifies when the Error messages will be shown.
-         *
-         * The possible values are:
-         *
-         * * (Default) `initial`—Allows displaying errors when the form-bound component state is
-         * `invalid` and `touched` or `dirty`.
-         * * `always`—Allows full control over the visibility of the errors.
-         *
-         */
-        this.showErrors = 'initial';
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        validatePackage(packageMetadata);
-        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-    }
+    renderer;
+    localizationService;
+    hostElement;
+    hostClass = true;
+    /**
+     * @hidden
+     */
+    direction;
     get errorClass() {
         if (!this.control) {
             return false;
@@ -86,6 +49,42 @@ export class FormFieldComponent {
         this.validateFormControl(formControls);
         this.control = formControls.first;
     }
+    controlElementRefs;
+    kendoInput;
+    errorChildren;
+    hintChildren;
+    /**
+     *
+     * Specifies when the Hint messages will be shown.
+     *
+     * The possible values are:
+     *
+     * * (Default) `initial`—Allows displaying hints when the form-bound component state is
+     * `valid` or `untouched` and `pristine`.
+     * * `always`—Allows full control over the visibility of the hints.
+     *
+     */
+    showHints = 'initial';
+    /**
+     * Specifies the layout orientation of the form field.
+     *
+     * * The possible values are:
+     *
+     * * (Default) `vertical`
+     * * `horizontal`
+     */
+    orientation = 'vertical';
+    /**
+     * Specifies when the Error messages will be shown.
+     *
+     * The possible values are:
+     *
+     * * (Default) `initial`—Allows displaying errors when the form-bound component state is
+     * `invalid` and `touched` or `dirty`.
+     * * `always`—Allows full control over the visibility of the errors.
+     *
+     */
+    showErrors = 'initial';
     /**
      * @hidden
      */
@@ -104,6 +103,19 @@ export class FormFieldComponent {
     get hasErrors() {
         return this.showErrors === 'always' ? true : this.showErrorsInitial();
     }
+    control;
+    subscriptions = new Subscription();
+    rtl = false;
+    constructor(renderer, localizationService, hostElement) {
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.hostElement = hostElement;
+        validatePackage(packageMetadata);
+        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+    }
     ngAfterViewInit() {
         this.setDescription();
     }
@@ -212,15 +224,14 @@ export class FormFieldComponent {
         this.subscriptions.add(this.errorChildren.changes.subscribe(() => this.updateDescription()));
         this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
     }
-}
-FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.formfield'
-        }
-    ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.formfield'
+            }
+        ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], ngImport: i0, template: `
         <ng-content select="label, kendo-label"></ng-content>
         <div class="k-form-field-wrap">
             <ng-content></ng-content>
@@ -228,7 +239,8 @@ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             <ng-content select="kendo-formerror" *ngIf="hasErrors"></ng-content>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormFieldComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formfield',