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

package/formfield/error.component.d.ts

@@ -5,17 +5,20 @@
 import { MessageAlign } from './models/message-align';
 import * as i0 from "@angular/core";
 /**
- * Represents an error message that will be shown underneath
- * a Kendo control or native HTML form-bound component after a validation.
+ * 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>
+ * ```
  */
 export declare class ErrorComponent {
     hostClass: boolean;
     /**
-     * Specifies the alignment of the Error message.
+     * Sets the alignment of the error message.
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
+     * @default 'start'
      */
     align: MessageAlign;
     /**

package/formfield/formfield.component.d.ts

@@ -11,8 +11,22 @@ import { HintComponent } from './hint.component';
 import { Orientation } from './models/orientation';
 import * as i0 from "@angular/core";
 /**
- * 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}.
  */
 export declare class FormFieldComponent implements AfterViewInit, AfterViewChecked {
     private renderer;
@@ -31,35 +45,25 @@ export declare class FormFieldComponent implements AfterViewInit, AfterViewCheck
     errorChildren: QueryList<ErrorComponent>;
     hintChildren: QueryList<HintComponent>;
     /**
+     * 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: ShowOptions;
     /**
      * Specifies the layout orientation of the form field.
      *
-     * * The possible values are:
-     *
-     * * (Default) `vertical`
-     * * `horizontal`
+     * @default 'vertical'
      */
     orientation: Orientation;
     /**
-     * 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: ShowOptions;
     /**

package/formfield/hint.component.d.ts

@@ -5,15 +5,18 @@
 import { MessageAlign } from './models/message-align';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export declare 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: MessageAlign;
     /**

package/formfield/models/message-align.d.ts

@@ -3,6 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies whether the text message is aligned at the start or the end of the line.
+ * Specifies whether the text message aligns at the start or end of the line.
+ *
+ * Use this type to set the `align` property.
  */
 export type MessageAlign = 'start' | 'end';

package/formfield/models/orientation.d.ts

@@ -4,6 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Specifies the layout orientation of the form fields.
+ *
+ * Use this type to set the `orientation` property.
+ *
  * @default `vertical`
  */
 export type Orientation = 'vertical' | 'horizontal';

package/formfield/models/show-options.d.ts

@@ -3,14 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies whether the Hint or Error messages will be shown.
+ * Specifies whether the Hint or Error messages display.
  *
- * The possible values are:
+ * Use this type to set the `showHints` or `showErrors` property.
  *
- * * `initial`(Default) —Gives an initial, built-in control of the messages.
- * For both Hint and Error components, the configuration depends on the form-bound component state.
- * See [Hint `initial` configuration]({% slug api_inputs_formfieldcomponent %}#toc-showHints) and [Error `initial` configuration]({% slug api_inputs_formfieldcomponent %}#toc-showErrors).
- *
- * * `always`—Allows full control over the visibility of the messages.
+ * * `initial` (default)—Displays messages based on the form-bound component state.
+ *   See [Hint `initial` configuration]({% slug api_inputs_formfieldcomponent %}#toc-showHints) and [Error `initial` configuration]({% slug api_inputs_formfieldcomponent %}#toc-showErrors).
+ * * `always`—Always displays the messages.
  */
 export type ShowOptions = 'initial' | 'always';

package/formfield.module.d.ts

@@ -7,34 +7,23 @@ import * as i1 from "./formfield/formfield.component";
 import * as i2 from "./formfield/hint.component";
 import * as i3 from "./formfield/error.component";
 /**
- * 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);
- *
  * ```
  */
 export declare class FormFieldModule {

package/index.d.ts

@@ -18,6 +18,7 @@ export { SliderTicksComponent } from './sliders-common/slider-ticks.component';
 export { SliderModule } from './slider.module';
 export { RangeSliderModule } from './rangeslider.module';
 export { SwitchModule } from './switch.module';
+export { OTPInputModule } from './otp.module';
 export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';

package/inputs.module.d.ts

@@ -45,35 +45,23 @@ import * as i39 from "./colorpicker/color-palette.component";
 import * as i40 from "./otpinput/otpinput.component";
 import * as i41 from "./otpinput/localization/custom-messages.component";
 /**
- * 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);
- *
  * ```
  */
 export declare class InputsModule {

package/maskedtextbox/maskedtextbox.component.d.ts

@@ -14,21 +14,21 @@ import * as i0 from "@angular/core";
  * 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";
  * }
  * ```
  */
@@ -44,66 +44,52 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
      */
     focusableId: string;
     /**
-     * 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: boolean;
     /**
-     * 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: boolean;
     /**
-     * Sets the title of the `input` element.
+     * Sets the `title` attribute of the input element.
      */
     title: string;
     /**
-     * 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: InputSize);
     get size(): InputSize;
     /**
-     * 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: InputRounded);
     get rounded(): InputRounded;
     /**
-     * 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: InputFillMode);
     get fillMode(): InputFillMode;
     /**
-     * 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: string;
     /**
-     * Provides a value for the MaskedTextBox.
+     * Sets the value of the MaskedTextBox.
      */
     value: string;
     /**
-     * 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: {
         [key: string]: RegExp;
@@ -112,32 +98,31 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
         [key: string]: RegExp;
     };
     /**
-     * Represents a prompt character for the masked value.
+     * Sets the prompt character for the masked value.
      * @default `_`
      */
     prompt: string;
     /**
-     * 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: string;
     /**
-     * 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: boolean;
     /**
-     * Specifies if the mask should be shown on focus for empty value.
+     * Shows the mask on focus when the value is empty.
      */
     maskOnFocus: boolean;
     /**
-     * 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: boolean;
     /**
-     * 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: number;
     /**
@@ -146,7 +131,8 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     set tabIndex(tabIndex: number);
     get tabIndex(): number;
     /**
-     * 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: {
         [key: string]: string;
@@ -157,64 +143,36 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
     private get defaultAttributes();
     private get mutableAttributes();
     /**
-     * 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: EventEmitter<any>;
     /**
-     * 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: EventEmitter<any>;
     /**
-     * Fires each time the user focuses the `input` element.
+     * Fires when the input element gets focused.
      */
     inputFocus: EventEmitter<any>;
     /**
-     * Fires each time the `input` element gets blurred.
+     * Fires when the input element gets blurred.
      */
     inputBlur: EventEmitter<any>;
     /**
-     * Fires each time the value changes.
+     * Fires when the value changes.
      */
     valueChange: EventEmitter<string>;
     direction: string;
     hostClasses: boolean;
     get hostDisabledClass(): boolean;
     /**
-     * Represents the `ElementRef` of the visible `input` element.
+     * Returns the `ElementRef` of the visible `input` element.
      */
     input: ElementRef;
     /**

package/maskedtextbox.module.d.ts

@@ -6,34 +6,23 @@ import * as i0 from "@angular/core";
 import * as i1 from "./maskedtextbox/maskedtextbox.component";
 import * as i2 from "@progress/kendo-angular-common";
 /**
- * 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);
- *
  * ```
  */
 export declare class MaskedTextBoxModule {

package/numerictextbox/localization/custom-messages.component.d.ts

@@ -6,7 +6,19 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxMessages } from './messages';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export declare class NumericTextBoxCustomMessagesComponent extends NumericTextBoxMessages {
     protected service: LocalizationService;

package/numerictextbox/localization/messages.d.ts

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  */
 export declare class NumericTextBoxMessages extends ComponentMessages {
     /**
-     * The title of the **Decrement** button of the NumericTextBox.
+     * Sets the title of the **Decrement** button in the NumericTextBox.
      */
     decrement: string;
     /**
-     * The title of the **Increment** button of the NumericTextBox.
+     * Sets the title of the **Increment** button in the NumericTextBox.
      */
     increment: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumericTextBoxMessages, never>;