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

package/esm2022/otp.module.mjs

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from "@angular/core";
+import { KENDO_OTPINPUT } from "./directives";
+import { IconsService } from "@progress/kendo-angular-icons";
+import * as i0 from "@angular/core";
+import * as i1 from "./otpinput/otpinput.component";
+import * as i2 from "./otpinput/localization/custom-messages.component";
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * 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';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, OTPInputModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export 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: [i1.OTPInputComponent, i2.OTPInputCustomMessagesComponent], exports: [i1.OTPInputComponent, i2.OTPInputCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputModule, providers: [IconsService], imports: [i1.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]
+                }]
+        }] });

package/esm2022/otpinput/localization/custom-messages.component.mjs

@@ -8,7 +8,9 @@ import { OTPInputMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages.
+ * Provides custom messages for the OTP Input component.
+ *
+ * Use this component to override the default messages.
  */
 export class OTPInputCustomMessagesComponent extends OTPInputMessages {
     service;

package/esm2022/otpinput/otpinput.component.mjs

@@ -19,6 +19,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}.
+ */
 export class OTPInputComponent {
     hostElement;
     cdr;
@@ -27,7 +40,7 @@ export class OTPInputComponent {
     localizationService;
     zone;
     /**
-     * Configures the total number of input fields.
+     * Sets the total number of input fields.
      *
      * @default 4
      */
@@ -42,46 +55,40 @@ export 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;
@@ -110,7 +117,7 @@ export 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;
@@ -138,13 +145,9 @@ export 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;
@@ -157,14 +160,9 @@ export 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;
@@ -173,13 +171,9 @@ export 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;
@@ -190,7 +184,7 @@ export 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;
@@ -203,18 +197,17 @@ export 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;
@@ -384,6 +377,8 @@ export class OTPInputComponent {
         }
     }
     /**
+     * Returns `true` if the component has groups.
+     *
      * @hidden
      */
     get hasGroups() {
@@ -483,7 +478,9 @@ export 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) {

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749196595,
-    version: '19.1.1-develop.2',
+    publishDate: 1749540069,
+    version: '19.1.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/radiobutton/radiobutton.component.mjs

@@ -13,6 +13,18 @@ import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
 import { SharedInputEventsDirective } from '../shared/shared-events.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * 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>
+ * ```
+ */
 export class RadioButtonComponent extends RadioCheckBoxBase {
     renderer;
     hostElement;
@@ -29,12 +41,9 @@ export 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();

package/esm2022/radiobutton/radiobutton.directive.mjs

@@ -9,11 +9,11 @@ import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
 const DEFAULT_SIZE = '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 />
  * ```
  */
@@ -22,13 +22,9 @@ export 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;

package/esm2022/radiobutton.module.mjs

@@ -9,34 +9,24 @@ import * as i1 from "./radiobutton/radiobutton.component";
 import * as i2 from "./radiobutton/radiobutton.directive";
 //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);
- *
  * ```
  */
 export class RadioButtonModule {

package/esm2022/rangeslider/localization/custom-messages.component.mjs

@@ -8,7 +8,17 @@ import { RangeSliderMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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>
+ * ```
  */
 export class RangeSliderCustomMessagesComponent extends RangeSliderMessages {
     service;

package/esm2022/rangeslider/rangeslider.component.mjs

@@ -20,7 +20,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 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}.
  */
 export class RangeSliderComponent extends SliderBase {
     localization;
@@ -31,7 +40,7 @@ export 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;
@@ -65,19 +74,6 @@ export 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;
@@ -85,7 +81,7 @@ export class RangeSliderComponent extends SliderBase {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the RangeSlider.
+     * Removes focus from the RangeSlider.
      */
     blur() {
         this.focusChangedProgrammatically = true;

package/esm2022/rangeslider.module.mjs

@@ -11,35 +11,24 @@ import * as i2 from "./rangeslider/localization/custom-messages.component";
 import * as i3 from "./sliders-common/label-template.directive";
 //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);
- *
  * ```
  */
 export class RangeSliderModule {

package/esm2022/rating/directives/rating-hovered-item.directive.mjs

@@ -5,10 +5,18 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export class RatingHoveredItemTemplateDirective {
     templateRef;

package/esm2022/rating/directives/rating-item.directive.mjs

@@ -5,10 +5,17 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export class RatingItemTemplateDirective {
     templateRef;

package/esm2022/rating/directives/rating-selected-item.directive.mjs

@@ -5,10 +5,19 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export class RatingSelectedItemTemplateDirective {
     templateRef;