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

package/esm2022/rating/rating.component.mjs

@@ -19,7 +19,13 @@ import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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>
+ * ```
  */
 export class RatingComponent {
     element;
@@ -31,37 +37,36 @@ export 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;
@@ -74,7 +79,6 @@ export class RatingComponent {
      * Sets the selection mode of the Rating ([see example]({% slug selection_rating %})).
      *
      * @default 'continuous'
-     *
      */
     set selection(selection) {
         this._selection = selection;
@@ -84,10 +88,9 @@ export 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;
@@ -97,7 +100,7 @@ export 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;
     /**
@@ -105,15 +108,15 @@ export 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;
@@ -507,7 +510,7 @@ export class RatingComponent {
             </span>
         </span>
 
-        <span 
+        <span
             *ngIf="label"
             class="k-rating-label"
         >{{ label }}</span>
@@ -664,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </span>
         </span>
 
-        <span 
+        <span
             *ngIf="label"
             class="k-rating-label"
         >{{ label }}</span>

package/esm2022/rating.module.mjs

@@ -12,34 +12,23 @@ import * as i3 from "./rating/directives/rating-hovered-item.directive";
 import * as i4 from "./rating/directives/rating-selected-item.directive";
 //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);
- *
  * ```
  */
 export class RatingModule {

package/esm2022/shared/input-separator.component.mjs

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

package/esm2022/shared/textarea.directive.mjs

@@ -11,11 +11,10 @@ import { fromEvent } from 'rxjs';
 import { debounceTime, take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
@@ -29,18 +28,18 @@ export 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;
     /**

package/esm2022/signature/events/close-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * Arguments for the `close` event of the Signature component.
+ * Provides arguments for the `close` event of the Signature component.
  */
 export class SignatureCloseEvent extends PreventableEvent {
 }

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

@@ -8,7 +8,7 @@ import { SignatureMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages.
+ * Use this component to override the default Signature messages.
  */
 export class SignatureCustomMessagesComponent extends SignatureMessages {
     service;

package/esm2022/signature/signature.component.mjs

@@ -35,7 +35,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}.
  */
 export class SignatureComponent {
     element;
@@ -53,29 +61,34 @@ export 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.
      */
@@ -110,69 +123,54 @@ export 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;
     /**
-     * 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;
     /**
-     * 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;
     /**
-     * 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
      */
@@ -182,17 +180,17 @@ export 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
      */
@@ -202,31 +200,33 @@ export 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();
     /**
@@ -237,11 +237,11 @@ export 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;
     /**
@@ -498,9 +498,10 @@ export 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) {
@@ -552,7 +553,7 @@ export class SignatureComponent {
         this.backgroundColor = this.backgroundColor || defaultBackgroundColor;
     }
     /**
-     * Focuses the wrapper of the Signature.
+     * Focuses the Signature wrapper container.
      */
     focus() {
         this.focused = true;

package/esm2022/signature.module.mjs

@@ -13,34 +13,23 @@ import * as i1 from "./signature/signature.component";
 import * as i2 from "./signature/localization/custom-messages.component";
 //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);
- *
  * ```
  */
 export class SignatureModule {

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

@@ -8,7 +8,7 @@ import { SliderMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages.
+ * Use this component to override the default Slider messages.
  */
 export class SliderCustomMessagesComponent extends SliderMessages {
     service;

package/esm2022/slider/slider.component.mjs

@@ -25,6 +25,14 @@ import * as i1 from "@progress/kendo-angular-l10n";
 const PRESSED = '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}.
  */
 export class SliderComponent extends SliderBase {
     localization;
@@ -38,7 +46,7 @@ export 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;
     /**
@@ -46,8 +54,9 @@ export 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;
     /**
@@ -55,13 +64,15 @@ export 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;
     /**
@@ -111,18 +122,6 @@ export 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) {

package/esm2022/slider.module.mjs

@@ -13,35 +13,24 @@ import * as i2 from "./slider/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 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);
- *
  * ```
  */
 export class SliderModule {