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

package/esm2022/textarea/textarea.component.mjs

@@ -32,7 +32,17 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = '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}.
  */
 export class TextAreaComponent extends TextFieldsBase {
     localizationService;
@@ -54,12 +64,7 @@ export 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;
@@ -74,7 +79,7 @@ export 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)) {
@@ -90,12 +95,8 @@ export 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;
@@ -110,19 +111,20 @@ export 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;
     /**
@@ -135,26 +137,15 @@ export 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;
@@ -165,14 +156,8 @@ export 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;
@@ -183,14 +168,8 @@ export 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;
@@ -201,65 +180,35 @@ export 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.
+     * Fires when the TextArea is focused.
      *
-     * > To wire the event programmatically, use the `onFocus` property.
-     *
-     * @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;
@@ -474,19 +423,7 @@ export 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) {
@@ -498,7 +435,7 @@ export class TextAreaComponent extends TextFieldsBase {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the TextArea component.
+     * Blurs the TextArea.
      */
     blur() {
         this.focusChangedProgrammatically = true;

package/esm2022/textarea.module.mjs

@@ -13,34 +13,23 @@ import * as i4 from "./textarea/textarea-suffix.component";
 import * as i5 from "@progress/kendo-angular-common";
 //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);
- *
  * ```
  */
 export class TextAreaModule {

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

@@ -8,7 +8,7 @@ import { TextBoxMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages.
+ * Overrides the default messages of the TextBox component.
  */
 export class TextBoxCustomMessagesComponent extends TextBoxMessages {
     service;

package/esm2022/textbox/textbox-prefix.directive.mjs

@@ -5,26 +5,22 @@
 import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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 {}
+
  * ```
  */
 export class TextBoxPrefixTemplateDirective {
     templateRef;
     /**
-     * Sets the `showSeparator` attribute of the `kendoTextBoxPrefixTemplate`.
+     * Determines whether a separator is shown after the prefix template.
      *
      * @default false
      */

package/esm2022/textbox/textbox-suffix.directive.mjs

@@ -5,25 +5,21 @@
 import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
  * ```
  */
 export class TextBoxSuffixTemplateDirective {
     templateRef;
     /**
-     * Sets the `showSeparator` attribute of the `kendoTextBoxSuffixTemplate`.
+     * Determines whether a separator is shown before the suffix template.
      *
      * @default false
      */

package/esm2022/textbox/textbox.component.mjs

@@ -27,6 +27,18 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const iconsMap = { 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}.
+ */
 export class TextBoxComponent {
     localizationService;
     ngZone;
@@ -44,23 +56,21 @@ export 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;
@@ -69,74 +79,54 @@ export 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;
@@ -147,15 +137,8 @@ export 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;
@@ -166,14 +149,8 @@ export 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;
@@ -193,15 +170,15 @@ export 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)) {
@@ -217,66 +194,30 @@ export 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.
-     *
-     * > To wire the event programmatically, use the `onFocus` property.
+     * Fires when the user focuses the TextBox component.
      *
-     * @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.
+     * Fires when the TextBox component is blurred.
      *
-     * > To wire the event programmatically, use the `onBlur` property.
-     *
-     * @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;
     /**
@@ -385,18 +326,6 @@ export 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) {
@@ -408,7 +337,7 @@ export class TextBoxComponent {
         this.focusChangedProgrammatically = false;
     }
     /**
-     * Blurs the TextBox.
+     * Removes focus from the TextBox.
      */
     blur() {
         this.focusChangedProgrammatically = true;

package/esm2022/textbox/textbox.directive.mjs

@@ -7,10 +7,10 @@ import { KendoInput } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 /**
  * 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" />