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

package/group-selection-settings.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The selection mode of the ToolBar ButtonGroup. For more information, refer to the
- * [`ToolBarButtonGroupComponent`]({% slug api_toolbar_toolbarbuttongroupcomponent %}).
+ * Тhe selection mode for the ToolBar ButtonGroup.
+ * For more information, see [`ToolBarButtonGroupComponent`]({% slug api_toolbar_toolbarbuttongroupcomponent %}).
  */
 export type ButtonGroupSelection = "single" | "multiple";

package/localization/custom-messages.component.d.ts

@@ -6,7 +6,20 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolbarMessages } from './messages';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class ToolbarCustomMessagesComponent extends ToolbarMessages {
     protected service: LocalizationService;

package/localization/messages.d.ts

@@ -9,15 +9,15 @@ import * as i0 from "@angular/core";
  */
 export declare 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: string;
     /**
-     * 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: string;
     /**
-     * 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: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarMessages, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "19.1.0",
+  "version": "19.1.1-develop.2",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1748538588,
+      "publishDate": 1749196669,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -55,17 +55,17 @@
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "19.1.0",
-    "@progress/kendo-angular-common": "19.1.0",
-    "@progress/kendo-angular-l10n": "19.1.0",
-    "@progress/kendo-angular-icons": "19.1.0",
-    "@progress/kendo-angular-indicators": "19.1.0",
-    "@progress/kendo-angular-popup": "19.1.0",
+    "@progress/kendo-angular-buttons": "19.1.1-develop.2",
+    "@progress/kendo-angular-common": "19.1.1-develop.2",
+    "@progress/kendo-angular-l10n": "19.1.1-develop.2",
+    "@progress/kendo-angular-icons": "19.1.1-develop.2",
+    "@progress/kendo-angular-indicators": "19.1.1-develop.2",
+    "@progress/kendo-angular-popup": "19.1.1-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.1.0"
+    "@progress/kendo-angular-schematics": "19.1.1-develop.2"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/popup-settings.d.ts

@@ -5,53 +5,56 @@
 import { ViewContainerRef } from '@angular/core';
 import { Align } from '@progress/kendo-angular-popup';
 /**
- * Used for configuring the options of the popup container.
+ * Configures the options for the popup container.
+ *
+ * Represents the Kendo UI for Angular ToolBar popup settings.
  *
  * @example
  * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-toolbar [overflow]="true" [popupSettings]="{ animate: false }">
- *      <kendo-toolbar-button text="my button"></kendo-toolbar-button>
- *  </kendo-toolbar>
- * `
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-toolbar [overflow]="true" [popupSettings]="{ animate: false }">
+ *       <kendo-toolbar-button text="my button"></kendo-toolbar-button>
+ *     </kendo-toolbar>
+ *   `
  * })
  * class AppComponent { }
- *
  * ```
  */
 export interface PopupSettings {
     /**
-     * Controls the popup animation. By default, the open and close animations are enabled.
+     * Controls the popup animation.
+     * By default, the open and close animations are enabled.
      */
     animate?: boolean;
     /**
-     * Controls the popup container. By default, the popup will be appended to the root component.
+     * Controls the popup container.
+     * By default, the popup is appended to the root component.
      */
     appendTo?: 'root' | 'component' | ViewContainerRef;
     /**
-     * Specifies a list of CSS classes that are used for styling the popup.
+     * Sets CSS classes for styling the popup.
      */
     popupClass?: string;
     /**
-     * Specifies the anchor pivot point.
+     * Sets the anchor pivot point.
      */
     anchorAlign?: Align;
     /**
-     * Specifies the pivot point of the popup.
+     * Sets the popup pivot point.
      */
     popupAlign?: Align;
     /**
-     * Sets the popup width. The default value is 150 pixels.
-     * A numeric value sets the width in pixels.
-     * A string value sets the width in arbitrary units&mdash;for example, `50%`.
+     * Sets the popup width.
+     * The default value is `150` pixels.
+     * Use a number for pixels or a string for arbitrary units like `"50%"`.
      */
     width?: number | string;
     /**
-     * Sets the popup height. By default, the popup is as high as its content.
-     * A numeric value sets the height in pixels.
-     * A string value sets the height in arbitrary units&mdash;for example, `50%`.
+     * Sets the popup height.
+     * By default, the popup height matches its content.
+     * Use a number for pixels or a string for arbitrary units like `"50%"`.
      */
     height?: number | string;
 }

package/toolbar.component.d.ts

@@ -25,6 +25,13 @@ import { DisplayMode } from './display-mode';
 import * as i0 from "@angular/core";
 /**
  * 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 declare class ToolBarComponent {
     localization: LocalizationService;
@@ -39,7 +46,8 @@ export declare class ToolBarComponent {
     private scrollService;
     get overflowClass(): string;
     /**
-     * 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: boolean | OverflowMode | ToolbarOverflowSettings);
@@ -70,34 +78,30 @@ export declare class ToolBarComponent {
      */
     get overflowEnabled(): boolean;
     /**
-     * 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: PopupSettings);
     get popupSettings(): PopupSettings;
     /**
-     * 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: ToolbarFillMode);
     get fillMode(): ToolbarFillMode;
     /**
-     * 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: number;
     /**
-     * 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: ToolbarSize);
     get size(): ToolbarSize;
@@ -107,21 +111,23 @@ export declare class ToolBarComponent {
     set tabIndex(tabIndex: number);
     get tabIndex(): number;
     /**
-     * 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: DisplayMode | boolean);
     /**
-     * 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: DisplayMode | boolean);
     /**
-     * Fires when the overflow popup of the ToolBar is opened.
+     * Emits when the overflow popup of the ToolBar opens.
      */
     open: EventEmitter<PreventableEvent>;
     /**
-     * Fires when the overflow popup of the ToolBar is closed.
+     * Emits when the overflow popup of the ToolBar closes.
      */
     close: EventEmitter<PreventableEvent>;
     allTools: QueryList<ToolBarToolComponent>;

package/toolbar.module.d.ts

@@ -13,10 +13,10 @@ import * as i7 from "./tools/toolbar-spacer.component";
 import * as i8 from "./tools/toolbar-splitbutton.component";
 import * as i9 from "./tools/toolbar-tool.component";
 /**
- * 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/tools/toolbar-button.component.d.ts

@@ -12,6 +12,16 @@ import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
  * 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 declare class ToolBarButtonComponent extends ToolBarToolComponent {
     element: ElementRef;
@@ -19,16 +29,21 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     host: ToolBarComponent;
     /**
      * Specifies the button text visibility.
+     * Accepts a `DisplayMode` value.
+     * @default 'always'
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
      * Specifies the button icon visibility.
+     * Accepts a `DisplayMode` value.
+     * @default 'always'
      */
     set showIcon(value: DisplayMode);
     get showIcon(): DisplayMode;
     /**
-     * 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: string);
     get text(): string;
@@ -37,30 +52,31 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     get size(): any;
     /**
-     * Specifies custom inline CSS styles of the Button.
+     * Specifies custom inline CSS styles for the Button.
      */
     style: {
         [key: string]: string | number;
     };
     /**
-     * Specifies custom CSS class names that will be added to the Button.
+     * Specifies custom CSS class names to be added to the Button.
      */
     className: string | Array<string> | {
         [key: string]: boolean;
     };
     /**
-     * Specifies the title of the Button.
+     * Specifies the `title` attribute of the Button.
      */
     title: string;
     /**
-     * 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: boolean;
     /**
-     * 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: boolean;
     /**
@@ -74,37 +90,20 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     set togglable(value: boolean);
     /**
      * Sets the selected state of the Button.
+     * Use with the `toggleable` property.
+     * @default false
      */
     selected: boolean;
     /**
-     * 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: 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
-     * ([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: ButtonThemeColor;
     /**
@@ -114,18 +113,18 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     set icon(icon: string);
     /**
-     * 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: 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.
+     * Accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon: SVGIcon);
     /**
-     * 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: string);
     /**
@@ -133,11 +132,11 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     click: EventEmitter<any>;
     /**
-     * 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: EventEmitter<any>;
     /**
-     * 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: EventEmitter<any>;

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

@@ -11,35 +11,44 @@ import { PreventableEvent } from '@progress/kendo-angular-buttons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     private localization;
     private 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: boolean;
     /**
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
+     * @default 'solid'
      */
     fillMode: 'solid' | 'flat';
     /**
-     * By default, the selection mode of the ButtonGroup is set to `multiple`.
+     * Sets the selection mode of the ButtonGroup.
+     * @default 'multiple'
      */
     selection: ButtonGroupSelection;
     /**
      * 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: string;
     /**