@progress/kendo-angular-toolbar 4.1.2 → 5.0.0

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

@@ -23,22 +23,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 = util_1.getNextKey(_this.localization.rtl);
         _this.getPrevKey = util_1.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()
@@ -127,8 +129,9 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
     ], ToolBarButtonGroupComponent.prototype, "width", void 0);
     tslib_1.__decorate([
         core_1.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([
         core_1.ViewChild('toolbarTemplate', { static: true }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
@@ -155,7 +158,7 @@ var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [kendo_angular_l10n_1.LocalizationService, { provide: toolbar_tool_component_1.ToolBarToolComponent, useExisting: core_1.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    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], ToolBarButtonGroupComponent);

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

@@ -12,7 +12,8 @@ var core_1 = require("@angular/core");
 var ToolBarButtonListComponent = /** @class */ (function () {
     function ToolBarButtonListComponent() {
         this.disabled = false;
-        this.look = 'default';
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
         this.itemClick = new core_1.EventEmitter();
     }
     ToolBarButtonListComponent.prototype.getText = function (dataItem) {
@@ -43,7 +44,11 @@ var ToolBarButtonListComponent = /** @class */ (function () {
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], ToolBarButtonListComponent.prototype, "look", void 0);
+    ], ToolBarButtonListComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarButtonListComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -55,7 +60,7 @@ var ToolBarButtonListComponent = /** @class */ (function () {
     ToolBarButtonListComponent = tslib_1.__decorate([
         core_1.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;

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

@@ -27,18 +27,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` —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.
@@ -135,6 +153,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) {
@@ -244,6 +284,24 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", Object),
         tslib_1.__metadata("design:paramtypes", [Object])
     ], ToolBarDropDownButtonComponent.prototype, "popupSettings", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolBarDropDownButtonComponent.prototype, "look", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], ToolBarDropDownButtonComponent.prototype, "primary", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -256,19 +314,11 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "look", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Array),
         tslib_1.__metadata("design:paramtypes", [Array])
     ], ToolBarDropDownButtonComponent.prototype, "data", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ToolBarDropDownButtonComponent.prototype, "primary", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -311,7 +361,7 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: toolbar_tool_component_1.ToolBarToolComponent, useExisting: core_1.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    "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ToolBarDropDownButtonComponent);

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

@@ -27,15 +27,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.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.
@@ -148,6 +168,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) {
@@ -260,15 +292,24 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "look", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Object),
         tslib_1.__metadata("design:paramtypes", [Object])
     ], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolBarSplitButtonComponent.prototype, "look", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
@@ -332,7 +373,7 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: toolbar_tool_component_1.ToolBarToolComponent, useExisting: core_1.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    "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ToolBarSplitButtonComponent);