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

package/button/button.component.d.ts

@@ -13,7 +13,12 @@ import * as i0 from "@angular/core";
  * Represents the Kendo UI Button component for Angular.
  *
  * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
- * Please use the `button[kendoButton]` selector only.
+ * Use the `button[kendoButton]` selector only.
+ *
+ * @example
+ * ```html
+ * <button kendoButton [icon]="'save'" [themeColor]="'primary'">Save</button>
+ * ```
  */
 export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     renderer: Renderer2;
@@ -26,7 +31,7 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
      */
     arrowIcon: boolean | ArrowIconSettings;
     /**
-     * Provides visual styling that indicates if the Button is active.
+     * Adds visual styling to indicate when the Button is active.
      *
      * @default false
      */
@@ -43,6 +48,7 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     set togglable(value: boolean);
     /**
      * Sets the selected state of the Button.
+     * Use with the `toggleable` property.
      *
      * @default false
      */
@@ -54,74 +60,72 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
     set tabIndex(index: number);
     get tabIndex(): number;
     /**
-     * Defines a URL which is used for an `img` element inside the Button.
+     * Specifies a URL for an `img` element inside the Button.
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
      */
     imageUrl: string;
     /**
-     * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;
-     * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
+     * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
      */
     set iconClass(value: string);
     get iconClass(): string;
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme.
+     * Sets the name of an existing font icon in the Kendo UI theme.
      */
     set icon(name: string);
     get icon(): string;
     /**
-     * If set to `true`, it disables the Button.
+     * When `true`, disables the Button and prevents user interaction.
      *
      * @default false
      */
     set disabled(disabled: boolean);
     get disabled(): boolean;
     /**
-     * The size property specifies the padding of the Button
-     * ([see example]({% slug appearance_button %}#toc-size)).
+     * Sets the padding of the Button.
+     * See [Button Appearance]({% slug appearance_button %}#size).
      *
      * @default 'medium'
      */
     set size(size: ButtonSize);
     get size(): ButtonSize;
     /**
-     * The rounded property specifies the border radius of the Button
-     * ([see example](slug:appearance_button#toc-roundness)).
+     * Sets the border radius of the Button.
+     * See [Button Appearance](slug:appearance_button#roundness).
      *
      * @default 'medium'
      */
     set rounded(rounded: ButtonRounded);
     get rounded(): ButtonRounded;
     /**
-     * The fillMode property specifies the background and border styles of the Button
-     * ([see example](slug:appearance_button#toc-fill-mode)).
+     * Sets the background and border styles of the Button.
+     * See [Button Appearance](slug:appearance_button#fill-mode).
      *
      * @default 'solid'
      */
     set fillMode(fillMode: ButtonFillMode);
     get fillMode(): ButtonFillMode;
     /**
-     * The Button 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_button#toc-theme-colors)).
+     * Sets a predefined theme color for the Button.
+     * The theme color applies as a background and border color and adjusts the text color.
+     * See [Button Appearance](slug:appearance_button#theme-colors).
      *
      * @default 'base'
      */
     set themeColor(themeColor: ButtonThemeColor);
     get themeColor(): ButtonThemeColor;
     /**
-     * Defines an SVGIcon to be rendered within the button.
+     * Sets an SVG icon to display inside the Button.
      */
     set svgIcon(icon: SVGIcon);
     get svgIcon(): SVGIcon;
     /**
-     * Fires each time the selected state of a toggleable button is changed.
-     *
-     * The event argument is the new selected state (boolean).
+     * Fires when the selected state of a toggleable button changes.
+     * The event argument is the new selected state (`boolean`).
      */
     selectedChange: EventEmitter<any>;
     /**
-     * Fires each time the user clicks the button.
+     * Fires when the user clicks the Button.
      */
     click: EventEmitter<any>;
     element: HTMLElement;
@@ -183,7 +187,7 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
      */
     focus(): void;
     /**
-     * Blurs the Button component.
+     * Removes focus from the Button component.
      */
     blur(): void;
     /**

package/button/button.module.d.ts

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

package/button/selection-settings.d.ts

@@ -3,6 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The selection mode of the [ButtonGroup]({% slug api_buttons_buttongroupcomponent %}).
+ * Specifies the selection mode of the [ButtonGroup]({% slug api_buttons_buttongroupcomponent %}).
+ *
+ * - Use `'single'` to allow only one button to be selected at a time.
+ * - Use `'multiple'` to allow multiple buttons to be selected at the same time.
  */
 export type ButtonGroupSelection = 'single' | 'multiple';

package/buttongroup/buttongroup.component.d.ts

@@ -11,34 +11,38 @@ import { PreventableEvent } from '../preventable-event';
 import * as i0 from "@angular/core";
 /**
  * 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 declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit {
     private service;
     private renderer;
     private 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: boolean;
     /**
-     * The selection mode of the ButtonGroup.
+     * Sets the selection mode of the ButtonGroup.
+     *
      * @default 'multiple'
      */
     selection: ButtonGroupSelection;
     /**
      * 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: string;
     /**
@@ -47,16 +51,16 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     set tabIndex(value: number);
     get tabIndex(): number;
     /**
-     * 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: boolean;
     /**
-     * Fires every time keyboard navigation occurs.
+     * Fires every time keyboard navigation occurs within the ButtonGroup.
      */
     navigate: EventEmitter<PreventableEvent>;
     buttons: QueryList<ButtonComponent>;

package/buttongroup/buttongroup.module.d.ts

@@ -6,12 +6,29 @@ import * as i0 from "@angular/core";
 import * as i1 from "../button/button.component";
 import * as i2 from "./buttongroup.component";
 /**
+ * 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 declare class ButtonGroupModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupModule, never>;

package/buttons.module.d.ts

@@ -19,31 +19,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 declare class ButtonsModule {

package/chip/chip-list.component.d.ts

@@ -9,6 +9,19 @@ import { ChipListSelection } from './models/selection';
 import { ChipListRemoveEvent } from './chip-list-remove-event-args.interface';
 import { ChipSize } from '../common/models';
 import * as i0 from "@angular/core";
+/**
+ * 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 declare class ChipListComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
     private localizationService;
     private renderer;
@@ -23,30 +36,23 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
     /**
      * Sets the selection mode of the ChipList.
      *
-     * The available values are:
-     * * `none` (default)
-     * * `single`
-     * * `multiple`
+     * @default 'none'
      */
     selection: ChipListSelection;
     /**
-     * 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: ChipSize);
     get size(): ChipSize;
     /**
-     * Fires each time when the ChipList selection is changed.
+     * Fires when the ChipList selection changes.
      */
     selectedChange: EventEmitter<any[]>;
     /**
-     * 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: EventEmitter<ChipListRemoveEvent>;
     chips: QueryList<ChipComponent>;

package/chip/chip.component.d.ts

@@ -11,7 +11,12 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ChipAvatarSettings } from './models/avatar-settings.interface';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
     element: ElementRef;
@@ -28,14 +33,13 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      */
     icon: string;
     /**
-     * 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: 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: string;
     /**
@@ -48,18 +52,18 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
      */
     selected: boolean;
     /**
-     * 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: boolean;
     /**
-     * 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: string;
     /**
-     * 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: SVGIcon;
     /**
@@ -71,83 +75,65 @@ export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
     /**
      * @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: string;
     /**
      * @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: SVGIcon;
     /**
-     * If set to `true`, the Chip will be disabled.
+     * If set to `true`, the Chip is disabled.
      * @default false
      */
     disabled: boolean;
     /**
-     * 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: ChipSize);
     get size(): ChipSize;
     /**
-     * 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: ChipRounded);
     get rounded(): ChipRounded;
     /**
-     * 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: ChipFillMode);
     get fillMode(): ChipFillMode;
     /**
-     * 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: ChipThemeColor);
     get themeColor(): ChipThemeColor;
     /**
-     * Fires each time the user clicks the remove icon of the Chip.
+     * Fires when the user clicks the remove icon of the Chip.
      */
     remove: EventEmitter<ChipRemoveEvent>;
     /**
      * @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: EventEmitter<ChipRemoveEvent>;
     /**
-     * Fires each time the user clicks the content of the Chip.
+     * Fires when the user clicks the content of the Chip.
      */
     contentClick: EventEmitter<ChipContentClickEvent>;
     tabIndex: number;

package/chip/chip.module.d.ts

@@ -9,28 +9,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 declare class ChipModule {

package/chip/models/avatar-settings.interface.d.ts

@@ -4,30 +4,30 @@
 *-------------------------------------------------------------------------------------------*/
 export interface ChipAvatarSettings {
     /**
-     * The CSS styles that will be rendered on the wrapper element of the avatar.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Sets the CSS styles for the wrapper element of the avatar.
+     * Supports the types of values supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle?: any;
     /**
-     * Sets `initials` to the Chip avatar.
+     * Sets the initials for the Chip avatar.
      */
     initials?: string;
     /**
-     * The CSS styles that will be rendered on the wrapper element of the avatar initials.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Sets the CSS styles for the wrapper element of the avatar initials.
+     * Supports the types of values supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
      */
     initialsCssStyle?: any;
     /**
-     * Sets the `image` source of the Chip avatar.
+     * Sets the image source for the Chip avatar.
      */
     imageSrc?: string;
     /**
-     * Allows setting the `alt` attribute of a Chip avatar image.
+     * Sets the `alt` attribute for the Chip avatar image.
      */
     imageAltText?: string;
     /**
-     * The CSS styles that will be rendered on the avatar image element.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Sets the CSS styles for the avatar image element.
+     * Supports the types of values supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
      */
     imageCssStyle?: any;
 }

package/chip/models/selection.d.ts

@@ -9,6 +9,5 @@
  * * `none` (default)
  * * `single`
  * * `multiple`
- *
  */
 export type ChipListSelection = 'none' | 'single' | 'multiple';

package/common/models/arrow-settings.d.ts

@@ -4,19 +4,19 @@
 *-------------------------------------------------------------------------------------------*/
 import { SVGIcon } from "@progress/kendo-angular-icons";
 /**
- * Used to customize the DropDownButton arrow icon.
+ * Customizes the DropDownButton arrow icon.
  */
 export interface ArrowIconSettings {
     /**
-     * The Kendo font icon to replace the default arrow down icon.
+     * Specifies the Kendo font icon to replace the default arrow-down icon.
      */
     icon?: string;
     /**
-     * The custom font icon class to replace the default arrow down icon.
+     * Specifies the custom font icon class to replace the default arrow-down icon.
      */
     iconClass?: string;
     /**
-     * The SVG icon to replace the default arrow down SVG icon.
+     * Specifies the SVG icon to replace the default arrow-down SVG icon.
      */
     svgIcon?: SVGIcon;
 }