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

package/dist/fesm5/index.js

@@ -20,7 +20,7 @@ var 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'
 };
@@ -1080,24 +1080,40 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
          */
         _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.
          */
@@ -1137,6 +1153,18 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarButtonComponent.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (look) {
+            if (look) {
+                this.fillMode = look === 'default' ? 'solid' : look;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarButtonComponent.prototype, "togglable", {
         /**
          * @hidden
@@ -1253,6 +1281,11 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
         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),
@@ -1261,15 +1294,15 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
     __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),
@@ -1319,7 +1352,7 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarButtonComponent_1; }) }],
             selector: 'kendo-toolbar-button',
-            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [])
     ], ToolBarButtonComponent);
@@ -1338,22 +1371,24 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
          * 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);
         return _this;
     }
     ToolBarButtonGroupComponent_1 = ToolBarButtonGroupComponent;
+    Object.defineProperty(ToolBarButtonGroupComponent.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (look) {
+            if (look) {
+                this.buttonComponents.forEach(function (b) { return b.fillMode = look === 'default' ? 'solid' : look; });
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarButtonGroupComponent.prototype, "buttonElements", {
         get: function () {
             return this.getButtonGroup()
@@ -1442,8 +1477,9 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
     ], 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)
@@ -1470,7 +1506,7 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarButtonGroupComponent_1; }) }],
             selector: 'kendo-toolbar-buttongroup',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-buttongroup\n                #toolbarButtonGroup\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [look]=\"look\"\n                [width]=\"width\"\n                (navigate)=\"onNavigate($event)\"\n                (focus)=\"onFocus()\"\n            >\n                <span\n                    kendoButton\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [primary]=\"button.primary\"\n                    [selected]=\"button.selected\"\n                    [icon]=\"button.toolbarOptions.icon\"\n                    [iconClass]=\"button.toolbarOptions.iconClass\"\n                    [imageUrl]=\"button.toolbarOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (pointerdown)=\"button.pointerdown.emit($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.toolbarOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <kendo-buttongroup\n                #overflowButtonGroup\n                class=\"k-overflow-button\"\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [look]=\"look\"\n                [width]=\"width\"\n            >\n                <span\n                    kendoButton\n                    class=\"k-overflow-button\"\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [primary]=\"button.primary\"\n                    [selected]=\"button.selected\"\n                    [icon]=\"button.overflowOptions.icon\"\n                    [iconClass]=\"button.overflowOptions.iconClass\"\n                    [imageUrl]=\"button.overflowOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.overflowOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-buttongroup\n                #toolbarButtonGroup\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n                (navigate)=\"onNavigate($event)\"\n                (focus)=\"onFocus()\"\n            >\n                <span\n                    kendoButton\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.toolbarOptions.icon\"\n                    [iconClass]=\"button.toolbarOptions.iconClass\"\n                    [imageUrl]=\"button.toolbarOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (pointerdown)=\"button.pointerdown.emit($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.toolbarOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <kendo-buttongroup\n                #overflowButtonGroup\n                class=\"k-overflow-button\"\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n            >\n                <span\n                    kendoButton\n                    class=\"k-overflow-button\"\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.overflowOptions.icon\"\n                    [iconClass]=\"button.overflowOptions.iconClass\"\n                    [imageUrl]=\"button.overflowOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.overflowOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], ToolBarButtonGroupComponent);
@@ -1483,7 +1519,8 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
 var ToolBarButtonListComponent = /** @class */ (function () {
     function ToolBarButtonListComponent() {
         this.disabled = false;
-        this.look = 'default';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
         this.itemClick = new EventEmitter();
     }
     ToolBarButtonListComponent.prototype.getText = function (dataItem) {
@@ -1514,7 +1551,11 @@ var ToolBarButtonListComponent = /** @class */ (function () {
     __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)
@@ -1526,7 +1567,7 @@ var ToolBarButtonListComponent = /** @class */ (function () {
     ToolBarButtonListComponent = __decorate([
         Component({
             selector: 'kendo-toolbar-buttonlist',
-            template: "\n        <button\n            #button\n            type=\"button\"\n            tabindex=\"-1\"\n            kendoButton\n            style=\"padding-left: 16px\"\n            class=\"k-overflow-button\"\n            *ngFor=\"let item of data; let i = index\"\n            [disabled]=\"disabled || item.disabled\"\n            [icon]=\"item.icon\"\n            [iconClass]=\"item.iconClass\"\n            [imageUrl]=\"item.imageUrl\"\n            [look]=\"look\"\n            (click)=\"onClick(item, i)\"\n        >\n            {{ getText(item) }}\n        </button>\n    "
+            template: "\n        <button\n            #button\n            type=\"button\"\n            tabindex=\"-1\"\n            kendoButton\n            style=\"padding-left: 16px\"\n            class=\"k-overflow-button\"\n            *ngFor=\"let item of data; let i = index\"\n            [disabled]=\"disabled || item.disabled\"\n            [icon]=\"item.icon\"\n            [iconClass]=\"item.iconClass\"\n            [imageUrl]=\"item.imageUrl\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            (click)=\"onClick(item, i)\"\n        >\n            {{ getText(item) }}\n        </button>\n    "
         })
     ], ToolBarButtonListComponent);
     return ToolBarButtonListComponent;
@@ -1549,18 +1590,36 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
          */
         _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.
@@ -1657,6 +1716,28 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (look) {
+            if (look) {
+                this.fillMode = look === 'default' ? 'solid' : look;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "primary", {
+        /**
+         * @hidden
+         */
+        set: function (primary) {
+            this.themeColor = primary ? 'primary' : 'base';
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "data", {
         get: function () {
             if (!this._data) {
@@ -1766,6 +1847,24 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         __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)
@@ -1778,19 +1877,11 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         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)
@@ -1833,7 +1924,7 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarDropDownButtonComponent_1; }) }],
             selector: 'kendo-toolbar-dropdownbutton',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-dropdownbutton\n                #toolbarDropDownButton\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [look]=\"look\"\n                [primary]=\"primary\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n                {{ toolbarOptions.text }}\n            </kendo-dropdownbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"true\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"itemClick.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowDropDownButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-dropdownbutton\n                #toolbarDropDownButton\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n                {{ toolbarOptions.text }}\n            </kendo-dropdownbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"true\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"itemClick.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowDropDownButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [])
     ], ToolBarDropDownButtonComponent);
@@ -1857,15 +1948,35 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
          */
         _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.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.look = 'default';
+        _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.
@@ -1978,6 +2089,18 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (look) {
+            if (look) {
+                this.fillMode = look === 'default' ? 'solid' : look;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarSplitButtonComponent.prototype, "data", {
         get: function () {
             if (!this._data) {
@@ -2090,15 +2213,24 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
         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)
@@ -2162,7 +2294,7 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarSplitButtonComponent_1; }) }],
             selector: 'kendo-toolbar-splitbutton',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-splitbutton\n                #toolbarSplitButton\n                [data]=\"data\"\n                [text]=\"toolbarOptions.text\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [arrowButtonClass]=\"arrowButtonClass\"\n                [arrowButtonIcon]=\"arrowButtonIcon\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [look]=\"look\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n            </kendo-splitbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowSplitButton\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"disabled\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [look]=\"look\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"buttonClick.emit($event)\"\n                (click)=\"onMainButtonClick($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowSplitButtonButtonList\n                [look]=\"look\"\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-splitbutton\n                #toolbarSplitButton\n                [data]=\"data\"\n                [text]=\"toolbarOptions.text\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [arrowButtonClass]=\"arrowButtonClass\"\n                [arrowButtonIcon]=\"arrowButtonIcon\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n            </kendo-splitbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowSplitButton\n                type=\"button\"\n                tabindex=\"-1\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"disabled\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"buttonClick.emit($event)\"\n                (click)=\"onMainButtonClick($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowSplitButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [])
     ], ToolBarSplitButtonComponent);

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.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'
 };

package/dist/npm/tools/toolbar-button.component.js

@@ -31,24 +31,40 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
          */
         _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.
          */
@@ -88,6 +104,18 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ToolBarButtonComponent.prototype, "look", {
+        /**
+         * @hidden
+         */
+        set: function (look) {
+            if (look) {
+                this.fillMode = look === 'default' ? 'solid' : look;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ToolBarButtonComponent.prototype, "togglable", {
         /**
          * @hidden
@@ -204,6 +232,11 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ToolBarButtonComponent.prototype, "toggleable", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolBarButtonComponent.prototype, "look", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean),
@@ -212,15 +245,15 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
-    ], ToolBarButtonComponent.prototype, "primary", void 0);
+    ], ToolBarButtonComponent.prototype, "selected", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "look", void 0);
+    ], ToolBarButtonComponent.prototype, "fillMode", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ToolBarButtonComponent.prototype, "selected", void 0);
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String),
@@ -270,7 +303,7 @@ var ToolBarButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: toolbar_tool_component_1.ToolBarToolComponent, useExisting: core_1.forwardRef(function () { return ToolBarButtonComponent_1; }) }],
             selector: 'kendo-toolbar-button',
-            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ToolBarButtonComponent);