@progress/kendo-angular-toolbar 4.1.3 → 5.0.1-dev.202202251425

package/dist/es2015/tools/toolbar-buttongroup.component.js

@@ -21,20 +21,18 @@ let ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = class ToolBarB
          * By default, the selection mode of the ButtonGroup is set to `multiple`.
          */
         this.selection = 'multiple';
-        /**
-         * Changes the visual appearance by using alternative styling options.
-         * Setting the `look` property on individual buttons inside the ToolBarButtonGroupComponent is not supported.
-         *
-         * The available values are:
-         * * `bare`
-         * * `flat`
-         * * `outline`
-         */
-        this.look = 'default';
         this.focusedIndex = -1;
         this.getNextKey = getNextKey(this.localization.rtl);
         this.getPrevKey = getPrevKey(this.localization.rtl);
     }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
+        }
+    }
     get buttonElements() {
         return this.getButtonGroup()
             .buttons.filter(b => !b.isDisabled)
@@ -118,8 +116,9 @@ tslib_1.__decorate([
 ], ToolBarButtonGroupComponent.prototype, "width", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonGroupComponent.prototype, "look", void 0);
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ToolBarButtonGroupComponent.prototype, "look", null);
 tslib_1.__decorate([
     ViewChild('toolbarTemplate', { static: true }),
     tslib_1.__metadata("design:type", TemplateRef)
@@ -153,7 +152,6 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = tslib_1.__decorate
                 [tabIndex]="-1"
                 [selection]="selection"
                 [disabled]="disabled"
-                [look]="look"
                 [width]="width"
                 (navigate)="onNavigate($event)"
                 (focus)="onFocus()"
@@ -166,8 +164,9 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = tslib_1.__decorate
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
                     [togglable]="button.togglable"
-                    [primary]="button.primary"
                     [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.toolbarOptions.icon"
                     [iconClass]="button.toolbarOptions.iconClass"
                     [imageUrl]="button.toolbarOptions.imageUrl"
@@ -186,7 +185,6 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = tslib_1.__decorate
                 [tabIndex]="-1"
                 [selection]="selection"
                 [disabled]="disabled"
-                [look]="look"
                 [width]="width"
             >
                 <span
@@ -198,8 +196,9 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = tslib_1.__decorate
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
                     [togglable]="button.togglable"
-                    [primary]="button.primary"
                     [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.overflowOptions.icon"
                     [iconClass]="button.overflowOptions.iconClass"
                     [imageUrl]="button.overflowOptions.imageUrl"

package/dist/es2015/tools/toolbar-buttonlist.component.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, EventEmitter, QueryList } from '@angular/core';
-import { ButtonLook } from '@progress/kendo-angular-buttons';
+import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons';
 /**
  * @hidden
  */
@@ -11,7 +11,8 @@ export declare class ToolBarButtonListComponent {
     data: any[];
     textField: string;
     disabled: boolean;
-    look: ButtonLook;
+    fillMode: ButtonFillMode;
+    themeColor: ButtonThemeColor;
     itemClick: EventEmitter<any>;
     buttons: QueryList<ElementRef>;
     getText(dataItem: any): any;

package/dist/es2015/tools/toolbar-buttonlist.component.js

@@ -13,7 +13,8 @@ let ToolBarButtonListComponent = class ToolBarButtonListComponent {
      */
     constructor() {
         this.disabled = false;
-        this.look = 'default';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
         this.itemClick = new EventEmitter();
     }
     getText(dataItem) {
@@ -45,7 +46,11 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], ToolBarButtonListComponent.prototype, "look", void 0);
+], ToolBarButtonListComponent.prototype, "fillMode", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ToolBarButtonListComponent.prototype, "themeColor", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -70,7 +75,8 @@ ToolBarButtonListComponent = tslib_1.__decorate([
             [icon]="item.icon"
             [iconClass]="item.iconClass"
             [imageUrl]="item.imageUrl"
-            [look]="look"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             (click)="onClick(item, i)"
         >
             {{ getText(item) }}

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

@@ -5,7 +5,7 @@
 import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
-import { ButtonLook, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import { ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '../common/preventable-event';
@@ -46,6 +46,45 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      * - `popupClass:String`—Specifies a list of CSS classes that are used to style the popup.
      */
     popupSettings: PopupSettings;
+    /**
+     * @hidden
+     */
+    look: 'default' | 'flat' | 'outline';
+    /**
+     * @hidden
+     */
+    primary: boolean;
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    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` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `null` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor: ButtonThemeColor;
     /**
      * The CSS classes that will be rendered on the main button.
      * Supports the type of values that are supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).
@@ -60,15 +99,6 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      * Sets the disabled state of the DropDownButton.
      */
     disabled: boolean;
-    /**
-     * Changes the visual appearance by using alternative styling options.
-     * ([see example]({% slug controltypes_toolbar %}#toc-split-buttons)).
-     *
-     * The available values are:
-     * * `flat`
-     * * `outline`
-     */
-    look: ButtonLook;
     /**
      * Sets the data of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
@@ -76,10 +106,6 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      * > The data has to be provided in an array-like list.
      */
     data: any[];
-    /**
-     * Adds visual weight to the default button and makes it primary.
-     */
-    primary: boolean;
     /**
      * Fires each time the user clicks a DropDownButton item.
      * The event data contains the data item that is bound to the clicked list item.

package/dist/es2015/tools/toolbar-dropdownbutton.component.js

@@ -25,18 +25,36 @@ let ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = class To
          */
         this.showIcon = 'both';
         /**
-         * Changes the visual appearance by using alternative styling options.
-         * ([see example]({% slug controltypes_toolbar %}#toc-split-buttons)).
+         * The fillMode property specifies the background and border styles of the Button.
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         * * `null`
          */
-        this.look = 'default';
+        this.fillMode = 'solid';
         /**
-         * Adds visual weight to the default button and makes it primary.
+         * 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` —Applies coloring based on the `base` theme color. (default)
+         * * `primary` —Applies coloring based on the `primary` theme color.
+         * * `secondary`—Applies coloring based on the `secondary` theme color.
+         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+         * * `info`—Applies coloring based on the `info` theme color.
+         * * `success`— Applies coloring based on the `success` theme color.
+         * * `warning`— Applies coloring based on the `warning` theme color.
+         * * `error`— Applies coloring based on the `error` theme color.
+         * * `dark`— Applies coloring based on the `dark` theme color.
+         * * `light`— Applies coloring based on the `light` theme color.
+         * * `inverse`— Applies coloring based on the `inverse` theme color.
+         * * `null` —Removes the default CSS class (no class would be rendered).
          */
-        this.primary = false;
+        this.themeColor = 'base';
         /**
          * Fires each time the user clicks a DropDownButton item.
          * The event data contains the data item that is bound to the clicked list item.
@@ -111,6 +129,20 @@ let ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = class To
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
+    /**
+     * @hidden
+     */
+    set primary(primary) {
+        this.themeColor = primary ? 'primary' : 'base';
+    }
     /**
      * Sets the data of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
@@ -211,6 +243,24 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Object),
     tslib_1.__metadata("design:paramtypes", [Object])
 ], ToolBarDropDownButtonComponent.prototype, "popupSettings", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ToolBarDropDownButtonComponent.prototype, "look", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ToolBarDropDownButtonComponent.prototype, "primary", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -223,19 +273,11 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array),
     tslib_1.__metadata("design:paramtypes", [Array])
 ], ToolBarDropDownButtonComponent.prototype, "data", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarDropDownButtonComponent.prototype, "primary", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -291,8 +333,8 @@ ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = tslib_1.__de
                 [data]="data"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
-                [look]="look"
-                [primary]="primary"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
                 (itemClick)="itemClick.emit($event)"

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef, EventEmitter } from '@angular/core';
-import { ButtonLook } from '@progress/kendo-angular-buttons';
+import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
 import { DisplayMode } from '../display-mode';
@@ -43,23 +43,47 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      */
     disabled: boolean;
     /**
-     * Changes the visual appearance by using alternative styling options
-     * ([see example]({% slug controltypes_toolbar %}#toc-split-buttons)).
+     * Configures the popup of the SplitButton.
+     *
+     * The available options are:
+     * - `animate:Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass:String`—Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings: PopupSettings;
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
      *
      * The available values are:
-     * * `default`
+     * * `solid` (default)
      * * `flat`
      * * `outline`
+     * * `link`
+     * * `null`
      */
-    look: ButtonLook;
+    fillMode: ButtonFillMode;
     /**
-     * Configures the popup of the SplitButton.
+     * 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 available options are:
-     * - `animate:Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass:String`—Specifies a list of CSS classes that are used to style the popup.
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `null` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor: ButtonThemeColor;
+    /**
+     * @hidden
      */
-    popupSettings: PopupSettings;
+    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`]({{ site.data.urls.angular['ngclassapi'] }}).

package/dist/es2015/tools/toolbar-splitbutton.component.js

@@ -25,15 +25,35 @@ let ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = class ToolBarS
          */
         this.showIcon = 'both';
         /**
-         * Changes the visual appearance by using alternative styling options
-         * ([see example]({% slug controltypes_toolbar %}#toc-split-buttons)).
+         * The fillMode property specifies the background and border styles of the Button.
          *
          * The available values are:
-         * * `default`
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         * * `null`
          */
-        this.look = 'default';
+        this.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` —Applies coloring based on the `base` theme color. (default)
+         * * `primary` —Applies coloring based on the `primary` theme color.
+         * * `secondary`—Applies coloring based on the `secondary` theme color.
+         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+         * * `info`—Applies coloring based on the `info` theme color.
+         * * `success`— Applies coloring based on the `success` theme color.
+         * * `warning`— Applies coloring based on the `warning` theme color.
+         * * `error`— Applies coloring based on the `error` theme color.
+         * * `dark`— Applies coloring based on the `dark` theme color.
+         * * `light`— Applies coloring based on the `light` theme color.
+         * * `inverse`— Applies coloring based on the `inverse` theme color.
+         * * `null` —Removes the default CSS class (no class would be rendered).
+         */
+        this.themeColor = 'base';
         /**
          * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
          * be rendered for the button which opens the popup.
@@ -124,6 +144,14 @@ let ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = class ToolBarS
         }
         return this._popupSettings;
     }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
     /**
      * Sets the data of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
      *
@@ -227,15 +255,24 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object),
     tslib_1.__metadata("design:paramtypes", [Object])
 ], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ToolBarSplitButtonComponent.prototype, "look", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -315,7 +352,8 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = tslib_1.__decorate
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
-                [look]="look"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 (buttonClick)="buttonClick.emit($event)"
                 (open)="open.emit($event)"
                 (close)="close.emit($event)"
@@ -328,13 +366,14 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = tslib_1.__decorate
                 #overflowSplitButton
                 type="button"
                 tabindex="-1"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 kendoButton
                 class="k-overflow-button"
                 [disabled]="disabled"
                 [icon]="overflowOptions.icon"
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
-                [look]="look"
                 [ngClass]="buttonClass"
                 (click)="buttonClick.emit($event)"
                 (click)="onMainButtonClick($event)"
@@ -343,9 +382,10 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = tslib_1.__decorate
             </button>
             <kendo-toolbar-buttonlist
                 #overflowSplitButtonButtonList
-                [look]="look"
                 [data]="data"
                 [disabled]="disabled"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 [textField]="textField"
                 (itemClick)="itemClick.emit($event)"
                 (click)="onButtonListClick($event)"