@progress/kendo-angular-inputs 19.1.1-develop.2 → 19.1.2-develop.1

package/fesm2022/progress-kendo-angular-inputs.mjs

@@ -554,33 +554,23 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749196595,
-    version: '19.1.1-develop.2',
+    publishDate: 1749804176,
+    version: '19.1.2-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
- * Represents the template for the labels of the Slider.
- * To define the labels template, nest an `<ng-template>` tag with the `kendoSliderLabelTemplate` directive inside
- * the `<kendo-slider>` tag. The template context is passed to the `label` value.
+ * Represents the template for Slider labels.
+ * To define a labels template, nest an `<ng-template>` tag with the `kendoSliderLabelTemplate` directive inside
+ * the `<kendo-slider>` tag. The template context provides the `value`.
  *
  * @example
- * ```ts-no-run
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-slider [largeStep]="2">
- *           <ng-template kendoSliderLabelTemplate let-value="value">
- *             <b>{{value}}</b>
- *           </ng-template>
- *         </kendo-slider>
- *     `
- * })
- *
- * class AppComponent {
- * }
- *
+ * ```html
+ * <kendo-slider [largeStep]="2">
+ *   <ng-template kendoSliderLabelTemplate let-value="value">
+ *     <p>{{ value }}</p>
+ *   </ng-template>
+ * </kendo-slider>
  * ```
  */
 class LabelTemplateDirective {
@@ -612,77 +602,95 @@ class SliderBase {
     changeDetector;
     hostElement;
     /**
-     * Defines the title of the ticks ([see example]({% slug ticks_slider %}#toc-titles)). The default title
-     * for each tick is its Slider value. If you use a callback function, the function accepts an argument
-     * that holds the value of the component and returns a string with the new title.
+     * Sets the title for the ticks.
+     * The default title for each tick is its Slider value.
+     * If you use a callback function, the function receives the component value and returns a string for the new title [see example]({% slug ticks_slider %}#toc-titles).
      */
     title = identity;
     /**
-     * Denotes the location of the tick marks in the Slider ([see example]({% slug ticks_slider %}#toc-placement)).
+     * Sets the location of the tick marks in the Slider [see example]({% slug ticks_slider %}#toc-placement).
      *
-     * The available options are:
-     * * `before`&mdash;The tick marks are located to the top side of the horizontal track or to the left side of a vertical track.
-     * * `after`&mdash;The tick marks are located to the bottom side of the horizontal track or to the right side of the vertical track.
-     * * `both`&mdash; (Default) The tick marks are located on both sides of the track.
-     * * `none`&mdash;The tick marks are not visible. The actual elements are not added to the DOM tree.
+     * The options are:
+     * - `before` – Shows tick marks above a horizontal track or left of a vertical track.
+     * - `after` – Shows tick marks below a horizontal track or right of a vertical track.
+     * - `both` – Shows tick marks on both sides of the track.
+     * - `none` – Hides tick marks and removes them from the DOM.
+     *
+     * @default 'both'
      */
     tickPlacement = 'both';
     /**
-     * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
-     * ([see example]({% slug orientation_slider %})).
+     * When `true`. renders a vertical Slider [see example]({% slug orientation_slider %}).
+     *
+     * @default false
      */
     vertical = false;
     /**
-     * The minimum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
-     * The attribute accepts both integers and floating-point numbers.
+     * Sets the minimum value of the Slider.
+     * Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     *
+     * @default 0
      */
     min = 0;
     /**
-     * The maximum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
-     * The attribute accepts both integers and floating-point numbers.
+     * Sets the maximum value of the Slider.
+     * Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     *
+     * @default 10
      */
     max = 10;
     /**
-     * The step value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
-     * Accepts positive values only. Can be an integer or a floating-point number.
+     * Sets the step value of the Slider.
+     * Accepts only positive values.
+     * Can be an integer or a floating-point number [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     *
+     * @default 1
      */
     smallStep = 1;
     /**
-     * Specifies that every n<sup>th</sup> tick will be large and will have a label
-     * ([see example]({% slug predefinedsteps_slider %}#toc-large-steps)).
-     * Accepts positive integer values only.
+     * Sets every n<sup>th</sup> tick as large and shows a label for it [see example]({% slug predefinedsteps_slider %}#toc-large-steps).
+     *
+     * @default null
      */
     largeStep = null;
     /**
-     * Sets the width between each two ticks along the track ([see example]({% slug ticks_slider %}#toc-width)). The value
-     * has to be set in pixels. If no `fixedTickWidth` is provided, the Slider automatically adjusts the tick width to
-     * accommodate the elements within the size of the component.
+     * Sets the width between two ticks along the track, in pixels.
+     * If you do not set `fixedTickWidth`, the Slider adjusts the tick width automatically [see example]({% slug ticks_slider %}#toc-width).
+     *
      */
     fixedTickWidth;
     /**
-     * Determines whether the Slider is disabled ([see example]({% slug disabledstate_slider %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms).
+     * When `true`, disables the Slider.
+     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms) [see example]({% slug disabledstate_slider %}).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Determines whether the Slider is in its read-only state ([see example]({% slug readonly_slider %})).
+     * When `true`, sets the Slider to read-only [see example]({% slug readonly_slider %}).
      *
      * @default false
      */
     readonly = false;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
+     *
+     * @default 0
      */
     tabindex = 0;
     /**
-     * Fires each time the user focuses the component.
+     * Fires when the user focuses the component.
+     *
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the component is blurred.
+     * Fires when the component is blurred.
+     *
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the user selects a new value.
+     * Fires when the user selects a new value.
+     *
      */
     valueChange = new EventEmitter();
     direction;
@@ -1065,6 +1073,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 const PRESSED$1 = 'k-pressed';
 /**
  * Represents the [Kendo UI Slider component for Angular]({% slug overview_slider %}).
+ *
+ * @example
+ * ```html
+ * <kendo-slider [min]="0" [max]="10" [smallStep]="1" [(ngModel)]="value"></kendo-slider>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link SliderCustomMessagesComponent}.
  */
 class SliderComponent extends SliderBase {
     localization;
@@ -1078,7 +1094,7 @@ class SliderComponent extends SliderBase {
      */
     focusableId = `k-${guid()}`;
     /**
-     * Changes the `title` attribute of the drag handle so that it can be localized.
+     * Changes the `title` attribute of the drag handle. Use this property to localize the drag handle title.
      */
     dragHandleTitle;
     /**
@@ -1086,8 +1102,9 @@ class SliderComponent extends SliderBase {
      */
     incrementTitle;
     /**
-     * Determines if the animation will be played on value change.
-     * Regardless of this setting, no animation will be played during the initial rendering.
+     * Determines if the component animates when the value changes.
+     * The component does not animate during initial rendering.
+     * @default true
      */
     animate = true;
     /**
@@ -1095,13 +1112,15 @@ class SliderComponent extends SliderBase {
      */
     decrementTitle;
     /**
-     * Renders the arrow side buttons of the Slider ([see example]({% slug sidebuttons_slider %}#toc-hidden-state)).
-     * When `showButtons` is set to `false`, the buttons are not displayed.
+     * Shows or hides the arrow side buttons of the Slider ([see example]({% slug sidebuttons_slider %}#toc-hidden-state)).
+     * When you set `showButtons` to `false`, the component does not display the buttons.
+     * @default true
      */
     showButtons = true;
     /**
-     * The current value of the Slider when it is initially displayed.
-     * The component can use either NgModel or the `value` binding but not both of them at the same time.
+     * Sets the current value of the Slider when it first appears.
+     * Use either `ngModel` or the `value` binding, but not both at the same time.
+     * @default 0
      */
     value = this.min;
     /**
@@ -1151,18 +1170,6 @@ class SliderComponent extends SliderBase {
     }
     /**
      * Focuses the Slider.
-     *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="slider.focus()">Focus</button>
-     *  <kendo-slider #slider></kendo-slider>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
      */
     focus() {
         if (!this.disabled) {
@@ -1815,7 +1822,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const PRESSED = 'k-pressed';
 /**
- * Represents the [Kendo UI RangeSlider component for Angular]({% slug overview_rangeslider %}).
+ * Represents the Kendo UI RangeSlider component for Angular.
+ * Use this component to let users select a range of values.
+ *
+ * @example
+ * ```html
+ * <kendo-rangeslider [value]="[10, 50]" [min]="0" [max]="100"></kendo-rangeslider>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link RangeSliderCustomMessagesComponent}.
  */
 class RangeSliderComponent extends SliderBase {
     localization;
@@ -1826,7 +1842,7 @@ class RangeSliderComponent extends SliderBase {
     hostElement;
     /**
      * Sets the range value of the RangeSlider.
-     * The component can use either NgModel or the `value` binding but not both of them at the same time.
+     * Use either `ngModel` or the `value` binding, but not both at the same time.
      */
     value;
     draghandleStart;
@@ -1860,19 +1876,6 @@ class RangeSliderComponent extends SliderBase {
     /**
      * Focuses the RangeSlider.
      *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *     <div>
-     *         <button class="k-button" (click)="slider.focus()">Focus</button>
-     *     </div>
-     *     <kendo-rangeslider #slider></kendo-rangeslider>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
      */
     focus() {
         this.focusChangedProgrammatically = true;
@@ -1880,7 +1883,7 @@ class RangeSliderComponent extends SliderBase {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the RangeSlider.
+     * Removes focus from the RangeSlider.
      */
     blur() {
         this.focusChangedProgrammatically = true;
@@ -2480,6 +2483,14 @@ const DEFAULT_THUMB_ROUNDED = 'full';
 const DEFAULT_TRACK_ROUNDED = 'full';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
+ *
+ * @example
+ * ```html
+ * <kendo-switch [(ngModel)]="checked"></kendo-switch>`
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link SwitchCustomMessagesComponent}.
  */
 class SwitchComponent {
     renderer;
@@ -2498,17 +2509,19 @@ class SwitchComponent {
         return `k-${guid()}`;
     }
     /**
-     * Sets the **On** label ([see example]({% slug labels_switch %})).
-     * Takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
+     * Set the **On** label.
+     * This label takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
+     * [See example]({% slug labels_switch %}).
      */
     onLabel;
     /**
-     * Sets the **Off** label ([see example]({% slug labels_switch %})).
-     * Takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
+     * Set the **Off** label.
+     * This label takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
+     * [See example]({% slug labels_switch %}).
      */
     offLabel;
     /**
-     * Sets the value of the Switch when it is initially displayed.
+     * Sets the value of the Switch when it first appears.
      */
     set checked(value) {
         this.setHostClasses(value);
@@ -2518,27 +2531,27 @@ class SwitchComponent {
         return this._checked;
     }
     /**
-     * Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_switch#toc-managing-the-switch-disabled-state-in-reactive-forms).
+     * When `true`, disables the Switch.
+     * [See example]({% slug disabled_switch %}).
+     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_switch#toc-managing-the-switch-disabled-state-in-reactive-forms).
+     * @default false
      */
     disabled = false;
     /**
-     * Determines whether the Switch is in its read-only state ([see example]({% slug readonly_switch %})).
-     *
+     * When `true`, sets the Switch to read-only.
+     * [See example]({% slug readonly_switch %}).
      * @default false
      */
     readonly = false;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Switch.
+     * Set the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Switch.
+     * @default 0
      */
     tabindex = 0;
     /**
-     * Specifies the width and height of the Switch.
+     * Sets the size of the Switch.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default "medium"
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$e;
@@ -2549,14 +2562,9 @@ class SwitchComponent {
         return this._size;
     }
     /**
-     * Specifies the border radius of the Switch thumb.
+     * Sets the border radius of the Switch.
      *
-     * The possible values are:
-     * * `full` (default)
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `none`
+     * @default "full"
      */
     set thumbRounded(thumbRounded) {
         const newThumbRounded = thumbRounded ? thumbRounded : DEFAULT_THUMB_ROUNDED;
@@ -2567,14 +2575,9 @@ class SwitchComponent {
         return this._thumbRounded;
     }
     /**
-     * Specifies the border radius of the Switch track.
+     * Sets the border radius of the Switch track.
      *
-     * The possible values are:
-     * * `full` (default)
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `none`
+     * @default "full"
      */
     set trackRounded(trackRounded) {
         const newTrackRounded = trackRounded ? trackRounded : DEFAULT_TRACK_ROUNDED;
@@ -2594,15 +2597,15 @@ class SwitchComponent {
         return this.tabindex;
     }
     /**
-     * Fires each time the Switch component is focused as a result of user interaction.
+     * Fires when the user focuses the Switch.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the Switch component is blurred as a result of user interaction.
+     * Fires when the user blurs the Switch.
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the user selects a new value.
+     * Fires when the value of the Switch changes.
      */
     valueChange = new EventEmitter();
     direction;
@@ -2708,17 +2711,6 @@ class SwitchComponent {
     /**
      * Focuses the Switch.
      *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="switch.focus()">Focus</button>
-     *  <kendo-switch #switch></kendo-switch>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
      */
     focus() {
         if (!this.hostElement) {
@@ -3058,10 +3050,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI TextBox directive]({% slug overview_textbox %}) for the Inputs components for Angular.
- * Used to style the textbox of any `input` element.
+ * Use this directive to style the textbox of any `input` element.
  *
  * @example
- * ```ts-no-run
+ * ```html
  * <input kendoTextBox />
  * <input kendoTextBox type="email" />
  * <input kendoTextBox type="password" />
@@ -3176,11 +3168,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI TextArea directive for the Inputs components for Angular]({% slug overview_textarea %}).
- * Provides floating labels to `textarea` elements.
+ * Represents the Kendo UI TextArea directive for the Inputs components for Angular.
  *
  * @example
- * ```ts-no-run
+ * ```html
  * <textarea kendoTextArea></textarea>
  * ```
  */
@@ -3194,18 +3185,18 @@ class TextAreaDirective {
     autofillClass = true;
     direction;
     /**
-     * Fires each time the textarea value is changed.
+     * Fires when the TextArea value changes.
      */
     valueChange = new EventEmitter();
     /**
-     * Specifies if the `textarea` element will resize its height automatically
+     * Sets whether the `textarea` element resizes its height automatically
      * ([see example](slug:textarea_sizing#toc-auto-resizing)).
      *
      * @default false
      */
     autoSize = false;
     /**
-     * Specifies the textarea value.
+     * Sets the textarea value.
      */
     value;
     /**
@@ -3597,26 +3588,21 @@ var ArrowDirection;
 })(ArrowDirection || (ArrowDirection = {}));
 
 /**
- * Specifies a separator in the content of components like the TextArea and the TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
+ * Represents a separator in the content of components like TextArea and TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
+ *
  * @example
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textbox>
- *    <ng-template kendoTextBoxSuffixTemplate>
- *        <kendo-input-separator></kendo-input-separator>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </ng-template>
- *  </kendo-textbox>
- * `
- * })
- * class AppComponent {}
+ * ```html
+ * <kendo-textbox>
+ *   <ng-template kendoTextBoxSuffixTemplate>
+ *     <kendo-input-separator></kendo-input-separator>
+ *     <button kendoButton icon="image"></button>
+ *   </ng-template>
+ * </kendo-textbox>
  * ```
  */
 class InputSeparatorComponent {
     /**
-     * Specifies the orientation of the separator. Applicable for the adornments of the [`TextAreaComponent`](slug:api_inputs_textareacomponent).
+     * Sets the orientation of the separator. Use this for the adornments of the [`TextAreaComponent`](slug:api_inputs_textareacomponent).
      *
      * @default 'vertical'
      */
@@ -3750,11 +3736,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class NumericTextBoxMessages extends ComponentMessages {
     /**
-     * The title of the **Decrement** button of the NumericTextBox.
+     * Sets the title of the **Decrement** button in the NumericTextBox.
      */
     decrement;
     /**
-     * The title of the **Increment** button of the NumericTextBox.
+     * Sets the title of the **Increment** button in the NumericTextBox.
      */
     increment;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -3817,6 +3803,16 @@ const DEFAULT_ROUNDED$8 = 'medium';
 const DEFAULT_FILL_MODE$6 = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
+ *
+ * Use this component to allow users to input numeric values.
+ *
+ * @example
+ * ```html
+ * <kendo-numerictextbox [(ngModel)]="value"></kendo-numerictextbox>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link NumericTextBoxCustomMessagesComponent}.
  */
 class NumericTextBoxComponent {
     intl;
@@ -3831,28 +3827,29 @@ class NumericTextBoxComponent {
      */
     focusableId = `k-${guid()}`;
     /**
-     * Determines whether the NumericTextBox is disabled ([see example]({% slug disabled_numerictextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
+     * When `true`, disables the `NumericTextBox`.
+     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
+     *
+     * @default false
      */
     disabled = false;
     /**
-     * Determines whether the NumericTextBox is in its read-only state ([see example]({% slug readonly_numerictextbox %})).
+     * When `true`, makes the NumericTextBox read-only.
      *
      * @default false
      */
     readonly = false;
     /**
-     * Sets the title of the `input` element of the NumericTextBox.
+     * Sets the `title` attribute of the input element.
      */
     title = '';
     /**
-     * Specifies whether the value will be auto-corrected based on the minimum and maximum values
-     * ([see example]({% slug precision_numerictextbox %})).
+     * When `true`, the value is automatically corrected based on the minimum and maximum values ([see example]({% slug precision_numerictextbox %})).
      */
     autoCorrect = false;
     /**
-     * Specifies the number format which is used when the NumericTextBox is not focused
-     * ([see example]({% slug formats_numerictextbox %})).
-     * If `format` is set to `null` or `undefined`, the default format will be used.
+     * Specifies the number format used when the NumericTextBox is not focused ([see example]({% slug formats_numerictextbox %})).
+     * If `format` is `null` or `undefined`, the default format is used.
      */
     get format() {
         const format = this._format;
@@ -3862,43 +3859,41 @@ class NumericTextBoxComponent {
         this._format = value;
     }
     /**
-     * Specifies the greatest value that is valid
-     * ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
+     * Sets the maximum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
      */
     max;
     /**
-     * Specifies the smallest value that is valid
-     * ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
+     * Sets the minimum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
      */
     min;
     /**
-     * Specifies the number of decimals that the user can enter when the input is focused
-     * ([see example]({% slug precision_numerictextbox %})).
+     * Specifies the number of decimals the user can enter when the input is focused ([see example]({% slug precision_numerictextbox %})).
      */
     decimals = null;
     /**
-     * Specifies the input placeholder.
+     * Sets the input placeholder.
      */
     placeholder;
     /**
-     * Specifies the value that is used to increment or decrement the component value
-     * ([see example]({% slug predefinedsteps_numerictextbox %})).
+     * Specifies the value used to increment or decrement the component value ([see example]({% slug predefinedsteps_numerictextbox %})).
+     *
+     * @default 1
      */
     step = 1;
     /**
-     * Specifies whether the **Up** and **Down** spin buttons will be rendered
-     * ([see example]({% slug spinbuttons_numerictextbox %})).
+     * When `true`, renders the **Up** and **Down** spin buttons ([see example]({% slug spinbuttons_numerictextbox %})).
+     *
+     * @default true
      */
     spinners = true;
     /**
-     * Determines whether the built-in minimum or maximum validators are enforced when a form is validated.
+     * Enforces the built-in minimum and maximum validators during form validation.
      *
-     * > The 4.2.0 Angular version introduces the `min` and `max` validation directives. As a result, even if you set `rangeValidation`
-     * > to `false`, the built-in Angular validators will be executed.
+     * @default true
      */
     rangeValidation = true;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
     tabindex = 0;
     /**
@@ -3911,34 +3906,31 @@ class NumericTextBoxComponent {
         return this.tabindex;
     }
     /**
-     * Determines whether the value of the NumericTextBox will be changed via scrolling. Defaults to `true`.
+     * When `true`, enables changing the value with the mouse wheel.
      *
      * @default true
      */
     changeValueOnScroll = true;
     /**
-     * Determines whether the whole value will be selected when the NumericTextBox is clicked. Defaults to `true`.
+     * When `true`, enables selecting the entire value on click.
+     *
+     * @default true
      */
     selectOnFocus = true;
     /**
-     * Specifies the value of the NumericTextBox
-     * ([see example]({% slug formats_numerictextbox %})).
+     * Sets the value of the NumericTextBox ([see example]({% slug formats_numerictextbox %})).
      */
     value = null;
     /**
-     * Specifies the maximum number of characters the end user can type or paste in the input.
-     * The locale-specific decimal separator and negative sign (`-`) are included in the length of the value when present.
-     * The `maxlength` restriction is not applied to the length of the formatted value when the component is not focused.
+     * Sets the maximum number of characters the user can type or paste in the input.
+     * The locale-specific decimal separator and negative sign (`-`) count toward the length.
+     * The `maxlength` does not apply to the formatted value when the component is not focused.
      */
     maxlength;
     /**
-     * The size property specifies padding of the NumericTextBox internal input element
-     * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the padding of the internal input element ([see example]({% slug appearance_numerictextbox %}#toc-size)).
+     *
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$d;
@@ -3949,13 +3941,9 @@ class NumericTextBoxComponent {
         return this._size;
     }
     /**
-     * The `rounded` property specifies the border radius of the NumericTextBox
-     * ([see example](slug:appearance_numerictextbox#toc-roundness)).
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the border radius of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-roundness)).
+     *
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$8;
@@ -3966,13 +3954,9 @@ class NumericTextBoxComponent {
         return this._rounded;
     }
     /**
-     * The `fillMode` property specifies the background and border styles of the NumericTextBox
-     * ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * Sets the background and border styles of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
+     *
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$6;
@@ -3983,7 +3967,8 @@ class NumericTextBoxComponent {
         return this._fillMode;
     }
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Sets HTML attributes on the inner input element.
+     * The component ignores attributes that are essential for its functionality.
      */
     set inputAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
@@ -3999,23 +3984,23 @@ class NumericTextBoxComponent {
         return this._inputAttributes;
     }
     /**
-     * Fires each time the user selects a new value ([see example](slug:events_numerictextbox)).
+     * Fires when the user selects a new value ([see example](slug:events_numerictextbox)).
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the user focuses the NumericTextBox element ([see example](slug:events_numerictextbox)).
+     * Fires when the NumericTextBox element is focused ([see example](slug:events_numerictextbox)).
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the NumericTextBox component gets blurred ([see example](slug:events_numerictextbox)).
+     * Fires when the `NumericTextBox` component gets blurred ([see example](slug:events_numerictextbox)).
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the user focuses the `input` element.
+     * Fires when the input element is focused.
      */
     inputFocus = new EventEmitter();
     /**
-     * Fires each time the `input` element gets blurred.
+     * Fires when the input element gets blurred.
      */
     inputBlur = new EventEmitter();
     /**
@@ -4231,18 +4216,6 @@ class NumericTextBoxComponent {
     }
     /**
      * Focuses the NumericTextBox.
-     *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="numerictextbox.focus()">Focus NumericTextBox</button>
-     *  <kendo-numerictextbox #numerictextbox></kendo-numerictextbox>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
      */
     focus() {
         invokeElementMethod(this.numericInput, 'focus');
@@ -4254,7 +4227,7 @@ class NumericTextBoxComponent {
         invokeElementMethod(this.numericInput, 'blur');
     }
     /**
-     * Notifies the `NumericTextBoxComponent` that the input value should be changed.
+     * Notifies the NumericTextBoxComponent that the input value should be changed.
      * Can be used to update the input after setting the component properties directly.
      */
     notifyValueChange() {
@@ -5082,7 +5055,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Overrides the default messages of the NumericTextBox component.
+ *
+ * Use this component to provide custom messages for the NumericTextBox.
+ *
+ * @example
+ * ```html
+ * <kendo-numerictextbox>
+ *   <kendo-numerictextbox-messages
+ *     [increment]="'Custom Increment Message'"
+ *     [decrement]="'Custom Decrement Message'">
+ *   </kendo-numerictextbox-messages>
+ * <kendo-numerictextbox>
+ * ```
  */
 class NumericTextBoxCustomMessagesComponent extends NumericTextBoxMessages {
     service;
@@ -5554,21 +5539,21 @@ const DEFAULT_FILL_MODE$5 = 'solid';
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
  * @example
- * ```ts-no-run
+ * ```typescript
+ * import { Component } from '@angular/core';
  *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *      <kendo-maskedtextbox
- *          [mask]="mask"
- *          [value]="value">
- *      </kendo-maskedtextbox>
- *     `
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-maskedtextbox
+ *       [mask]="mask"
+ *       [value]="value">
+ *     </kendo-maskedtextbox>
+ *   `
  * })
- *
- * class AppComponent {
- *  public value: string = "9580128055807792";
- *  public mask: string = "0000-0000-0000-0000";
+ * export class AppComponent {
+ *   public value: string = "9580128055807792";
+ *   public mask: string = "0000-0000-0000-0000";
  * }
  * ```
  */
@@ -5584,27 +5569,23 @@ class MaskedTextBoxComponent {
      */
     focusableId = `k-${guid()}`;
     /**
-     * Determines whether the MaskedTextBox is disabled ([see example]({% slug disabled_maskedtextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
+     * Disables the MaskedTextBox when you set it to `true` ([see example]({% slug disabled_maskedtextbox %})).
+     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
+     * @default false
      */
     disabled = false;
     /**
-     * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
-     *
+     * When `true`, sets the MaskedTextBox to read-only mode ([see example]({% slug readonly_maskedtextbox %})).
      * @default false
      */
     readonly = false;
     /**
-     * Sets the title of the `input` element.
+     * Sets the `title` attribute of the input element.
      */
     title;
     /**
-     * The size property specifies the padding of the MaskedTextBox internal input element
-     * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the padding size of the MaskedTextBox input element ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$c;
@@ -5615,13 +5596,8 @@ class MaskedTextBoxComponent {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the MaskedTextBox
-     * ([see example](slug:appearance_maskedtextbox#toc-roundness)).
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the border radius of the MaskedTextBox ([see example](slug:appearance_maskedtextbox#toc-roundness)).
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$7;
@@ -5632,13 +5608,8 @@ class MaskedTextBoxComponent {
         return this._rounded;
     }
     /**
-     * The `fillMode` property specifies the background and border styles of the MaskedTexBox
-     * ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * Sets the background and border style of the MaskedTextBox ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
@@ -5649,19 +5620,19 @@ class MaskedTextBoxComponent {
         return this._fillMode;
     }
     /**
-     * Represents the current mask ([see example]({% slug value_maskedtextbox %})).
-     * If no mask is set, the component behaves as a standard `type="text"` input.
+     * Sets the mask pattern for the MaskedTextBox ([see example]({% slug value_maskedtextbox %})).
+     * If you do not set a mask, the component acts as a standard `type="text"` input.
      *
-     * > If the mask allows for spaces, set the [promptPlaceholder]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
-     * to a character that is not accepted by the mask.
+     * If the mask allows spaces, set the [`promptPlaceholder`]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
+     * to a character that the mask does not accept.
      */
     mask;
     /**
-     * Provides a value for the MaskedTextBox.
+     * Sets the value of the MaskedTextBox.
      */
     value;
     /**
-     * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
+     * Sets the RegExp-based mask validation rules ([see example]({% slug masks_maskedtextbox %})).
      */
     set rules(value) {
         this._rules = Object.assign({}, this.defaultRules, value);
@@ -5670,32 +5641,31 @@ class MaskedTextBoxComponent {
         return this._rules || this.defaultRules;
     }
     /**
-     * Represents a prompt character for the masked value.
+     * Sets the prompt character for the masked value.
      * @default `_`
      */
     prompt = '_';
     /**
-     * Indicates a character which represents an empty position in the raw value.
+     * Sets the character that represents an empty position in the raw value.
      * @default ' '
      */
     promptPlaceholder = ' ';
     /**
-     * Indicates whether to include literals in the raw value  ([see example]({% slug value_maskedtextbox %})).
+     * When `true` includes literals in the raw value ([see example]({% slug value_maskedtextbox %})).
      * @default false
      */
     includeLiterals = false;
     /**
-     * Specifies if the mask should be shown on focus for empty value.
+     * Shows the mask on focus when the value is empty.
      */
     maskOnFocus = false;
     /**
-     * Determines whether the built-in mask validator is enforced when a form is validated
-     * ([see example]({% slug validation_maskedtextbox %})).
+     * Enables the built-in mask validator when you set it to `true` ([see example]({% slug validation_maskedtextbox %})).
      * @default true
      */
     maskValidation = true;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
      */
     tabindex = 0;
     /**
@@ -5708,7 +5678,8 @@ class MaskedTextBoxComponent {
         return this.tabindex;
     }
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Sets HTML attributes for the inner input element.
+     * You cannot change attributes that are essential for component functionality.
      */
     set inputAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
@@ -5744,57 +5715,29 @@ class MaskedTextBoxComponent {
         };
     }
     /**
-     * Fires each time the user focuses the MaskedTextBox component.
+     * Fires when the MaskedTextBox gets focused.
      *
-     * > To wire the event programmatically, use the `onFocus` property.
+     * To subscribe programmatically, use the `onFocus` property.
      *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleFocus(): void {
-     *      console.log("Component is focused");
-     *   }
-     * }
-     * ```
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the MaskedTextBox component gets blurred.
+     * Fires when the MaskedTextBox gets blurred.
      *
-     * > To wire the event programmatically, use the `onBlur` property.
+     * To subscribe programmatically, use the `onBlur` property.
      *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleBlur(): void {
-     *      console.log("Component is blurred");
-     *   }
-     * }
-     * ```
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the user focuses the `input` element.
+     * Fires when the input element gets focused.
      */
     inputFocus = new EventEmitter();
     /**
-     * Fires each time the `input` element gets blurred.
+     * Fires when the input element gets blurred.
      */
     inputBlur = new EventEmitter();
     /**
-     * Fires each time the value changes.
+     * Fires when the value changes.
      */
     valueChange = new EventEmitter();
     direction;
@@ -5803,7 +5746,7 @@ class MaskedTextBoxComponent {
         return this.disabled;
     }
     /**
-     * Represents the `ElementRef` of the visible `input` element.
+     * Returns the `ElementRef` of the visible `input` element.
      */
     input;
     /**
@@ -6483,11 +6426,6 @@ class RadioCheckBoxBase {
      *
      * @default 'medium'
      *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `none`
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$b;
@@ -6519,13 +6457,11 @@ class RadioCheckBoxBase {
     /**
      * 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();
     /**
@@ -6724,6 +6660,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 const DEFAULT_ROUNDED$6 = 'medium';
+/**
+ * Represents the Kendo UI CheckBox component for Angular.
+ * Use this component to create a styled checkbox with support for indeterminate state.
+ *
+ * @example
+ * ```html
+ * <kendo-checkbox [(checkedState)]="value"></kendo-checkbox>
+ * ```
+ */
 class CheckBoxComponent extends RadioCheckBoxBase {
     renderer;
     hostElement;
@@ -6734,6 +6679,8 @@ class CheckBoxComponent extends RadioCheckBoxBase {
     /**
      * Sets the checked state of the component.
      *
+     * Use `true`, `false`, or `'indeterminate'` to control the state.
+     *
      * @default false
      */
     set checkedState(value) {
@@ -6747,16 +6694,10 @@ class CheckBoxComponent extends RadioCheckBoxBase {
         return this._checkedState;
     }
     /**
-     * The rounded property specifies the border radius of the CheckBox
+     * Sets the `rounded` property to specify the border radius of the CheckBox
      * ([see example](slug:appearance_checkboxdirective#toc-roundness)).
      *
      * @default 'medium'
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `none`
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
@@ -6767,12 +6708,9 @@ class CheckBoxComponent extends RadioCheckBoxBase {
         return this._rounded;
     }
     /**
-     * Fires each time the inner input's checked state is changed.
-     * When the state of the component is programmatically changed to `ngModel` or `formControl`
-     * through its API or form binding, the `checkedStateChange` event is not triggered because it
-     * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
-     *
-     * Used to provide a two-way binding for the `checkedState` property.
+     * Fires when the inner input's checked state changes.
+     * This event does not fire when you change the state programmatically using `ngModel` or `formControl`.
+     * Use this event for two-way binding with the `checkedState` property.
      */
     checkedStateChange = new EventEmitter();
     /**
@@ -6937,11 +6875,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 const DEFAULT_SIZE$a = 'medium';
 const DEFAULT_ROUNDED$5 = 'medium';
 /**
- * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
- * The directive is placed on input type="checkbox" elements.
+ * Renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
+ * Apply this directive to `input type="checkbox"` HTML elements.
  *
  * @example
- * ```ts-no-run
+ * ```html
  * <input type="checkbox" kendoCheckBox />
  * ```
  */
@@ -6950,14 +6888,10 @@ class CheckBoxDirective {
     hostElement;
     kendoClass = true;
     /**
-     * The size property specifies the width and height of the CheckBox
+     * Sets the `size` property to specify the width and height of the CheckBox
      * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$a;
@@ -6968,14 +6902,11 @@ class CheckBoxDirective {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the CheckBox
+     * Sets the `rounded` property to specify the border radius of the CheckBox
      * ([see example](slug:appearance_checkboxdirective#toc-roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
+     *
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
@@ -7404,25 +7335,21 @@ const isJapanese = (input) => {
 };
 
 /**
- * Specifies the adornments in the suffix container ([see examples](slug:adornments_textbox#toc-suffix-adornments)).
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textbox>
- *    <ng-template kendoTextBoxSuffixTemplate>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </ng-template>
- *  </kendo-textbox>
- * `
- * })
- * class AppComponent {}
+ * Represents a template for suffix adornments in the TextBox component ([see examples](slug:adornments_textbox#toc-suffix-adornments)).
+ *
+ * @example
+ * ```html
+ * <kendo-textbox>
+ *   <ng-template kendoTextBoxSuffixTemplate>
+ *     <button kendoButton icon="image"></button>
+ *   </ng-template>
+ * </kendo-textbox>
  * ```
  */
 class TextBoxSuffixTemplateDirective {
     templateRef;
     /**
-     * Sets the `showSeparator` attribute of the `kendoTextBoxSuffixTemplate`.
+     * Determines whether a separator is shown before the suffix template.
      *
      * @default false
      */
@@ -7452,26 +7379,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the adornments in the prefix container ([see examples](slug:adornments_textbox#toc-prefix-adornments)).
+ * Represents a template for prefix adornments in the TextBox component ([see examples](slug:adornments_textbox#toc-prefix-adornments)).
+ *
  * @example
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textbox>
- *    <ng-template kendoTextBoxPrefixTemplate>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </ng-template>
+ * ```html
+ * <kendo-textbox>
+ *   <ng-template kendoTextBoxPrefixTemplate>
+ *     <button kendoButton icon="image"></button>
+ *   </ng-template>
  *  </kendo-textbox>
- * `
- * })
- * class AppComponent {}
+
  * ```
  */
 class TextBoxPrefixTemplateDirective {
     templateRef;
     /**
-     * Sets the `showSeparator` attribute of the `kendoTextBoxPrefixTemplate`.
+     * Determines whether a separator is shown after the prefix template.
      *
      * @default false
      */
@@ -7558,6 +7481,18 @@ const DEFAULT_SIZE$9 = 'medium';
 const DEFAULT_ROUNDED$4 = 'medium';
 const DEFAULT_FILL_MODE$4 = 'solid';
 const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
+/**
+ * Represents the Kendo UI TextBox component for Angular.
+ * Use this component to create styled and feature-rich text input fields.
+ *
+ * @example
+ * ```html
+ * <kendo-textbox placeholder="Enter text"></kendo-textbox>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link TextBoxCustomMessagesComponent}.
+ */
 class TextBoxComponent {
     localizationService;
     ngZone;
@@ -7575,23 +7510,21 @@ class TextBoxComponent {
     title;
     /**
      * Sets the `type` attribute of the `input` element of the TextBox.
+     * @default 'text'
      */
     type = 'text';
     /**
-     * Sets the disabled state of the TextBox. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_textbox#toc-managing-the-textbox-disabled-state-in-reactive-forms).
-     *
+     * Sets the disabled state of the TextBox. To disable the component in reactive forms, see [Forms Support](slug:formssupport_textbox#toc-managing-the-textbox-disabled-state-in-reactive-forms).
      * @default false
      */
     disabled = false;
     /**
      * Sets the read-only state of the component.
-     *
      * @default false
      */
     readonly = false;
     /**
      * Specifies the `tabindex` of the TextBox.
-     *
      * @default 0
      */
     tabindex = 0;
@@ -7600,74 +7533,54 @@ class TextBoxComponent {
      */
     value = null;
     /**
-     * Determines whether the whole value will be selected when the TextBox is clicked. Defaults to `false`.
-     *
+     * Highlights the whole value when you click the TextBox.
      * @default false
      */
     selectOnFocus = false;
     /**
-     * Specifies when the Success icon will be shown ([see example]({% slug validation_textbox %})).
-     *
-     * The possible values are:
-     *
-     * `boolean`&mdash;The Success icon is displayed, if the condition given by the developer is met.
-     *
-     * `initial`&mdash;The Success icon will be displayed when the component state is neither `invalid` nor `touched` or `dirty`.
+     * Specifies when to show the Success icon ([see example]({% slug validation_textbox %})).
      *
      * @default false
      */
     showSuccessIcon = false;
     /**
-     * Specifies when the Error icon will be shown ([see example]({% slug validation_textbox %})).
-     *
-     * The possible values are:
-     *
-     * * `initial`&mdash;The Error icon will be displayed when the component state is
-     * `invalid` and `touched` or `dirty`.
-     * * `boolean`&mdash;The Error icon is displayed, if the condition given by the developer is met.
+     * Specifies when to show the Error icon ([see example]({% slug validation_textbox %})).
      *
      * @default false
      */
     showErrorIcon = false;
     /**
-     * Specifies whether a Clear button will be rendered.
-     *
+     * Shows a **Clear** button in the TextBox.
      * @default false
      */
     clearButton = false;
     /**
-     * Sets a custom icon that will be rendered instead of the default one for a valid user input.
+     * Sets a custom icon for valid user input.
      */
     successIcon;
     /**
-     * Sets a custom SVG icon that will be rendered instead of the default one for a valid user input.
+     * Sets a custom SVG icon for valid user input.
      */
     successSvgIcon;
     /**
-     * Sets a custom icon that will be rendered instead of the default one for invalid user input.
+     * Sets a custom icon for invalid user input.
      */
     errorIcon;
     /**
-     * Sets a custom SVG icon that will be rendered instead of the default one for invalid user input.
+     * Sets a custom SVG icon for invalid user input.
      */
     errorSvgIcon;
     /**
-     * Sets a custom icon that will be rendered instead of the default one.
+     * Sets a custom icon for the **Clear** button.
      */
     clearButtonIcon;
     /**
-     * Sets a custom SVG icon that will be rendered instead of the default one.
+     * Sets a custom SVG icon for the **Clear** button.
      */
     clearButtonSvgIcon;
     /**
-     * The size property specifies the padding of the TextBox internal input element
-     * ([see example]({% slug appearance_textbox %}#toc-size)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the padding of the TextBox internal input element ([see example]({% slug appearance_textbox %}#toc-size)).
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$9;
@@ -7678,15 +7591,8 @@ class TextBoxComponent {
         return this._size;
     }
     /**
-     * The `rounded` property specifies the border radius of the TextBox
-     * ([see example](slug:appearance_textbox#toc-roundness)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Sets the border radius of the TextBox ([see example](slug:appearance_textbox#toc-roundness)).
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
@@ -7697,14 +7603,8 @@ class TextBoxComponent {
         return this._rounded;
     }
     /**
-     * The `fillMode` property specifies the background and border styles of the TextBox
-     * ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
-     *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * Sets the background and border styles of the TextBox ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
@@ -7724,15 +7624,15 @@ class TextBoxComponent {
         return this.tabindex;
     }
     /**
-     * The hint, which is displayed when the component is empty.
+     * Sets the placeholder text displayed when the component is empty.
      */
     placeholder;
     /**
-     * Specifies the maximum length of the TextBox value.
+     * Sets the maximum length of the TextBox value.
      */
     maxlength;
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Sets the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for component functionality.
      */
     set inputAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
@@ -7748,66 +7648,30 @@ class TextBoxComponent {
         return this._inputAttributes;
     }
     /**
-     * Fires each time the value is changed&mdash;
-     * when the component is blurred or the value is cleared through the **Clear** button
-     * ([see example](slug:events_textbox)).
-     * When the value of the component is programmatically changed to `ngModel` or `formControl`
-     * through its API or form binding, the `valueChange` event is not triggered because it
-     * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     * Fires when the value changes—when the component is blurred or the value is cleared through the **Clear** button ([see example](slug:events_textbox)).
+     * Does not fire when you change the value programmatically through `ngModel` or `formControl`.
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the user focuses the `input` element.
+     * Fires when the user focuses the `input` element.
      */
     inputFocus = new EventEmitter();
     /**
-     * Fires each time the `input` element gets blurred.
+     * Fires when the `input` element is blurred.
      */
     inputBlur = new EventEmitter();
     /**
-     * Fires each time the user focuses the TextBox component.
+     * Fires when the user focuses the TextBox component.
      *
-     * > To wire the event programmatically, use the `onFocus` property.
-     *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-textbox (focus)="handleFocus()"></kendo-textbox>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleFocus(): void {
-     *      console.log('Component is focused.');
-     *   }
-     * }
-     * ```
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the TextBox component gets blurred.
-     *
-     * > To wire the event programmatically, use the `onBlur` property.
+     * Fires when the TextBox component is blurred.
      *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-textbox (blur)="handleBlur()"></kendo-textbox>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleBlur(): void {
-     *      console.log('Component is blurred');
-     *   }
-     * }
-     * ```
      */
     onBlur = new EventEmitter();
     /**
-     * Represents the visible `input` element of the TextBox.
+     * Gets a reference to the visible `input` element of the TextBox.
      */
     input;
     /**
@@ -7916,18 +7780,6 @@ class TextBoxComponent {
     }
     /**
      * Focuses the TextBox.
-     *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="input.focus()">Focus the input</button>
-     *  <kendo-textbox #input></kendo-textbox>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
      */
     focus() {
         if (!this.input) {
@@ -7939,7 +7791,7 @@ class TextBoxComponent {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the TextBox.
+     * Removes focus from the TextBox.
      */
     blur() {
         this.focusChangedProgrammatically = true;
@@ -8549,38 +8401,38 @@ class ColorInputComponent {
     cdr;
     localizationService;
     /**
-     * The id of the hex input.
+     * Sets the `id` of the hex input.
      */
     focusableId = `k-${guid()}`;
     /**
-     * The color format view.
+     * Sets the color format view.
      */
     formatView;
     /**
-     * The size property specifies the padding of the ColorInput.
+     * Sets the size of the ColorInput.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE$8;
     /**
-     * The inputs tabindex.
+     * Sets the `tabindex` of the inputs.
+     * @default -1
      */
     tabindex = -1;
     /**
-     * The color value that will be parsed and populate the hex & rgba inputs.
-     * Required input property.
+     * Sets the color value to parse and populate the hex and RGBA inputs.
      */
     value;
     /**
-     * Sets whether the alpha slider will be shown.
+     * Shows or hides the alpha slider.
+     *
+     * @default true
      */
     opacity = true;
     /**
-     * Sets the disabled state of the ColorInput.
+     * Disables the ColorInput.
+     *
+     * @default false
      */
     disabled = false;
     /**
@@ -8590,11 +8442,11 @@ class ColorInputComponent {
      */
     readonly = false;
     /**
-     * Emits a parsed rgba string color.
+     * Emits a parsed RGBA string color.
      */
     valueChange = new EventEmitter();
     /**
-     * Emits when the user tabs out of the last focusable input.
+     * Fires when the user tabs out of the last focusable input.
      */
     tabOut = new EventEmitter();
     colorInputClass = true;
@@ -8603,15 +8455,15 @@ class ColorInputComponent {
     blueInput;
     toggleFormatButton;
     /**
-     * The rgba inputs values.
+     * Holds the RGBA input values.
      */
     rgba = {};
     /*
-     * The hex input value.
+     * Holds the hex input value.
      */
     hex;
     /**
-     * Indicates whether any of the inputs are focused.
+     * Returns `true` if any of the inputs are focused.
      */
     get isFocused() {
         if (!(isDocumentAvailable() && isPresent(this.host))) {
@@ -8621,7 +8473,7 @@ class ColorInputComponent {
         return this.host.nativeElement.contains(activeElement);
     }
     /**
-     * Indicates whether any of the rgba inputs have value.
+     * Returns `true` if all RGBA inputs have values.
      */
     get rgbaInputValid() {
         return Object.keys(this.rgba).every(key => isPresent(this.rgba[key]));
@@ -8713,7 +8565,7 @@ class ColorInputComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
-            <button 
+            <button
                 kendoButton
                 type="button"
                 fillMode="flat"
@@ -8844,7 +8696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-colorinput',
                     template: `
         <div class="k-vstack">
-            <button 
+            <button
                 kendoButton
                 type="button"
                 fillMode="flat"
@@ -9306,119 +9158,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ColorPickerMessages extends ComponentMessages {
     /**
-     * The aria-label applied to the ColorPalette component when the value is empty.
+     * Sets the `aria-label` for the ColorPalette component when the value is empty.
      */
     colorPaletteNoColor;
     /**
-     * The aria-label applied to the ColorGradient component when the value is empty.
+     * Sets the `aria-label` for the ColorGradient component when the value is empty.
      */
     colorGradientNoColor;
     /**
-     * The aria-label applied to the FlatColorPicker component when the value is empty.
+     * Sets the `aria-label` for the FlatColorPicker component when the value is empty.
      */
     flatColorPickerNoColor;
     /**
-     * The aria-label applied to the ColorPicker component when the value is empty.
+     * Sets the `aria-label` for the ColorPicker component when the value is empty.
      */
     colorPickerNoColor;
     /**
-     * The title for the gradient color drag handle chooser.
+     * Sets the title for the gradient color drag handle chooser.
      */
     colorGradientHandle;
     /**
-     * The title for the clear button.
+     * Sets the title for the clear button.
      */
     clearButton;
     /**
-     * The title for the hue slider handle.
+     * Sets the title for the hue slider handle.
      */
     hueSliderHandle;
     /**
-     * The title for the opacity slider handle.
+     * Sets the title for the opacity slider handle.
      */
     opacitySliderHandle;
     /**
-     * The placeholder for the HEX color input.
+     * Sets the placeholder for the HEX color input.
      */
     hexInputPlaceholder;
     /**
-     * The placeholder for the red color input.
+     * Sets the placeholder for the red color input.
      */
     redInputPlaceholder;
     /**
-     * The placeholder for the green color input.
+     * Sets the placeholder for the green color input.
      */
     greenInputPlaceholder;
     /**
-     * The placeholder for the blue color input.
+     * Sets the placeholder for the blue color input.
      */
     blueInputPlaceholder;
     /**
-     * The placeholder for the alpha input.
+     * Sets the placeholder for the alpha input.
      */
     alphaInputPlaceholder;
     /**
-     * The aria-label attribute of the red color input.
+     * Sets the `aria-label` for the red color input.
      */
     redChannelLabel;
     /**
-     * The aria-label attribute of the green color input.
+     * Sets the `aria-label` for the green color input.
      */
     greenChannelLabel;
     /**
-     * The aria-label attribute of the blue color input.
+     * Sets the `aria-label` for the blue color input.
      */
     blueChannelLabel;
     /**
-     * The aria-label attribute of the alpha color input.
+     * Sets the `aria-label` for the alpha color input.
      */
     alphaChannelLabel;
     /**
-     * The "Pass" message for the contrast tool.
+     * Sets the "Pass" message for the contrast tool.
      */
     passContrast;
     /**
-     * The "Fail" message for the contrast tool.
+     * Sets the "Fail" message for the contrast tool.
      */
     failContrast;
     /**
-     * The "Contrast ratio" message for the contrast tool.
+     * Sets the "Contrast ratio" message for the contrast tool.
      */
     contrastRatio;
     /**
-     * The message for the color preview pane.
+     * Sets the message for the color preview pane.
      */
     previewColor;
     /**
-     * The message for the selected color pane.
+     * Sets the message for the selected color pane.
      */
     revertSelection;
     /**
-     * The message for the gradient view button.
+     * Sets the message for the gradient view button.
      */
     gradientView;
     /**
-     * The message for the palette view button.
+     * Sets the message for the palette view button.
      */
     paletteView;
     /**
-     * The message for the input format toggle button.
+     * Sets the message for the input format toggle button.
      */
     formatButton;
     /**
-     * The message for the Apply action button.
+     * Sets the message for the **Apply** action button.
      */
     applyButton;
     /**
-     * The message for the Cancel action button.
+     * Sets the message for the **Cancel** action button.
      */
     cancelButton;
     /**
-     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
+     * Sets the title of the **Close** button for the ActionSheet in adaptive mode.
      */
     adaptiveCloseButtonTitle;
     /**
-     * The title for the ActionSheet when in adaptive mode.
+     * Sets the title for the ActionSheet in adaptive mode.
      */
     adaptiveTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -9525,8 +9377,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 let serial$3 = 0;
 const DEFAULT_SIZE$7 = 'medium';
 /**
- * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
- * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
+ * Represents the Kendo UI ColorGradient component.
+ *
+ * The ColorGradientComponent lets you select a color by moving a drag handle over a gradient area. You can use it directly or as part of the `kendo-colorpicker`.
+ *
+ * @example
+ * ```html
+ * <kendo-colorgradient [(ngModel)]="color"></kendo-colorgradient>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 class ColorGradientComponent {
     host;
@@ -9591,19 +9452,15 @@ class ColorGradientComponent {
      */
     id = `k-colorgradient-${serial$3++}`;
     /**
-     * Defines whether the alpha slider will be displayed.
+     * Shows or hides the alpha slider.
      *
      * @default true
      */
     opacity = true;
     /**
-     * The size property specifies the padding of the ColorGradient internal elements.
+     * Sets the size of the ColorGradient internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE$7;
@@ -9614,7 +9471,7 @@ class ColorGradientComponent {
         return this._size;
     }
     /**
-     * Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
+     * Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -9626,19 +9483,19 @@ class ColorGradientComponent {
      */
     readonly = false;
     /**
-     * Specifies whether the ColorGradient should display a 'Clear color' button.
+     * Shows or hides the **Clear color** button.
      *
      * @default false
      */
     clearButton = false;
     /**
-     * Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
+     * Sets the delay (in milliseconds) before the value changes on handle drag.
      *
      * @default 0
      */
     delay = 0;
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format, this.opacity);
@@ -9647,8 +9504,7 @@ class ColorGradientComponent {
         return this._value;
     }
     /**
-     * Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
-     * The tool will calculate the contrast ratio between the two colors.
+     * Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](slug:contrasttool_colorgradient).
      */
     set contrastTool(value) {
         this._contrastTool = parseColor(value, this.format, this.opacity);
@@ -9657,7 +9513,7 @@ class ColorGradientComponent {
         return this._contrastTool;
     }
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
@@ -9675,17 +9531,13 @@ class ColorGradientComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Specifies the output format of the ColorGradientComponent.
-     * The input value may be in a different format, but it will be parsed into the output `format`
-     * after the component processes it.
+     * Sets the output format of the ColorGradient. The input value may be in a different format, but it will be parsed into the output format after the component processes it.
      *
-     * The supported values are:
-     * * (Default) `rgba`
-     * * `hex`
+     * @default 'rgba'
      */
     format = DEFAULT_OUTPUT_FORMAT;
     /**
-     * Fires each time the user selects a new color.
+     * Fires when the user selects a new color..
      */
     valueChange = new EventEmitter();
     /**
@@ -9701,7 +9553,7 @@ class ColorGradientComponent {
      */
     hsva = new BehaviorSubject({});
     /**
-     * Indicates whether the ColorGradient or any of its content is focused.
+     * Returns `true` if the component or its content is focused.
      */
     get isFocused() {
         if (!(isDocumentAvailable() && isPresent(this.host))) {
@@ -9720,13 +9572,13 @@ class ColorGradientComponent {
         return this.hsva.value.a * 100;
     }
     /**
-     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+     * Sets the step (in pixels) for moving the gradient drag handle with the arrow keys.
      *
      * @default 5
      */
     gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
     /**
-     * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+     * Sets the step (in pixels) for moving the gradient drag handle with `Shift+arrow keys`.
      *
      * @default 2
      */
@@ -10742,8 +10594,17 @@ const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
 const DEFAULT_SIZE$6 = 'medium';
 let serial$2 = 0;
 /**
- * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
- * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
+ * Represents the Kendo UI ColorPalette component.
+ *
+ * The `ColorPaletteComponent` provides a set of predefined palette presets and lets you implement a custom color palette. You can use it directly or as part of the `kendo-colorpicker`.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpalette [palette]="['#fff', '#000']" [(value)]="selectedColor"></kendo-colorpalette>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 class ColorPaletteComponent {
     host;
@@ -10777,18 +10638,14 @@ class ColorPaletteComponent {
      */
     id = `k-colorpalette-${serial$2++}`;
     /**
-     * Specifies the output format of the ColorPaletteComponent.
-     * The input value may be in a different format. However, it will be parsed into the output `format`
-     * after the component processes it.
+     * Specifies the output format of the `ColorPaletteComponent`.
+     * The input value may be in a different format. The component parses it into the output `format`.
      *
-     * The supported values are:
-     * * (Default) `hex`
-     * * `rgba`
-     * * `name`
+     * @default 'hex'
      */
     format = 'hex';
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format);
@@ -10797,8 +10654,9 @@ class ColorPaletteComponent {
         return this._value;
     }
     /**
-     * Specifies the number of columns that will be displayed.
-     * Defaults to `10`.
+     * Sets the number of columns to display.
+     *
+     * @default 10
      */
     set columns(value) {
         const minColumnsCount = 1;
@@ -10808,12 +10666,7 @@ class ColorPaletteComponent {
         return this._columns;
     }
     /**
-     * The color palette that will be displayed.
-     *
-     * The supported values are:
-     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
-     * * A string with comma-separated colors.
-     * * A string array.
+     * Sets the color palette to display. You can use a predefined palette preset (such as `office`, `basic`, or `apex`), string with comma-separated colors, or an array of string colors.
      */
     set palette(value) {
         if (!isPresent(value)) {
@@ -10830,13 +10683,9 @@ class ColorPaletteComponent {
         return this._palette;
     }
     /**
-     * The size property specifies the padding of the ColorPalette internal elements.
+     * Sets the size of the ColorPalette internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE$6;
@@ -10847,7 +10696,9 @@ class ColorPaletteComponent {
         return this._size;
     }
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     set tabindex(value) {
         const tabindex = Number(value);
@@ -10858,7 +10709,7 @@ class ColorPaletteComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
+     * Disables the ColorPalette. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
@@ -10868,7 +10719,7 @@ class ColorPaletteComponent {
      */
     readonly = false;
     /**
-     * Specifies the size of a color cell. The default tile size depends on the `size` of the component.
+     * Sets the size of a color cell. The default tile size depends on the `size` of the component.
      */
     tileSize;
     /**
@@ -10881,11 +10732,11 @@ class ColorPaletteComponent {
         return { width: this.tileSize, height: this.tileSize };
     }
     /**
-     * Fires each time the color selection is changed.
+     * Fires when the color selection changes.
      */
     selectionChange = new EventEmitter();
     /**
-     * Fires each time the value is changed.
+     * Fires when the value changes.
      */
     valueChange = new EventEmitter();
     /**
@@ -11367,7 +11218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ * Provides the arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
  */
 class ColorPickerCancelEvent extends PreventableEvent {
     /**
@@ -11381,45 +11232,41 @@ class ColorPickerCancelEvent extends PreventableEvent {
 }
 
 /**
- * Arguments for the `close` event of the ColorPicker component.
+ * Provides the arguments for the `close` event of the ColorPicker component.
  */
 class ColorPickerCloseEvent extends PreventableEvent {
 }
 
 /**
- * Arguments for the `open` event of the ColorPicker component.
+ * Provides the arguments for the `open` event of the ColorPicker component.
  */
 class ColorPickerOpenEvent extends PreventableEvent {
 }
 
 /**
- * Fires each time the left side of the ColorPicker wrapper is clicked.
- * The event is triggered regardless of whether a ColorPicker icon is set or not.
+ * Fires when you click the left side of the ColorPicker wrapper.
+ * The event triggers whether you set a ColorPicker icon or not.
  *
- * Provides information about the current active color and gives the option to prevent the opening of the popup.
+ * Provides information about the current active color and lets you prevent the popup from opening.
  *
  * @example
- *
- * ```ts-no-run
- * _@Component({
+ * ```typescript
+ * @Component({
  *   selector: 'my-app',
  *   template: `
  *       <kendo-colorpicker
  *           [icon]="'edit-tools'"
  *           [value]="'#900'"
- *           (activeColorClick)="handleActiveColorClick($event)"
+ *           (activeColorClick)="onColorClick($event)"
  *       >
  *       </kendo-colorpicker>
  *   `
  * })
  * class AppComponent {
- *     public handleActiveColorClick(event: ActiveColorClickEvent): void {
+ *     public onColorClick(event: ActiveColorClickEvent): void {
  *         event.preventOpen();
- *
- *         console.log('Open prevented:', event.isOpenPrevented());
- *         console.log('Current color:', event.color);
  *     }
- *  }
+ * }
  * ```
  */
 class ActiveColorClickEvent {
@@ -11433,7 +11280,7 @@ class ActiveColorClickEvent {
         this.color = color;
     }
     /**
-     * Prevents the opening of the popup.
+     * Prevents the popup from opening.
      */
     preventOpen() {
         this.openPrevented = true;
@@ -11441,7 +11288,7 @@ class ActiveColorClickEvent {
     /**
      * Returns `true` if the popup opening is prevented by any of its subscribers.
      *
-     * @returns - Returns `true` if the open action was prevented. Otherwise, returns `false`.
+     * @returns Returns `true` if the open action was prevented. Otherwise, returns `false`.
      */
     isOpenPrevented() {
         return this.openPrevented;
@@ -11780,10 +11627,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /* eslint-disable no-unused-expressions */
 const DEFAULT_SIZE$5 = 'medium';
 /**
- * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
+ * Represents the Kendo UI FlatColorPicker component for Angular.
  *
- * The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
- * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ * The `FlatColorPickerComponent` lets you choose colors through palettes with predefined sets of colors and through a gradient that renders an HSV canvas. You can preview the selected color, revert it to its previous state, or clear it.
+ *
+ * @example
+ * ```html
+ * <kendo-flatcolorpicker [(value)]="selectedColor"></kendo-flatcolorpicker>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 class FlatColorPickerComponent {
     host;
@@ -11842,7 +11696,7 @@ class FlatColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -11850,11 +11704,9 @@ class FlatColorPickerComponent {
     /**
      * Specifies the output format of the FlatColorPicker.
      *
-     * If the input value is in a different format, it will be parsed into the specified output `format`.
+     * If the input value is in a different format, the component parses it into the specified output `format`.
      *
-     * The supported values are:
-     * * `rgba` (default)
-     * * `hex`
+     * @default 'rgba'
      */
     format = 'rgba';
     /**
@@ -11885,7 +11737,7 @@ class FlatColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Specifies whether the FlatColorPicker should display a 'Clear color' button.
+     * Specifies whether the FlatColorPicker displays a **Clear color** button.
      *
      * @default true
      */
@@ -11893,31 +11745,27 @@ class FlatColorPickerComponent {
     /**
      * Displays `Apply` and `Cancel` action buttons and a color preview pane.
      *
-     * When enabled, the component value will not change immediately upon
-     * color selection, but only after the `Apply` button is clicked.
+     * When enabled, the component value does not change immediately upon
+     * color selection, but only after the **Apply** button is clicked.
      *
-     * The `Cancel` button reverts the current selection to its
-     * initial state i.e. to the current value.
+     * The **Cancel** button reverts the current selection to its
+     * initial state, i.e., to the current value.
      *
      * @default true
      */
     preview = true;
     /**
      * Configures the layout of the `Apply` and `Cancel` action buttons.
-     * * `start`
-     * * `center`
-     * * `end` (default)
-     * * `stretch`
+     *
+     * @default 'end'
      */
     actionsLayout = 'end';
     /**
-     * Sets the initially active view in the FlatColorPicker. The property supports two-way binding.
-     * * `gradient` (default)
-     * * `palette`
+     * Sets the initially active view in the FlatColorPicker. Supports two-way binding.
      */
     activeView;
     /**
-     * Specifies the views that will be rendered. Default value is gradient and palette.
+     * Specifies the views to render. The default value is gradient and palette.
      */
     views = ['gradient', 'palette'];
     /**
@@ -11943,13 +11791,9 @@ class FlatColorPickerComponent {
         return this._paletteSettings;
     }
     /**
-     * The size property specifies the padding of the FlatColorPicker internal elements.
+     * Sets the size of the FlatColorPicker internal elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE$5;
@@ -11960,7 +11804,7 @@ class FlatColorPickerComponent {
         return this._size;
     }
     /**
-     * Fires each time the component value is changed.
+     * Fires when the component value changes.
      */
     valueChange = new EventEmitter();
     /**
@@ -11970,7 +11814,7 @@ class FlatColorPickerComponent {
      */
     cancel = new EventEmitter();
     /**
-     * Fires each time the view is about to change.
+     * Fires when the view is about to change.
      * Used to provide a two-way binding for the `activeView` property.
      */
     activeViewChange = new EventEmitter();
@@ -12929,10 +12773,18 @@ const DEFAULT_FILL_MODE$3 = 'solid';
  */
 let nextColorPickerId = 0;
 /**
- * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
+ * Represents the Kendo UI ColorPicker component for Angular.
+ *
+ * The `ColorPickerComponent` is a tool for choosing colors from Gradient and Palette views
+ * rendered in its popup. You can preview the selected color, revert it to its previous state, or clear it.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpicker [(value)]="selectedColor"></kendo-colorpicker>
+ * ```
  *
- * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
- * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ * @remarks
+ * Supported children components are: {@link ColorPickerMessages}.
  */
 class ColorPickerComponent {
     host;
@@ -12970,8 +12822,8 @@ class ColorPickerComponent {
      */
     focusableId;
     /**
-     * Specifies the views that will be rendered in the popup.
-     * By default both the gradient and palette views will be rendered.
+     * Specifies the views rendered in the popup.
+     * By default, both the gradient and palette views are rendered.
      */
     views = ['gradient', 'palette'];
     /**
@@ -12984,15 +12836,12 @@ class ColorPickerComponent {
         return (this.views && this.views.length > 0) ? this.views[0] : null;
     }
     /**
-     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     * Enables or disables the adaptive mode.
+     * By default, adaptive rendering is disabled.
      */
     adaptiveMode = 'none';
     /**
-     * Sets the initially active view in the popup. The property supports two-way binding.
-     *
-     * The supported values are:
-     * * `gradient`
-     * * `palette`
+     * Sets the initially active view in the popup. Supports two-way binding.
      */
     activeView;
     /**
@@ -13002,7 +12851,7 @@ class ColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the ColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -13010,15 +12859,13 @@ class ColorPickerComponent {
     /**
      * Specifies the output format of the ColorPicker.
      *
-     * If the input value is in a different format, it will be parsed into the specified output `format`.
+     * If the input value is in a different format, the component parses it into the specified output `format`.
      *
-     * The supported values are:
-     * * `rgba` (default)
-     * * `hex`
+     * @default 'rgba'
      */
     format = 'rgba';
     /**
-     * Specifies the value of the initially selected color.
+     * Sets the value of the selected color.
      */
     set value(value) {
         this._value = parseColor(value, this.format, this.gradientSettings.opacity);
@@ -13036,7 +12883,7 @@ class ColorPickerComponent {
         return this._popupSettings;
     }
     /**
-     * Configures the palette that is displayed in the ColorPicker popup.
+     * Configures the palette displayed in the ColorPicker popup.
      */
     set paletteSettings(value) {
         this._paletteSettings = Object.assign(this._paletteSettings, value);
@@ -13045,7 +12892,7 @@ class ColorPickerComponent {
         return this._paletteSettings;
     }
     /**
-     * Configures the gradient that is displayed in the ColorPicker popup.
+     * Configures the gradient displayed in the ColorPicker popup.
      */
     set gradientSettings(value) {
         this._gradientSettings = Object.assign(this._gradientSettings, value);
@@ -13054,10 +12901,8 @@ class ColorPickerComponent {
         return this._gradientSettings;
     }
     /**
-     * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
-     * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
-     *
-     * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
+     * Defines the name of an existing icon in the Kendo UI theme.
+     * Provide only the name of the icon without the `k-icon` or `k-i-` prefixes.
      */
     icon;
     /**
@@ -13068,8 +12913,8 @@ class ColorPickerComponent {
      */
     iconClass;
     /**
-     * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVGIcon to render within the button.
+     * The input can take either an existing Kendo SVG icon or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -13081,22 +12926,22 @@ class ColorPickerComponent {
         return this._svgIcon;
     }
     /**
-     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * Sets the title of the ActionSheet rendered instead of the Popup on small screens.
      */
     adaptiveTitle = '';
     /**
-     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet does not render a subtitle.
-    */
+     * Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
+     * By default, the ActionSheet does not render a subtitle.
+     */
     adaptiveSubtitle;
     /**
-     * Specifies whether the ColorPicker should display a 'Clear color' button.
+     * Specifies whether the ColorPicker displays a **Clear color** button.
      *
      * @default true
      */
     clearButton = true;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
      * @default 0
      */
@@ -13109,36 +12954,28 @@ class ColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Displays `Apply` and `Cancel` action buttons and color preview panes.
+     * Displays **Apply** and **Cancel** action buttons and color preview panes.
      *
-     * When enabled, the component value will not change immediately upon
-     * color selection, but only after the `Apply` button is clicked.
+     * When enabled, the component value does not change immediately upon
+     * color selection, but only after the **Apply** button is clicked.
      *
-     * The `Cancel` button reverts the current selection to its
-     * previous state i.e. to the current value.
+     * The **Cancel** button reverts the current selection to its
+     * previous state, i.e., to the current value.
      *
      * @default false
      */
     preview = false;
     /**
-     * Configures the layout of the `Apply` and `Cancel` action buttons.
+     * Configures the layout of the **Apply** and **Cancel** action buttons.
      *
-     * The possible values are:
-     * * `start`
-     * * `center`
-     * * `end` (default)
-     * * `stretch`
+     * @default 'end'
      */
     actionsLayout = 'end';
     /**
      * The size property specifies the padding of the ColorPicker internal elements
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$4;
@@ -13152,12 +12989,7 @@ class ColorPickerComponent {
      * The rounded property specifies the border radius of the ColorPicker
      * ([see example](slug:appearance_colorpicker#toc-roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
@@ -13171,11 +13003,7 @@ class ColorPickerComponent {
      * The fillMode property specifies the background and border styles of the ColorPicker
      * ([see example]({% slug appearance_colorpicker %}#toc-fill-mode)).
      *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
@@ -13186,25 +13014,25 @@ class ColorPickerComponent {
         return this._fillMode;
     }
     /**
-     * Fires each time the value is changed.
+     * Fires when the value changes.
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to open.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain closed.
+     * Fires when the Popup (or ActionSheet in adaptive mode) is about to open.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to close.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain open.
+     * Fires when the Popup (or ActionSheet in adaptive mode) is about to close.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains open.
      */
     close = new EventEmitter();
     /**
-     * Fires each time ColorPicker is focused.
+     * Fires when the ColorPicker is focused.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the ColorPicker is blurred.
+     * Fires when the ColorPicker is blurred.
      */
     onBlur = new EventEmitter();
     /**
@@ -13214,19 +13042,19 @@ class ColorPickerComponent {
      */
     cancel = new EventEmitter();
     /**
-     * Fires each time the left side of the ColorPicker wrapper is clicked.
+     * Fires when the left side of the ColorPicker wrapper is clicked.
      * The event is triggered regardless of whether a ColorPicker icon is set or not.
      *
-     * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+     * The [`ActiveColorClickEvent`]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
      */
     activeColorClick = new EventEmitter();
     /**
      * @hidden
-     * Fires each time the clear button is clicked.
+     * Fires when the clear button is clicked.
      */
     clearButtonClick = new EventEmitter();
     /**
-     * Fires each time the view is about to change.
+     * Fires when the view is about to change.
      * Used to provide a two-way binding for the `activeView` property.
      */
     activeViewChange = new EventEmitter();
@@ -14200,7 +14028,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Overrides the default component messages for the ColorPicker.
+ *
+ * @example
+ * ```html
+ * <kendo-colorpicker-messages
+ *   [applyButton]="'Apply custom'"
+ *   [cancelButton]="'Cancel custom'">
+ * </kendo-colorpicker-messages>
+ * ```
  */
 class ColorPickerCustomMessagesComponent extends ColorPickerMessages {
     service;
@@ -14236,17 +14072,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let serial$1 = 0;
 /**
- * Represents an error message that will be shown underneath
- * a Kendo control or native HTML form-bound component after a validation.
- */
-class ErrorComponent {
+ * Represents the Kendo UI FormError component.
+ * Displays an error message under a Kendo Angular component or native HTML form-bound component after validation.
+ *
+ * @example
+ * ```html
+ * <kendo-formerror>Error message here</kendo-formerror>
+ * ```
+ */
+class ErrorComponent {
     hostClass = true;
     /**
-     * Specifies the alignment of the Error message.
+     * Sets the alignment of the error message.
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
+     * @default 'start'
      */
     align = 'start';
     /**
@@ -14298,15 +14137,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let serial = 0;
 /**
- * Represents a hint message that will be shown underneath a form-bound component.
+ * Displays a hint message under a form-bound component.
+ *
+ * @example
+ * ```html
+ * <kendo-formhint>Hint message here</kendo-formhint>
+ * ```
  */
 class HintComponent {
     /**
-     * Specifies the alignment of the Hint message.
+     * Sets the alignment of the hint message.
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
+     * @default 'start'
      */
     align = 'start';
     /**
@@ -14354,8 +14196,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies a container for form-bound controls (Kendo controls or native HTML controls).
+ * Represents the Kendo UI FormField component for Angular.
+ * Use this component to group form-bound controls (Kendo Angular components or native HTML controls).
  * Applies styling and behavior rules.
+ *
+ * @example
+ * ```html
+ * <kendo-formfield>
+ *   <kendo-label [for]="firstName"text="First Name"></kendo-label>
+ *   <kendo-textbox formControlName="firstName" #firstName></kendo-textbox>
+ *   <kendo-formhint>Enter your name.</kendo-formhint>
+ *   <kendo-formerror>First name is required.</kendo-formerror>
+ * </kendo-formfield>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ErrorComponent}, {@link HintComponent}, {@link TextBoxComponent}, {@link NumericTextBoxComponent}, {@link MaskedTextBoxComponent}, {@link TextAreaComponent}, {@link DatePickerComponent}, {@link DateTimePickerComponent}, {@link DateInputComponent}, {@link OTPInputComponent}.
  */
 class FormFieldComponent {
     renderer;
@@ -14393,35 +14249,25 @@ class FormFieldComponent {
     errorChildren;
     hintChildren;
     /**
+     * Specifies when to show the hint messages:
+     * * `initial`&mdash;Shows hints when the form control is `valid` or `untouched` and `pristine`.
+     * * `always`&mdash;Always shows hints.
      *
-     * Specifies when the Hint messages will be shown.
-     *
-     * The possible values are:
-     *
-     * * (Default) `initial`&mdash;Allows displaying hints when the form-bound component state is
-     * `valid` or `untouched` and `pristine`.
-     * * `always`&mdash;Allows full control over the visibility of the hints.
-     *
+     * @default 'initial'
      */
     showHints = 'initial';
     /**
      * Specifies the layout orientation of the form field.
      *
-     * * The possible values are:
-     *
-     * * (Default) `vertical`
-     * * `horizontal`
+     * @default 'vertical'
      */
     orientation = 'vertical';
     /**
-     * Specifies when the Error messages will be shown.
-     *
-     * The possible values are:
-     *
-     * * (Default) `initial`&mdash;Allows displaying errors when the form-bound component state is
-     * `invalid` and `touched` or `dirty`.
-     * * `always`&mdash;Allows full control over the visibility of the errors.
+     * Specifies when to show the error messages:
+     * * `initial`&mdash;Shows errors when the form control is `invalid` and `touched` or `dirty`.
+     * * `always`&mdash;Always shows errors.
      *
+     * @default 'initial'
      */
     showErrors = 'initial';
     /**
@@ -14638,6 +14484,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents the Kendo UI RadioButton component.
+ * Use this component to create a styled radio button in your Angular application.
+ *
+ * @example
+ * ```html
+ * <kendo-radiobutton
+ *   [checked]="true"
+ *   (checkedChange)="onCheckedChange($event)">
+ * </kendo-radiobutton>
+ * ```
+ */
 class RadioButtonComponent extends RadioCheckBoxBase {
     renderer;
     hostElement;
@@ -14654,12 +14512,9 @@ class RadioButtonComponent extends RadioCheckBoxBase {
      */
     checked = false;
     /**
-     * Fires each time the checked state is changed.
-     * When the state of the component is programmatically changed to `ngModel` or `formControl`
-     * through its API or form binding, the `checkedStateChange` event is not triggered because it
-     * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
-     *
-     * Used to provide a two-way binding for the `checked` property.
+     * Fires when the checked state changes.
+     * The event does not fire when you change the state through `ngModel` or `formControl` bindings.
+     * Use this event for two-way binding of the `checked` property.
      */
     checkedChange = new EventEmitter();
     subs = new Subscription();
@@ -14828,11 +14683,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const DEFAULT_SIZE$3 = 'medium';
 /**
- * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
- * The directive is placed on input type="radio" elements.
+ * Represents the directive that renders the Kendo UI RadioButton input component.
+ * Place the directive on `input type="radio"` HTML elements.
  *
  * @example
- * ```ts-no-run
+ * ```html
  * <input type="radio" kendoRadioButton />
  * ```
  */
@@ -14841,13 +14696,9 @@ class RadioButtonDirective {
     hostElement;
     kendoClass = true;
     /**
-     * The size property specifies the width and height of the RadioButton
-     * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+     *
+     * @default "medium"
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$3;
@@ -14898,7 +14749,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Lets you override the default messages of the RangeSlider component.
+ *
+ * @example
+ *
+ * ```html
+ * <kendo-rangeslider-messages
+ *     decreaseHandle="Decrease handle"
+ *     increaseHandle="Increase handle"
+ *     decreaseRange="Decrease range">
+ * </kendo-rangeslider-messages>
+ * ```
  */
 class RangeSliderCustomMessagesComponent extends RangeSliderMessages {
     service;
@@ -14933,10 +14794,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Renders the hovered rating item content. To define an item template, nest an `<ng-template>` tag
- * with the `kendoRatingHoveredItemTemplate` directive inside the `<kendo-rating>` tag
- * [see example](slug:templates_rating).
+ * Renders the hovered rating item content.
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingHoveredItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
+ *
  * The index of the currently hovered item is available as an implicit context using the `let-index="index"` syntax.
+ * * @example
+ * ```html
+ * <kendo-rating [value]="ratingValue">
+ *   <ng-template kendoRatingHoveredItemTemplate let-index="index">
+ *     <span>Hovered item: {{ index }}</span>
+ *   </ng-template>
+ * </kendo-rating>
+ * ```
  */
 class RatingHoveredItemTemplateDirective {
     templateRef;
@@ -14955,10 +14824,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Renders the rating item content. To define an item template, nest an `<ng-template>` tag
- * with the `kendoRatingItemTemplate` directive inside the `<kendo-rating>` tag
- * [see example](slug:templates_rating).
+ * Renders the rating item content.
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
  * The index of the current item is available as an implicit context using the `let-index="index"` syntax.
+ * * @example
+ * ```html
+ * <kendo-rating [value]="ratingValue">
+ *   <ng-template kendoRatingItemTemplate let-index="index">
+ *     <span>Item: {{ index }}</span>
+ *   </ng-template>
+ * </kendo-rating>
+ * ```
  */
 class RatingItemTemplateDirective {
     templateRef;
@@ -14977,10 +14853,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Renders the selected rating item content. To define an item template, nest an `<ng-template>` tag
- * with the `kendoRatingSelectedItemTemplate` directive inside the `<kendo-rating>` tag
- * [see example](slug:templates_rating).
+ * Renders the selected rating item content.
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingSelectedItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
+ *
  * The index of the currently selected item is available as an implicit context using the `let-index="index"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-rating [value]="ratingValue">
+ *   <ng-template kendoRatingSelectedItemTemplate let-index="index">
+ *     <span>Selected item: {{ index }}</span>
+ *   </ng-template>
+ * </kendo-rating>
+ * ```
  */
 class RatingSelectedItemTemplateDirective {
     templateRef;
@@ -14999,7 +14884,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Represents the [Kendo UI Rating component for Angular]({% slug overview_rating %}).
+ * Represents the Kendo UI Rating component for Angular.
+ * Use this component to let users select a rating value.
+ *
+ * @example
+ * ```html
+ * <kendo-rating [itemsCount]="5" [(value)]="ratingValue"></kendo-rating>
+ * ```
  */
 class RatingComponent {
     element;
@@ -15011,37 +14902,36 @@ class RatingComponent {
     hoveredItemTemplate;
     selectedItemTemplate;
     /**
-     * Determines whether the Rating is disabled ([see example]({% slug disabledstate_rating %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_rating#toc-managing-the-rating-disabled-state-in-reactive-forms).
+     * When `true`, disables the Rating ([see example]({% slug disabledstate_rating %})).
+
+     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_rating#toc-managing-the-rating-disabled-state-in-reactive-forms).
      *
      * @default false
-     *
      */
     disabled = false;
     /**
-     * Determines whether the Rating is in its read-only state ([see example]({% slug readonly_rating %})).
+     * When `true`, sets the Rating to read-only ([see example]({% slug readonly_rating %})).
+
      *
      * @default false
-     *
      */
     readonly = false;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Rating.
+
      *
      * @default 0
-     *
      */
     tabindex = 0;
     /**
      * Sets the number of Rating items ([see example]({% slug itemscount_rating %})).
      *
      * @default 5
-     *
      */
     itemsCount = 5;
     /**
-     * The initial value of the Rating component.
-     * The component can use either NgModel or the `value` binding but not both of them at the same time.
-     *
+     * Sets the initial value of the Rating component.
+     * Use either `ngModel` or the `value` binding, but not both at the same time.
      */
     set value(value) {
         this._value = value;
@@ -15054,7 +14944,6 @@ class RatingComponent {
      * Sets the selection mode of the Rating ([see example]({% slug selection_rating %})).
      *
      * @default 'continuous'
-     *
      */
     set selection(selection) {
         this._selection = selection;
@@ -15064,10 +14953,9 @@ class RatingComponent {
         return this._selection;
     }
     /**
-     * Determines the precision of the Rating ([see example]({% slug precision_rating %})).
+     * Sets the precision of the Rating ([see example]({% slug precision_rating %})).
      *
      * @default 'item'
-     *
      */
     set precision(precision) {
         this._precision = precision;
@@ -15077,7 +14965,7 @@ class RatingComponent {
         return this._precision;
     }
     /**
-     * Sets the Rating label to the provided text. The text is rendered in a `<span>` element, instead of the native HTML `<label>` element ([see example]({% slug label_rating %})).
+     * Sets the label text for the Rating. The text renders in a `<span>` element ([see example]({% slug label_rating %})).
      */
     label;
     /**
@@ -15085,15 +14973,15 @@ class RatingComponent {
      */
     icon;
     /**
-     * Sets a custom SVG icon for the selected/hovered state of the Rating items ([see example]({% slug icon_rating %})).
+     * Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example]({% slug icon_rating %})).
      */
     svgIcon = starIcon;
     /**
-     * Sets a custom SVG icon for the default state of the Rating items when they are not hovered or selected ([see example]({% slug icon_rating %})).
+     * Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example]({% slug icon_rating %})).
      */
     svgIconOutline = starOutlineIcon;
     /**
-     * Fires each time the user selects a new value.
+     * Fires when the user selects a new value.
      */
     valueChange = new EventEmitter();
     hostClass = true;
@@ -15487,7 +15375,7 @@ class RatingComponent {
             </span>
         </span>
 
-        <span 
+        <span
             *ngIf="label"
             class="k-rating-label"
         >{{ label }}</span>
@@ -15644,7 +15532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </span>
         </span>
 
-        <span 
+        <span
             *ngIf="label"
             class="k-rating-label"
         >{{ label }}</span>
@@ -15763,7 +15651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Use this component to override the default Signature messages.
  */
 class SignatureCustomMessagesComponent extends SignatureMessages {
     service;
@@ -15798,7 +15686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Arguments for the `close` event of the Signature component.
+ * Provides arguments for the `close` event of the Signature component.
  */
 class SignatureCloseEvent extends PreventableEvent {
 }
@@ -15856,7 +15744,15 @@ const iconsMap = { xIcon, hyperlinkOpenIcon };
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
- * The Signature allows users to add a hand-drawn signature to forms.
+ * Use the Signature to let users add a hand-drawn signature to forms.
+ *
+ * @example
+ * ```html
+ * <kendo-signature [(ngModel)]="signatureValue"></kendo-signature>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link SignatureCustomMessagesComponent}.
  */
 class SignatureComponent {
     element;
@@ -15874,29 +15770,34 @@ class SignatureComponent {
     /**
      * Sets the read-only state of the Signature.
      *
+     * Set to `true` to prevent editing.
+     *
      * @default false
      */
     readonly = false;
     /**
-     * Sets the disabled state of the Signature. To disable the component in reactive forms, visit the following [article](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms)
+     * Sets the disabled state of the Signature.
+     *
+     * Set to `true` to disable the component and prevent any user interaction.
+     * To disable the component in reactive forms, see [Managing the Signature Disabled State in Reactive Forms](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms).
      *
      * @default false
      */
     disabled = false;
     /**
-     * Sets the width of the signature in pixels.
+     * Sets the width of the Signature in pixels.
      *
-     * The width can also be set using inline styles and CSS.
+     * You can also set the width using inline styles or CSS.
      */
     width;
     /**
-     * The height of the signature in pixels.
+     * Sets the height of the Signature in pixels.
      *
-     * The height can also be set using inline styles and CSS.
+     * You can also set the height using inline styles or CSS.
      */
     height;
     /**
-     * Gets or sets the value of the signature.
+     * Gets or sets the value of the Signature.
      *
      * The value is a Base64-encoded PNG image.
      */
@@ -15931,69 +15832,54 @@ class SignatureComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * The size property specifies the padding of the Signature internal controls
-     * ([see example]({% slug appearance_signature %}#toc-size)).
+     * Sets the padding of the Signature internal controls
+     * ([ee example]({% slug appearance_signature %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE$2;
     /**
-     * The `rounded` property specifies the border radius of the signature
+     * Sets the border radius of the Signature
      * ([see example](slug:appearance_signature#rounded-corners)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full` (not supported by the Signature)
-     * * `none`
+     * @default 'medium'
      */
     rounded = DEFAULT_ROUNDED$2;
     /**
-     * The `fillMode` property specifies the background and border styles of the signature
+     * Sets the background and border styles of the Signature
      * ([see example](slug:appearance_signature#toc-fill-mode)).
      *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     fillMode = DEFAULT_FILL_MODE$2;
     /**
-     * The stroke color of the signature.
+     * Sets the stroke color of the Signature.
      *
      * Accepts CSS color names and hex values.
-     *
      * The default value is determined by the theme `$kendo-input-text` variable.
      */
     color;
     /**
-     * The background color of the signature.
+     * Sets the background color of the Signature.
      *
      * Accepts CSS color names and hex values.
-     *
      * The default value is determined by the theme `$kendo-input-bg` variable.
      */
     backgroundColor;
     /**
-     * The stroke width of the signature.
+     * Sets the stroke width of the Signature.
      *
      * @default 1
      */
     strokeWidth = 1;
     /**
-     * A flag indicating whether to smooth out signature lines.
+     * When set to `true`, smooths out signature lines.
      *
      * @default false
      */
     smooth = false;
     /**
-     * A flag indicating if the signature can be maximized.
+     * When set to `true`, allows the Signature to be maximized.
      *
      * @default true
      */
@@ -16003,17 +15889,17 @@ class SignatureComponent {
      */
     maximized = false;
     /**
-     * The scale factor for the popup.
+     * Sets the scale factor for the popup.
      *
-     * The Signature width and height will be multiplied by the scale when showing the popup.
+     * The Signature width and height are multiplied by this value when showing the popup.
      *
      * @default 3
      */
     popupScale = DEFAULT_POPUP_SCALE;
     /**
-     * The scale factor for the exported image.
+     * Sets the scale factor for the exported image.
      *
-     * The Signature width and height will be multiplied by the scale when converting the signature to an image.
+     * The Signature width and height are multiplied by this value when converting the signature to an image.
      *
      * @default 2
      */
@@ -16023,31 +15909,33 @@ class SignatureComponent {
      */
     parentLocalization;
     /**
-     * A flag indicating whether the dotted line should be displayed in the background.
+     * When set to `true`, hides the dotted line in the background.
      *
      * @default false
      */
     hideLine = false;
     /**
-     * Fires each time the signature value is changed.
+     * Fires when the signature value changes.
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel it, the popup will remain closed.
+     * Fires before the popup opens.
+     *
+     * This event is preventable. If you cancel it, the popup stays closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel it, the popup will remain open.
+     * Fires before the popup closes.
+     *
+     * This event is preventable. If you cancel it, the popup stays open.
      */
     close = new EventEmitter();
     /**
-     * Fires each time Signature is focused.
+     * Fires when the Signature receives focus.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the Signature is blurred.
+     * Fires when the Signature loses focus.
      */
     onBlur = new EventEmitter();
     /**
@@ -16058,11 +15946,11 @@ class SignatureComponent {
     minimizeButton;
     maximizeButton;
     /**
-     * Indicates whether the Signature wrapper is focused.
+     * Indicates if the Signature wrapper is focused.
      */
     isFocused = false;
     /**
-     * Indicates whether the Signature popup is open.
+     * Indicates if the Signature popup is open.
      */
     isOpen;
     /**
@@ -16319,9 +16207,10 @@ class SignatureComponent {
     }
     /**
      * Toggles the popup of the Signature.
-     * Does not trigger the `open` and `close` events of the component.
      *
-     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
+     * Does not trigger the `open` and `close` events.
+     *
+     * @param open Optional. Set to `true` to open or `false` to close the popup.
      */
     toggle(open) {
         if (this.disabled || this.readonly) {
@@ -16373,7 +16262,7 @@ class SignatureComponent {
         this.backgroundColor = this.backgroundColor || defaultBackgroundColor;
     }
     /**
-     * Focuses the wrapper of the Signature.
+     * Focuses the Signature wrapper container.
      */
     focus() {
         this.focused = true;
@@ -16791,7 +16680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Use this component to override the default Slider messages.
  */
 class SliderCustomMessagesComponent extends SliderMessages {
     service;
@@ -16826,7 +16715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Custom component messages override default component messages.
+ * Overrides the default component messages with custom component messages.
  */
 class SwitchCustomMessagesComponent extends Messages {
     service;
@@ -16861,19 +16750,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Specifies the adornments in the prefix container ([see example]({% slug textarea_adornments %})).
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textarea>
- *    <kendo-textarea-prefix>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </kendo-textarea-prefix>
- *  </kendo-textarea>
- * `
- * })
- * class AppComponent {}
+ * Represents the prefix adornments container for the TextArea component.
+ *
+ * Nest the `<kendo-textarea-prefix>` component inside `<kendo-textarea>` to add elements before the input.
+ *
+ * @example
+ * ```html
+ * <kendo-textarea>
+ *   <kendo-textarea-prefix>
+ *     <button kendoButton look="clear" icon="image"></button>
+ *   </kendo-textarea-prefix>
+ * </kendo-textarea>
  * ```
  */
 class TextAreaPrefixComponent {
@@ -16925,19 +16812,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textarea>
- *    <kendo-textarea-suffix>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </kendo-textarea-suffix>
- *  </kendo-textarea>
- * `
- * })
- * class AppComponent {}
+ * Represents the suffix adornments container for the TextArea component.
+ *
+ * Nest the `<kendo-textarea-suffix>` component inside `<kendo-textarea>` to add elements after the input.
+ *
+ * @example
+ * ```html
+ * <kendo-textarea>
+ *   <kendo-textarea-suffix>
+ *     <button kendoButton look="clear" icon="image"></button>
+ *   </kendo-textarea-suffix>
+ * </kendo-textarea>
  * ```
  */
 class TextAreaSuffixComponent {
@@ -17140,7 +17025,17 @@ const DEFAULT_SIZE$1 = 'medium';
 const DEFAULT_ROUNDED$1 = 'medium';
 const DEFAULT_FILL_MODE$1 = 'solid';
 /**
- * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
+ * Represents the Kendo UI TextArea component for Angular.
+ *
+ * Use this component to let users enter and edit multi-line text.
+ *
+ * @example
+ * ```html
+ * <kendo-textarea [(ngModel)]="value" [rows]="5" [cols]="30"></kendo-textarea>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link TextAreaPrefixComponent}, {@link TextAreaSuffixComponent}.
  */
 class TextAreaComponent extends TextFieldsBase {
     localizationService;
@@ -17162,12 +17057,7 @@ class TextAreaComponent extends TextFieldsBase {
     }
     _flow = 'vertical';
     /**
-     * Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify
-     * their position in relation to the textarea element.
-     *
-     * The possible values are:
-     * * `vertical`(Default) &mdash;TextArea sections are placed from top to bottom.
-     * * `horizontal`&mdash;TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
+     * Specifies the flow direction of the TextArea sections. Use this property to set the position of adornments relative to the text area.
      */
     set flow(flow) {
         this._flow = flow;
@@ -17182,7 +17072,7 @@ class TextAreaComponent extends TextFieldsBase {
         return this._flow;
     }
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Sets the HTML attributes of the inner focusable input element. Some attributes are required for component functionality and cannot be changed.
      */
     set inputAttributes(attributes) {
         if (isObjectPresent(this.parsedAttributes)) {
@@ -17198,12 +17088,8 @@ class TextAreaComponent extends TextFieldsBase {
         return this._inputAttributes;
     }
     /**
-     * Specifies the orientation of the TextArea adornments. This property is used in order to specify
-     * the adornments' position relative to themselves.
+     * Specifies the orientation of the TextArea adornments. Use this property to set the position of adornments relative to each other.
      *
-     * The possible values are:
-     * * `horizontal`(Default) &mdash;TextArea adornments are placed from left to right in `ltr`, and from right to left in `rtl` mode.
-     * * `vertical`&mdash;TextArea adornments are placed from top to bottom.
      */
     set adornmentsOrientation(orientation) {
         this._adornmentsOrientation = orientation;
@@ -17218,19 +17104,20 @@ class TextAreaComponent extends TextFieldsBase {
         return this._adornmentsOrientation;
     }
     /**
-     *  Specifies the visible height of the textarea element in lines.
+     * Sets the visible height of the text area in lines.
      */
     rows;
     /**
-     * Specifies the visible width of the textarea element (in average character width).
+     * Sets the visible width of the text area in average character width.
      */
     cols;
     /**
-     * Specifies the maximum number of characters that the user can enter in the TextArea component.
+     * Sets the maximum number of characters allowed in the text area.
      */
     maxlength;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * @default 0
      */
     tabindex = 0;
     /**
@@ -17243,26 +17130,15 @@ class TextAreaComponent extends TextFieldsBase {
         return this.tabindex;
     }
     /**
-     * Configures the resize behavior of the TextArea.
+     * Sets the resize behavior of the TextArea.
      *
-     * The possible values are:
-     * * `vertical`(Default)&mdash;The TextArea component can be resized only vertically.
-     * * `horizontal`&mdash;The TextArea component can be resized only horizontally.
-     * * `both`&mdash;The TextArea component can be resized in both (horizontal and vertical) directions.
-     * * `auto`&mdash;Specifies whether the TextArea component will adjust its height automatically, based on the content.
-     * * `none`&mdash;The TextArea cannot be resized.
      *
+     * @default 'vertical'
      */
     resizable = 'vertical';
     /**
-     * The size property specifies the padding of the internal textarea element
-     * ([see example]({% slug appearance_textarea %}#toc-size)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the size of the TextArea. Controls the padding of the text area element ([see example]({% slug appearance_textarea %}#toc-size)).
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$1;
@@ -17273,14 +17149,8 @@ class TextAreaComponent extends TextFieldsBase {
         return this._size;
     }
     /**
-     * The `rounded` property specifies the border radius of the TextArea
-     * ([see example](slug:appearance_textarea#toc-roundness)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the border radius of the TextArea ([see example](slug:appearance_textarea#toc-roundness)).
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
@@ -17291,14 +17161,8 @@ class TextAreaComponent extends TextFieldsBase {
         return this._rounded;
     }
     /**
-     * The `fillMode` property specifies the background and border styles of the TextArea
-     * ([see example](slug:appearance_textarea#toc-fill-mode)).
-     *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * Sets the background and border styles of the TextArea ([see example](slug:appearance_textarea#toc-fill-mode)).
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
@@ -17309,65 +17173,35 @@ class TextAreaComponent extends TextFieldsBase {
         return this._fillMode;
     }
     /**
-     * Specifies whether the prefix separator of the TextArea is rendered.
-     * If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value.
+     * Shows the prefix separator in the TextArea.
+     * The separator is rendered only if a prefix template is declared.
      *
      * @default false
      */
     showPrefixSeparator = false;
     /**
-     * Specifies whether the suffix separator of the TextArea is rendered.
-     * If a suffix template is not declared, the separator will not be rendered, regardless of the parameter value.
+     * Shows the suffix separator in the TextArea.
+     * The separator is rendered only if a suffix template is declared.
      *
      * @default false
      */
     showSuffixSeparator = false;
     /**
-     * Fires each time the user focuses the TextArea component.
-     *
-     * > To wire the event programmatically, use the `onFocus` property.
+     * Fires when the TextArea is focused.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-textarea (focus)="handleFocus()"></kendo-textarea>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleFocus(): void {
-     *      console.log('Component is focused.');
-     *   }
-     * }
-     * ```
+     * Use the `onFocus` property to subscribe to this event.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the TextArea component gets blurred.
-     *
-     * > To wire the event programmatically, use the `onBlur` property.
+     * Fires when the TextArea gets blurred.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <kendo-textarea (blur)="handleBlur()"></kendo-textarea>
-     * `
-     * })
-     * class AppComponent {
-     *   public handleBlur(): void {
-     *      console.log('Component is blurred');
-     *   }
-     * }
-     * ```
+     * Use the `onBlur` property to subscribe to this event.
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the value is changed or the component is blurred
-     * ([see example](slug:events_textarea)).
-     * When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.
+     * Fires when the value changes or the TextArea is blurred ([see example](slug:events_textarea)).
+     *
+     * The event does not fire when the value changes programmatically or through form control binding.
      */
     valueChange = new EventEmitter();
     initialHeight;
@@ -17582,19 +17416,7 @@ class TextAreaComponent extends TextFieldsBase {
         }
     };
     /**
-     * Focuses the TextArea component.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="textarea.focus()">Focus the textarea</button>
-     *  <kendo-textarea #textarea></kendo-textarea>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
+     * Focuses the TextArea.
      */
     focus() {
         if (!this.input) {
@@ -17606,7 +17428,7 @@ class TextAreaComponent extends TextFieldsBase {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the TextArea component.
+     * Blurs the TextArea.
      */
     blur() {
         this.focusChangedProgrammatically = true;
@@ -17864,7 +17686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Overrides the default messages of the TextBox component.
  */
 class TextBoxCustomMessagesComponent extends TextBoxMessages {
     service;
@@ -18036,6 +17858,19 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_OTPINPUT_LENGTH = 4;
+/**
+ * Represents the Kendo UI OTP Input component for Angular.
+ *
+ * Use the OTP Input to enter one-time passwords or verification codes.
+ *
+ * @example
+ * ```html
+ * <kendo-otpinput type="number" [(ngModel)]="otpValue"></kendo-otpinput>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link OTPInputCustomMessagesComponent}.
+ */
 class OTPInputComponent {
     hostElement;
     cdr;
@@ -18044,7 +17879,7 @@ class OTPInputComponent {
     localizationService;
     zone;
     /**
-     * Configures the total number of input fields.
+     * Sets the total number of input fields.
      *
      * @default 4
      */
@@ -18059,46 +17894,40 @@ class OTPInputComponent {
         return this._length;
     }
     /**
-     * Configures the input type.
+     * Sets the input type.
      *
-     * * The possible values are:
-     * * `text` (default)
-     * * `number`
-     * * `password`
      *
      * @default 'text'
      */
     type = 'text';
     /**
-     * Configures whether the input fields are separate or adjacent to each other.
+     * Sets whether the input fields are separate or adjacent.
      *
      * @default true
      */
     spacing = true;
     /**
-     * Specifies the separator between groups of input fields.
-     *
-     * > The configuration can only be applied when `groupLength` is set.
+     * Sets the separator between groups of input fields. You can use this only when `groupLength` is set.
      */
     separator;
     /**
-     * Configures whether the component is enabled or disabled.
+     * When `true`, disables the OTPInput.
      *
      * @default false
      */
     disabled = false;
     /**
-     * Configures whether the component is readonly.
+     * When `true`, sets the OTPInput to read-only mode.
      *
      * @default false
      */
     readonly = false;
     /**
-     * Configures the placeholder of the input fields.
+     * Sets the placeholder for the input fields.
      */
     placeholder;
     /**
-     * Configures the length of the groups. If `groupLength` is a number, all groups will have the same length. If it's an array, each group can have a different length.
+     * Sets the length of the groups. If you set a number, all groups have the same length. If you set an array, each group can have a different length.
      */
     get groupLength() {
         return this._groupLength;
@@ -18127,7 +17956,7 @@ class OTPInputComponent {
         this.populateSeparatorPositions();
     }
     /**
-     * Configures the value of the component. Unfilled input fields are represented with space.
+     * Sets the value of the component. Unfilled input fields are represented with а space.
      */
     get value() {
         return this._value;
@@ -18155,13 +17984,9 @@ class OTPInputComponent {
         }
     }
     /**
-     * The `size` property specifies the padding of the input fields.
+     * Sets the padding of the input fields.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size || DEFAULT_SIZE;
@@ -18174,14 +17999,9 @@ class OTPInputComponent {
         return this._size;
     }
     /**
-     * The `rounded` property specifies the border radius of the OTP Input.
+     * Sets the border radius of the OTP Input.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         this._rounded = rounded || DEFAULT_ROUNDED;
@@ -18190,13 +18010,9 @@ class OTPInputComponent {
         return this._rounded;
     }
     /**
-     * The `fillMode` property specifies the background and border styles of the OTP Input.
+     * Sets the background and border styles of the OTP Input.
      *
-     * The possible values are:
-     * * `flat`
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode || DEFAULT_FILL_MODE;
@@ -18207,7 +18023,7 @@ class OTPInputComponent {
         return this._fillMode;
     }
     /**
-     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     * Sets the HTML attributes of the inner input element. You cannot change attributes that are required for the component to work.
      */
     set inputAttributes(attributes) {
         this._inputAttributes = attributes;
@@ -18220,18 +18036,17 @@ class OTPInputComponent {
         return this._inputAttributes;
     }
     /**
-     * Fires each time the value is changed by the user&mdash;
-     * When the value of the component is programmatically changed to `ngModel` or `formControl`
-     * through its API or form binding, the `valueChange` event is not triggered because it
-     * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     * Fires when the user changes the value.
+     *
+     * This event does not fire when you change the value programmatically or through form bindings.
      */
     valueChange = new EventEmitter();
     /**
-     * Fires each time the user focuses the OTP Input.
+     * Fires when the user focuses the OTP Input.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the user blurs the OTP Input.
+     * Fires when the user blurs the OTP Input.
      */
     onBlur = new EventEmitter();
     wrapperClass = true;
@@ -18401,6 +18216,8 @@ class OTPInputComponent {
         }
     }
     /**
+     * Returns `true` if the component has groups.
+     *
      * @hidden
      */
     get hasGroups() {
@@ -18500,7 +18317,9 @@ class OTPInputComponent {
         });
     }
     /**
-     * Focuses the OTP Input.
+     * Focuses the OTP Input at the specified index provided as an argument.
+     *
+     * @param index The index of the input to focus.
      */
     focus(index) {
         if (!this.inputFields || index < 0 || index >= this.length) {
@@ -18947,7 +18766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages.
+ * Provides custom messages for the OTP Input component.
+ *
+ * Use this component to override the default messages.
  */
 class OTPInputCustomMessagesComponent extends OTPInputMessages {
     service;
@@ -18982,7 +18803,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Utility array that contains all `TextBox` related components and directives
+ * Use the `KENDO_TEXTBOX` utility array to add all TextBox-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_TEXTBOX } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_TEXTBOX],
+ *   template: `<kendo-textbox></kendo-textbox>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_TEXTBOX = [
     TextBoxDirective,
@@ -18996,7 +18828,18 @@ const KENDO_TEXTBOX = [
     SeparatorComponent
 ];
 /**
- * Utility array that contains all `NumericTextBox` related components and directives
+ * Use the `KENDO_NUMERICTEXTBOX` utility array to add all NumericTextBox-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_NUMERICTEXTBOX } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_NUMERICTEXTBOX],
+ *   template: `<kendo-numerictextbox></kendo-numerictextbox>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_NUMERICTEXTBOX = [
     NumericTextBoxComponent,
@@ -19006,7 +18849,18 @@ const KENDO_NUMERICTEXTBOX = [
     SeparatorComponent
 ];
 /**
- * Utility array that contains all `MaskedTextBox` related components and directives
+ * Use the `KENDO_MASKEDTEXTBOX` utility array to add all MaskedTextBox-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_MASKEDTEXTBOX } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_MASKEDTEXTBOX],
+ *   template: `<kendo-maskedtextbox></kendo-maskedtextbox>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_MASKEDTEXTBOX = [
     MaskedTextBoxComponent,
@@ -19015,14 +18869,36 @@ const KENDO_MASKEDTEXTBOX = [
     SeparatorComponent
 ];
 /**
- * Utility array that contains all `OTP` related components and directives
+ * Use the `KENDO_OTPINPUT` utility array to add all OTPInput-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_OTPINPUT } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_OTPINPUT],
+ *   template: `<kendo-otpinput></kendo-otpinput>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_OTPINPUT = [
     OTPInputComponent,
     OTPInputCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `TextArea` related components and directives
+ * Use the `KENDO_TEXTAREA` utility array to add all TextArea-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_TEXTAREA } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_TEXTAREA],
+ *   template: `<kendo-textarea></kendo-textarea>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_TEXTAREA = [
     TextAreaComponent,
@@ -19032,28 +18908,72 @@ const KENDO_TEXTAREA = [
     SeparatorComponent
 ];
 /**
- * Utility array that contains all `CheckBox` related components and directives
+ * Use the `KENDO_CHECKBOX` utility array to add all CheckBox-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHECKBOX],
+ *   template: `<kendo-checkbox></kendo-checkbox>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_CHECKBOX = [
     CheckBoxComponent,
     CheckBoxDirective
 ];
 /**
- * Utility array that contains all `RadioButton` related components and directives
+ * Use the `KENDO_RADIOBUTTON` utility array to add all RadioButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_RADIOBUTTON } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_RADIOBUTTON],
+ *   template: `<kendo-radiobutton></kendo-radiobutton>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_RADIOBUTTON = [
     RadioButtonComponent,
     RadioButtonDirective
 ];
 /**
- * Utility array that contains all `Switch` related components and directives
+ * Use the `KENDO_SWITCH` utility array to add all Switch-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_SWITCH } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SWITCH],
+ *   template: `<kendo-switch></kendo-switch>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_SWITCH = [
     SwitchComponent,
     SwitchCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `FormField` related components and directives
+ * Use the `KENDO_FORMFIELD` utility array to add all FormField-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_FORMFIELD } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FORMFIELD],
+ *   template: `<kendo-formfield></kendo-formfield>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_FORMFIELD = [
     FormFieldComponent,
@@ -19061,7 +18981,18 @@ const KENDO_FORMFIELD = [
     ErrorComponent
 ];
 /**
- * Utility array that contains all `Slider` related components and directives
+ * Use the `KENDO_SLIDER` utility array to add all Slider-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_SLIDER } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SLIDER],
+ *   template: `<kendo-slider></kendo-slider>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_SLIDER = [
     SliderComponent,
@@ -19069,7 +19000,18 @@ const KENDO_SLIDER = [
     LabelTemplateDirective,
 ];
 /**
- * Utility array that contains all `RangeSlider` related components and directives
+ * Use the `KENDO_RANGESLIDER` utility array to add all RangeSlider-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_RANGESLIDER } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_RANGESLIDER],
+ *   template: `<kendo-rangeslider></kendo-rangeslider>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_RANGESLIDER = [
     RangeSliderComponent,
@@ -19077,7 +19019,18 @@ const KENDO_RANGESLIDER = [
     LabelTemplateDirective
 ];
 /**
- * Utility array that contains all `Rating` related components and directives
+ * Use the `KENDO_RATING` utility array to add all Rating-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_RATING } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_RATING],
+ *   template: `<kendo-rating></kendo-rating>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_RATING = [
     RatingComponent,
@@ -19086,42 +19039,108 @@ const KENDO_RATING = [
     RatingSelectedItemTemplateDirective
 ];
 /**
- * Utility array that contains all `Signature` related components and directives
+ * Use the `KENDO_SIGNATURE` utility array to add all Signature-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_SIGNATURE } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SIGNATURE],
+ *   template: `<kendo-signature></kendo-signature>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_SIGNATURE = [
     SignatureComponent,
     SignatureCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `ColorPicker` related components and directives
+ * Use the `KENDO_COLORPICKER` utility array to add all ColorPicker-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_COLORPICKER } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_COLORPICKER],
+ *   template: `<kendo-colorpicker></kendo-colorpicker>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_COLORPICKER = [
     ColorPickerComponent,
     ColorPickerCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `FlatColorPicker` related components and directives
+ * Use the `KENDO_FLATCOLORPICKER` utility array to add all FlatColorPicker-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_FLATCOLORPICKER } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FLATCOLORPICKER],
+ *   template: `<kendo-flatcolorpicker></kendo-flatcolorpicker>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_FLATCOLORPICKER = [
     FlatColorPickerComponent,
     ColorPickerCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `ColorPallete` related components and directives
+ * Use the `KENDO_COLORPALETTE` utility array to add all ColorPalette-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_COLORPALETTE } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_COLORPALETTE],
+ *   template: `<kendo-colorpalette></kendo-colorpalette>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_COLORPALETTE = [
     ColorPaletteComponent,
     ColorPickerCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `ColorGradient` related components and directives
+ * Use the `KENDO_COLORGRADIENT` utility array to add all ColorGradient-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_COLORGRADIENT } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_COLORGRADIENT],
+ *   template: `<kendo-colorgradient></kendo-colorgradient>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_COLORGRADIENT = [
     ColorGradientComponent,
     ColorPickerCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-inputs` related components and directives
+ * Use the `KENDO_INPUTS` utility array to add all `@progress/kendo-angular-inputs`-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_INPUTS],
+ *   template: `<kendo-textbox></kendo-textbox>`
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_INPUTS = [
     ...KENDO_TEXTBOX,
@@ -19145,35 +19164,23 @@ const KENDO_INPUTS = [
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Inputs components.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Inputs components.
  *
- * @example
+ * Use this module to import all Kendo UI for Angular Inputs components at once in your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the Inputs module
+ * @example
+ * ```typescript
  * import { InputsModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BrowserAnimationsModule, InputsModule], // import Inputs module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, InputsModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class InputsModule {
@@ -19192,35 +19199,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Slider component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Slider component.
+ *
+ * Use this module to add the Slider component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Inputs module
+ * ```typescript
  * import { SliderModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BrowserAnimationsModule, SliderModule], // import Slider module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BrowserAnimationsModule, SliderModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class SliderModule {
@@ -19239,35 +19235,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the RangeSlider component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the RangeSlider component.
+ *
+ * Use this module to add the RangeSlider component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Inputs module
+ * ```typescript
  * import { RangeSliderModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BrowserAnimationsModule, RangeSliderModule], // import RangeSlider module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BrowserAnimationsModule, RangeSliderModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class RangeSliderModule {
@@ -19286,34 +19271,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Switch component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Switch component.
+ *
+ * Use this module to add the Switch component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Switch module
+ * ```typescript
  * import { SwitchModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, SwitchModule], // import Switch module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, SwitchModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class SwitchModule {
@@ -19332,34 +19306,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the NumericTextBox component.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the OTP Input component.
+ *
+ * Use this module to add the OTP Input component to your NgModule-based Angular application.
  *
  * @example
+ * ```typescript
+ * import { OTPInputModule } from '@progress/kendo-angular-inputs';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
  *
- * ```ts-no-run
- * // Import the NumericTextBox module
- * import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, OTPInputModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+class OTPInputModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OTPInputModule, imports: [OTPInputComponent, OTPInputCustomMessagesComponent], exports: [OTPInputComponent, OTPInputCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputModule, providers: [IconsService], imports: [OTPInputComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...KENDO_OTPINPUT],
+                    exports: [...KENDO_OTPINPUT],
+                    providers: [IconsService]
+                }]
+        }] });
+
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the NumericTextBox component.
  *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * Use this module to add the NumericTextBox component to your NgModule-based Angular application.
  *
+ * @example
+ * ```typescript
+ * import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, NumericTextBoxModule], // import NumericTextBox module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, NumericTextBoxModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class NumericTextBoxModule {
@@ -19378,34 +19376,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the MaskedTextBox component.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the MaskedTextBox component.
  *
- * @example
+ * Use this module to add the MaskedTextBox component to your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the MaskedTextBox module
+ * @example
+ * ```typescript
  * import { MaskedTextBoxModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, MaskedTextBoxModule], // import MaskedTextBox module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, MaskedTextBoxModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class MaskedTextBoxModule {
@@ -19423,34 +19410,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TextBox directive.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TextBox directive.
+ *
+ * Use this module to add the TextBox directive to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the TextBox module
+ * ```typescript
  * import { TextBoxModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, TextBoxModule], // import TextBox module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, TextBoxModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class TextBoxModule {
@@ -19469,34 +19445,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TextArea component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TextArea component.
+ *
+ * Use this module to add the TextArea component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the TextArea module
+ * ```typescript
  * import { TextAreaModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, TextAreaModule], // import TextArea module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, TextAreaModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class TextAreaModule {
@@ -19514,34 +19479,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the CheckBox directive and CheckBoxComponent.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the CheckBox directive and CheckBoxComponent.
  *
- * @example
+ * Use this module to add CheckBox features to your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the CheckBox module
+ * @example
+ * ```typescript
  * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, CheckBoxModule], // import CheckBox module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, CheckBoxModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class CheckBoxModule {
@@ -19559,34 +19513,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the RadioButton directive and RadioButtonComponent.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the RadioButton directive and RadioButton component.
+ *
+ * Use this module to add the RadioButton directive and component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the RadioButton module
+ * ```typescript
  * import { RadioButtonModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, RadioButtonModule], // import RadioButton module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, RadioButtonModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class RadioButtonModule {
@@ -19603,7 +19547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Arguments for the `blur` event of the Switch component.
+ * Provides arguments for the `blur` event of the Switch component.
  */
 class SwitchBlurEvent {
     /**
@@ -19613,7 +19557,7 @@ class SwitchBlurEvent {
 }
 
 /**
- * Arguments for the `focus` event of the Switch component.
+ * Provides arguments for the `focus` event of the Switch component.
  */
 class SwitchFocusEvent {
     /**
@@ -19624,8 +19568,24 @@ class SwitchFocusEvent {
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the ColorPicker.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the ColorPicker.
+ *
+ * Use this module to add ColorPicker features to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { ColorPickerModule } from '@progress/kendo-angular-inputs';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ColorPickerModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 class ColorPickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -19643,34 +19603,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the FormField, Error and Hint components.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the FormField, Error, and Hint components.
  *
- * @example
+ * Use this module to add FormField, Error, and Hint features to your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the FormField module
+ * @example
+ * ```typescript
  * import { FormFieldModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, FormFieldModule], // import FormField module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, FormFieldModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class FormFieldModule {
@@ -19688,34 +19637,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Signature component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Signature component.
+ *
+ * Use this module to add the Signature component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Signature module
+ * ```typescript
  * import { SignatureModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, SignatureModule], // import Signature module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, SignatureModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class SignatureModule {
@@ -19734,34 +19672,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Rating component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Rating component.
+ *
+ * Use this module to add the Rating component to your NgModule-based Angular application.
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Rating module
+ * ```typescript
  * import { RatingModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, RatingModule], // import Rating module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, RatingModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class RatingModule {
@@ -19782,5 +19709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, OTPInputModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };