@progress/kendo-angular-buttons 6.4.1 → 7.0.0-dev.202201061631

package/dist/es/dropdownbutton/dropdownbutton.component.js

@@ -72,17 +72,70 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
          */
         _this.imageUrl = '';
         /**
-         * Adds visual weight to the default button and makes it primary.
+         * The size property specifies the width and height of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
          */
-        _this.primary = false;
+        _this.size = 'medium';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The shape property specifies if the DropDownButton will be a square or rectangle.
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-shape)).
+         *
+         * The possible values are:
+         * * `'rectangle'` (default)
+         * * `'square'`
+         * * `null`
+         */
+        _this.shape = 'rectangle';
+        /**
+         * The rounded property specifies the border radius of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        _this.rounded = 'medium';
+        /**
+         * The fillMode property specifies the background and border styles of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         * * `null`
+         */
+        _this.fillMode = 'solid';
+        /**
+         * The DropDownButton 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.look = 'default';
+        _this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -221,20 +274,6 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DropDownButtonComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(DropDownButtonComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(DropDownButtonComponent.prototype, "widgetClasses", {
         get: function () {
             return true;
@@ -512,12 +551,24 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
     ], DropDownButtonComponent.prototype, "data", null);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], DropDownButtonComponent.prototype, "primary", void 0);
+        tslib_1.__metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "size", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "shape", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "rounded", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], DropDownButtonComponent.prototype, "fillMode", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
-    ], DropDownButtonComponent.prototype, "look", void 0);
+    ], DropDownButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Object)
@@ -547,20 +598,10 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", EventEmitter)
     ], DropDownButtonComponent.prototype, "onBlur", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DropDownButtonComponent.prototype, "focused", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], DropDownButtonComponent.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], DropDownButtonComponent.prototype, "isOutline", null);
     tslib_1.__decorate([
         HostBinding('class.k-dropdown-button'),
         tslib_1.__metadata("design:type", Boolean),
@@ -635,7 +676,7 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-dropdownbutton',
-            template: "\n        <button kendoButton #button\n            role=\"menu\"\n            type=\"button\"\n            [tabindex]=\"componentTabIndex\"\n            [class.k-state-active]=\"active\"\n            [disabled]=\"disabled\"\n            [icon]=\"icon\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (click)=\"openPopup()\"\n            (focus)=\"handleFocus()\"\n            (blur)=\"onButtonBlur()\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [look]=\"look\"\n            [primary]=\"primary\"\n            >\n            <ng-content></ng-content>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                #buttonList\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <button kendoButton #button\n            role=\"menu\"\n            type=\"button\"\n            [tabindex]=\"componentTabIndex\"\n            [class.k-active]=\"active\"\n            [disabled]=\"disabled\"\n            [icon]=\"icon\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            [size]=\"size\"\n            [shape]=\"shape\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            (click)=\"openPopup()\"\n            (focus)=\"handleFocus()\"\n            (blur)=\"onButtonBlur()\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n        >\n            <ng-content></ng-content>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                #buttonList\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n                [size]=\"size\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [FocusService,
             NavigationService,

package/dist/es/floatingactionbutton/dial-item.component.js

@@ -86,7 +86,7 @@ var DialItemComponent = /** @class */ (function () {
     ], DialItemComponent.prototype, "role", void 0);
     tslib_1.__decorate([
         HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], DialItemComponent.prototype, "disabledClass", null);

package/dist/es/floatingactionbutton/floatingactionbutton.component.js

@@ -36,12 +36,16 @@ var SIZE_CLASSES = {
     large: 'k-fab-lg'
 };
 var SHAPE_CLASSES = {
-    pill: 'k-fab-pill',
-    circle: 'k-fab-circle',
     rectangle: 'k-fab-rectangle',
-    square: 'k-fab-square',
-    rounded: 'k-fab-rounded'
+    square: 'k-fab-square'
 };
+var ROUNDED_CLASSES = {
+    small: 'k-rounded-sm',
+    medium: 'k-rounded-md',
+    large: 'k-rounded-lg',
+    full: 'k-rounded-full'
+};
+var FILLMODE_CLASS = 'k-fab-solid';
 var DEFAULT_DURATION = 180;
 var DEFAULT_ITEM_GAP = 90;
 var DEFAULT_OFFSET = '16px';
@@ -122,13 +126,15 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         this.id = "k-" + guid();
         this._themeColor = 'primary';
         this._size = 'medium';
-        this._shape = 'pill';
+        this._shape = 'rectangle';
         this._disabled = false;
         this._align = { horizontal: 'end', vertical: 'bottom' };
         this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+        this._rounded = 'full';
         this.subscriptions = new Subscription();
         this.rtl = false;
         this.animationEnd = new EventEmitter();
+        this.initialSetup = true;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
         this.subscriptions.add(this.localizationService.changes.subscribe(function (_a) {
@@ -161,18 +167,16 @@ var FloatingActionButtonComponent = /** @class */ (function () {
          * The theme color will be applied as background color of the component.
          *
          * The possible values are:
-         * * `primary` (Default)—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.
-         * * `inherit`— Applies inherited coloring value.
-         * * `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.
-         *
+         * * `'primary'` (Default)—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.
          */
         set: function (themeColor) {
             this.handleClasses(themeColor, 'themeColor');
@@ -190,10 +194,9 @@ var FloatingActionButtonComponent = /** @class */ (function () {
          * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
          *
          * The possible values are:
-         * * `small`
-         * * `medium` (Default)
-         * * `large`
-         *
+         * * `'small'`
+         * * `'medium'` (Default)
+         * * `'large'`
          */
         set: function (size) {
             this.handleClasses(size, 'size');
@@ -202,6 +205,27 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(FloatingActionButtonComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the FloatingActionButton.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'`
+         * * `'large'`
+         * * `'full'` (default)
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(FloatingActionButtonComponent.prototype, "shape", {
         get: function () {
             return this._shape;
@@ -211,10 +235,7 @@ var FloatingActionButtonComponent = /** @class */ (function () {
          * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
          *
          * The possible values are:
-         * * `pill` (Default)—Applies border radius equal to half of the height of the FloatingActionButton.
-         * * `circle`—Applies circle shape on the FloatingActionButton.
-         * * `rectangle`—Applies rectangular shape on the FloatingActionButton.
-         * * `rounded`—Applies rounded shape on the FloatingActionButton.
+         * * `rectangle` (Default)—Applies rectangular shape on the FloatingActionButton.
          * * `square`—Applies square shape on the FloatingActionButton.
          *
          */
@@ -288,8 +309,11 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         configurable: true
     });
     FloatingActionButtonComponent.prototype.ngAfterViewInit = function () {
-        this.applyClasses();
+        var _this = this;
+        ['shape', 'size', 'rounded', 'themeColor'].forEach(function (option) { return _this.handleClasses(_this[option], option); });
+        this.renderer.addClass(this.element.nativeElement, this.alignClass());
         this.offsetStyles();
+        this.initialSetup = false;
     };
     FloatingActionButtonComponent.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
@@ -453,20 +477,24 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         this.toggleDialWithEvents(false);
     };
     FloatingActionButtonComponent.prototype.handleClasses = function (inputValue, input) {
-        if (isPresent(this.button) && (this[input] !== inputValue)) {
+        if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             var button = this.button.nativeElement;
             var classesToRemove = {
-                themeColor: "k-fab-" + this.themeColor,
+                themeColor: FILLMODE_CLASS + "-" + this.themeColor,
                 size: SIZE_CLASSES[this.size],
-                shape: SHAPE_CLASSES[this.shape]
+                shape: SHAPE_CLASSES[this.shape],
+                rounded: ROUNDED_CLASSES[this.rounded]
             };
             var classesToAdd = {
-                themeColor: "k-fab-" + inputValue,
+                themeColor: inputValue ? FILLMODE_CLASS + "-" + inputValue : null,
                 size: SIZE_CLASSES[inputValue],
-                shape: SHAPE_CLASSES[inputValue]
+                shape: SHAPE_CLASSES[inputValue],
+                rounded: ROUNDED_CLASSES[inputValue]
             };
             this.renderer.removeClass(button, classesToRemove[input]);
-            this.renderer.addClass(button, classesToAdd[input]);
+            if (classesToAdd[input]) {
+                this.renderer.addClass(button, classesToAdd[input]);
+            }
         }
     };
     FloatingActionButtonComponent.prototype.onEnterPressed = function () {
@@ -523,14 +551,6 @@ var FloatingActionButtonComponent = /** @class */ (function () {
     FloatingActionButtonComponent.prototype.alignClass = function () {
         return "k-pos-" + this.align.vertical + "-" + this.align.horizontal;
     };
-    FloatingActionButtonComponent.prototype.applyClasses = function () {
-        var hostElement = this.element.nativeElement;
-        var button = this.button.nativeElement;
-        this.renderer.addClass(button, SHAPE_CLASSES[this.shape]);
-        this.renderer.addClass(button, "k-fab-" + this.themeColor);
-        this.renderer.addClass(button, SIZE_CLASSES[this.size]);
-        this.renderer.addClass(hostElement, this.alignClass());
-    };
     FloatingActionButtonComponent.prototype.toggleDialWithEvents = function (open) {
         if (open === this.isOpen) {
             return;
@@ -772,6 +792,11 @@ var FloatingActionButtonComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [String])
     ], FloatingActionButtonComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], FloatingActionButtonComponent.prototype, "rounded", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String),
@@ -861,7 +886,7 @@ var FloatingActionButtonComponent = /** @class */ (function () {
                     useValue: 'kendo.floatingactionbutton'
                 }
             ],
-            template: "\n        <button\n            #button\n            [attr.id]=\"id\"\n            [attr.role]=\"role\"\n            [tabIndex]=\"componentTabIndex\"\n            type=\"button\"\n            [class.k-fab]=\"true\"\n            [class.k-state-disabled]=\"disabled\"\n            [ngClass]=\"buttonClass\"\n            [disabled]=\"disabled\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-haspopup]=\"ariaHasPopup\"\n            (focus)=\"focusHandler()\"\n            (blur)=\"blurHandler()\"\n            [kendoEventsOutsideAngular]=\"{\n                keydown: keyDownHandler,\n                click: clickHandler\n            }\"\n            [scope]=\"this\"\n        >\n            <ng-template *ngIf=\"fabTemplate\"\n                [ngTemplateOutlet]=\"fabTemplate?.templateRef\"\n            >\n            </ng-template>\n\n            <ng-container *ngIf=\"!fabTemplate\">\n                <span *ngIf=\"icon || iconClass\" [ngClass]=\"iconClasses\"></span>\n                <span *ngIf=\"text\" class=\"k-fab-text\">{{ text }}</span>\n            </ng-container>\n        </button>\n\n        <ng-template #popupTemplate>\n            <ul\n                kendoDialList\n                [ngClass]=\"dialClass\"\n                [dialItems]=\"dialItems\"\n                [dialItemTemplate]='dialItemTemplate?.templateRef'\n                [align]=\"align\"\n                [attr.aria-labelledby]=\"id\"\n                (click)=\"onItemClick($event)\"\n            >\n            </ul>\n        </ng-template>\n    "
+            template: "\n        <button\n            #button\n            [attr.id]=\"id\"\n            [attr.role]=\"role\"\n            [tabIndex]=\"componentTabIndex\"\n            type=\"button\"\n            class=\"k-fab k-fab-solid\"\n            [class.k-disabled]=\"disabled\"\n            [ngClass]=\"buttonClass\"\n            [disabled]=\"disabled\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"ariaExpanded\"\n            [attr.aria-haspopup]=\"ariaHasPopup\"\n            (focus)=\"focusHandler()\"\n            (blur)=\"blurHandler()\"\n            [kendoEventsOutsideAngular]=\"{\n                keydown: keyDownHandler,\n                click: clickHandler\n            }\"\n            [scope]=\"this\"\n        >\n            <ng-template *ngIf=\"fabTemplate\"\n                [ngTemplateOutlet]=\"fabTemplate?.templateRef\"\n            >\n            </ng-template>\n\n            <ng-container *ngIf=\"!fabTemplate\">\n                <span *ngIf=\"icon || iconClass\" [ngClass]=\"iconClasses\"></span>\n                <span *ngIf=\"text\" class=\"k-fab-text\">{{ text }}</span>\n            </ng-container>\n        </button>\n\n        <ng-template #popupTemplate>\n            <ul\n                kendoDialList\n                [ngClass]=\"dialClass\"\n                [dialItems]=\"dialItems\"\n                [dialItemTemplate]='dialItemTemplate?.templateRef'\n                [align]=\"align\"\n                [attr.aria-labelledby]=\"id\"\n                (click)=\"onItemClick($event)\"\n            >\n            </ul>\n        </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [Renderer2,
             ElementRef,

package/dist/es/focusable/focusable.directive.js

@@ -18,10 +18,10 @@ var FocusableDirective = /** @class */ (function () {
     }
     FocusableDirective.prototype.ngOnInit = function () {
         if (this.index === this.focusService.focused) {
-            this.renderer.addClass(this.element, 'k-state-focused');
+            this.renderer.addClass(this.element, 'k-focus');
         }
         else {
-            this.renderer.removeClass(this.element, 'k-state-focused');
+            this.renderer.removeClass(this.element, 'k-focus');
         }
     };
     /**
@@ -37,11 +37,11 @@ var FocusableDirective = /** @class */ (function () {
         }
         this.focusSubscription = this.focusService.onFocus.subscribe(function (index) {
             if (_this.index === index) {
-                _this.renderer.addClass(_this.element, 'k-state-focused');
+                _this.renderer.addClass(_this.element, 'k-focus');
                 _this.element.focus();
             }
             else {
-                _this.renderer.removeClass(_this.element, 'k-state-focused');
+                _this.renderer.removeClass(_this.element, 'k-focus');
             }
         });
     };

package/dist/es/listbutton/list-button.js

@@ -37,7 +37,7 @@ var ListButton = /** @class */ (function () {
     }
     Object.defineProperty(ListButton.prototype, "popupClasses", {
         get: function () {
-            var popupClasses = ['k-list-container', 'k-reset', 'k-group'];
+            var popupClasses = ['k-menu-popup'];
             if (this._popupSettings.popupClass) {
                 popupClasses.push(this._popupSettings.popupClass);
             }

package/dist/es/listbutton/list.component.js

@@ -7,6 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { ButtonItemTemplateDirective } from './button-item-template.directive';
+import { SIZES } from '../util';
 /**
  * @hidden
  */
@@ -14,8 +15,21 @@ var ListComponent = /** @class */ (function () {
     function ListComponent() {
         this.onItemClick = new EventEmitter();
         this.onItemBlur = new EventEmitter();
+        this.sizeClass = '';
         validatePackage(packageMetadata);
     }
+    Object.defineProperty(ListComponent.prototype, "size", {
+        set: function (size) {
+            if (size) {
+                this.sizeClass = "k-menu-group-" + SIZES[size];
+            }
+            else {
+                this.sizeClass = '';
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     ListComponent.prototype.getText = function (dataItem) {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
@@ -54,10 +68,15 @@ var ListComponent = /** @class */ (function () {
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
     ], ListComponent.prototype, "onItemBlur", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ListComponent.prototype, "size", null);
     ListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-button-list',
-            template: "\n        <ul class=\"k-list k-reset\" unselectable=\"on\" role=\"menu\">\n            <li role=\"menuitem\" unselectable=\"on\" tabindex=\"-1\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                [index]=\"index\"\n                [ngClass]=\"{'k-item': true, 'k-state-disabled': dataItem.disabled}\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template *ngIf=\"itemTemplate?.templateRef\"\n                    [templateContext]=\"{\n                        templateRef: itemTemplate?.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span\n                        *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                        [ngClass]=\"getIconClasses(dataItem)\"\n                    ></span>\n                    <img\n                        *ngIf=\"dataItem.imageUrl\"\n                        class=\"k-image\"\n                        [src]=\"dataItem.imageUrl\"\n                        alt=\"\"\n                    >\n                    {{ getText(dataItem) }}\n                </ng-template>\n            </li>\n        </ul>\n      "
+            template: "\n        <ul class=\"k-group k-menu-group k-reset\" [ngClass]=\"sizeClass\" unselectable=\"on\" role=\"menu\">\n            <li role=\"menuitem\" unselectable=\"on\"\n                kendoButtonFocusable\n                *ngFor=\"let dataItem of data; let index = index;\"\n                class=\"k-item k-menu-item\"\n                (click)=\"onClick(index)\"\n                (blur)=\"onBlur()\"\n                [attr.aria-disabled]=\"dataItem.disabled ? true : false\">\n                <ng-template [ngIf]=\"itemTemplate?.templateRef\">\n                    <span kendoButtonFocusable [index]=\"index\" class=\"k-link k-menu-link\" [class.k-disabled]=\"dataItem.disabled\" tabindex=\"-1\">\n                        <ng-template [templateContext]=\"{templateRef: itemTemplate?.templateRef, $implicit: dataItem}\"></ng-template>\n                    </span>\n                </ng-template>\n                <ng-template [ngIf]=\"!itemTemplate?.templateRef\">\n                    <span kendoButtonFocusable [index]=\"index\" class=\"k-link k-menu-link\" [class.k-disabled]=\"dataItem.disabled\" tabindex=\"-1\">\n                        <span\n                            *ngIf=\"dataItem.icon || dataItem.iconClass\"\n                            [ngClass]=\"getIconClasses(dataItem)\"\n                        ></span>\n                        <img\n                            *ngIf=\"dataItem.imageUrl\"\n                            class=\"k-image\"\n                            [src]=\"dataItem.imageUrl\"\n                            alt=\"\"\n                        >\n                        <span *ngIf=\"getText(dataItem)\" class=\"k-menu-link-text\">\n                        {{ getText(dataItem) }}\n                        </span>\n                    </span>\n                </ng-template>\n            </li>\n        </ul>\n      "
         }),
         tslib_1.__metadata("design:paramtypes", [])
     ], ListComponent);

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635937762,
+    publishDate: 1641486598,
     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/es/splitbutton/splitbutton.component.js

@@ -97,13 +97,58 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          */
         _this.imageUrl = '';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The size property specifies the width and height of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        _this.size = 'medium';
+        /**
+         * The rounded property specifies the border radius of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        _this.rounded = 'medium';
+        /**
+         * The fillMode property specifies the background and border styles of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
+         */
+        _this.fillMode = 'solid';
+        /**
+         * The SplitButton 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_splitbuttoncomponent %}#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.
          */
-        _this.look = 'default';
+        _this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -305,20 +350,6 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitButtonComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitButtonComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SplitButtonComponent.prototype, "widgetClasses", {
         get: function () {
             return true;
@@ -606,7 +637,19 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "look", void 0);
+    ], SplitButtonComponent.prototype, "size", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "rounded", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "themeColor", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean),
@@ -687,20 +730,10 @@ var SplitButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", ViewContainerRef)
     ], SplitButtonComponent.prototype, "containerRef", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [Boolean])
     ], SplitButtonComponent.prototype, "isFocused", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-flat'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isFlat", null);
-    tslib_1.__decorate([
-        HostBinding('class.k-outline'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], SplitButtonComponent.prototype, "isOutline", null);
     tslib_1.__decorate([
         HostBinding('class.k-split-button'),
         HostBinding('class.k-button-group'),
@@ -744,7 +777,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-splitbutton',
-            template: "\n        <ng-container kendoSplitButtonLocalizedMessages\n            i18n-splitButtonLabel=\"kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label\"\n            splitButtonLabel=\"{{ '{buttonText} splitbutton' }}\">\n        </ng-container>\n        <button\n            kendoButton\n            #button\n            [type]=\"type\"\n            [look]=\"look\"\n            [tabindex]=\"componentTabIndex\"\n            [disabled]=\"disabled\"\n            [icon]=\"icon\"\n            [class.k-state-active]=\"active\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (focus)=\"onButtonFocus()\"\n            (click)=\"onButtonClick()\"\n            (blur)=\"onButtonBlur()\"\n            (mousedown)=\"toggleButtonActiveState(true)\"\n            (mouseup)=\"toggleButtonActiveState(false)\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            {{ text }}<ng-content></ng-content>\n        </button>\n        <button\n            kendoButton\n            #arrowButton\n            type=\"button\"\n            [class.k-state-active]=\"activeArrow\"\n            [disabled]=\"disabled\"\n            [icon]=\"arrowButtonIcon\"\n            [look]=\"look\"\n            [tabindex]=\"-1\"\n            [ngClass]=\"arrowButtonClass\"\n            (click)=\"onArrowButtonClick()\"\n            (mousedown)=\"toggleArrowButtonActiveState(true)\"\n            (mouseup)=\"toggleArrowButtonActiveState(false)\"\n        ></button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoSplitButtonLocalizedMessages\n            i18n-splitButtonLabel=\"kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label\"\n            splitButtonLabel=\"{{ '{buttonText} splitbutton' }}\">\n        </ng-container>\n        <button\n            kendoButton\n            #button\n            [type]=\"type\"\n            [tabindex]=\"componentTabIndex\"\n            [disabled]=\"disabled\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"themeColor\"\n            [icon]=\"icon\"\n            [class.k-active]=\"active\"\n            [class.k-icon-button]=\"!text && icon\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (focus)=\"onButtonFocus()\"\n            (click)=\"onButtonClick()\"\n            (blur)=\"onButtonBlur()\"\n            (mousedown)=\"toggleButtonActiveState(true)\"\n            (mouseup)=\"toggleButtonActiveState(false)\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            <span *ngIf=\"text\" class=\"k-button-text\">\n                {{ text }}\n            </span><ng-content></ng-content>\n        </button>\n        <button\n            kendoButton\n            #arrowButton\n            type=\"button\"\n            [class.k-active]=\"activeArrow\"\n            [disabled]=\"disabled\"\n            [icon]=\"arrowButtonIcon\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            [tabindex]=\"-1\"\n            [ngClass]=\"arrowButtonClass\"\n            (click)=\"onArrowButtonClick()\"\n            (mousedown)=\"toggleArrowButtonActiveState(true)\"\n            (mouseup)=\"toggleArrowButtonActiveState(false)\"\n        ></button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n                [size]=\"size\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [FocusService,
             NavigationService,