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

package/esm2022/directives.mjs

@@ -44,7 +44,18 @@ import { TextBoxDirective } from "./textbox/textbox.directive";
 import { OTPInputComponent } from "./otpinput/otpinput.component";
 import { OTPInputCustomMessagesComponent } from "./otpinput/localization/custom-messages.component";
 /**
- * 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 {}
+ * ```
  */
 export const KENDO_TEXTBOX = [
     TextBoxDirective,
@@ -58,7 +69,18 @@ export 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 {}
+ * ```
  */
 export const KENDO_NUMERICTEXTBOX = [
     NumericTextBoxComponent,
@@ -68,7 +90,18 @@ export 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 {}
+ * ```
  */
 export const KENDO_MASKEDTEXTBOX = [
     MaskedTextBoxComponent,
@@ -77,14 +110,36 @@ export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export const KENDO_TEXTAREA = [
     TextAreaComponent,
@@ -94,28 +149,72 @@ export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export const KENDO_FORMFIELD = [
     FormFieldComponent,
@@ -123,7 +222,18 @@ export 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 {}
+ * ```
  */
 export const KENDO_SLIDER = [
     SliderComponent,
@@ -131,7 +241,18 @@ export 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 {}
+ * ```
  */
 export const KENDO_RANGESLIDER = [
     RangeSliderComponent,
@@ -139,7 +260,18 @@ export 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 {}
+ * ```
  */
 export const KENDO_RATING = [
     RatingComponent,
@@ -148,42 +280,108 @@ export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export 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 {}
+ * ```
  */
 export const KENDO_INPUTS = [
     ...KENDO_TEXTBOX,

package/esm2022/formfield/error.component.mjs

@@ -6,17 +6,20 @@ import { Component, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 let serial = 0;
 /**
- * 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 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';
     /**

package/esm2022/formfield/formfield.component.mjs

@@ -15,8 +15,22 @@ import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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 class FormFieldComponent {
     renderer;
@@ -54,35 +68,25 @@ export 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';
     /**

package/esm2022/formfield/hint.component.mjs

@@ -6,15 +6,18 @@ import { Component, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 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>
+ * ```
  */
 export 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';
     /**

package/esm2022/formfield.module.mjs

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

package/esm2022/index.mjs

@@ -17,6 +17,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/esm2022/inputs.module.mjs

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