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

package/common/fillmode.d.ts

@@ -3,6 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible fillMode options of the Toolbar.
+ * Represents the possible fill mode options of the ToolBar.
  */
 export type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';

package/common/overflow-mode.d.ts

@@ -3,6 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible overflowMode options of the Toolbar. Applicable when there is not enough space to render all tools.
+ * Sets how the ToolBar handles overflow when there is not enough space to display all tools.
  */
 export type OverflowMode = 'scroll' | 'section' | 'menu' | 'none';

package/common/overflow-settings.d.ts

@@ -6,48 +6,40 @@ import { SVGIcon } from "@progress/kendo-svg-icons";
 import { OverflowMode } from "./overflow-mode";
 import { ToolbarScrollButtonsPosition, ToolbarScrollButtonsVisibility } from "./scroll-buttons";
 /**
- * The settings for the overflow functionality of the Toolbar.
+ * Represents the overflow settings for the ToolBar.
  */
 export interface ToolbarOverflowSettings {
     /**
-     * Determines the Toolbar overflow mode.
+     * Sets the ToolBar overflow mode.
      * @default 'none'
      */
     mode?: OverflowMode;
     /**
-     * Determines the Toolbar scroll buttons visibility mode. Applicable when the overflow mode is set to 'scroll'. The possible options are:
-     * - 'auto' (default) - The scroll buttons will be rendered only when the tools list overflows its container.
-     * - 'visible' - The scroll buttons will be always visible.
-     * - 'hidden' - No scroll buttons will be rendered.
+     * Sets the ToolBar scroll buttons visibility mode. Applies when the overflow mode is set to `'scroll'`.
      */
     scrollButtons?: ToolbarScrollButtonsVisibility;
     /**
-     * Determines the Toolbar scroll buttons position. Applicable when the overflow mode is set to 'scroll'. The possible options are:
-     * - 'start'—The scroll buttons will be rendered at the start before all tools.
-     * - 'end'—The scroll buttons will be rendered at the end after all tools.
-     * - 'split'(default)—The scroll buttons will be rendered at each side of the tools list.
+     * Sets the ToolBar scroll buttons position. Applies when the overflow mode is set to `'scroll'`.
      */
     scrollButtonsPosition?: ToolbarScrollButtonsPosition;
     /**
-     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the span element of the prev scroll button. Applicable when the overflow mode is set to 'scroll'.
+     * Adds a custom CSS class or multiple classes to the span element of the previous scroll button. Applies when the overflow mode is set to `'scroll'`.
      *
      * Allows the usage of custom icons.
      */
     prevButtonIcon?: string;
     /**
-     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the span element of the next scroll button. Applicable when the overflow mode is set to 'scroll'.
+     * Adds a custom CSS class or multiple classes to the span element of the next scroll button. Applies when the overflow mode is set to `'scroll'`.
      *
      * Allows the usage of custom icons.
      */
     nextButtonIcon?: string;
     /**
-     * Defines an SVGIcon to be rendered for the previous button icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applicable when the overflow mode is set to 'scroll'.
+     * Sets an `SVGIcon` for the previous button icon. Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
      */
     prevSVGButtonIcon?: SVGIcon;
     /**
-     * Defines an SVGIcon to be rendered for the next button icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applicable when the overflow mode is set to 'scroll'.
+     * Sets an `SVGIcon` for the next button icon. Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
      */
     nextSVGButtonIcon?: SVGIcon;
 }

package/common/scroll-buttons.d.ts

@@ -3,10 +3,20 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies when the Toolbar scroll buttons will be rendered.
+ * Controls when the ToolBar renders scroll buttons.
+ *
+ * The possible options are:
+ * - `auto`(default)—Renders the scroll buttons only when the tools overflow the ToolBar container.
+ * - `visible`—Always renders the scroll buttons.
+ * - `hidden`—Never renders the scroll buttons.
  */
 export type ToolbarScrollButtonsVisibility = 'hidden' | 'visible' | 'auto';
 /**
- * The available options for the `scrollButtonsPosition` option.
+ * Controls where the ToolBar renders scroll buttons.
+ *
+ * The possible options are:
+ * - `start`—Renders the scroll buttons at the start before all tools.
+ * - `end`—Renders the scroll buttons at the end after all tools.
+ * - `split`(default)—Renders the scroll buttons on both sides of the tools list.
  */
 export type ToolbarScrollButtonsPosition = 'start' | 'end' | 'split';

package/common/size.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible size options of the Toolbar.
+ * Represents the possible size options of the ToolBar.
  * @default `medium`
  */
 export type ToolbarSize = 'small' | 'medium' | 'large' | 'none';

package/display-mode.d.ts

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the visibility of the toolbar tool text or icon.
+ * Sets the visibility for the ToolBar tool text or icon.
  *
  * The possible values are:
- * - `always`—The text or icon is always visible, regardless of the current overflow mode.
- * - `toolbar`—The text or icon is displayed in the main ToolBar and in the overflow element when `section` overflow mode is used.
- * - `menu`—The text or icon is displayed only in the overflow popup when `menu` overflow mode is used.
- * - `never`—The text or icon is never rendered.
+ * - `always`—Always shows the text or icon regardless of the overflow mode.
+ * - `toolbar`—Shows in the main ToolBar and in the overflow element when using `section` overflow mode.
+ * - `menu`—Shows only in the overflow popup when using `menu` overflow mode.
+ * - `never`—Never renders the text or icon.
  *
  * @default 'always'
  */

package/esm2022/localization/custom-messages.component.mjs

@@ -8,7 +8,20 @@ import { ToolbarMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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>
+ * ```
  */
 export class ToolbarCustomMessagesComponent extends ToolbarMessages {
     service;

package/esm2022/localization/messages.mjs

@@ -10,15 +10,15 @@ import * as i0 from "@angular/core";
  */
 export 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 });

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1748538588,
-    version: '19.1.0',
+    publishDate: 1749139799,
+    version: '19.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/toolbar.component.mjs

@@ -44,6 +44,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>
+ * ```
  */
 export class ToolBarComponent {
     localization;
@@ -60,7 +67,8 @@ export 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) {
@@ -122,11 +130,9 @@ export 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);
@@ -135,9 +141,9 @@ export 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) {
@@ -149,17 +155,15 @@ export 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;
@@ -179,8 +183,9 @@ export 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) {
@@ -194,8 +199,9 @@ export 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) {
@@ -209,11 +215,11 @@ export 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;

package/esm2022/toolbar.module.mjs

@@ -19,10 +19,10 @@ import * as i8 from "./tools/toolbar-splitbutton.component";
 import * as i9 from "./tools/toolbar-tool.component";
 // 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`—The ToolBarComponent class.
+ * - `ToolBarComponent`—The ToolBar component class.
  * - `ToolBarToolComponent`—The base Tool component class.
  * - `ToolBarButtonComponent`—The Button Tool component class.
  * - `ToolBarButtonGroupComponent`—The ButtonGroup Tool component class.

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

@@ -15,6 +15,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "../toolbar.component";
 /**
  * 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>
+ * ```
+ *
  */
 export class ToolBarButtonComponent extends ToolBarToolComponent {
     element;
@@ -23,6 +33,8 @@ export 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;
@@ -33,6 +45,8 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Specifies the button icon visibility.
+     * Accepts a `DisplayMode` value.
+     * @default 'always'
      */
     set showIcon(value) {
         this._showIcon = value;
@@ -42,7 +56,8 @@ export 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;
@@ -58,26 +73,27 @@ export 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;
     /**
@@ -99,37 +115,20 @@ export 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';
     /**
@@ -142,8 +141,8 @@ export 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);
@@ -151,7 +150,7 @@ export 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;
@@ -166,8 +165,8 @@ export 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);
@@ -178,11 +177,11 @@ export 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();

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

@@ -15,35 +15,44 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../toolbar.component";
 /**
- * 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>
+ * ```
  */
 export 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;
     /**