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

package/dist/fesm2015/index.js

@@ -20,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939564,
+    publishDate: 1645799035,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -1021,24 +1021,40 @@ let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonCompo
          */
         this.toggleable = false;
         /**
-         * Adds visual weight to the Button and makes it primary
-         * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+         * Sets the selected state of the Button.
          */
-        this.primary = false;
+        this.selected = false;
         /**
-         * Changes the visual appearance by using alternative styling options
-         * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+         * The fillMode property specifies the background and border styles of the Button.
          *
          * The available values are:
-         * * `bare`
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         * * `null`
          */
-        this.look = 'default';
+        this.fillMode = 'solid';
         /**
-         * Sets the selected state of the Button.
+         * 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.selected = false;
+        this.themeColor = 'base';
         /**
          * Fires each time the Button is clicked.
          */
@@ -1072,6 +1088,14 @@ let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonCompo
         this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
         this.overflowOptions.text = getValueForLocation(text, this.showText, true);
     }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
     /**
      * @hidden
      */
@@ -1172,6 +1196,11 @@ __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], ToolBarButtonComponent.prototype, "toggleable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ToolBarButtonComponent.prototype, "look", null);
 __decorate([
     Input(),
     __metadata("design:type", Boolean),
@@ -1180,15 +1209,15 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "primary", void 0);
+], ToolBarButtonComponent.prototype, "selected", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "look", void 0);
+], ToolBarButtonComponent.prototype, "fillMode", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "selected", void 0);
+    __metadata("design:type", String)
+], ToolBarButtonComponent.prototype, "themeColor", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String),
@@ -1250,12 +1279,12 @@ ToolBarButtonComponent = ToolBarButtonComponent_1 = __decorate([
                 [attr.title]="title"
                 [disabled]="disabled"
                 [toggleable]="toggleable"
-                [primary]="primary"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [imageUrl]="toolbarOptions.imageUrl"
-                [look]="look"
                 (click)="click.emit($event)"
                 (pointerdown)="pointerdown.emit($event)"
                 (selectedChange)="selectedChange.emit($event)"
@@ -1276,12 +1305,12 @@ ToolBarButtonComponent = ToolBarButtonComponent_1 = __decorate([
                 [attr.title]="title"
                 [disabled]="disabled"
                 [toggleable]="toggleable"
-                [primary]="primary"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
                 [selected]="selected"
                 [icon]="overflowOptions.icon"
                 [iconClass]="overflowOptions.iconClass"
                 [imageUrl]="overflowOptions.imageUrl"
-                [look]="look"
                 (click)="click.emit($event)"
                 (selectedChange)="selectedChange.emit($event)"
             >
@@ -1305,20 +1334,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)
@@ -1402,8 +1429,9 @@ __decorate([
 ], ToolBarButtonGroupComponent.prototype, "width", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], ToolBarButtonGroupComponent.prototype, "look", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ToolBarButtonGroupComponent.prototype, "look", null);
 __decorate([
     ViewChild('toolbarTemplate', { static: true }),
     __metadata("design:type", TemplateRef)
@@ -1437,7 +1465,6 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = __decorate([
                 [tabIndex]="-1"
                 [selection]="selection"
                 [disabled]="disabled"
-                [look]="look"
                 [width]="width"
                 (navigate)="onNavigate($event)"
                 (focus)="onFocus()"
@@ -1450,8 +1477,9 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_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"
@@ -1470,7 +1498,6 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = __decorate([
                 [tabIndex]="-1"
                 [selection]="selection"
                 [disabled]="disabled"
-                [look]="look"
                 [width]="width"
             >
                 <span
@@ -1482,8 +1509,9 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_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"
@@ -1508,7 +1536,8 @@ let ToolBarButtonListComponent = class ToolBarButtonListComponent {
      */
     constructor() {
         this.disabled = false;
-        this.look = 'default';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
         this.itemClick = new EventEmitter();
     }
     getText(dataItem) {
@@ -1540,7 +1569,11 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ToolBarButtonListComponent.prototype, "look", void 0);
+], ToolBarButtonListComponent.prototype, "fillMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ToolBarButtonListComponent.prototype, "themeColor", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -1565,7 +1598,8 @@ ToolBarButtonListComponent = __decorate([
             [icon]="item.icon"
             [iconClass]="item.iconClass"
             [imageUrl]="item.imageUrl"
-            [look]="look"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             (click)="onClick(item, i)"
         >
             {{ getText(item) }}
@@ -1591,18 +1625,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` &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).
          */
-        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.
@@ -1677,6 +1729,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)).
@@ -1777,6 +1843,24 @@ __decorate([
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
 ], ToolBarDropDownButtonComponent.prototype, "popupSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ToolBarDropDownButtonComponent.prototype, "look", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], ToolBarDropDownButtonComponent.prototype, "primary", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -1789,19 +1873,11 @@ __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "look", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Array),
     __metadata("design:paramtypes", [Array])
 ], ToolBarDropDownButtonComponent.prototype, "data", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarDropDownButtonComponent.prototype, "primary", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -1857,8 +1933,8 @@ ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = __decorate([
                 [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)"
@@ -1913,15 +1989,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` &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).
+         */
+        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.
@@ -2012,6 +2108,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)).
      *
@@ -2115,15 +2219,24 @@ __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "look", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
 ], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ToolBarSplitButtonComponent.prototype, "look", null);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -2203,7 +2316,8 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_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)"
@@ -2216,13 +2330,14 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_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)"
@@ -2231,9 +2346,10 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_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)"