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

package/common/models/fillmode.d.ts

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible fillMode options of the buttons.
+ * Specifies the possible `fillMode` options for the buttons.
  */
 export type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear' | 'none';
 /**
- * Represents the possible fillMode options of the Chip.
+ * Specifies the possible `fillMode` options for the Chip.
  */
 export type ChipFillMode = 'solid' | 'outline' | 'none';

package/common/models/rounded.d.ts

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible rounded options of the buttons.
+ * Specifies the possible rounded options for the buttons.
  */
 export type ButtonRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
 /**
- * Represents the possible rounded options of the Chip.
+ * Specifies the possible rounded options for the Chip.
  */
 export type ChipRounded = 'small' | 'medium' | 'large' | 'full' | 'none';

package/common/models/size.d.ts

@@ -3,11 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the possible sizes of the buttons.
- *
+ * Specifies the possible sizes for the buttons.
  */
 export type ButtonSize = 'small' | 'medium' | 'large' | 'none';
 /**
- * Specifies the possible sizes of the Chip.
+ * Specifies the possible sizes for the Chip.
  */
 export type ChipSize = 'small' | 'medium' | 'large' | 'none';

package/common/models/theme-color.d.ts

@@ -3,31 +3,32 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the possible theme colors of the buttons([see examples]({% slug appearance_button %}#toc-theme-colors)).
+ * Specifies the possible theme colors for the buttons ([see examples]({% slug appearance_button %}#theme-colors)).
  *
  * The possible values are:
- * * `base` —Applies coloring based on the `base` theme color.
- * * `primary` —Applies coloring based on the `primary` theme color.
- * * `secondary`—Applies coloring based on the `secondary` theme color.
- * * `tertiary`— Applies coloring based on the `tertiary` theme color.
- * * `info`—Applies coloring based on the `info` theme color.
- * * `success`— Applies coloring based on the `success` theme color.
- * * `warning`— Applies coloring based on the `warning` theme color.
- * * `error`— Applies coloring based on the `error` theme color.
- * * `dark`— Applies coloring based on the `dark` theme color.
- * * `light`— Applies coloring based on the `light` theme color.
- * * `inverse`— Applies coloring based on the `inverse` theme color.
- *
+ * * `base`—Applies the `base` theme color.
+ * * `primary`—Applies the `primary` theme color.
+ * * `secondary`—Applies the `secondary` theme color.
+ * * `tertiary`—Applies the `tertiary` theme color.
+ * * `info`—Applies the `info` theme color.
+ * * `success`—Applies the `success` theme color.
+ * * `warning`—Applies the `warning` theme color.
+ * * `error`—Applies the `error` theme color.
+ * * `dark`—Applies the `dark` theme color.
+ * * `light`—Applies the `light` theme color.
+ * * `inverse`—Applies the `inverse` theme color.
+ * * `none`—Removes the theme color.
  */
 export type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'none';
 /**
- * Specifies the possible theme colors of the Chip.
+ * Specifies the possible theme colors for the Chip.
  *
  * The possible values are:
- * * `base` —Applies coloring based on the `base` theme color.
- * * `info`—Applies coloring based on the `info` theme color.
- * * `success`— Applies coloring based on the `success` theme color.
- * * `warning`— Applies coloring based on the `warning` theme color.
- * * `error`— Applies coloring based on the `error` theme color.
+ * * `base`—Applies the `base` theme color.
+ * * `info`—Applies the `info` theme color.
+ * * `success`—Applies the `success` theme color.
+ * * `warning`—Applies the `warning` theme color.
+ * * `error`—Applies the `error` theme color.
+ * * `none`—Removes the theme color.
  */
 export type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error' | 'none';

package/directives.d.ts

@@ -15,34 +15,114 @@ 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 declare const KENDO_BUTTON: readonly [typeof 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 declare const KENDO_BUTTONGROUP: readonly [typeof ButtonComponent, typeof 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 declare const KENDO_DROPDOWNBUTTON: readonly [typeof DropDownButtonComponent, typeof 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 declare const KENDO_CHIP: readonly [typeof 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 declare const KENDO_CHIPLIST: readonly [typeof ChipComponent, typeof 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 declare const KENDO_FLOATINGACTIONBUTTON: readonly [typeof FloatingActionButtonComponent, typeof DialItemTemplateDirective, typeof 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 declare const KENDO_SPLITBUTTON: readonly [typeof SplitButtonComponent, typeof SplitButtonCustomMessagesComponent, typeof ToggleButtonTabStopDirective, typeof 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 declare const KENDO_BUTTONS: readonly [typeof ButtonComponent, typeof ButtonComponent, typeof ButtonGroupComponent, typeof DropDownButtonComponent, typeof ButtonItemTemplateDirective, typeof ChipComponent, typeof ChipComponent, typeof ChipListComponent, typeof FloatingActionButtonComponent, typeof DialItemTemplateDirective, typeof FloatingActionButtonTemplateDirective, typeof SplitButtonComponent, typeof SplitButtonCustomMessagesComponent, typeof ToggleButtonTabStopDirective, typeof ButtonItemTemplateDirective];

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -17,28 +17,26 @@ import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
+ * Use the DropDownButton to display a button with a popup list of actions.
+ *
  * @example
  * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-dropdownbutton [data]="data">
- *    User Settings
- *  </kendo-dropdownbutton>
- * `
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-dropdownbutton [data]="data">
+ *       User Settings
+ *     </kendo-dropdownbutton>
+ *   `
  * })
  * class AppComponent {
- *   public data: Array<any> = [{
- *       text: 'My Profile'
- *   }, {
- *       text: 'Friend Requests'
- *   }, {
- *       text: 'Account Settings'
- *   }, {
- *       text: 'Support'
- *   }, {
- *       text: 'Log Out'
- *   }];
+ *   public data: Array<any> = [
+ *     { text: 'My Profile' },
+ *     { text: 'Friend Requests' },
+ *     { text: 'Account Settings' },
+ *     { text: 'Support' },
+ *     { text: 'Log Out' }
+ *   ];
  * }
  * ```
  */
@@ -46,96 +44,59 @@ export declare class DropDownButtonComponent extends ListButton implements After
     protected containerService: PopupContainerService;
     private renderer;
     /**
-     * Allows showing the default arrow icon or providing alternative one instead.
+     * Displays the default arrow icon or a custom one.
      * @default false
      */
     arrowIcon: boolean | ArrowIconSettings;
     /**
-     * Defines the name of an existing icon in the Kendo UI theme.
+     * Specifies the name of an existing icon in the Kendo UI theme.
      */
     icon: string;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button.
+     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
      */
     svgIcon: SVGIcon;
     /**
-     * Defines the list of CSS classes which are used for styling the Button with custom icons.
+     * Specifies a list of CSS classes for styling the button with custom icons.
      */
     iconClass: string;
     /**
-     * Defines a URL for styling the button with a custom image.
+     * Specifies a URL for styling the button with a custom image.
      */
     imageUrl: string;
     /**
      * Sets the data item field that represents the item text.
-     * If the data contains only primitive values, do not define it.
+     * If the data contains only primitive values, leave this undefined.
      */
     textField: string;
     /**
-     * Sets or gets the data of the DropDownButton.
-     *
-     * > The data has to be provided in an array-like list.
+     * Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
      */
     set data(data: any);
     get data(): any;
     /**
-     * The size property specifies the padding of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
+     * @default 'medium'
      */
     size: ButtonSize;
     /**
-     * The rounded property specifies the border radius of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
+     * @default 'medium'
      */
     rounded: ButtonRounded;
     /**
-     * The fillMode property specifies the background and border styles of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
-     *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
-     * * `none`
+     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
+     * @default 'solid'
      */
     set fillMode(fillMode: ButtonFillMode);
     get fillMode(): ButtonFillMode;
     /**
-     * The DropDownButton 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 api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     *
-     * The possible values are:
-     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `info`&mdash;Applies coloring based on the `info` theme color.
-     * * `success`&mdash; Applies coloring based on the `success` theme color.
-     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-     * * `error`&mdash; Applies coloring based on the `error` theme color.
-     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-     * * `light`&mdash; Applies coloring based on the `light` theme color.
-     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-     * * `none` &mdash;Removes the default CSS class (no class would be rendered).
+     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
+     * @default 'base'
      */
     themeColor: ButtonThemeColor;
     /**
-     * Sets attributes to the main button.
+     * Sets attributes for the main button.
      */
     set buttonAttributes(buttonAttributes: {
         [key: string]: string;
@@ -144,15 +105,16 @@ export declare class DropDownButtonComponent extends ListButton implements After
         [key: string]: string;
     };
     /**
-     * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
+     * Fires when the user clicks a drop-down list item.
+     * The event data contains the data item bound to the clicked list item.
      */
     itemClick: EventEmitter<any>;
     /**
-     * Fires each time the DropDownButton gets focused.
+     * Fires when the DropDownButton is focused.
      */
     onFocus: EventEmitter<any>;
     /**
-     * Fires each time the DropDownButton gets blurred.
+     * Fires when the DropDownButton is blurred.
      */
     onBlur: EventEmitter<any>;
     get focused(): boolean;
@@ -191,11 +153,11 @@ export declare class DropDownButtonComponent extends ListButton implements After
      */
     onButtonBlur(): void;
     /**
-     * Focuses the DropDownButton component.
+     * Focuses the DropDownButton.
      */
     focus(): void;
     /**
-     * Blurs the DropDownButton component.
+     * Blurs the DropDownButton.
      */
     blur(): void;
     constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, containerService: PopupContainerService, renderer: Renderer2);

package/dropdownbutton/dropdownbutton.module.d.ts

@@ -6,12 +6,28 @@ import * as i0 from "@angular/core";
 import * as i1 from "./dropdownbutton.component";
 import * as i2 from "../listbutton/button-item-template.directive";
 /**
+ * Exports the package module.
  *
- * The exported package module.
+ * Required for adding DropDownButton features in NgModule-based Angular applications.
  *
- * The package exports:
- * - `DropDownButtonComponent`—The DropDownButtonComponent component class.
- * - `ButtonItemTemplateDirective`—The Button item template directive.
+ * The module includes:
+ * - `DropDownButtonComponent`—The component class for the DropDownButton.
+ * - `ButtonItemTemplateDirective`—The directive for the button item template.
+ *
+ * @example
+ * ```typescript
+ * import { DropDownButtonModule } 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, DropDownButtonModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 export declare class DropDownButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownButtonModule, never>;

package/esm2022/button/button.component.mjs

@@ -24,7 +24,12 @@ const DEFAULT_FILL_MODE = 'solid';
  * 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 class ButtonComponent {
     renderer;
@@ -37,7 +42,7 @@ export class ButtonComponent {
      */
     arrowIcon = false;
     /**
-     * Provides visual styling that indicates if the Button is active.
+     * Adds visual styling to indicate when the Button is active.
      *
      * @default false
      */
@@ -58,6 +63,7 @@ export class ButtonComponent {
     }
     /**
      * Sets the selected state of the Button.
+     * Use with the `toggleable` property.
      *
      * @default false
      */
@@ -77,13 +83,12 @@ export class ButtonComponent {
         return this.element.tabIndex;
     }
     /**
-     * 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;
     /**
-     * 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) {
         if (isDevMode() && value && (this.icon || this.svgIcon)) {
@@ -95,7 +100,7 @@ export class ButtonComponent {
         return this._iconClass;
     }
     /**
-     * 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) {
         if (isDevMode() && name && this.iconClass) {
@@ -107,7 +112,7 @@ export class ButtonComponent {
         return this._icon;
     }
     /**
-     * If set to `true`, it disables the Button.
+     * When `true`, disables the Button and prevents user interaction.
      *
      * @default false
      */
@@ -123,8 +128,8 @@ export class ButtonComponent {
         return this.isDisabled;
     }
     /**
-     * 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'
      */
@@ -137,8 +142,8 @@ export class ButtonComponent {
         return this._size;
     }
     /**
-     * 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'
      */
@@ -151,8 +156,8 @@ export class ButtonComponent {
         return this._rounded;
     }
     /**
-     * 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'
      */
@@ -165,9 +170,9 @@ export class ButtonComponent {
         return this._fillMode;
     }
     /**
-     * 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'
      */
@@ -180,7 +185,7 @@ export class ButtonComponent {
         return this._themeColor;
     }
     /**
-     * Defines an SVGIcon to be rendered within the button.
+     * Sets an SVG icon to display inside the Button.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.iconClass) {
@@ -192,13 +197,12 @@ export class ButtonComponent {
         return this._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 = new EventEmitter();
     /**
-     * Fires each time the user clicks the button.
+     * Fires when the user clicks the Button.
      */
     click = new EventEmitter();
     element;
@@ -335,7 +339,7 @@ export class ButtonComponent {
         }
     }
     /**
-     * Blurs the Button component.
+     * Removes focus from the Button component.
      */
     blur() {
         if (isDocumentAvailable()) {
@@ -449,7 +453,7 @@ export class ButtonComponent {
                 [name]="$any(arrowIcon).icon || 'caret-alt-down'"
                 [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
         </span>
-        
+
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
@@ -481,7 +485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [name]="$any(arrowIcon).icon || 'caret-alt-down'"
                 [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
         </span>
-        
+
     `,
                     standalone: true,
                     imports: [NgIf, IconWrapperComponent, NgClass]

package/esm2022/button/button.module.mjs

@@ -11,31 +11,21 @@ import * as i0 from "@angular/core";
  * 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 class ButtonModule {