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

package/esm2022/tools/toolbar-dropdownbutton.component.mjs

@@ -14,13 +14,24 @@ import * as i0 from "@angular/core";
 import * as i1 from "../toolbar.component";
 /**
  * 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>
+ * ```
+ *
  */
 export 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;
@@ -31,7 +42,8 @@ export 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;
@@ -41,7 +53,8 @@ export 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;
@@ -61,15 +74,15 @@ export 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;
@@ -84,14 +97,14 @@ export 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);
@@ -99,10 +112,7 @@ export 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);
@@ -125,55 +135,37 @@ export 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 || [];
@@ -186,17 +178,17 @@ export 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;

package/esm2022/tools/toolbar-separator.component.mjs

@@ -7,6 +7,17 @@ import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
  * 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>
+ * ```
  */
 export class ToolBarSeparatorComponent extends ToolBarToolComponent {
     separator;

package/esm2022/tools/toolbar-spacer.component.mjs

@@ -7,6 +7,17 @@ import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
  * 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>
+ * ```
  */
 export class ToolBarSpacerComponent extends ToolBarToolComponent {
     /**

package/esm2022/tools/toolbar-splitbutton.component.mjs

@@ -13,13 +13,24 @@ import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../toolbar.component";
 /**
- * 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>
+ * ```
  */
 export 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;
@@ -29,7 +40,8 @@ export 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;
@@ -49,7 +61,7 @@ export 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) {
@@ -57,8 +69,8 @@ export 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;
@@ -73,29 +85,27 @@ export 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;
@@ -107,33 +117,15 @@ export 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';
     /**
@@ -145,33 +137,32 @@ export 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 || [];
@@ -183,22 +174,22 @@ export 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 = {

package/esm2022/tools/toolbar-tool.component.mjs

@@ -5,8 +5,27 @@
 import { TemplateRef, Input, Directive, ElementRef, inject, ViewChild } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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();
+ *    }
+ * }
+ * ```
  */
 export class ToolBarToolComponent {
     toolbarTemplate;
@@ -40,27 +59,27 @@ export 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;