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

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -14,13 +14,24 @@ import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
  * 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 declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
     private zone;
     private renderer;
     private 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: boolean | ArrowIconSettings;
@@ -30,12 +41,14 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      */
     title: string;
     /**
-     * Specifies the button text visibility.
+     * Controls the button text visibility.
+     * @default 'always'
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
-     * Specifies the button icon visibility.
+     * Controls the button icon visibility.
+     * @default 'always'
      */
     set showIcon(value: DisplayMode);
     get showIcon(): DisplayMode;
@@ -46,28 +59,25 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     set text(text: string);
     get text(): string;
     /**
-     * Defines an icon that will be rendered next to the button text.
+     * Sets the icon rendered next to the button text.
      */
     set icon(icon: string);
     /**
-     * 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: SVGIcon);
     /**
-     * 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: string);
     /**
-     * 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: string);
     /**
      * 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: PopupSettings);
     get popupSettings(): PopupSettings;
@@ -80,71 +90,53 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      */
     set primary(primary: boolean);
     /**
-     * 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: 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
+     * 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: ButtonThemeColor;
     /**
-     * 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: string;
     /**
-     * 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: string;
     /**
-     * Sets the disabled state of the DropDownButton.
+     * When `true`, disables the DropDownButton.
      */
     disabled: boolean;
     /**
      * 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: any[]);
     get data(): any[];
     /**
      * 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: EventEmitter<any>;
     /**
-     * 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: EventEmitter<PreventableEvent>;
     /**
-     * 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: EventEmitter<PreventableEvent>;
     dropdownButton: ElementRef;

package/tools/toolbar-separator.component.d.ts

@@ -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 declare class ToolBarSeparatorComponent extends ToolBarToolComponent implements AfterViewInit {
     separator: ElementRef;

package/tools/toolbar-spacer.component.d.ts

@@ -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 declare class ToolBarSpacerComponent extends ToolBarToolComponent implements AfterViewInit {
     /**

package/tools/toolbar-splitbutton.component.d.ts

@@ -13,17 +13,29 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class ToolBarSplitButtonComponent extends ToolBarToolComponent implements OnInit {
     private host;
     /**
-     * Specifies the button text visibility.
+     * Controls the button text visibility.
+     * @default 'always'
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
-     * Specifies the button icon visibility.
+     * Controls the button icon visibility.
+     * @default 'always'
      */
     set showIcon(value: DisplayMode);
     get showIcon(): DisplayMode;
@@ -33,64 +45,44 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     set text(text: string);
     get text(): string;
     /**
-     * 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: string);
     /**
-     * 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: SVGIcon);
     /**
-     * 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: string);
     /**
-     * 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: string);
     /**
-     * When set to `true`, disables a SplitButton item.
+     * When `true`, disables a SplitButton item.
      */
     disabled: boolean;
     /**
      * 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: PopupSettings);
     get popupSettings(): 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: 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.
-     *
-     * 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: ButtonThemeColor;
     /**
@@ -98,53 +90,52 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
      */
     set look(look: 'default' | 'flat' | 'outline');
     /**
-     * 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: string;
     /**
-     * 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: any;
     /**
-     * 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: string;
     /**
-     * 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: SVGIcon;
     /**
-     * Configures the text field of the button-list popup.
+     * Sets the text field for the button-list popup.
+     * @default 'text'
      */
     textField: string;
     /**
      * 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: any[]);
     get data(): any[];
     /**
-     * Fires each time the user clicks the main button.
+     * Fires when the user clicks the main button.
      */
     buttonClick: EventEmitter<any>;
     /**
-     * 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: EventEmitter<any>;
     /**
-     * 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: EventEmitter<PreventableEvent>;
     /**
-     * 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: EventEmitter<PreventableEvent>;
     toolbarOptions: ToolOptions;

package/tools/toolbar-tool.component.d.ts

@@ -6,8 +6,27 @@ import { TemplateRef, ElementRef } from '@angular/core';
 import { RenderLocation } from '../render-location';
 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 declare class ToolBarToolComponent {
     toolbarTemplate: TemplateRef<any>;
@@ -34,23 +53,23 @@ export declare class ToolBarToolComponent {
     get toolbarDisplay(): string;
     get overflowDisplay(): string;
     /**
-     * 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(): boolean;
     /**
-     * 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?: Event): void;
     /**
-     * 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: KeyboardEvent): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarToolComponent, never>;