@progress/kendo-angular-toolbar 4.1.3 → 5.0.0-dev.202201190923

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

@@ -25,18 +25,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.
@@ -133,6 +151,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) {
@@ -242,6 +282,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([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolBarDropDownButtonComponent.prototype, "look", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], ToolBarDropDownButtonComponent.prototype, "primary", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -254,19 +312,11 @@ var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "look", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Array),
         tslib_1.__metadata("design:paramtypes", [Array])
     ], ToolBarDropDownButtonComponent.prototype, "data", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ToolBarDropDownButtonComponent.prototype, "primary", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -309,7 +359,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ToolBarDropDownButtonComponent);

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

@@ -25,15 +25,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.
@@ -146,6 +166,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) {
@@ -258,15 +290,24 @@ var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "look", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Object),
         tslib_1.__metadata("design:paramtypes", [Object])
     ], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ToolBarSplitButtonComponent.prototype, "look", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -330,7 +371,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ToolBarSplitButtonComponent);