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

package/esm2022/buttongroup/buttongroup.component.mjs

@@ -22,34 +22,38 @@ import * as i2 from "@progress/kendo-angular-l10n";
 const tabindex = 'tabindex';
 /**
  * Represents the Kendo UI ButtonGroup component for Angular.
+ *
+ * @example
+ * ```html
+ * <kendo-buttongroup>
+ *   <button kendoButton>Left</button>
+ *   <button kendoButton>Middle</button>
+ *   <button kendoButton>Right</button>
+ * </kendo-buttongroup>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ButtonComponent}.
  */
 export class ButtonGroupComponent {
     service;
     renderer;
     element;
     /**
-     * By default, the ButtonGroup is enabled.
-     * To disable the whole group of buttons, set its `disabled` attribute to `true`.
-     *
-     * To disable a specific button, set its own `disabled` attribute to `true`
-     * and leave the `disabled` attribute of the ButtonGroup undefined.
-     * If you define the `disabled` attribute of the ButtonGroup, it will take
-     * precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
-     *
-     * For more information on how to configure the Button, refer to
-     * its [API documentation]({% slug api_buttons_buttoncomponent %}).
+     * To disable a specific button, set **only** its `disabled` property to `true`.
+     * If you also set the ButtonGroup `disabled` property, it takes precedence over
+     * the `disabled` properties of the underlying buttons and they are ignored.
      */
     disabled;
     /**
-     * The selection mode of the ButtonGroup.
+     * Sets the selection mode of the ButtonGroup.
+     *
      * @default 'multiple'
      */
     selection = 'multiple';
     /**
      * Sets the width of the ButtonGroup.
-     * If the width of the ButtonGroup is set:
-     * - The buttons resize automatically to fill the full width of the group wrapper.
-     * - The buttons acquire the same width.
+     * When set, the buttons resize automatically to fill the full width of the group wrapper and acquire the same width.
      */
     width;
     /**
@@ -63,16 +67,16 @@ export class ButtonGroupComponent {
         return this._tabIndex;
     }
     /**
-     * When this option is set to `true` (default), the component is a single tab-stop,
-     * and focus is moved through the inner buttons via the arrow keys.
+     * When set to `true`, the component is a single tab-stop,
+     * and focus moves through the inner buttons using the arrow keys.
      *
-     * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
+     * When set to `false`, the inner buttons are part of the natural tab sequence of the page.
      *
      * @default true
      */
     navigable = true;
     /**
-     * Fires every time keyboard navigation occurs.
+     * Fires every time keyboard navigation occurs within the ButtonGroup.
      */
     navigate = new EventEmitter();
     buttons;

package/esm2022/buttongroup/buttongroup.module.mjs

@@ -10,12 +10,29 @@ import * as i1 from "../button/button.component";
 import * as i2 from "./buttongroup.component";
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
+ * definition for the ButtonGroup directive.
  *
- * The exported package module.
+ * Required for adding ButtonGroup features in NgModule-based Angular applications.
  *
  * The package exports:
  * - `ButtonGroupComponent`—The ButtonGroup component class.
  * - `ButtonComponent`—The Button component class.
+ *
+ * @example
+ * ```typescript
+ * import { ButtonGroupModule } from '@progress/kendo-angular-buttons';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ButtonGroupModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 export class ButtonGroupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/buttons.module.mjs

@@ -25,31 +25,21 @@ import * as i12 from "@progress/kendo-angular-common";
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the Buttons components.
  *
+ * Required for adding all Button features in NgModule-based Angular applications.
+ *
  * @example
  *
  * ```ts-no-run
- * // Import the Buttons module
  * import { ButtonsModule } from '@progress/kendo-angular-buttons';
- *
- * // 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({
+ * @NgModule({
  *     declarations: [AppComponent], // declare app component
  *     imports:      [BrowserModule, ButtonsModule], // import Buttons module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class ButtonsModule {

package/esm2022/chip/chip-list.component.mjs

@@ -12,6 +12,19 @@ import { packageMetadata } from '../package-metadata';
 import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * Represents the Kendo UI ChipList component for Angular. Displays a list of Chip components.
+ *
+ * @example
+ * ```html
+ * <kendo-chiplist selection="multiple">
+ *   <kendo-chip label="Chip 1"></kendo-chip>
+ *   <kendo-chip label="Chip 2"></kendo-chip>
+ * </kendo-chiplist>
+ * ```
+ * @remarks
+ * Supported children components are: {@link ChipComponent}.
+ */
 export class ChipListComponent {
     localizationService;
     renderer;
@@ -26,21 +39,14 @@ export class ChipListComponent {
     /**
      * Sets the selection mode of the ChipList.
      *
-     * The available values are:
-     * * `none` (default)
-     * * `single`
-     * * `multiple`
+     * @default 'none'
      */
     selection = 'none';
     /**
-     * The size property specifies the gap between the Chips in the ChipList
-     * ([see example]({% slug appearance_chiplist %}#toc-size)).
+     * Sets the gap between the Chips in the ChipList.
+     * See [ChipList Appearance]({% slug appearance_chiplist %}#size).
      *
-     * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const sizeValue = size ? size : 'medium';
@@ -52,11 +58,11 @@ export class ChipListComponent {
         return this._size;
     }
     /**
-     * Fires each time when the ChipList selection is changed.
+     * Fires when the ChipList selection changes.
      */
     selectedChange = new EventEmitter();
     /**
-     * Fires each time the user clicks on the remove icon of the Chip.
+     * Fires when the user clicks the remove icon of a Chip in the ChipList.
      */
     remove = new EventEmitter();
     chips;

package/esm2022/chip/chip.component.mjs

@@ -19,7 +19,12 @@ const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_THEME_COLOR = 'base';
 const DEFAULT_FILL_MODE = 'solid';
 /**
- * Displays a Chip that represents an input, attribute or an action.
+ * Displays a Chip that represents an input, attribute, or action.
+ *
+ * @example
+ * ```html
+ * <kendo-chip label="Chip Label"></kendo-chip>
+ * ```
  */
 export class ChipComponent {
     element;
@@ -36,14 +41,13 @@ export class ChipComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
      * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
      */
     svgIcon;
     /**
-     * Defines a CSS class — or multiple classes separated by spaces —
-     * which are applied to a span element.
-     * Allows the usage of custom icons.
+     * Defines a CSS class, or multiple classes separated by spaces,
+     * applied to a `span` element. Use the `iconClass` to add custom icons.
      */
     iconClass;
     /**
@@ -56,18 +60,18 @@ export class ChipComponent {
      */
     selected = false;
     /**
-     * Specifies if the Chip will be removable or not.
-     * If the property is set to `true`, the Chip renders a remove icon.
+     * Specifies if the Chip is removable.
+     * If set to `true`, the Chip renders a remove icon.
      * @default false
      */
     removable = false;
     /**
-     * Specifies a custom remove font icon class that will be rendered when the Chip is removable.
+     * Specifies a custom remove font icon class to render when the Chip is removable.
      * [see example]({% slug icons %})
      */
     removeIcon;
     /**
-     * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
+     * Specifies a custom remove SVG icon to render when the Chip is removable.
      */
     removeSvgIcon;
     /**
@@ -79,29 +83,25 @@ export class ChipComponent {
     /**
      * @hidden
      *
-     * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
+     * Specifies a custom menu font icon class to render when the Chip has a menu.
      */
     menuIcon;
     /**
      * @hidden
      *
-     * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
+     * Specifies a custom menu SVG icon to render when the Chip has a menu.
      */
     menuSvgIcon;
     /**
-     * If set to `true`, the Chip will be disabled.
+     * If set to `true`, the Chip is disabled.
      * @default false
      */
     disabled = false;
     /**
-     * The size property specifies the padding of the Chip
-     * ([see example]({% slug appearance_chip %}#toc-size)).
+     * Sets the padding of the Chip.
+     * See [Chip Appearance]({% slug appearance_chip %}#size).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -113,15 +113,10 @@ export class ChipComponent {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the Chip
-     * ([see example](slug:appearance_chip#toc-roundness)).
+     * Sets the border radius of the Chip.
+     * See [Chip Appearance](slug:appearance_chip#roundness).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
@@ -132,13 +127,10 @@ export class ChipComponent {
         return this._rounded;
     }
     /**
-     * The fillMode property specifies the background and border styles of the Chip
-     * ([see example](slug:appearance_chip#toc-fill-mode)).
+     * Sets the background and border styles of the Chip.
+     * See [Chip Appearance](slug:appearance_chip#fill-mode).
      *
-     * The possible values are:
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
@@ -149,17 +141,11 @@ export class ChipComponent {
         return this._fillMode;
     }
     /**
-     * The Chip allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color while also amending the text color accordingly
-     * ([see example](slug:appearance_chip#toc-theme-colors)).
+     * Sets a predefined theme color for the Chip.
+     * The theme color applies as a background and border color and adjusts the text color.
+     * See [Chip Appearance](slug:appearance_chip#theme-colors).
      *
-     * The possible values are:
-     * * `base` (default)
-     * * `info`
-     * * `success`
-     * * `warning`
-     * * `error`
-     * * `none`
+     * @default 'base'
      */
     set themeColor(themeColor) {
         const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
@@ -170,17 +156,17 @@ export class ChipComponent {
         return this._themeColor;
     }
     /**
-     * Fires each time the user clicks the remove icon of the Chip.
+     * Fires when the user clicks the remove icon of the Chip.
      */
     remove = new EventEmitter();
     /**
      * @hidden
      *
-     * Fires each time the user clicks the menu icon of the Chip.
+     * Fires when the user clicks the menu icon of the Chip.
      */
     menuToggle = new EventEmitter();
     /**
-     * Fires each time the user clicks the content of the Chip.
+     * Fires when the user clicks the content of the Chip.
      */
     contentClick = new EventEmitter();
     tabIndex = 0;
@@ -404,7 +390,7 @@ export class ChipComponent {
                     <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
                 </span>
             </ng-container>
-    
+
             <ng-container *ngIf="avatarSettings?.initials">
                 <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
             </ng-container>
@@ -465,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
                 </span>
             </ng-container>
-    
+
             <ng-container *ngIf="avatarSettings?.initials">
                 <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
             </ng-container>

package/esm2022/chip/chip.module.mjs

@@ -13,28 +13,21 @@ import * as i2 from "./chip-list.component";
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Chip and ChipList components.
  *
- * @example
+ * Required for adding Chip and ChipList features in NgModule-based Angular applications.
  *
- * ```ts-no-run
- * // Import the Chip module
+ * @example
+ * ```typescript
  * import { ChipModule } from '@progress/kendo-angular-buttons';
- *
- * // 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, ChipModule], // import Chip module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ChipModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
  * ```
  */
 export class ChipModule {

package/esm2022/directives.mjs

@@ -15,40 +15,100 @@ import { SplitButtonComponent } from './splitbutton/splitbutton.component';
 import { ButtonItemTemplateDirective } from './listbutton/button-item-template.directive';
 import { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 /**
- * Utility array that contains all `Button` related components and directives
+ * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_BUTTON = [
     ButtonComponent
 ];
 /**
- * Utility array that contains all `ButtonGroup` related components and directives
+ * Use the `KENDO_BUTTONGROUP` utility array to add all ButtonGroup-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONGROUP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_BUTTONGROUP = [
     ButtonComponent,
     ButtonGroupComponent
 ];
 /**
- * Utility array that contains all `DropDownButton` related components and directives
+ * Use the `KENDO_DROPDOWNBUTTON` utility array to add all DropDownButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_DROPDOWNBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_DROPDOWNBUTTON = [
     DropDownButtonComponent,
     ButtonItemTemplateDirective
 ];
 /**
- * Utility array that contains all `Chip` related components and directives
+ * Use the `KENDO_CHIP` utility array to add all Chip-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_CHIP = [
     ChipComponent
 ];
 /**
- * Utility array that contains all `ChipList` related components and directives
+ * Use the `KENDO_CHIPLIST` utility array to add all ChipList-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIPLIST],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_CHIPLIST = [
     ChipComponent,
     ChipListComponent
 ];
 /**
- * Utility array that contains all `FloatingActionButton` related components and directives
+ * Use the `KENDO_FLOATINGACTIONBUTTON` utility array to add all FloatingActionButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FLOATINGACTIONBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_FLOATINGACTIONBUTTON = [
     FloatingActionButtonComponent,
@@ -56,7 +116,17 @@ export const KENDO_FLOATINGACTIONBUTTON = [
     FloatingActionButtonTemplateDirective
 ];
 /**
- * Utility array that contains all `SplitButton` related components and directives
+ * Use the `KENDO_SPLITBUTTON` utility array to add all SplitButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SPLITBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_SPLITBUTTON = [
     SplitButtonComponent,
@@ -65,7 +135,17 @@ export const KENDO_SPLITBUTTON = [
     ButtonItemTemplateDirective
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-buttons` related components and directives
+ * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONS],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 export const KENDO_BUTTONS = [
     ...KENDO_BUTTON,