@progress/kendo-angular-toolbar 19.1.0-develop.2 → 19.1.1-develop.1

package/fesm2022/progress-kendo-angular-toolbar.mjs

@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1748526935,
-    version: '19.1.0-develop.2',
+    publishDate: 1749139799,
+    version: '19.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -437,8 +437,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
 /**
- * Represents the Base ToolBar Tool component for Angular.
- * Extend this class to create custom tools.
+ * Represents the base ToolBar Tool component for Angular.
+ *
+ * Extend this class to create a custom tool for the ToolBar.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+ *
+ * @Component({
+ *    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }],
+ *    selector: 'custom-tool',
+ * })
+ *
+ * export class CustomToolComponent extends ToolBarToolComponent {
+ *
+ *  constructor() {
+ *        super();
+ *    }
+ * }
+ * ```
  */
 class ToolBarToolComponent {
     toolbarTemplate;
@@ -472,27 +491,27 @@ class ToolBarToolComponent {
         return this.overflows ? 'block' : 'none';
     }
     /**
-     * Determines if the tool can be focused.
-     * If the returned value is `false`, the tool will not be part of the keyboard navigation.
-     * @returns `true` if the tool should take part in keyboard navigation.
+     * Determines if the tool can receive focus.
+     * Returns `true` if the tool participates in keyboard navigation.
+     * @returns `true` if the tool is focusable.
      */
     canFocus() {
         return false;
     }
     /**
-     * Called when the tool is focused.
-     * The method accepts as argument the original browser event, which can be a `KeyboardEvent`, `MouseEvent` or `FocusEvent`.
-     * @param {Event} _ev - This is the event that caused the tool to be focused.
+     * Called when the tool receives focus.
+     * Accepts the original browser event, which can be a `KeyboardEvent`, `MouseEvent`, or `FocusEvent`.
+     * @param {Event} _ev - The event that triggers focus for the tool.
      */
     focus(_ev) {
         /* noop */
     }
     /**
-     * Called when the tool is focused and one of the arrow keys is pressed.
-     * The returned boolean value determines whether the `ToolBarComponent` will move the focus to the next/previous `ToolBarToolComponent`
+     * Called when the tool is focused and an arrow key is pressed.
+     * Returns a boolean value that determines if the `ToolBarComponent` moves focus to the next or previous tool
      * ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
-     * @param {KeyboardEvent} _ev - The last pressed arrow key
-     * @returns a boolean value determines whether the focus will move to the next/previous component.
+     * @param {KeyboardEvent} _ev - The last pressed arrow key.
+     * @returns `true` if focus moves to another tool.
      */
     handleKey(_ev) {
         return false;
@@ -787,15 +806,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ToolbarMessages extends ComponentMessages {
     /**
-     * The title of the **More Tools** button in a responsive ToolBar
+     * Sets the title of the **More Tools** button in a responsive ToolBar.
      */
     moreToolsTitle;
     /**
-     * The title for the **Previous Tool** button when the Toolbar is scrollable.
+     * Sets the title for the **Previous Tool** button when the ToolBar is scrollable.
      */
     previousToolButton;
     /**
-     * The title for the **Next Tool** button when the Toolbar is scrollable.
+     * Sets the title for the **Next Tool** button when the ToolBar is scrollable.
      */
     nextToolButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -1100,6 +1119,13 @@ const getInitialPopupSettings = (isRtl) => ({
 });
 /**
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-button text="Button"></kendo-toolbar-button>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolBarComponent {
     localization;
@@ -1116,7 +1142,8 @@ class ToolBarComponent {
         return `k-button-${SIZES[this.size]}`;
     }
     /**
-     * Configures the overflow mode. Used to specify how tools will be rendered when the total size of all tools is greater than the size of the Toolbar container.
+     * Sets the overflow mode for the ToolBar.
+     * Use this property to control how tools render when their total size is greater than the ToolBar container.
      * @default false
      */
     set overflow(overflow) {
@@ -1178,11 +1205,9 @@ class ToolBarComponent {
         return this.normalizedOverflow.mode !== 'none';
     }
     /**
-     * Configures the popup of the ToolBar overflow button ([see example](slug:responsive_toolbar#customizing-the-popup)).
-     *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * Configures the popup for the ToolBar overflow button.
+     * Use this property to customize the overflow popup appearance and behavior
+     * ([see example](slug:responsive_toolbar#customizing-the-popup)).
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
@@ -1191,9 +1216,9 @@ class ToolBarComponent {
         return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
     }
     /**
-     * The fillMode property specifies the background and border styles of the Toolbar
+     * Sets the fill mode for the ToolBar.
+     * This property controls the background and border styles of the ToolBar
      * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     *
      * @default 'solid'
      */
     set fillMode(fillMode) {
@@ -1205,17 +1230,15 @@ class ToolBarComponent {
         return this._fillMode;
     }
     /**
-     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
+     * Sets the `tabindex` attribute of the ToolBar.
+     * Use this property to control the tab order of the ToolBar component.
+     * @default 0
      */
     tabindex = 0;
     /**
-     * Specifies the padding of all Toolbar elements.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Sets the size for all ToolBar elements.
+     * Use this property to control the padding of the ToolBar elements.
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -1235,8 +1258,9 @@ class ToolBarComponent {
         return this.tabindex;
     }
     /**
-     * Specifies the icons visibility for all tools in the ToolBar.
-     * This can be overridden by the `showIcon` property of each tool.
+     * Sets the icon visibility for all tools in the ToolBar.
+     * You can override this property for each tool using the `showIcon` property of the tool.
+     * @default 'always'
      */
     set showIcon(value) {
         if (this._showIcon === value) {
@@ -1250,8 +1274,9 @@ class ToolBarComponent {
         });
     }
     /**
-     * Specifies the text visibility for all tools in the ToolBar.
-     * This can be overridden by the `showText` property of each tool.
+     * Sets the text visibility for all tools in the ToolBar.
+     * You can override this property for each tool using the `showText` property of the tool.
+     * @default 'always'
      */
     set showText(value) {
         if (this._showText === value) {
@@ -1265,11 +1290,11 @@ class ToolBarComponent {
         });
     }
     /**
-     * Fires when the overflow popup of the ToolBar is opened.
+     * Emits when the overflow popup of the ToolBar opens.
      */
     open = new EventEmitter();
     /**
-     * Fires when the overflow popup of the ToolBar is closed.
+     * Emits when the overflow popup of the ToolBar closes.
      */
     close = new EventEmitter();
     allTools;
@@ -2567,6 +2592,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
+ *
+ * Use this component to render a button inside the ToolBar.
+ *
+ *  @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-button text="Button"></kendo-toolbar-button>
+ * </kendo-toolbar>
+ * ```
+ *
  */
 class ToolBarButtonComponent extends ToolBarToolComponent {
     element;
@@ -2575,6 +2610,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies the button text visibility.
+     * Accepts a `DisplayMode` value.
+     * @default 'always'
      */
     set showText(value) {
         this._showText = value;
@@ -2585,6 +2622,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Specifies the button icon visibility.
+     * Accepts a `DisplayMode` value.
+     * @default 'always'
      */
     set showIcon(value) {
         this._showIcon = value;
@@ -2594,7 +2633,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         return this._showIcon;
     }
     /**
-     * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * Specifies the text of the Button
+     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
     set text(text) {
         this._text = text;
@@ -2610,26 +2650,27 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         return this.host.size;
     }
     /**
-     * Specifies custom inline CSS styles of the Button.
+     * Specifies custom inline CSS styles for the Button.
      */
     style;
     /**
-     * Specifies custom CSS class names that will be added to the Button.
+     * Specifies custom CSS class names to be added to the Button.
      */
     className;
     /**
-     * Specifies the title of the Button.
+     * Specifies the `title` attribute of the Button.
      */
     title;
     /**
-     * If `disabled` is set to `true`, the Button is disabled
+     * Disables the Button when set to `true`
      * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
     disabled;
     /**
-     * Provides visual styling that indicates if the Button is active
+     * Provides visual styling to indicate if the Button is active
      * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
-     * By default, `toggleable` is set to `false`.
+     * For toggleable buttons, set this to `true`.
+     * @default false
      */
     toggleable = false;
     /**
@@ -2651,37 +2692,20 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the selected state of the Button.
+     * Use with the `toggleable` property.
+     * @default false
      */
     selected = false;
     /**
-     * The fillMode property specifies the background and border styles of the Button.
-     *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
-     * * `null`
+     * Specifies the background and border styles of the Button.
+     * Accepts a `ButtonFillMode` value.
+     * @default 'solid'
      */
     fillMode = 'solid';
     /**
-     * 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 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.
-     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     * Specifies the predefined theme color of the Button.
+     * Accepts a `ButtonThemeColor` value.
+     * @default 'base'
      */
     themeColor = 'base';
     /**
@@ -2694,8 +2718,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * 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 to be applied to a `span` element inside the Button.
+     * Allows the usage of custom icons.
      */
     set iconClass(iconClass) {
         this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
@@ -2703,7 +2727,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -2718,8 +2742,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * Defines a URL which is used 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.
+     * Defines a URL for an image to be rendered inside the Button.
+     * The URL can be relative or absolute.
      */
     set imageUrl(imageUrl) {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
@@ -2730,11 +2754,11 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     click = new EventEmitter();
     /**
-     * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
+     * Fires when the Button's `pointerdown` event is triggered.
      */
     pointerdown = new EventEmitter();
     /**
-     * Fires each time the selected state of a Toggle Button is changed.
+     * Fires each time the selected state of a toggleable Button is changed.
      * The event argument is the new selected state (Boolean).
      */
     selectedChange = new EventEmitter();
@@ -3199,35 +3223,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the Kendo UI Toolbar ButtonGroup for Angular.
+ * Represents the [Kendo UI Toolbar ButtonGroup for Angular](slug:controltypes_toolbar#button-groups).
+ *
+ * Use this component to group buttons in a ButtonGroup inside the ToolBar.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-buttongroup>
+ *          <kendo-toolbar-button text="Bold"></kendo-toolbar-button>
+ *          <kendo-toolbar-button text="Underline"></kendo-toolbar-button>
+ *          <kendo-toolbar-button text="Italic"></kendo-toolbar-button>
+ *      </kendo-toolbar-buttongroup>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     localization;
     host;
     /**
-     * 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 the `disabled` attribute of the button 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.
+     * When `true`, disables the whole group of buttons.
+     * If you set the `disabled` property of the group, it overrides the `disabled` property of individual buttons.
      */
     disabled;
     /**
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
+     * @default 'solid'
      */
     fillMode = 'solid';
     /**
-     * By default, the selection mode of the ButtonGroup is set to `multiple`.
+     * 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 you set the width of the ButtonGroup, the buttons have the same width and resize to fill the group wrapper.
      */
     width;
     /**
@@ -3609,13 +3642,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
+ *
+ * Use this component to add a button that opens a popup with a list of items in the ToolBar.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-dropdownbutton text="Paste Variations" [data]="data">
+ *      </kendo-toolbar-dropdownbutton>
+ * </kendo-toolbar>
+ * ```
+ *
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     zone;
     renderer;
     host;
     /**
-     * Allows showing the default arrow icon or providing alternative one instead.
+     * Shows the default arrow icon or lets you provide a custom one.
      * @default false
      */
     arrowIcon = false;
@@ -3626,7 +3670,8 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     title = '';
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies the button text visibility.
+     * Controls the button text visibility.
+     * @default 'always'
      */
     set showText(value) {
         this._showText = value;
@@ -3636,7 +3681,8 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * Specifies the button icon visibility.
+     * Controls the button icon visibility.
+     * @default 'always'
      */
     set showIcon(value) {
         this._showIcon = value;
@@ -3656,15 +3702,15 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         return this._text;
     }
     /**
-     * Defines an icon that will be rendered next to the button text.
+     * Sets the icon rendered next to the button text.
      */
     set icon(icon) {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Sets the `SVGIcon` rendered in the button.
+     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -3679,14 +3725,14 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * Defines an icon with a custom CSS class that will be rendered next to the button text.
+     * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
         this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
         this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
     }
     /**
-     * Defines the location of an image that will be displayed next to the button text.
+     * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
@@ -3694,10 +3740,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Configures the popup of the DropDownButton.
-     *
-     * The available options are:
-     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
@@ -3720,55 +3763,37 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.themeColor = primary ? 'primary' : 'base';
     }
     /**
-     * The fillMode property specifies the background and border styles of the Button.
-     *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
-     * * `null`
+     * Sets the fill mode for the button.
+     * The fill mode represents the background and border styles.
+     * @default 'solid'
      */
     fillMode = 'solid';
     /**
-     * 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
+     * Sets the predefined theme color for the button.
+     * The theme color applies to the background, border, and text
      * ([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.
-     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     * @default 'base'
      */
     themeColor = 'base';
     /**
-     * The CSS classes that will be rendered on the main button.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Sets the CSS classes for the main button.
+     * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     buttonClass;
     /**
-     * Sets the data item field that represents the item text.
-     * If the data contains only primitive values, do not define it.
+     * Sets the data item field that repesents the item text.
+     * If the data contains only primitive values, do not set this property.
      */
     textField;
     /**
-     * Sets the disabled state of the DropDownButton.
+     * When `true`, disables the DropDownButton.
      */
     disabled;
     /**
      * Sets the data of the DropDownButton
      * ([see example](slug:controltypes_toolbar#drop-down-buttons)).
      *
-     * > The data has to be provided in an array-like list.
+     * > Provide the data as an array-like list.
      */
     set data(data) {
         this._data = data || [];
@@ -3781,17 +3806,17 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Fires each time the user clicks a DropDownButton item.
-     * The event data contains the data item that is bound to the clicked list item.
+     * The event data contains the clicked item's data.
      */
     itemClick = new EventEmitter();
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed.
+     * Fires when the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup stays closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open.
+     * Fires when the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup stays open.
      */
     close = new EventEmitter();
     dropdownButton;
@@ -4184,13 +4209,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons).
+ * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#split-buttons).
+ *
+ * Use the ToolBar SplitButton to create a split button with a main button and a drop-down list of actions in the ToolBar.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-splitbutton text="Paste" [data]="data">
+ *      </kendo-toolbar-splitbutton>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies the button text visibility.
+     * Controls the button text visibility.
+     * @default 'always'
      */
     set showText(value) {
         this._showText = value;
@@ -4200,7 +4236,8 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * Specifies the button icon visibility.
+     * Controls the button icon visibility.
+     * @default 'always'
      */
     set showIcon(value) {
         this._showIcon = value;
@@ -4220,7 +4257,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._text;
     }
     /**
-     * Defines the icon that will be rendered next to the button text
+     * Sets the icon rendered next to the button text
      * ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      */
     set icon(icon) {
@@ -4228,8 +4265,8 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * Defines an SVGIcon to be rendered within the main button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Sets the `SVGIcon` rendered in the main button.
+     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -4244,29 +4281,27 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
     }
     /**
-     * Defines an icon with a custom CSS class that will be rendered next to the button text.
+     * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
         this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
         this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
     }
     /**
-     * Defines the location of an image that will be displayed next to the button text.
+     * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
         this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
     }
     /**
-     * When set to `true`, disables a SplitButton item.
+     * When `true`, disables a SplitButton item.
      */
     disabled;
     /**
      * Configures the popup of the SplitButton.
-     *
-     * The available options are:
-     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
+
      */
     set popupSettings(value) {
         this._popupSettings = value;
@@ -4278,33 +4313,15 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._popupSettings;
     }
     /**
-     * The fillMode property specifies the background and border styles of the Button.
-     *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
-     * * `null`
+     * Sets the fill mode for the button.
+     * The fill mode represents the background and border styles.
+     * @default 'solid'
      */
     fillMode = 'solid';
     /**
-     * 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.
-     *
-     * 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.
-     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     * Sets the predefined theme color for the button.
+     * The theme color applies to the background, border, and text.
+     * @default 'base'
      */
     themeColor = 'base';
     /**
@@ -4316,33 +4333,32 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
     }
     /**
-     * The CSS classes that will be rendered on the main button.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Sets the CSS classes for the main button.
+     * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     buttonClass;
     /**
-     * The CSS classes that will be rendered on the button which opens the popup.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Sets the CSS classes for the arrow button that opens the popup.
+     * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     arrowButtonClass;
     /**
-     * Specifies the name of the [font icon](slug:icons#icons-list) that will
-     * be rendered for the button which opens the popup.
+     * Sets the name of the [font icon](slug:icons#icons-list) for the arrow button.
      */
     arrowButtonIcon = 'caret-alt-down';
     /**
-     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-     * be rendered for the button which opens the popup.
+     * Sets the [`SVGIcon`](slug:api_icons_svgicon) for the arrow button.
      */
     arrowButtonSvgIcon = caretAltDownIcon;
     /**
-     * Configures the text field of the button-list popup.
+     * Sets the text field for the button-list popup.
+     * @default 'text'
      */
     textField = 'text';
     /**
      * Sets the data of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      *
-     * > The data has to be provided in an array-like list.
+     * > Provide the data as an array-like list.
      */
     set data(data) {
         this._data = data || [];
@@ -4354,22 +4370,22 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._data;
     }
     /**
-     * Fires each time the user clicks the main button.
+     * Fires when the user clicks the main button.
      */
     buttonClick = new EventEmitter();
     /**
-     * Fires each time the user clicks the drop-down list.
-     * The event data contains the data item that is bound to the clicked list item.
+     * Fires when the user clicks a drop-down list item.
+     * The event data contains the clicked item's data.
      */
     itemClick = new EventEmitter();
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed.
+     * Fires when the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup stays closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open.
+     * Fires when the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup stays open.
      */
     close = new EventEmitter();
     toolbarOptions = {
@@ -4774,6 +4790,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ *
+ * Use this component to add a visual separator between ToolBar tools.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-button text="Button 1"></kendo-toolbar-button>
+ *      <kendo-toolbar-separator></kendo-toolbar-separator>
+ *      <kendo-toolbar-button text="Button 2"></kendo-toolbar-button>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolBarSeparatorComponent extends ToolBarToolComponent {
     separator;
@@ -4853,6 +4880,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ *
+ * Use the ToolBar Spacer to add flexible space between ToolBar tools.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-button text="Button 1"></kendo-toolbar-button>
+ *      <kendo-toolbar-spacer></kendo-toolbar-spacer>
+ *      <kendo-toolbar-button text="Button 2"></kendo-toolbar-button>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolBarSpacerComponent extends ToolBarToolComponent {
     /**
@@ -4911,7 +4949,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 /**
- * Custom component messages override default component messages.
+ * Represents the custom messages component of the ToolBar.
+ *
+ * Use this component to override default messages for the ToolBar.
+ *
+ * @example
+ * ```html
+ * <kendo-toolbar>
+ *      <kendo-toolbar-messages
+ *          moreToolsTitle="More options"
+ *          previousToolButton="Previous"
+ *          nextToolButton="Next">
+ *      </kendo-toolbar-messages>
+ * </kendo-toolbar>
+ * ```
  */
 class ToolbarCustomMessagesComponent extends ToolbarMessages {
     service;
@@ -4962,10 +5013,10 @@ const KENDO_TOOLBAR = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the ToolBar component.
+ * Defines the [NgModule](link:site.data.urls.angular['ngmoduleapi']) for the ToolBar component.
  *
  * The package exports:
- * - `ToolBarComponent`&mdash;The ToolBarComponent class.
+ * - `ToolBarComponent`&mdash;The ToolBar component class.
  * - `ToolBarToolComponent`&mdash;The base Tool component class.
  * - `ToolBarButtonComponent`&mdash;The Button Tool component class.
  * - `ToolBarButtonGroupComponent`&mdash;The ButtonGroup Tool component class.